/* =============================================================
   Socle · Popover (.sc-popover)
   Bulle ancrée à un déclencheur [data-popover-toggle] qui porte du
   contenu et non un texte : formulaire court, explication riche,
   actions. Câblée par js/components/popover.js (initPopovers).
   Anatomie : .sc-popover > déclencheur + __panel > __header
   (__title + __close), __body, __footer.
   Le panneau est masqué par [hidden], comme la liste du menu.
   Placements : --bottom (défaut), --top, --start, --end, et
   --align-end qui colle le panneau au bord de fin de l'axe
   transversal du placement retenu.
   ============================================================= */

.sc-popover {
  /* Tokens de composant : les placements ne font que réassigner ceci. */
  --_popover-width: 20rem;             /* dimension structurelle */
  --_popover-padding: var(--padding-m);
  --_popover-gap: var(--gap-2xs);      /* distance panneau / déclencheur */
  --_popover-shift: var(--space-4);    /* micro-décalage d'apparition */

  /* L'axe transversal passe par une paire à part : le placement dit
     s'il est en ligne ou en bloc, --align-end dit de quel bord il
     part. Sans cela il faudrait écrire un alignement par placement,
     et les deux modificateurs se marcheraient dessus. */
  --_popover-cross-start: 0;
  --_popover-cross-end: auto;

  /* Ancrage du placement --bottom (défaut). */
  --_popover-block-start: calc(100% + var(--_popover-gap));
  --_popover-block-end: auto;
  --_popover-inline-start: var(--_popover-cross-start);
  --_popover-inline-end: var(--_popover-cross-end);
  --_popover-from: 0 calc(-1 * var(--_popover-shift));

  position: relative;
  display: inline-block;
}

.sc-popover__panel {
  position: absolute;
  inset-block-start: var(--_popover-block-start);
  inset-block-end: var(--_popover-block-end);
  inset-inline-start: var(--_popover-inline-start);
  inset-inline-end: var(--_popover-inline-end);
  z-index: var(--z-dropdown);
  width: var(--_popover-width);
  /* Sur un écran étroit, le panneau se borne avant de sortir de la
     page. C'est la même borne que le dialogue s'impose. */
  max-width: calc(100vw - var(--padding-2xl) * 2);
  background: var(--color-bg-surface);
  border: var(--border-hairline) solid var(--color-border);
  border-radius: var(--radius-surface);
  box-shadow: var(--elevation-floating);
  color: var(--color-text);
  /* Le panneau reçoit la souris et le clavier, à la différence de la
     bulle d'aide qui ne fait que décrire : rien n'y coupe le pointeur. */

  /* Le store, comme le menu et le sélecteur, et c'est une réponse de
     Vibecoded : « le même store, 220 ms à l'ouverture ». Une différence
     avec eux, et elle est écrite aussi : le contenu d'un popover n'a
     pas de rôle de liste, donc aucun décalage par ligne. Le panneau se
     déroule, son contenu arrive d'un bloc. Un calendrier dont les
     trente cases arriveraient l'une après l'autre serait une vague, pas
     une ouverture. */
  --_store-lift: 3px;
}

.sc-popover__panel:not([hidden]) {
  animation: sc-store-unfold var(--motion-enter) both;
}

.sc-popover__panel.is-folding {
  animation: sc-store-fold var(--motion-leave) both;
  pointer-events: none;
}

.sc-popover__panel[hidden] {
  display: none;
}

/* ---- Structure ---- */

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

.sc-popover__title {
  font-family: var(--font-heading);
  font-size: var(--text-h4-size);
  font-weight: var(--text-h4-weight);
  line-height: var(--leading-snug);
  color: var(--color-text);
}

/* 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-popover__close {
  margin-block-start: calc(var(--space-2) * -1);
  margin-inline-end: calc(var(--space-4) * -1);
}

.sc-popover__body {
  padding: var(--_popover-padding);
  color: var(--color-text-secondary);
  font-size: var(--text-body-s-size);
  line-height: var(--leading-normal);
}

/* Après un en-tête, le corps ne double pas la respiration. */
.sc-popover__header + .sc-popover__body {
  padding-block-start: 0;
}

/* Respiration entre les blocs du corps : un paragraphe et un champ,
   deux champs, un texte et une liste. */
.sc-popover__body > * + * {
  margin-block-start: var(--gap-m);
}

/* Le pied prolonge le corps sans filet : à cette largeur, une ligne
   de séparation en plus de la bordure du panneau fait deux traits
   pour un seul bloc. */
.sc-popover__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--gap-s);
  padding: var(--_popover-padding);
  padding-block-start: 0;
}

/* ---- Placements ---- */

.sc-popover--bottom {
  --_popover-block-start: calc(100% + var(--_popover-gap));
  --_popover-block-end: auto;
  --_popover-inline-start: var(--_popover-cross-start);
  --_popover-inline-end: var(--_popover-cross-end);
  --_popover-from: 0 calc(-1 * var(--_popover-shift));
}

.sc-popover--top {
  --_popover-block-start: auto;
  --_popover-block-end: calc(100% + var(--_popover-gap));
  --_popover-inline-start: var(--_popover-cross-start);
  --_popover-inline-end: var(--_popover-cross-end);
  --_popover-from: 0 var(--_popover-shift);
}

.sc-popover--start {
  --_popover-block-start: var(--_popover-cross-start);
  --_popover-block-end: var(--_popover-cross-end);
  --_popover-inline-start: auto;
  --_popover-inline-end: calc(100% + var(--_popover-gap));
  --_popover-from: var(--_popover-shift) 0;
}

.sc-popover--end {
  --_popover-block-start: var(--_popover-cross-start);
  --_popover-block-end: var(--_popover-cross-end);
  --_popover-inline-start: calc(100% + var(--_popover-gap));
  --_popover-inline-end: auto;
  --_popover-from: calc(-1 * var(--_popover-shift)) 0;
}

/* Bord de fin de l'axe transversal : le panneau s'aligne à droite
   d'un déclencheur posé près du bord de l'écran, et en bas d'un
   déclencheur placé en pied de colonne. */
.sc-popover--align-end {
  --_popover-cross-start: auto;
  --_popover-cross-end: 0;
}