/* =============================================================
   Socle · Panneau latéral (.sc-sidepanel)
   Tiroir modal bâti sur l'élément natif <dialog> : ouverture,
   Échap, piégeage et retour du focus viennent du navigateur.
   Anatomie : __header (__heading > __title) + __body + __footer.
   Variante : --start (ancré au bord opposé, entrée par la gauche).
   JS : js/components/sidepanel.js
        (initSidepanels, openSidepanel, closeSidepanel).
   ============================================================= */

.sc-sidepanel {
  /* Dimension structurelle, sans rôle sémantique. */
  --_sidepanel-width: 26rem;
  /* Ancrage et sens du glissement : la variante réassigne ceci. */
  --_sidepanel-margin-start: auto;
  --_sidepanel-margin-end: 0;
  --_sidepanel-border-start: var(--color-border);
  --_sidepanel-border-end: transparent;
  --_sidepanel-from: 100%;

  width: min(calc(100vw - var(--padding-3xl)), var(--_sidepanel-width));
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  margin-inline-start: var(--_sidepanel-margin-start);
  margin-inline-end: var(--_sidepanel-margin-end);
  padding: 0;
  overflow: hidden;
  border: none;
  border-inline-start: var(--border-hairline) solid var(--_sidepanel-border-start);
  border-inline-end: var(--border-hairline) solid var(--_sidepanel-border-end);
  border-radius: 0;
  background: var(--color-bg-surface);
  color: var(--color-text);
  box-shadow: var(--elevation-overlay);
}

/* Ouvert : colonne header / body / footer, et glissement depuis
   le bord d'ancrage. Le display reste ici pour que le panneau
   fermé garde le display:none du navigateur. */
.sc-sidepanel[open] {
  display: flex;
  flex-direction: column;
  animation: sc-sidepanel-in var(--motion-slow);
}

.sc-sidepanel::backdrop {
  background: var(--color-bg-overlay);
}

.sc-sidepanel[open]::backdrop {
  animation: sc-sidepanel-backdrop-in var(--motion-slow);
}

/* ---- En-tête ---- */

.sc-sidepanel__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap-m);
  padding: var(--padding-xl);
  padding-block-end: var(--padding-m);
}

/* Titre seul ou titre plus ligne de contexte. */
.sc-sidepanel__heading {
  display: flex;
  flex-direction: column;
  gap: var(--gap-2xs);
  min-width: 0;
}

.sc-sidepanel__title {
  font-family: var(--font-heading);
  font-size: var(--text-h3-size);
  font-weight: var(--text-h3-weight);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-normal);
}

/* La croix de fermeture est un bouton icône fantôme
   (.sc-btn .sc-btn--ghost .sc-btn--icon .sc-btn--s) : ses états
   vivent dans button.css. Cette classe ne règle que son recalage
   optique dans l'angle, en micro-décalages --space-*. */
.sc-sidepanel__close {
  flex-shrink: 0;
  margin-block-start: calc(var(--space-2) * -1);
  margin-inline-end: calc(var(--space-8) * -1);
}

/* ---- Corps ----
   Seule zone qui défile : le titre et les actions restent en vue. */

.sc-sidepanel__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-inline: var(--padding-xl);
  padding-block-end: var(--padding-l);
  color: var(--color-text-secondary);
  font-size: var(--text-body-size);
  line-height: var(--leading-relaxed);
}

/* Respiration entre les blocs du corps. */
.sc-sidepanel__body > * + * {
  margin-block-start: var(--gap-m);
}

/* ---- Pied ---- */

.sc-sidepanel__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--gap-s);
  padding: var(--padding-xl);
  border-block-start: var(--border-hairline) solid var(--color-border);
}

/* ---- Variante ancrée au bord de départ ---- */

.sc-sidepanel--start {
  --_sidepanel-margin-start: 0;
  --_sidepanel-margin-end: auto;
  --_sidepanel-border-start: transparent;
  --_sidepanel-border-end: var(--color-border);
  --_sidepanel-from: -100%;
}

/* ---- Animations ---- */

@keyframes sc-sidepanel-in {
  from {
    transform: translateX(var(--_sidepanel-from));
  }
  to {
    transform: translateX(0);
  }
}

@keyframes sc-sidepanel-backdrop-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}