/* =============================================================
   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-travel);
}

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

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

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

/* L'en-tête porte un filet, et il ne défile pas. Sans lui, le titre
   flotte au-dessus d'un contenu qui passe dessous, et rien ne dit où
   commence ce qui bouge. */
.sc-sidepanel__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap-m);
  padding: var(--padding-xl) var(--padding-2xl);
  border-block-end: var(--border-hairline) solid var(--color-border);
}

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

/* Le registre d'un titre de dialogue, pas celui d'un titre de section.
   Un tiroir est un calque modal comme lui, et son titre nomme le
   panneau entier. La densité d'outil n'aide pas ici : c'est le seul
   endroit du panneau où il faut annoncer, pas ranger. */
.sc-sidepanel__title {
  font-family: var(--font-heading);
  font-size: var(--text-h2-size);
  font-weight: var(--text-h2-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: var(--padding-l) var(--padding-2xl);
  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-m) var(--padding-2xl);
  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;
  }
}

/* ---- Sous 640px, ce n'est plus un tiroir ----
   Un tiroir latéral sur un téléphone est une feuille pleine largeur qui
   arrive de côté, dont le mouvement ne désigne rien, et qui démarre le
   plus loin possible du pouce. Il devient donc une feuille qui monte du
   bas.
   Le plancher compte autant que le plafond, et c'est la partie qu'on
   oublie : dimensionnée sur son contenu, une feuille vide monte en
   bandeau au bas de l'écran, ce qui se lit comme une notification qui a
   raté sa disparition, pas comme un panneau qu'on a ouvert. Un tiroir
   occupe la même place qu'il soit plein ou vide, seul son contenu
   change. Et le plafond laisse une bande de page visible au-dessus :
   c'est elle qui dit que le panneau est posé sur quelque chose, le
   travail que le voile fait sur un grand écran.
   Le seuil est écrit en clair : @media n'accepte pas var(). */

@media (max-width: 640px) {
  .sc-sidepanel,
  .sc-sidepanel--start {
    /* Dimensions structurelles de la feuille. */
    --_sheet-min: 75dvh;
    --_sheet-max: 85dvh;

    width: 100%;
    max-width: none;
    min-height: var(--_sheet-min);
    max-height: var(--_sheet-max);
    margin-inline: 0;
    margin-block-start: auto;
    margin-block-end: 0;
    border-inline: 0;
    border-block-start: var(--border-hairline) solid var(--color-border);
    border-start-start-radius: var(--radius-overlay);
    border-start-end-radius: var(--radius-overlay);
    border-end-start-radius: 0;
    border-end-end-radius: 0;
    /* La barre d'accueil d'un téléphone mange le bas de l'écran. */
    padding-block-end: env(safe-area-inset-bottom);
  }

  .sc-sidepanel[open] {
    animation-name: sc-sheet-in;
  }
}

@keyframes sc-sheet-in {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}