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

.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;
}