/**
 * PlayAwale — Soutenir le jeu : le badge et sa fenêtre
 * -----------------------------------------------------------------------------
 * Le balisage est écrit dans inc/partials/support.php, l'ouverture dans
 * assets/js/support.js. La fenêtre est celle du site — components/modal.css — :
 * cette feuille n'y ajoute que ce qui lui est propre.
 *
 * LE CŒUR A SA COULEUR À LUI
 * Une terre cuite : ni l'ambre, réservé à ce qui DÉSIGNE, ni le rouge d'une
 * erreur. C'est la seule touche de la page qui ne parle pas du jeu, mais de
 * celui qui le fait.
 *
 * @package   PlayAwale
 * @version   2.0
 * @author    Nicolas Lion — Développeur web — https://nlion.fr
 * @copyright 2026 Nicolas Lion
 */

.support-badge,
.support-dialog {
  --support-heart: #b4432b;
}


/* =============================================================================
   LE BADGE
   -----------------------------------------------------------------------------
   Le jumeau clair de celui de l'application Android : même forme, même
   lecture — une raison en petites capitales, ce qu'on peut faire dessous. Il
   est clair parce qu'il reste sur le site : il ouvre une fenêtre, il n'envoie
   pas ailleurs.
   ============================================================================= */

.support-badge {
  display: flex;
  align-items: center;
  gap: 0.7em;

  width: fit-content;
  padding: 0.5em 1.25em 0.5em 0.95em;

  color: var(--color-text);
  text-align: left;
  text-decoration: none;

  background-color: var(--color-brand-cream);
  background-image: var(--gradient-surface-raised);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-raised);

  transition:
    transform var(--duration-base) ease,
    box-shadow var(--duration-base) ease,
    background-color var(--duration-base) ease;
}

.support-badge:hover,
.support-badge:focus-visible {
  background-color: var(--color-brand-amber-light);
  transform: translateY(-2px);
  box-shadow: var(--shadow-raised-hover);
}

.support-badge:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 3px;
}

.support-badge__icon {
  flex: none;
  width: 1.9em;
  height: 1.9em;

  color: var(--support-heart);
}

.support-badge__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Le cœur bat une fois quand on le survole : un signe de vie, pas une
   sollicitation — il ne bouge jamais tout seul. */
.support-badge:hover .support-badge__icon,
.support-badge:focus-visible .support-badge__icon {
  animation: support-beat 0.9s ease-in-out;
}

@keyframes support-beat {
  0%, 100% { transform: scale(1); }
  30%      { transform: scale(1.16); }
  60%      { transform: scale(0.95); }
}

.support-badge__text {
  display: flex;
  flex-direction: column;

  line-height: var(--line-height-tight);
}

.support-badge__kicker {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;

  color: var(--color-text-muted);
}

.support-badge__name {
  font-family: var(--font-display);
  font-size: 1.1rem;
}


/* =============================================================================
   LA FENÊTRE
   -----------------------------------------------------------------------------
   Plus longue qu'une confirmation : sur un téléphone couché, elle ne tient pas
   en hauteur. Le panneau défile donc en lui-même, et la page derrière ne bouge
   pas — voir « support-dialog-open ».
   ============================================================================= */

/* AU-DESSUS DE L'ESPACE DU JOUEUR
   Le jeton du haut à droite restait net par-dessus le voile, cliquable pendant
   qu'on lisait. Deux raisons, deux remèdes :
     · la fenêtre était dans <main>, qui forme son propre empilement : elle est
       désormais écrite hors de <main> — voir index.php ;
     · tous deux sont au niveau « overlay », et à niveau égal le dernier venu
       l'emporte — l'espace du joueur peut venir après : la fenêtre prend donc
       un cran de plus. */
.support-dialog {
  z-index: calc(var(--z-overlay) + 10);
}

/* LA LARGEUR DE LA FENÊTRE
   -----------------------------------------------------------------------------
   Elle tenait en 460 px. Les façons de soutenir qui se sont ajoutées l'ont
   allongée jusqu'à la faire défiler, et une barre de défilement dans une fenêtre
   de remerciement, c'est laid — signalé deux fois.

   « overflow-y: auto » RESTE, et c'est voulu : sur un téléphone couché, ou avec
   un texte grossi, rien ne garantit que tout tienne. La barre ne doit plus
   paraître dans le cas courant — pas devenir impossible.

   « 100 % PUIS UN PLAFOND », et non « min(100%, …) » : c'est la forme la plus
   ordinaire, et la seule qui se lise sans effort. Les deux font la même chose.

   UN DÉBORDEMENT A ÉTÉ CRU ICI, PUIS DÉMENTI. Sur des captures d'écran prises en
   ligne de commande à 390 px, le panneau dépassait de seize pixels à droite. Le
   même dépassement apparaît sur une page de quatre lignes — un enfant en
   « width: 100% » dans un parent qui a du retrait —, donc sur du CSS que
   personne ne conteste : c'est l'outil de capture qui ne compose pas à la
   largeur demandée, pas cette feuille. Rien à corriger ici ; et ces captures-là
   ne valent pas pour juger d'un rendu sur téléphone. */
.support-dialog__panel {
  position: relative;

  width: 100%;
  max-width: 640px;
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;

  padding: var(--space-lg) var(--space-lg) var(--space-md);
}


/* La page ne défile pas sous la fenêtre ouverte. */
.support-dialog-open {
  overflow: hidden;
}

/* La croix : dans le coin, discrète. Refermer doit être facile, pas tentant. */
.support-dialog__close {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);

  display: flex;
  align-items: center;
  justify-content: center;

  width: 2.5rem;
  height: 2.5rem;
  padding: 0;

  color: var(--color-text-muted);
  background: transparent;
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;

  transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease;
}

.support-dialog__close:hover,
.support-dialog__close:focus-visible {
  color: var(--color-text);
  background-color: rgba(60, 39, 35, 0.08);
}

.support-dialog__close:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.support-dialog__close svg {
  width: 1.3rem;
  height: 1.3rem;
}

/* Le cœur en médaillon, au-dessus du titre : on sait avant de lire de quoi il
   s'agit. */
.support-dialog__heart {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 3.4rem;
  height: 3.4rem;
  margin: 0 auto var(--space-sm);

  color: var(--support-heart);
  background-color: var(--color-brand-amber-light);
  border-radius: var(--radius-full);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), var(--shadow-sm);
}

.support-dialog__heart svg {
  width: 1.8rem;
  height: 1.8rem;
}

.support-dialog__lead {
  margin: 0 0 var(--space-md);

  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text);
}

/* LE TITRE DE COLONNE
   Il est SORTI de l'encart : c'est l'étiquette de toute une colonne, pas le
   chapeau d'un bloc. Les deux colonnes portent le même, et c'est ce qui les
   rend lisibles d'un coup d'œil — ce qui manquait le plus avant. */
.support-dialog__subtitle {
  margin: 0;

  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 400;
  line-height: var(--line-height-tight);
  color: var(--color-text);
}

/* --- À quoi sert un don ------------------------------------------------------
   L'encart de sable est passé du bloc à la LISTE elle-même : le titre étant
   sorti, l'encart n'avait plus à le contenir. Trois graines en guise de puces :
   la liste se lit d'un coup d'œil, et reste dans le monde du jeu. */
.support-dialog__list {
  display: grid;
  gap: var(--space-xs);

  margin: 0;
  padding: var(--space-sm) var(--space-md);
  list-style: none;

  background-color: var(--color-sand-100);
  border-radius: var(--radius-md);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), var(--shadow-sm);
}

.support-dialog__item {
  position: relative;
  padding-left: 1.4em;

  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
  color: var(--color-text);
}

.support-dialog__item::before {
  content: '';
  position: absolute;
  left: 0.2em;
  top: 0.45em;

  width: 0.62em;
  height: 0.62em;

  background: radial-gradient(circle at 35% 30%, #fff3d6, var(--color-brand-amber-deep) 72%);
  border-radius: 50%;
  box-shadow: 0 1px 1px rgba(60, 39, 35, 0.3);
}

/* --- Le don ------------------------------------------------------------------ */
.support-dialog__donate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;

  text-decoration: none;
}

.support-dialog__donate-icon {
  flex: none;
  width: 1.15em;
  height: 1.15em;

  color: var(--support-heart);
}

.support-dialog__note,
.support-dialog__aside {
  margin: 0;

  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
  color: var(--color-text-muted);
}

.support-dialog__aside {
  margin-top: var(--space-lg);
}


/* =============================================================================
   LES DEUX COLONNES
   -----------------------------------------------------------------------------
   À gauche le don — ce qu'il paie, puis le bouton qui le fait. À droite les
   autres façons d'aider. Chacune porte un sous-titre : c'est ce qui manquait le
   plus quand les blocs s'empilaient sans étiquette.

   SUR UNE COLONNE PAR DÉFAUT, DEUX AU-DELÀ DE 62 REM. La grille ne se déclenche
   que là où le panneau est assez large pour que deux colonnes se lisent.
   ============================================================================= */

.support-dialog__main {
  display: grid;
  gap: var(--space-lg);

  margin-top: var(--space-lg);
  text-align: left;
}

.support-dialog__give,
.support-dialog__other {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* Le bouton et sa note sont poussés en bas de leur colonne : sur deux colonnes,
   l'action principale se retrouve alors à la hauteur de la dernière ligne de la
   liste d'en face, et les deux colonnes se terminent ensemble. */
.support-dialog__actions {
  margin-top: auto;
  align-items: stretch;
}


/* =============================================================================
   UNE FAÇON D'AIDER
   -----------------------------------------------------------------------------
   Trois lignes de MÊME FORME : une vignette carrée, un nom, une phrase. Elles
   étaient auparavant une carte photographiée, un paragraphe libre et un bloc à
   part — trois écritures pour trois choses de même rang, et l'œil ne savait plus
   ce qui allait ensemble.

   PAS D'AMBRE ICI. Le seul bouton d'ambre de la fenêtre est celui du don ; ces
   trois-là sont des lignes de liste, et le chevron suffit à dire qu'on peut les
   suivre.
   ============================================================================= */

.support-ways {
  display: flex;
  flex-direction: column;
  gap: 1px;

  margin: 0;
  padding: 0;
  list-style: none;

  overflow: hidden;
  border-radius: var(--radius-sm);

  /* L'écart d'un pixel entre les lignes laisse voir ce fond : c'est lui qui
     dessine les séparateurs, sans une bordure par ligne. */
  background-color: rgba(60, 39, 35, 0.12);
}

.support-way {
  display: flex;
  align-items: center;
  gap: var(--space-sm);

  padding: var(--space-sm);

  color: var(--color-text);
  text-align: left;
  text-decoration: none;

  background: var(--gradient-panel);

  transition: background-color var(--duration-fast) ease;
}

.support-way:hover,
.support-way:focus-visible {
  background-color: var(--color-brand-cream);
}

.support-way:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: -3px;
}

/* Le cadre de la vignette : même taille pour une photographie de plateau, une
   couverture de livre et un pictogramme. C'est ce cadre commun qui fait la
   famille, pas ce qu'il y a dedans. */
.support-way__visual {
  display: grid;
  place-items: center;
  flex: none;

  width: 2.9rem;
  height: 2.9rem;

  overflow: hidden;
  border-radius: var(--radius-sm);
  background-color: var(--color-brand-cream);
  box-shadow: inset 0 0 0 1px rgba(60, 39, 35, 0.1);
}

.support-way__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* La couverture se voit ENTIÈRE : recadrée comme les autres, on n'en verrait
   qu'un morceau de grille, et un livre se reconnaît à sa couverture. */
.support-way__photo--livre {
  object-fit: contain;
}

.support-way__icon {
  display: block;
  width: 1.4rem;
  height: 1.4rem;

  color: var(--color-text-muted);
}

.support-way__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.support-way__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.support-way__name {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 700;
  line-height: var(--line-height-tight);
}

.support-way__note,
.support-way__legal {
  /* Jamais un mot seul sur la dernière ligne : le navigateur répartit. */
  text-wrap: pretty;

  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-tight);
  color: var(--color-text-muted);
}

/* LA MENTION D'AFFILIATION SE LIT.
   Même corps que la phrase au-dessus — une déclaration qu'il faut deviner ne
   déclare rien —, et un peu d'air pour qu'on ne la prenne pas pour la suite de
   la phrase. Elle ne paraît que sur le lien qui est affilié, c'est-à-dire le
   français : voir awale_book_link(). */
.support-way__legal {
  margin-top: 3px;
  font-style: italic;
}

.support-way__go {
  flex: none;
  width: 1em;
  height: 1em;
  margin-inline-start: auto;

  color: var(--color-text-muted);
}

.support-way__go svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* On donne à quelqu'un, pas à un site : la fenêtre se signe. */
.support-dialog__signature {
  margin: var(--space-sm) 0 0;

  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: var(--line-height-tight);
  color: var(--color-text);
}

.support-dialog__author {
  display: block;
  margin-top: 0.2em;

  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.support-dialog__later {
  margin-top: var(--space-sm);
}


/* SUR ORDINATEUR, ELLE S'ÉLARGIT PLUTÔT QUE DE DÉFILER
   -----------------------------------------------------------------------------
   Consigne : sur ordinateur, surtout pas de barre de défilement — mieux vaut
   élargir. Elle passe donc à 1000 px, et SA LARGEUR SERT À QUELQUE CHOSE : le
   don à gauche, les autres façons d'aider à droite. Élargir sans réorganiser ne
   rendait presque rien — le texte perd une ligne ou deux, les blocs gardent leur
   hauteur : 950 px mesurés à 640 de large, puis 936 à 900, contre 736 offerts
   par un écran d'ordinateur portable.

   LE TEXTE D'INTRODUCTION, LUI, NE S'ÉLARGIT PAS. Une ligne de 1000 pixels ne se
   lit pas : l'œil perd le début de la suivante. Il garde donc une largeur de
   lecture, centré, pendant que les deux colonnes en dessous prennent tout. */
@media (min-width: 62rem) {

  .support-dialog__panel {
    max-width: 1000px;

    /* Chaque pixel de retrait compte double — un en haut, un en bas — quand on
       court après la hauteur. */
    padding: var(--space-md) var(--space-lg) var(--space-sm);
  }

  .support-dialog__lead {
    max-width: 62ch;
    margin-inline: auto;

    /* Deux lignes de longueurs voisines, plutôt qu'une longue et un reste : le
       navigateur répartit lui-même le texte sur les lignes disponibles. */
    text-wrap: balance;
  }

  /* Le don à gauche, les autres façons à droite. La colonne du don est un peu
     plus étroite : sa liste est courte, celle d'en face porte trois lignes. */
  .support-dialog__main {
    grid-template-columns: 5fr 6fr;
    gap: var(--space-xl);
  }

  /* Un filet entre les deux colonnes, plutôt qu'un fond ou un cadre : il suffit
     à dire qu'on change de sujet, sans ajouter une matière de plus. */
  .support-dialog__other {
    padding-left: var(--space-xl);
    border-left: 1px solid rgba(60, 39, 35, 0.12);
  }

  /* SEIZE PIXELS REPRIS SUR LES DEUX CHARNIÈRES
     Mesurée dans les onze langues, la fenêtre allait de 650 px en chinois à
     746 en allemand et en néerlandais — deux langues au-dessus des 736 d'un
     écran d'ordinateur portable. Plutôt que de raboter ces deux traductions-là,
     où le premier texte un peu long aurait tout recassé, on reprend huit pixels
     au-dessus des colonnes et huit sous elles. Les petits écrans gardent leur
     air : ils défilent de toute façon, et c'est la page qui les sert. */
  .support-dialog__main {
    margin-top: var(--space-md);
  }

  .support-dialog__aside {
    margin-top: var(--space-md);
  }
}

/* =============================================================================
   PETITS ÉCRANS
   ============================================================================= */

@media (max-width: 34rem) {

  .support-dialog__panel {
    padding: var(--space-lg) var(--space-md) var(--space-md);
  }

  .support-dialog__list {
    padding: var(--space-sm);
  }
}


/* =============================================================================
   MOUVEMENT RÉDUIT
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {

  .support-badge,
  .support-dialog__close {
    transition: none;
  }

  .support-badge:hover,
  .support-badge:focus-visible {
    transform: none;
  }

  .support-badge:hover .support-badge__icon,
  .support-badge:focus-visible .support-badge__icon {
    animation: none;
  }
}