/**
 * PlayAwale — Page « Mon compte »
 * -----------------------------------------------------------------------------
 * Un écran de jeu, et non une page de site : mêmes couleurs, mêmes matières,
 * mêmes cartes de sable clair posées sur le décor. On y règle son portrait comme
 * on choisit un niveau — en regardant, pas en remplissant un formulaire.
 *
 * ELLE REPREND CE QUI EXISTE
 * Les boutons, les cartes, les fenêtres et la barre d'outils sont les composants
 * du jeu. Cette feuille n'ajoute que ce qui n'existe nulle part ailleurs : le
 * tableau des trois niveaux, l'atelier du portrait, et l'affichage d'une clé.
 *
 * ELLE SE LIT SUR UN TÉLÉPHONE
 * Une seule colonne, des rangées de choix qui défilent latéralement plutôt que
 * de se comprimer, et le tableau des droits qui glisse dans son propre cadre.
 *
 * @package   PlayAwale
 * @version   2.0
 * @author    Nicolas Lion — Développeur web — https://nlion.fr
 * @copyright 2026 Nicolas Lion
 */

/* =============================================================================
   MISE EN PAGE
   ============================================================================= */

.account-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);

  /* La page défile : elle n'est pas contrainte par la hauteur de l'écran comme
     l'aire de jeu. La barre d'outils reste fixe, il faut donc lui laisser sa
     place en bas. */
  padding: var(--space-xl) var(--space-md) calc(var(--space-2xl) * 2);
}

.account-title {
  margin: 0;

  font-family: var(--font-display);
  font-size: var(--font-size-title);
  font-weight: 400;
  line-height: var(--line-height-tight);
  text-align: center;
  color: var(--color-text);
  text-shadow: var(--shadow-title);
}

.account-lead {
  margin: 0 0 var(--space-sm);
  max-width: 46rem;

  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-tight);
  text-align: center;
  color: var(--color-text-muted);
}


/* =============================================================================
   OÙ VOUS EN ÊTES
   -----------------------------------------------------------------------------
   Le portrait, et deux phrases à côté. C'est le premier bloc, et le seul qui
   parle du joueur lui-même.
   ============================================================================= */

.account-state {
  display: flex;
  align-items: center;
  gap: var(--space-lg);

  width: min(94vw, 620px);
  padding: var(--space-lg);

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

.account-state__avatar {
  flex: none;
  width: clamp(84px, 22vw, 120px);
  height: auto;

  /* Le portrait est rond, comme partout ailleurs dans le jeu. */
  border-radius: var(--radius-full);
  background-color: var(--color-sand-100);
}

.account-state__title {
  margin: 0 0 var(--space-2xs);

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

.account-state__text {
  margin: 0;

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

/* Sur un téléphone, le portrait passe au-dessus : deux colonnes de 40 % ne
   laissent lire ni l'une ni l'autre. */
@media (max-width: 34rem) {

  .account-state {
    flex-direction: column;
    text-align: center;
    gap: var(--space-md);
  }
}


/* =============================================================================
   LES BLOCS
   ============================================================================= */

.account-block {
  width: min(94vw, 720px);
  padding: var(--space-lg);

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

.account-block__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);

  margin: 0 0 var(--space-sm);

  font-family: var(--font-display);
  font-size: var(--font-size-button);
  font-weight: 400;
  line-height: var(--line-height-tight);
  text-align: center;
  color: var(--color-text);
}

.account-block__text {
  margin: 0 0 var(--space-md);

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

/* La dernière phrase d'un bloc ne pousse pas le fond. */
.account-block__text:last-child {
  margin-bottom: 0;
}

/* Une réserve, une précision : plus discrète que le texte qu'elle accompagne. */
.account-block__text--note {
  font-size: var(--font-size-sm);
}

/* Ce qui n'est pas encore ouvert s'affiche en retrait, sans cesser d'être
   lisible : on annonce, on ne promet pas. */
.account-block--later {
  opacity: 0.82;
}

.account-message {
  margin: var(--space-md) 0 0;

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


/* =============================================================================
   TROIS FAÇONS D'ÊTRE ICI
   -----------------------------------------------------------------------------
   Un vrai tableau : ce sont des lignes et des colonnes, et un lecteur d'écran
   doit pouvoir annoncer « avatar personnalisé, clé de sage, oui ».
   ============================================================================= */

/* Sur écran étroit, il glisse dans son cadre plutôt que d'écraser la page.
   Le cadre est atteignable au clavier — sans quoi on ne pourrait pas le faire
   défiler sans souris. */
.rights-scroll {
  overflow-x: auto;
  margin: 0 calc(var(--space-lg) * -1) calc(var(--space-lg) * -1);
  padding: 0 var(--space-lg) var(--space-lg);
}

/* LE CADRE QUI PORTE LE TABLEAU DOIT LE CONTENIR
   Les marges négatives ci-dessus font déborder le cadre de défilement de 24 px
   de chaque côté de son bloc — c'est voulu : le tableau va ainsi jusqu'au bord
   de la carte. Mais sans cette ligne, ce sont ces 48 px qui élargissaient la
   PAGE ENTIÈRE sur un téléphone : 422 px de large pour un écran de 390, et tout
   le site glissait latéralement. Mesuré à 360 et 390 px. */
.account-block--rights {
  overflow: hidden;
}

.rights {
  width: 100%;
  border-collapse: collapse;

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

.rights th,
.rights td {
  padding: var(--space-xs) var(--space-sm);
  text-align: center;
  vertical-align: middle;
}

/* L'intitulé du droit : à gauche, et c'est lui qu'on lit d'abord. */
.rights tbody th {
  font-family: var(--font-body);
  font-weight: 400;
  text-align: left;
  color: var(--color-text-muted);
}

.rights thead th {
  font-family: var(--font-display);
  font-size: var(--font-size-base);
  font-weight: 400;
  white-space: nowrap;
}

/* Une ligne sur deux, à peine teintée : l'œil suit sans qu'on trace de traits. */
.rights tbody tr:nth-child(odd) {
  background-color: var(--color-sand-100);
}

.rights__mark {
  font-size: 1.15em;
  color: var(--color-text-muted);
}

.rights__mark--yes {
  color: var(--color-online);
  font-weight: 700;
}

.rights__word {
  font-size: 0.9em;
  color: var(--color-text-muted);
}

/* La mention d'attente est celle de l'écran de choix — components/picker.css.
   Elle n'a besoin ici que d'une taille à elle : dans une case de tableau, le
   demi-cadratin d'un grand bouton la rendrait illisible. */
.rights__soon {
  font-size: 0.62em;
}


/* =============================================================================
   LA CLÉ
   ============================================================================= */

.account-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-md);
}

/* Les boutons de cette page sont des choix, pas l'action principale d'un
   écran : le remplissage généreux du bouton d'accueil y serait démesuré. */
.account-actions .btn {
  padding: var(--space-sm) var(--space-xl);
  font-size: var(--font-size-base);
}

.key-restore {
  padding: var(--space-sm) var(--space-md);

  background-color: var(--color-sand-100);
  border-radius: var(--radius-sm);
  text-align: left;
}

.key-restore__label {
  display: block;
  margin-bottom: var(--space-2xs);

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

.key-restore__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
}

/* Une clé se recopie signe par signe : chasse fixe et lettres espacées, comme
   les codes de salon du jeu en réseau. */
.key-restore__field {
  flex: 1 1 14em;
  min-width: 10em;
  padding: var(--space-xs) var(--space-sm);

  font-family: var(--font-body);
  font-size: var(--font-size-base);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;

  color: var(--color-text);
  background-color: var(--color-surface);
  border: 2px solid var(--color-sand-400);
  border-radius: var(--radius-sm);
}

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

/* LA CLÉ, MONTRÉE UNE FOIS

   Aussi grande que la place le permet : on la recopie sur un papier, on la lit
   à l'écran d'un téléphone tenu à bout de bras.

   ELLE TIENT SUR UNE SEULE LIGNE, TOUJOURS
   Coupée en deux, on ne sait plus si le tiret de la fin appartient à la clé ou
   au retour à la ligne — et une clé se recopie signe par signe. « nowrap »
   l'interdit, et le corps suit la largeur de l'écran pour que l'interdiction ne
   coûte jamais un débordement : vingt-trois signes, espacement compris, tiennent
   dans la fenêtre du plus petit téléphone comme dans celle du plus grand écran.

   L'espacement est descendu de 0,12 à 0,1 em : c'est ce qu'il fallait gagner
   pour garder un corps confortable sur un écran de 320 px.

   LES TROIS NOMBRES SONT MESURÉS, PAS DEVINÉS
   La pire clé possible est faite des signes les plus larges de l'alphabet —
   « WWWWW-MMMMM-QQQQQ-8888W ». Mesurée dans la fenêtre à sept largeurs
   d'écran, de 320 à 1 440 px, elle tient partout avec de la marge : 228 px
   pour 237 disponibles au plus étroit, 475 pour 496 au plus large. */
.sage-key {
  margin: 0 0 var(--space-md);
  padding: var(--space-md) var(--space-sm);

  font-family: var(--font-body);
  font-size: clamp(0.72rem, 3.1vw, 1.5rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: var(--line-height-tight);
  white-space: nowrap;

  color: var(--color-text);
  background-color: var(--color-sand-100);
  border-radius: var(--radius-md);

  /* Elle se sélectionne d'un geste : c'est ce qu'on fait d'une clé. */
  user-select: all;
}


/* =============================================================================
   L'ATELIER DU PORTRAIT
   -----------------------------------------------------------------------------
   Le portrait à gauche, les réglages à droite ; l'un sous l'autre sur un
   téléphone. Chaque choix porte SA figure : on choisit une coupe en la voyant,
   jamais en lisant son nom.
   ============================================================================= */

.avatar-studio {
  display: flex;
  align-items: flex-start;
  gap: var(--space-lg);
}

.avatar-studio__stage {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);

  /* Il suit la page pendant qu'on fait défiler les réglages : on voit ce qu'on
     change au moment où on le change. */
  position: sticky;
  top: var(--space-md);
}

.avatar-studio__portrait {
  width: clamp(120px, 30vw, 200px);
  height: auto;

  background-color: var(--color-sand-100);
  border-radius: var(--radius-full);
}

.avatar-studio__random {
  padding: var(--space-2xs) var(--space-md);
  font-size: var(--font-size-sm);
}

.avatar-studio__controls {
  flex: 1 1 auto;
  min-width: 0;

  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.avatar-control__name {
  margin: 0 0 var(--space-2xs);

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

/* La liste des choix.

   POURQUOI UNE LISTE DÉROULANTE
   Chaque valeur portait sa propre figure, et il fallait faire défiler une
   rangée de vingt-sept visages pour trouver une coupe de cheveux : long à la
   souris, pénible au doigt, impossible au clavier. Une liste se parcourt aux
   flèches, se replie d'elle-même sur un téléphone, et tient en une ligne. Ce
   qui comptait — VOIR le résultat — est resté : le portrait est à côté, et il
   se redessine à chaque changement.

   Elle garde la matière du site plutôt que l'apparence du système : c'est un
   objet de plus posé sur le sable, comme les boutons et les panneaux. La
   flèche est dessinée ici, en fond, puisque « appearance: none » retire celle
   du navigateur. */
.avatar-control__list {
  width: 100%;
  padding: var(--space-xs) var(--space-xl) var(--space-xs) var(--space-sm);

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

  background-color: var(--color-surface);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.8 6 6.2l4.5-4.4' fill='none' stroke='%233c2723' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    var(--gradient-surface-raised);
  background-repeat: no-repeat;
  background-position: right var(--space-sm) center, 0 0;
  background-size: 12px 8px, auto;

  border: 0;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-raised);
  cursor: pointer;

  -webkit-appearance: none;
  appearance: none;
}

.avatar-control__list:hover {
  background-color: var(--color-brand-amber-light);
}

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

/* Les commandes tiennent sur deux colonnes tant que la place le permet : six
   réglages en une seule colonne repoussaient le bas du bloc hors de vue. */
.avatar-studio__controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
}

@media (max-width: 34rem) {

  .avatar-studio__controls {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 46rem) {

  .avatar-studio {
    flex-direction: column;
    align-items: stretch;
  }

  .avatar-studio__stage {
    position: static;
    align-self: center;
  }

}


/* =============================================================================
   LES PORTES
   -----------------------------------------------------------------------------
   Sous le tableau, au moment exact où l'on vient de se décider : la clé de
   sage, et le compte à venir. Ce sont les entrées de l'écran de choix, comme à
   l'accueil et à l'écran multijoueur — même matière, même creux, même chevron.
   ============================================================================= */

.account-doors {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);

  /* La largeur des blocs : les portes prolongent le tableau, elles ne s'en
     détachent pas. */
  width: min(94vw, 720px);
}

/* Elles gardent leur forme de LIGNE sur un téléphone.

   Le composant y transforme ses boutons en vignettes — dessin au-dessus, nom
   dessous : c'est ce qu'il faut à huit niveaux qu'on veut comparer d'un coup
   d'œil, jamais à deux portes dont la phrase d'explication est justement ce qui
   fait choisir. */
.account-doors .picker-button {
  grid-template-columns: auto 1fr auto;
  align-items: center;
  justify-items: stretch;
  gap: var(--space-md);

  padding: var(--space-md) var(--space-lg);
  text-align: left;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
}


/* =============================================================================
   CE QU'UN COMPTE AJOUTE
   -----------------------------------------------------------------------------
   Quatre lignes, et non un second tableau : la comparaison a déjà eu lieu sur
   le carrefour, celle-ci ne montre que la différence.
   ============================================================================= */

.account-gains {
  display: grid;
  gap: var(--space-xs);

  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.account-gain {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: var(--space-sm);

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

/* La même coche que dans le tableau, et de la même couleur : elle veut dire la
   même chose des deux côtés. */
.account-gain__mark {
  font-size: 1.15em;
  font-weight: 700;
  color: var(--color-online);
}


/* =============================================================================
   LA MENTION D'ATTENTE, DANS UN TITRE
   ============================================================================= */

/* Dans un titre de page, la mention se règle sur la taille du texte plutôt que
   sur celle d'un bouton : à 0,5 em d'un titre de trois rem, elle crierait. */
.account-title__soon {
  margin-left: var(--space-sm);
  font-size: 0.32em;
  vertical-align: 0.55em;
}


/* =============================================================================
   L'AUTRE CHEMIN
   -----------------------------------------------------------------------------
   Un lien seul, sous les blocs : revenir au carrefour depuis la clé ou depuis
   le compte. Ce n'est pas une action, c'est une sortie — d'où le lien plutôt
   que le bouton.
   ============================================================================= */

.account-away {
  margin: 0;
  text-align: center;
}

.account-away__link {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.account-away__link:hover,
.account-away__link:focus-visible {
  color: var(--color-text);
}


/* =============================================================================
   LE RAPPEL DE LA CLÉ
   -----------------------------------------------------------------------------
   Son premier groupe, et le reste masqué. Elle ne se relit jamais en entier —
   voir awale_key_hint() — et cinq signes suffisent à reconnaître LA SIENNE
   parmi celles qu'on a notées.
   ============================================================================= */

.key-hint {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-sm);

  margin: 0 0 var(--space-xs);
}

.key-hint__label {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* Le même espacement que la clé entière : on reconnaît l'objet, en plus court.
   Et la même règle — une clé ne se coupe pas, fût-elle masquée aux trois
   quarts. */
.key-hint__value {
  padding: 0.25em 0.7em;

  font-family: var(--font-body);
  font-size: clamp(0.85rem, 3.2vw, 1.25rem);
  white-space: nowrap;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--color-text);

  background-color: var(--color-sand-100);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-hollow);

  /* Elle se sélectionne d'un geste, comme la vraie. */
  user-select: all;
}


/* =============================================================================
   LE COOKIE, DIT AVANT D'ÊTRE POSÉ
   -----------------------------------------------------------------------------
   Un cookie strictement nécessaire au service demandé ne réclame pas de
   consentement préalable — mais il réclame d'être EXPLIQUÉ, et le bon moment
   pour le faire est celui où l'on décide. La note se lit donc juste au-dessus
   du bouton qui le pose, et non au bas d'une page de mentions.

   Elle est en retrait, pas en alerte : ce n'est pas un avertissement, c'est une
   information.
   ============================================================================= */

.cookie-note {
  margin: 0 0 var(--space-md);
  padding: var(--space-sm) var(--space-md);
  text-align: left;

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

.cookie-note__title {
  margin: 0 0 var(--space-2xs);

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

.cookie-note__text {
  margin: 0 0 var(--space-xs);

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

.cookie-note__text:last-child {
  margin-bottom: 0;
}


/* =============================================================================
   PARTIR D'ICI
   -----------------------------------------------------------------------------
   Deux gestes qu'on confond facilement, et qui n'ont rien à voir : l'un range
   la clé sur cet appareil, l'autre efface le profil pour de bon. Chacun dit
   donc ce qu'il fait, juste sous son bouton — et non dans une fenêtre qu'on ne
   lit qu'après avoir cliqué.
   ============================================================================= */

.account-leave__title {
  margin: var(--space-lg) 0 var(--space-sm);

  font-family: var(--font-display);
  font-size: var(--font-size-base);
  font-weight: 400;
  line-height: var(--line-height-tight);
  text-align: center;
  color: var(--color-text);
}

.account-leave {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-md);
  align-items: start;
}

.account-leave__choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  text-align: center;
}

/* Les boutons de cette page sont des CHOIX, pas l'action principale d'un
   écran : le remplissage généreux du bouton d'accueil y met « Effacer mon
   profil » sur deux lignes. Les deux prennent en outre la même largeur — deux
   gestes de même portée se présentent de la même façon. */
.account-leave .btn {
  min-width: 15rem;
  padding: var(--space-sm) var(--space-lg);
  font-size: var(--font-size-base);
}

.account-leave__note {
  margin: 0;

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

/* Ce qui ne se reprend pas se lit dans la couleur de ce qui ne se reprend pas.
   Le rouge du site, jamais un rouge vif : il se distingue, il ne crie pas. */
.account-leave__note--warning {
  color: var(--color-danger);
}


/* =============================================================================
   UNE PHRASE PLUS PETITE, DANS UNE FENÊTRE
   -----------------------------------------------------------------------------
   La mention du cookie, sous l'avertissement : elle informe, elle n'alarme pas,
   et ne doit pas peser autant que la ligne qui la précède.
   ============================================================================= */

.modal__text--small {
  font-size: 0.8rem;
  opacity: 0.85;
}


/* =============================================================================
   LA QUESTION, ET LA TROISIÈME VOIE
   -----------------------------------------------------------------------------
   Le carrefour ne compare plus rien dans un tableau : il pose UNE question et
   ouvre deux portes. Ce qui suit habille cette question, et le lien discret de
   la clé de sage, posé dessous.
   ============================================================================= */

/* La question est le premier objet de la page après le titre : elle mérite la
   taille du titre, pas celle d'une accroche. */
.account-lead--question {
  max-width: 34rem;
  font-size: clamp(1.15rem, 2.4vw, 1.55rem);
  color: var(--color-text);
}

/* -----------------------------------------------------------------------------
   Le lien de la clé de sage

   EN DESSOUS, ET EN PLUS PETIT — mais pas caché. La clé donne autant que le
   compte sans réclamer d'adresse ; elle demande en revanche de garder un code à
   vie, et c'est cela qu'on ne met pas sur le chemin d'un débutant. La glose sous
   le lien le dit en six mots, pour que le choix reste éclairé.
   -------------------------------------------------------------------------- */

.account-aside {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;

  margin: var(--space-lg) 0 0;
  width: min(94vw, 720px);
  text-align: center;
}

.account-aside__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);

  /* 44 px de haut : c'est un lien qu'on vise au doigt comme un bouton. */
  min-height: 44px;
  padding: var(--space-2xs) var(--space-xs);

  font-family: var(--font-display);
  font-size: var(--font-size-base);
  color: var(--color-text);
  text-decoration: none;

  border-bottom: 1px solid rgba(60, 39, 35, 0.28);
  transition: color var(--duration-fast) ease, border-color var(--duration-fast) ease;
}

.account-aside__link:hover,
.account-aside__link:focus-visible {
  color: var(--color-brand-amber-deep);
  border-bottom-color: var(--color-brand-amber);
}

.account-aside__chevron {
  width: 1em;
  height: 1em;
  flex: none;
}

.account-aside__note {
  max-width: 30rem;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
  color: var(--color-text-muted);
}

/* -----------------------------------------------------------------------------
   La ligne honnête, sous le champ

   Ce que le compte ne fait PAS encore. Elle est en petit, mais elle n'est pas
   cachée : quelqu'un qui ouvre un compte en croyant y retrouver ses parties se
   sentirait trompé le lendemain, et il aurait raison.
   -------------------------------------------------------------------------- */

.account-note-honest {
  margin: var(--space-sm) 0 0;
  max-width: min(94vw, 720px);

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


/* =============================================================================
   MA CLÉ DE SAGE — l'écran de qui n'en a pas encore
   -----------------------------------------------------------------------------
   Le modèle est celui que la base de design recommande pour un jeu de plateau :
   « Feature-Rich Showcase », et une matière TACTILE, tridimensionnelle. C'est
   déjà la langue du site depuis la refonte de l'accueil — des OBJETS posés sur
   une table, pas des rectangles colorés. Cette page ne la parlait pas : ses
   cartes étaient plates, bordées d'un trait, et le visage qu'elle promettait
   n'apparaissait nulle part.

   L'ORDRE RACONTE LA DÉCISION
     1. on VOIT un visage — et on peut en tirer un autre ;
     2. deux objets disent ce que la clé rend ;
     3. une ligne dit ce qu'elle ne rend pas ;
     4. le bouton, et dessous la phrase qui lève la dernière hésitation ;
     5. « ou », puis retrouver une clé — une autre intention, une autre zone ;
     6. les cookies, en dernier et en petit.
   ============================================================================= */


/* -----------------------------------------------------------------------------
   1. LE VISAGE, MONTRÉ

   Une page qui vend un portrait doit en porter un. Le cadre est un CREUX — le
   même que les pictogrammes des boutons, le même que les trous du plateau :
   le visage est posé dans le bois, pas collé dessus.
   -------------------------------------------------------------------------- */

.sage-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);

  margin: 0 0 var(--space-md);
}

.sage-hero__frame {
  display: grid;
  place-items: center;

  width: clamp(9rem, 34vw, 13rem);
  aspect-ratio: 1;

  background: radial-gradient(circle at 50% 38%, var(--color-brand-cream), var(--color-sand-100));
  border-radius: 50%;
  box-shadow: var(--shadow-hollow), 0 8px 20px rgba(60, 39, 35, 0.18);
}

.sage-hero__portrait {
  width: 84%;
  height: 84%;
  object-fit: contain;
}

/* Le bouton arrive caché du serveur : sans JavaScript il ne ferait rien, et un
   bouton qui ne fait rien est pire qu'un bouton absent. */
.sage-hero__shuffle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);

  min-height: 44px;
  font-size: var(--font-size-sm);
}

.sage-hero__shuffle-icon {
  width: 1.1em;
  height: 1.1em;
}


/* -----------------------------------------------------------------------------
   2. CE QU'ELLE REND — deux objets, pas deux rectangles

   Arête claire au sommet, tranche sombre en bas, ombre qui décolle du sable :
   --shadow-raised, la matière commune du site. Au survol l'objet monte de deux
   pixels, comme partout ailleurs — jamais il ne grossit.
   -------------------------------------------------------------------------- */

.sage-gifts {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);

  margin: var(--space-md) 0 0;
  padding: 0;
  width: min(94vw, 560px);
  list-style: none;
}

@media (min-width: 34rem) {
  .sage-gifts {
    grid-template-columns: 1fr 1fr;
  }
}

.sage-gift {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    'icon name'
    'icon note';
  align-items: center;
  gap: 0 var(--space-sm);

  /* min-width: 0 — sans quoi une carte prend la largeur de son contenu et
     pousse la page. Voir les trois débordements du 15 septembre. */
  min-width: 0;
  padding: var(--space-md);

  background-color: var(--color-surface);
  border: 0;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-raised);

  transition: transform var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}

/* Sous « hover: hover » seulement : sur un écran tactile, un survol qui colle
   laisse la carte soulevée après le doigt. */
@media (hover: hover) {
  .sage-gift:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-raised-hover);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sage-gift {
    transition: none;
  }

  .sage-gift:hover {
    transform: none;
  }
}

/* Le pictogramme dans son CREUX, comme les trous du plateau. */
.sage-gift__icon {
  grid-area: icon;
  display: grid;
  place-items: center;

  width: 46px;
  height: 46px;

  color: var(--color-brand-amber-deep);
  background-color: rgba(60, 39, 35, 0.07);
  border-radius: 50%;
  box-shadow: var(--shadow-hollow);
}

.sage-gift__icon svg {
  width: 24px;
  height: 24px;
}

.sage-gift__name {
  grid-area: name;
  min-width: 0;

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

.sage-gift__note {
  grid-area: note;
  min-width: 0;

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


/* -----------------------------------------------------------------------------
   3. CE QU'ELLE NE REND PAS

   En petit, mais juste sous ce qu'elle rend : une limite qu'on lit ailleurs que
   là où l'on décide est une limite qu'on ne lit pas.
   -------------------------------------------------------------------------- */

.sage-limit {
  margin: var(--space-sm) 0 0;
  max-width: min(94vw, 560px);

  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
  text-align: center;
  color: var(--color-text-muted);
  text-wrap: pretty;
}


/* -----------------------------------------------------------------------------
   4. LE BOUTON, ET CE QUI LÈVE LA DERNIÈRE HÉSITATION

   « Combien ça coûte, qu'est-ce qu'on me demande » se répond SOUS le bouton, à
   l'instant du clic — pas en haut de page, où l'on ne se posait pas encore la
   question.
   -------------------------------------------------------------------------- */

.sage-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xs);

  margin: var(--space-lg) 0 0;
  width: min(94vw, 560px);
}

.sage-cta__button {
  /* C'est le geste de la page : il est plus gros que les autres, et il est le
     seul à porter l'ambre pleine. */
  min-height: 52px;
  padding-inline: var(--space-lg);
  font-size: 1.08rem;
}

.sage-cta__note {
  margin: 0;
  font-size: var(--font-size-sm);
  text-align: center;
  color: var(--color-text-muted);
}


/* -----------------------------------------------------------------------------
   5. « OU » — deux intentions, deux zones

   « Créer » et « retrouver » se suivaient, du même poids, et se disputaient le
   regard. Un trait qui porte « ou » les sépare : on ne lit la seconde que si la
   première ne nous concerne pas.
   -------------------------------------------------------------------------- */

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

  margin: var(--space-lg) 0;
  width: min(94vw, 560px);

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

.sage-or::before,
.sage-or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(60, 39, 35, 0.38), transparent);
}

.sage-or__word {
  flex: none;
  font-family: var(--font-display);
}


/* -----------------------------------------------------------------------------
   6. LES CIBLES DU DOIGT, sur cette page

   Mesurées à 390 px : « Créer ma clé de sage » tenait 43 px — un pixel sous la
   taille d'un pouce —, « Retrouver mon profil » 38, les listes du visage 35,
   « Au hasard » 25, le lien de retour 17. Le .btn du site n'est pas touché :
   ce sont ces éléments-là, sur cette page, qui remontent à 44.
   -------------------------------------------------------------------------- */

.key-restore .btn,
.avatar-control__list,
.avatar-studio__random,
.account-leave .btn {
  min-height: 44px;
}

.account-away__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-xs);
}


/* -----------------------------------------------------------------------------
   7. Le détail des cookies, replié

   Trois paragraphes — neuf cents signes — se tenaient juste au-dessus du bouton.
   Dire trop revient à n'être pas lu, ce qui est la même chose que se taire.
   L'essentiel reste sous les yeux ; le reste s'ouvre d'un clic, sans JavaScript
   et sans quitter la page.
   -------------------------------------------------------------------------- */

.cookie-note__more {
  margin-top: var(--space-xs);
}

.cookie-note__summary {
  /* 44 px : on l'ouvre au doigt. */
  display: flex;
  align-items: center;
  min-height: 44px;

  font-family: var(--font-display);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  cursor: pointer;
}

.cookie-note__summary:hover,
.cookie-note__summary:focus-visible {
  color: var(--color-brand-amber-deep);
}

.cookie-note__more[open] .cookie-note__summary {
  margin-bottom: var(--space-xs);
}


/* -----------------------------------------------------------------------------
   8. LA COLONNE

   DÉFAUT VU À L'ÉCRAN, ET NON EN LISANT LE CODE : « main » centre ses enfants,
   mais « #keyActions » est un bloc ordinaire qui prend toute la largeur — ses
   propres enfants, eux, s'alignaient donc à GAUCHE de lui. Le titre était
   centré sur la page et tout le reste décalé d'une centaine de pixels, ce qui
   se voit immédiatement et ne se devine pas à la lecture.

   Les deux moitiés de la page deviennent des colonnes centrées, comme le reste.
   -------------------------------------------------------------------------- */

#keyActions,
#keyOwned {
  display: flex;
  flex-direction: column;
  align-items: center;

  /* min-width: 0 — la règle apprise le 15 septembre : un enfant de grille ou de
     flexbox prend sinon la largeur de son contenu. */
  min-width: 0;
  width: 100%;
}

/* L'ÉCART ENTRE « VOTRE VISAGE » ET LA CLÉ
   Les deux cartes se touchaient. Le « gap » de .account-page ne les sépare pas :
   il ne vaut que pour les enfants DIRECTS de la page, et ces deux-là sont les
   enfants de #keyOwned, qui n'en avait aucun. Le même écart que partout
   ailleurs, pour que rien ne trahisse l'existence de ce conteneur.

   #keyActions n'en reçoit pas : ses blocs portent déjà leurs propres marges —
   un gap ici les doublerait. */
#keyOwned {
  gap: var(--space-lg);
}

/* L'accroche ne court pas sur toute la largeur d'un écran d'ordinateur : une
   ligne de plus de 70 signes se relit mal, et celle-ci en fait 100. */
.sage-page .account-lead {
  max-width: 34rem;
}

/* Le nom et sa glose s'alignent sur le pictogramme, à gauche : la page est
   centrée, mais une carte à trois colonnes ne l'est pas. Centrer un texte posé
   à droite d'une icône le fait flotter. */
.sage-gift__name,
.sage-gift__note {
  text-align: left;
}


/* =============================================================================
   9. LE BAS DE PAGE — une seule colonne, une seule largeur
   -----------------------------------------------------------------------------
   DÉFAUT VU À L'ÉCRAN : le bas de la page empilait TROIS PANNEAUX DE TROIS
   LARGEURS DIFFÉRENTES — le champ de la clé, le pavé des cookies (le plus large
   des trois), la porte du compte — chacun avec son propre fond et ses propres
   bords. Rien ne s'alignait sur rien, et le bouton « Retrouver mon profil »
   sortait de sa carte par la droite.

   La cause : ces blocs n'ont pas de largeur. Dans une colonne centrée, ils
   prennent donc chacun celle de SON contenu. La page se terminait en escalier.

   Une seule mesure les gouverne désormais, la même que le haut.
   ============================================================================= */

.sage-page {
  /* La colonne de la page, écrite UNE fois.

     720 px, et non 560 : c'est la mesure de « .account-block », dont sont faits
     l'atelier du visage et le bloc de la clé dans l'autre moitié de la page. Une
     première version posait 560 ici — le bas de l'état « avec une clé » se
     retrouvait alors 160 px plus étroit que les blocs au-dessus de lui, puisque
     la porte du compte et le lien de retour servent aux DEUX états. Mesuré, vu,
     corrigé : il n'y a qu'une colonne, et elle vaut pour toute la page. */
  --sage-col: min(94vw, 720px);
}

.sage-page .sage-gifts,
.sage-page .sage-limit,
.sage-page .sage-cta,
.sage-page .sage-or,
.sage-page .key-restore,
.sage-page .cookie-note,
.sage-page .account-doors,
.sage-page .account-away {
  width: var(--sage-col);
  max-width: var(--sage-col);
}

/* -----------------------------------------------------------------------------
   Retrouver sa clé : une ligne, pas une carte

   C'est le geste SECONDAIRE de la page — le trait « ou » le dit déjà. Il n'a
   donc pas à porter un panneau aussi présent que les deux objets du haut : un
   fond discret, un liseré, et le champ et son bouton sur la MÊME LIGNE dès
   qu'il y a la place.
   -------------------------------------------------------------------------- */

.sage-page .key-restore {
  padding: var(--space-md);

  background-color: rgba(255, 255, 255, 0.35);
  border: 1px solid rgba(60, 39, 35, 0.14);
  border-radius: var(--radius-md);
  box-shadow: none;
}

.sage-page .key-restore__row {
  flex-wrap: nowrap;
}

/* Le bouton ne doit pas peser plus que le champ qu'il accompagne : la police
   d'affichage, à sa taille normale, le faisait deux fois trop gros. */
.sage-page .key-restore .btn {
  flex: 0 0 auto;
  padding-inline: var(--space-md);
  font-size: var(--font-size-sm);
  white-space: nowrap;
}

/* Sous 26 rem le champ et le bouton s'empilent : côte à côte, le champ
   deviendrait trop étroit pour qu'on relise sa clé. Le bouton prend alors
   TOUTE la largeur — à moitié large sous un champ plein, il paraissait tombé là.
   ÉCRIT APRÈS la règle qu'il surcharge, et non avant : à spécificité égale,
   c'est la dernière qui gagne, requête de média ou pas. La boutique avait déjà
   perdu la moitié de ses règles pour cette raison — voir 45. */
@media (max-width: 26rem) {
  .sage-page .key-restore__row {
    flex-wrap: wrap;
  }

  .sage-page .key-restore .btn {
    flex: 1 1 100%;
  }
}

/* -----------------------------------------------------------------------------
   Les cookies : une note, pas un pavé

   C'est la mention légale de la page. Elle doit être LISIBLE et elle doit être
   LÀ — elle n'a pas à être un bloc de sable plus large que tout le reste, qui
   attirait l'œil au moment précis où il n'y a plus rien à décider.
   -------------------------------------------------------------------------- */

.sage-page .cookie-note {
  margin: var(--space-lg) 0 0;
  padding: 0;

  background-color: transparent;
  border-radius: 0;
  box-shadow: none;
  text-align: center;
}

.sage-page .cookie-note__text {
  font-size: 0.82rem;
  line-height: var(--line-height-base);
  text-wrap: pretty;
}

.sage-page .cookie-note__summary {
  /* Centré comme le reste de la note, et non collé à gauche. */
  justify-content: center;
  font-size: 0.82rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Une fois dépliée, la note redevient un texte qu'on LIT : aligné à gauche, où
   l'œil retrouve le début de chaque ligne. */
.sage-page .cookie-note__more[open] {
  margin-top: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  text-align: left;

  background-color: rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-md);
}

/* -----------------------------------------------------------------------------
   La porte du compte, et le retour

   Elles ferment la page : elles ont donc besoin d'air au-dessus d'elles, faute
   de quoi la porte semble appartenir à la note des cookies.
   -------------------------------------------------------------------------- */

.sage-page .account-doors {
  margin-top: var(--space-xl);
}

.sage-page .account-away {
  margin: var(--space-md) 0 0;
  text-align: center;
}


/* =============================================================================
   10. L'ÉCRAN DE QUI A UNE CLÉ
   -----------------------------------------------------------------------------
   Trois défauts, vus à l'écran :

     1. LE PORTRAIT ÉTAIT LE PLUS PETIT OBJET DE LA PAGE. Posé à gauche, il était
        dominé par six listes déroulantes : on venait pour son visage et l'on
        regardait un formulaire d'administration.

     2. « OUBLIER LA CLÉ » N'AVAIT PAS L'AIR D'UN BOUTON — un texte gras, sans
        cadre ni relief, à côté d'un bouton rouge plein. La règle « Input
        Affordance » du skill : un contrôle doit se voir comme un contrôle.

     3. L'ACTION DESTRUCTRICE ÉTAIT LA PLUS VOYANTE DU BLOC. Un aplat de terre
        cuite attire l'œil avant tout le reste ; le geste sans retour ne doit pas
        être celui qu'on remarque en premier.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   L'atelier : le portrait dessus, en grand, les réglages dessous
   -------------------------------------------------------------------------- */

.sage-page .avatar-studio {
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  width: 100%;
}

.sage-page .avatar-studio__stage {
  /* Il ne suit plus la page : il n'a plus à le faire, puisqu'il est au-dessus
     de ce qu'on règle et non à côté. */
  position: static;
  gap: var(--space-sm);
}

/* Le MÊME creux que le visage de la démonstration : c'est le même objet, il n'a
   pas à changer de cadre selon qu'on a une clé ou non. */
.sage-page .avatar-studio__frame {
  width: clamp(10rem, 40vw, 14rem);
}

.sage-page .avatar-studio__portrait {
  width: 84%;
  height: 84%;
  object-fit: contain;

  background-color: transparent;
  border-radius: 0;
}

.sage-page .avatar-studio__random {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
}

/* Les six réglages : une colonne sur téléphone, deux dès qu'il y a la place. */
.sage-page .avatar-studio__controls {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm) var(--space-md);

  width: 100%;
  min-width: 0;
}

@media (min-width: 34rem) {
  .sage-page .avatar-studio__controls {
    grid-template-columns: 1fr 1fr;
  }
}

/* Le nom du réglage s'aligne sur SA liste, à gauche — centré au-dessus d'un
   champ, il flotte entre deux colonnes et on ne sait plus lequel il désigne.
   Règle « Form Labels », gravité haute. */
.sage-page .avatar-control {
  min-width: 0;
}

.sage-page .avatar-control__name {
  display: block;
  text-align: left;
}

.sage-page .avatar-control__list {
  width: 100%;
}

/* -----------------------------------------------------------------------------
   La clé : un objet posé, avec son intitulé au-dessus
   -------------------------------------------------------------------------- */

.sage-page .key-hint {
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xs);
  margin-bottom: var(--space-sm);
}

.sage-page .key-hint__label {
  /* Au-dessus de la valeur, et non à sa gauche : sur un téléphone, les deux
     passaient à la ligne l'un sous l'autre de toute façon — autant que ce soit
     voulu, et aligné. */
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* -----------------------------------------------------------------------------
   Partir d'ici : deux vrais boutons, et le rouge qui ne domine plus
   -------------------------------------------------------------------------- */

.sage-page .account-leave__title {
  margin-top: var(--space-lg);
}

.sage-page .account-leave__choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xs);
  min-width: 0;
}

/* Les deux se voient comme des boutons — même relief, même tranche, même
   élévation au survol que partout ailleurs sur le site. */
.sage-page .account-leave .btn {
  width: 100%;
  box-shadow: var(--shadow-raised);
}

@media (hover: hover) {
  .sage-page .account-leave .btn:hover {
    box-shadow: var(--shadow-raised-hover);
  }
}

/* L'EFFACEMENT PERD SON APLAT.
   Il garde la couleur du danger — sur le texte et sur le liseré, jamais sur le
   fond — et le mot « sans retour » juste dessous. La couleur ne porte donc pas
   seule le sens (règle « Color Only », gravité haute), et le geste irréversible
   cesse d'être l'objet le plus voyant du bloc. */
.sage-page .account-leave .btn--danger {
  color: var(--color-danger);
  background-color: var(--color-danger-surface);
  border: 1px solid rgba(154, 52, 18, 0.4);
}

@media (hover: hover) {
  .sage-page .account-leave .btn--danger:hover {
    background-color: var(--color-danger);
    color: var(--color-brand-cream);
    border-color: var(--color-danger);
  }
}


/* =============================================================================
   11. LE BAS DE LA PAGE, UNE FOIS LA CLÉ ACTIVÉE
   -----------------------------------------------------------------------------
   Trois défauts, vus à l'écran :

     1. UN BLOC POUR DEUX IDÉES. La clé qu'on garde et les deux façons de s'en
        aller se suivaient sans rien entre elles : « Partir d'ici » était un
        petit titre centré qui ne séparait rien.

     2. LA PORTE DU COMPTE FLOTTAIT SEULE après un grand vide, et le lien de
        retour tombait sous elle en tout petit — deux objets sans rapport
        apparent, posés l'un après l'autre.

     3. LA PAGE S'ARRÊTAIT DANS LE VIDE. C'est le défaut même que l'accueil
        avait au bas de sa colonne, corrigé le même jour : rien ne la fermait.
   ============================================================================= */

/* Le filet du site : né et mort dans le fond, il range sans poser une barre en
   travers de l'écran. Il sépare ici deux idées d'un même bloc. */
.sage-rule {
  width: 100%;
  height: 1px;
  margin: var(--space-lg) 0 0;
  border: 0;

  background: linear-gradient(to right, transparent, rgba(60, 39, 35, 0.28), transparent);
}

/* -----------------------------------------------------------------------------
   Le pied : la porte du compte et le retour, sous un filet

   Ils appartiennent au même geste — QUITTER CETTE PAGE, vers un compte ou vers
   le choix. Réunis, ils cessent d'être deux orphelins ; et le filet donne enfin
   un bas à la page, comme au pied de l'accueil.
   -------------------------------------------------------------------------- */

.sage-page .sage-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);

  margin-top: var(--space-md);
  width: var(--sage-col);
}

.sage-page .sage-foot::before {
  content: '';

  /* Premier élément de la colonne : ni position absolue, ni marge négative. */
  width: 100%;
  height: 1px;
  flex: none;
  background: linear-gradient(to right, transparent, rgba(60, 39, 35, 0.4), transparent);
}

/* La porte remplit la colonne comme tout le reste ; les marges qu'elle portait
   pour se détacher du vide n'ont plus lieu d'être, le filet s'en charge. */
.sage-page .sage-foot .account-doors {
  margin-top: 0;
  width: 100%;
}

.sage-page .sage-foot .account-away {
  margin: 0;
}


/* =============================================================================
   12. LE BAS DE « CRÉER UN COMPTE »
   -----------------------------------------------------------------------------
   Deux paragraphes gris s'y suivaient, de même poids, l'un long et l'autre
   dense : les trois promesses du site tassées en une phrase, puis ce qu'un
   compte garde et ce qu'il ne garde pas, dans une seconde. On les sautait tous
   les deux.

   Les promesses deviennent une liste qu'on PARCOURT ; la note honnête se coupe
   en deux, chaque moitié disant une seule chose.
   ============================================================================= */

/* Trois engagements, trois coches, sous le bouton — à l'endroit de
   l'hésitation. Le composant est celui du site ; seule la place change.

   « ul. » ET NON « . » SEUL, ET C'EST TOUT LE SUJET
   Le reset pose « ul[role='list'] { margin: 0 } » — un élément plus un
   attribut, donc une spécificité que « .account-gains--promises » n'atteint
   pas. Écrite sans son « ul », cette marge ne s'appliquait pas : mesuré, le
   bouton et la liste se touchaient à ZÉRO pixel. C'est le troisième endroit du
   site où cette règle du reset l'emporte en silence — voir 45, où elle annulait
   depuis toujours les marges de trois listes de la boutique. */
ul.account-gains--promises {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(60, 39, 35, 0.12);
}

.account-gains--promises .account-gain {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* La coche reste franche même quand le texte s'efface : c'est elle qui dit
   « acquis », et elle ne doit pas pâlir avec la phrase qu'elle accompagne.

   PLUS SOMBRE QUE LE VERT DU SITE : mesuré sur le sable de la carte, --color-online
   ne tenait que 2,71 pour 1. Ce vert-ci en tient plus de quatre. La coche est
   décorative — « aria-hidden », et la phrase dit tout —, mais une marque qu'on
   distingue mal ne marque rien. */
.account-gains--promises .account-gain__mark {
  color: #2f6b33;
}

/* -----------------------------------------------------------------------------
   Ce qu'un compte garde aujourd'hui

   Un intitulé, la réponse, la réserve. Trois lignes, trois poids : on lit la
   question, on trouve la réponse, et la réserve se lit après — jamais l'inverse.
   -------------------------------------------------------------------------- */

.account-scope {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xs);

  margin: var(--space-md) 0 0;
  width: min(94vw, 720px);
  text-align: center;
}

.account-scope__title {
  margin: 0;

  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* La réponse est ce qu'on vient chercher : elle porte la police d'affichage et
   la couleur du texte plein, au milieu de deux lignes grises. */
.account-scope__value {
  margin: 0;

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

.account-scope__rest {
  margin: 0;
  max-width: 44ch;

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


/* =============================================================================
   13. LA CLÉ DE SAGE QUAND ON A DÉJÀ UN COMPTE
   -----------------------------------------------------------------------------
   POURQUOI CE PANNEAU EXISTE
   Les deux gestes de cette page — créer une clé, en retrouver une — posent le
   même cookie, et ce cookie fait passer awale_player_id() sur le profil de la
   clé. Le compte cesse alors d'être celui qu'on regarde : ses parties et ses
   statistiques n'ont pas bougé de la base, mais elles ont disparu de l'écran,
   ce qui revient au même pour celui qui les cherche.

   Le serveur refuse les deux — voir api/account.php —, et la page ne les
   propose donc pas : un bouton qui mène à un refus est une promesse rompue. À
   la place, ce bloc dit en trois phrases pourquoi la clé ne sert plus ici, et
   où la retrouver si l'on en avait une.

   IL N'EST JAMAIS AFFICHÉ EN MÊME TEMPS QUE « keyActions »
   Le serveur écrit l'un OU l'autre, jamais les deux : c'est ce qui garantit
   qu'aucun identifiant de la page n'existe en double.
   ============================================================================= */

.sage-page .sage-linked {
  /* Une carte comme les autres — c'est « .account-block » qui la pose —, mais
     elle arrive juste sous le titre de la page : il lui faut son air. */
  margin-top: var(--space-md);
}