/* LE SOCIAL — les amis, leur fiche, la confidentialite.

   Quatorzieme feuille, chargee apres `hub.css`, dont elle reprend la
   menuiserie : la planche `.panel`, la rangee `.hub-ligne`, la couverture
   `.hub-couv`, le titre en or. Elle n'invente AUCUNE couleur : tout vient
   des variables de `base.css`.

   Ce qu'elle ajoute lui appartient en propre :
   - LE POINT D'ETAT (`.so-point`) : vert en ligne, ambre en aventure — et
     lui seul bat, parce qu'il dit quelque chose qui est en train de se
     passer —, gris hors ligne ;
   - LE CODE AMI grave en capitales espacees (`.so-grandcode`) : c'est la
     chose qu'on lit a voix haute au depart d'une sortie, et le seul endroit
     de l'ecran ou l'on force la voix ;
   - LES DEUX BARRES DOS A DOS de la comparaison (`.so-cmp`) : la sienne en
     or, la mienne en vert, comme partout ailleurs « a moi » est vert.

   Tout le reste est volontairement sobre : un seul accent par ecran. */

/* L'ECART, UNE SEULE FOIS. Les cadres de cet onglet s'empilent tous dans la
   meme colonne : un chiffre unique les separe, et on ne peut plus en oublier
   un — c'est ainsi que « Ajouter un ami » s'est retrouve colle au cadre des
   compagnons (2.75.5). */
:root { --so-ecart: 14px; }

/* --------------------------------------------------- l'en-tete des pages */

/* CELUI DES MAQUETTES : le rond de bois du retour a gauche, le titre dore au
   centre avec sa brindille, l'embleme de la page a droite. La grille a trois
   colonnes de meme largeur garde le titre VRAIMENT centre, quelle que soit
   la longueur du mot. */
.so-entete {
  display: grid; grid-template-columns: 46px minmax(0, 1fr) 46px; align-items: center;
  gap: 8px; margin: 0 0 18px;
}
.so-entete-t { text-align: center; min-width: 0; }
.so-entete-t h2 {
  margin: 0; font-family: var(--display); font-size: clamp(1.2rem, 5.5vw, 1.65rem); line-height: 1.15;
  color: var(--gold); text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
}
.so-brindille { width: 62px; height: 12px; color: var(--moss); margin-top: 3px; }
.so-coin {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bois-grad); border: 2px solid var(--wood-1); color: var(--parch);
  cursor: pointer; box-shadow: var(--shadow-2);
}
.so-coin svg { width: 24px; height: 24px; }
.so-coin:active { transform: scale(0.94); }
button.so-embleme { cursor: pointer; }
.so-embleme { border-color: var(--moss); color: var(--moss); cursor: default; }
.so-vide-coin { border: 0; background: none; box-shadow: none; }

/* Le titre d'une section, et a droite soit un compte, soit « Tout voir ».
   Pas d'eyebrow, pas de filet — la planche dessous suffit a separer. */
.so-sec {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin: 18px 4px 8px; font-family: var(--display); font-size: 1.1rem;
  font-weight: 700; color: var(--parch);
}
.so-sec i { font-style: normal; font-size: 0.74rem; color: var(--gold); }
.so-tout {
  background: none; border: 0; cursor: pointer; color: var(--gold);
  font-size: 0.78rem; text-decoration: underline; display: flex;
  align-items: center; gap: 3px; padding: 0;
}
.so-tout svg { width: 13px; height: 13px; }

/* Le rond a picto qui ouvre un encart (Ajouter un ami, l'astuce, la
   progression) : le meme partout, vert sur bois sombre. */
.so-rond-ic {
  flex: none; display: grid; place-items: center; width: 46px; height: 46px;
  border-radius: 50%; border: 2px solid var(--moss-deep);
  background: rgba(0, 0, 0, 0.22); color: var(--moss);
}
.so-rond-ic svg { width: 24px; height: 24px; }

/* -------------------------------------------------------------- le ruban */

.so-ruban { display: flex; align-items: center; padding: 16px 4px; margin-bottom: var(--so-ecart); }
.so-ruban > div {
  flex: 1; min-width: 0; display: grid; grid-template-columns: auto auto;
  justify-content: center; align-items: center; column-gap: 8px; position: relative;
}
.so-ruban > div + div::before {
  content: ''; position: absolute; left: 0; top: 10%; height: 80%;
  border-left: 1px solid rgba(226, 201, 141, 0.22);
}
.so-ruban svg { width: 25px; height: 25px; color: var(--moss); grid-row: 1 / 3; }
.so-ruban .so-point { grid-row: 1 / 3; margin-inline: 3px; }
.so-ruban b { font-family: var(--display); font-size: 1.6rem; line-height: 1.1; color: var(--parch); }
.so-ruban span { grid-column: 2; font-size: 0.72rem; color: var(--parch-dim); }

/* LES TROIS PORTES ONT QUITTE LE BAS DE LA PAGE (2.75.8) : le classement,
   l'activite et les succes sont des rubriques du ruban, au-dessus de la
   barre du bas (`.sm-item`, css/hub.css). Leur pastille les a suivies. */

/* ----------------------------------------------------------- la recherche */

.so-chercher { position: relative; margin-bottom: var(--so-ecart); }
.so-chercher input {
  width: 100%; padding: 12px 14px 12px 42px; border-radius: 999px;
  background: rgba(0, 0, 0, 0.3); border: 1.5px solid var(--moss-deep);
  color: var(--parch); font-size: 16px;
}
.so-chercher input::placeholder { color: var(--parch-faint); }
.so-loupe {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--parch-faint); pointer-events: none;
}
.so-loupe svg { width: 18px; height: 18px; display: block; }

/* -------------------------------------------------------- ajouter un ami */

/* L'ECART ENTRE DEUX CADRES, UN SEUL CHIFFRE POUR TOUTE LA PAGE (2.75.5) :
   « Ajouter un ami » n'avait aucune marge basse et son cadre TOUCHAIT celui
   des compagnons — deux bordures d'or collees l'une a l'autre ne font plus
   deux planches mais une boite fendue. Tout ce qui s'empile dans l'onglet
   tient desormais le meme ecart. */
.so-ajouter, .so-vide { margin-bottom: var(--so-ecart); }

.so-ajouter-t { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.so-ajouter-t b {
  display: block; font-family: var(--display); font-size: 1.05rem; color: var(--gold);
}
.so-ajouter-t p { margin: 2px 0 0; }
.so-champ { display: flex; gap: 8px; }
.so-champ input {
  flex: 1; min-width: 0; padding: 11px 13px; border-radius: 10px;
  background: rgba(0, 0, 0, 0.3); border: 2px solid var(--wood-1);
  color: var(--parch); font-size: 16px;
}
.so-champ input::placeholder { letter-spacing: 0; color: var(--parch-faint); }

/* MON CODE, GRAVE. Le seul endroit ou la typographie force la voix : on le
   dicte, on le recopie, il doit se lire de loin et sans ambiguite. */
.so-moncode {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 14px; padding-top: 12px; text-align: left;
  border-top: 1px solid rgba(226, 201, 141, 0.2);
}
.so-moncode-id > span {
  display: block; font-size: 0.68rem; color: var(--parch-dim); margin-bottom: 2px;
}
.so-moncode-id > b {
  display: block; font-family: var(--display); font-size: 1.2rem;
  letter-spacing: 0.16em; color: var(--gold);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
}
.so-moncode-actes { display: flex; gap: 6px; }
.so-moncode-actes .btn { min-height: 44px; padding: 7px 9px; font-size: 0.7rem; }
.so-moncode-actes .btn svg { width: 15px; height: 15px; vertical-align: -2px; }

/* --------------------------------------------------------- une ligne d'ami */

.so-ami, .so-inv { align-items: center; gap: 10px; padding: 12px; margin-bottom: 10px; }
.so-ami .hub-ligne-txt b, .so-inv .hub-ligne-txt b { color: var(--parch); font-size: 0.95rem; }
.so-ami .hub-ligne-txt span, .so-inv .hub-ligne-txt span { display: block; font-size: 0.76rem; color: var(--parch-dim); }
.so-compagnon { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 32px; gap: 3px 8px; }
.so-compagnon .so-face-wrap { grid-column: 1; grid-row: 1 / 3; }
.so-compagnon .hub-ligne-txt { grid-column: 2; grid-row: 1; }
.so-compagnon > .so-etat { grid-column: 2 / 4; grid-row: 2; font-size: 0.74rem; line-height: 1.4; }
.so-compagnon > .btn { grid-column: 3; grid-row: 1; min-height: 36px; font-size: 0.72rem; padding: 7px 10px; }
.so-compagnon > .so-menu { grid-column: 4; grid-row: 1 / 3; width: 32px; height: 44px; }
.so-compagnon > .so-menu svg { transform: rotate(90deg); }
/* LE TEXTE CEDE AVANT LES BOUTONS. « Vous a invité • il y a 2 min » passait
   a la ligne et poussait « Accepter » hors du cadre : le pseudo et sa
   mention se coupent, les deux gestes restent entiers. */
.so-ami .hub-ligne-txt, .so-inv .hub-ligne-txt { min-width: 0; }
.so-ami .hub-ligne-txt b, .so-inv .hub-ligne-txt b,
.so-ami .hub-ligne-txt span, .so-inv .hub-ligne-txt span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* LES DEUX GESTES D'UNE INVITATION passent A LA LIGNE plutot que de mordre
   sur le pseudo : sur un ecran etroit ou devant un nom long, « Accepter »
   recouvrait le texte. Ils restent a droite tant qu'ils tiennent. */
.so-inv { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; }
.so-inv > .chip { grid-column: 2; justify-self: start; }
.so-inv > .so-menu { grid-column: 3; grid-row: 1 / 3; }
.so-inv-actes { grid-column: 2 / -1; display: flex; gap: 8px; }
.so-inv-actes .btn { min-height: 40px; }
.so-inv-actes .btn { flex: none; padding-left: 14px; padding-right: 14px; }
.so-ami .btn { flex: none; padding-left: 12px; padding-right: 12px; }
.so-face {
  width: 44px; height: 44px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--gold-deep); background: var(--bois-2); flex: none;
}
.so-face.grande { width: 92px; height: 92px; border-width: 3px; }
.so-face-wrap { position: relative; display: inline-block; flex: none; line-height: 0; }

.so-point {
  position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--parch-faint);
  border: 2px solid var(--bois-1);
}
.so-face-wrap.grande .so-point { width: 18px; height: 18px; right: 4px; bottom: 4px; }
/* Sur la grande tete, l'absence ne se pastille pas : la ligne dessous le dit
   deja en toutes lettres, et un gros rond gris n'ajoute qu'un deuil. */
.so-face-wrap.grande .so-point.hors_ligne { display: none; }
.so-point.en_ligne { background: var(--moss); }
.so-point.en_aventure { background: #e0a24a; }
/* SEULE L'AVENTURE BAT. « En ligne » est un etat, « en aventure » est
   quelque chose qui se passe maintenant : c'est la seule chose de l'ecran
   qui bouge sans qu'on l'ait touchee. */
@media (prefers-reduced-motion: no-preference) {
  .so-point.en_aventure { animation: so-bat 2.4s ease-in-out infinite; }
}
@keyframes so-bat {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224, 162, 74, 0.55); }
  50% { box-shadow: 0 0 0 6px rgba(224, 162, 74, 0); }
}

/* Le ruban du ruban : dans le ruban des compteurs, le point n'est pas
   posé sur un visage — il se remet dans le flux. */
.so-ruban .so-point { position: static; width: 14px; height: 14px; border-width: 0; }

.so-etat { color: var(--parch-dim); }
.so-etat.en_aventure { color: #e8bd80; }
.so-etat.en_ligne { color: var(--moss-soft); }

.so-menu {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: transparent; border: 0; color: var(--parch-faint);
  display: grid; place-items: center; cursor: pointer;
}
.so-menu svg { width: 18px; height: 18px; }
.so-menu:active { background: rgba(0, 0, 0, 0.25); }

.so-menu-feuille { text-align: center; }
.so-menu-feuille .btn { margin-bottom: 9px; }
.so-menu-qui { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 16px; }
.so-menu-qui b { font-family: var(--display); font-size: 1.15rem; color: var(--gold); }

/* ----------------------------------------------------------- l'etat vide */

.so-vide { text-align: center; padding: 20px 16px; }
.so-vide img {
  width: 120px; height: 120px; object-fit: cover; border-radius: 50%;
  border: 3px solid var(--gold-deep); margin-bottom: 12px;
}
.so-vide b { display: block; font-family: var(--display); font-size: 1.1rem; color: var(--gold); }
.so-vide p { margin: 6px 0 14px; }
/* LE CODE EN GRAND, dans le cadre vide : tant qu'on n'a pas d'ami, c'est la
   seule chose que la page demande — le dicter ou le passer. Le `clamp` le
   garde sur une ligne sur un 320 px, ou six lettres tres espacees debordent
   vite. */
.so-grandcode {
  font-family: var(--display); font-size: clamp(1.5rem, 7.5vw, 2rem);
  letter-spacing: 0.26em; text-indent: 0.26em; color: var(--gold);
  margin-bottom: 16px; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
}
.so-vide-actes { display: flex; gap: 8px; justify-content: center; }
.so-vide-actes .btn { flex: 1; min-height: 44px; max-width: 170px; }
.so-vide-actes .btn svg { width: 16px; height: 16px; vertical-align: -3px; }

.so-sans-compte { text-align: center; padding: 22px 16px; }
.so-sans-ic {
  display: inline-grid; place-items: center; width: 62px; height: 62px;
  border-radius: 50%; border: 2px solid var(--gold-deep);
  background: rgba(0, 0, 0, 0.22); color: var(--moss); margin-bottom: 12px;
}
.so-sans-ic svg { width: 30px; height: 30px; }
.so-sans-compte b {
  display: block; font-family: var(--display); font-size: 1.15rem; color: var(--gold);
}
.so-sans-compte p { margin: 8px 0 14px; }
.so-sans-compte #so-porte { margin-top: 4px; }

.so-astuce { display: flex; gap: 12px; align-items: center; margin-top: 16px; }
.so-astuce p { margin: 0; font-size: 0.8rem; color: var(--parch-dim); }
.so-astuce b { color: var(--gold); }
.so-vieux { margin: 12px 0 0; }

/* -------------------------------------------------------------- la fiche */

.so-fiche .so-face-wrap { margin-bottom: 8px; }
.so-fiche-sous { margin: 2px 0 8px; font-size: 0.82rem; color: var(--parch-dim); }

.so-niveau {
  display: flex; align-items: center; gap: 9px; margin: 8px auto 6px;
  max-width: 320px; font-size: 0.72rem; color: var(--parch-dim);
}
.so-jauge {
  flex: 1; height: 8px; border-radius: 4px; background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--wood-1); overflow: hidden;
}
.so-jauge i {
  display: block; height: 100%; background: linear-gradient(90deg, var(--moss-deep), var(--moss));
}

.so-chiffres { display: flex; padding: 14px 6px; margin-top: 10px; }
.so-chiffres > div { flex: 1; text-align: center; }
.so-chiffres b { display: block; font-family: var(--display); font-size: 1.3rem; color: var(--parch); }
.so-chiffres span { font-size: 0.66rem; color: var(--parch-dim); }

/* LES DEUX BARRES DOS A DOS. Le nom de la mesure est AU MILIEU, entre les
   deux barres : c'est l'axe autour duquel on compare, et le regard n'a
   qu'un aller-retour a faire. */
.so-cmp-l {
  display: grid; grid-template-columns: 48px 1fr 48px; align-items: center;
  gap: 8px; margin-bottom: 9px;
}
.so-cmp-l > b {
  font-family: var(--display); font-size: 0.88rem; color: var(--parch-dim);
  font-weight: 400; text-align: right;
}
.so-cmp-l > b:last-child { text-align: left; }
.so-cmp-l > b.haut { color: var(--parch); font-weight: 700; }
.so-cmp-barres { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; }
.so-cmp-barres i {
  height: 9px; border-radius: 4px; display: block;
}
.so-cmp-barres i.moi { justify-self: end; background: var(--moss-deep); }
.so-cmp-barres i.lui { justify-self: start; background: var(--gold-deep); }
.so-cmp-barres span { font-size: 0.66rem; color: var(--parch-dim); white-space: nowrap; }
.so-cmp p { margin: 10px 0 0; }

.so-medailles { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
/* LE MEDAILLON : l'image gravee (`assets/succes/`), et son picto DESSOUS.
   Le repli ne se montre que si l'image manque (`.sans-image`, posee par son
   propre `onerror`) — un succes ajoute au catalogue avant d'avoir ete dessine
   garde ainsi un visage, au lieu d'un carre vide. */
.so-medaille {
  position: relative; display: grid; place-items: center;
  width: 52px; height: 52px; flex: none;
}
.so-med-img { width: 100%; height: 100%; display: block; }
.so-med-repli {
  position: absolute; inset: 0; display: none; place-items: center;
  border-radius: 50%; color: var(--gold);
  background: radial-gradient(circle at 34% 30%, var(--bois-2), var(--bois-1));
  border: 2px solid var(--gold-deep);
}
.so-medaille.sans-image .so-med-img { display: none; }
.so-medaille.sans-image .so-med-repli { display: grid; }
.so-med-repli svg { width: 50%; height: 50%; }

.so-lieu { margin-bottom: 12px; }
.so-lieu > b { font-family: var(--display); font-size: 0.98rem; color: var(--gold); }
.so-lieu > i { font-style: normal; font-size: 0.72rem; color: var(--parch-dim); margin-left: 6px; }
.so-parcours { margin-top: 6px; align-items: center; }
.so-parcours svg { width: 18px; height: 18px; color: var(--parch-faint); flex: none; }

.so-communs { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.so-commun {
  background: none; border: 0; cursor: pointer; color: var(--parch-dim);
  display: flex; flex-direction: column; align-items: center; gap: 5px; width: 66px;
}
.so-commun span {
  font-size: 0.66rem; max-width: 66px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}

.so-actions { margin-top: 18px; }
.so-actions .btn { margin-bottom: 9px; }

/* ------------------------------------------------------ la confidentialite

   TROIS VOLETS QU'ON FAIT GLISSER (2.99.5, js/social/60-confidentialite.js) :
   un rail a defilement aimante, pas un carrousel en JS — le doigt, la molette
   et le clavier le font glisser sans une ligne de geste. Les onglets ne font
   que dire ou l'on est, et y emmener. */

.so-conf > p { margin: 4px 0 10px; }
.so-conf-onglets {
  display: flex; gap: 4px; padding: 3px; margin: 0 0 12px;
  border-radius: 999px; background: rgba(0, 0, 0, 0.3); border: 1px solid var(--wood-1);
}
.so-conf-onglets button {
  flex: 1; min-width: 0; padding: 7px 4px; border: 0; border-radius: 999px; cursor: pointer;
  background: none; color: var(--parch-dim); font: inherit; font-size: 0.74rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.so-conf-onglets button.on { background: var(--gold); color: #2a1a08; }

.so-conf-volets {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain; scrollbar-width: none;
  margin: 0 -4px; align-items: flex-start;
}
.so-conf-volets::-webkit-scrollbar { display: none; }
.so-conf-volet {
  flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 4px 4px;
}
/* Cinq tuiles dans « Ce que je montre », trois chez le cartographe : la
   derniere, seule sur sa ligne, prend la largeur plutot que de laisser un
   trou. */
.so-conf-volet > .so-tuile:last-of-type:nth-of-type(odd) { grid-column: 1 / -1; }
.so-conf-volet > .so-tuile:last-of-type:nth-of-type(odd) .so-tuile-illu { aspect-ratio: 3 / 1.25; }
.so-conf-note {
  grid-column: 1 / -1; margin: 2px 4px 0; text-align: center;
  font-size: 0.7rem; color: var(--parch-dim);
}

/* LA TUILE : la peinture, son titre pose dessus, le choix en dessous. */
.so-tuile {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.28); border: 1px solid rgba(226, 201, 141, 0.2);
  box-shadow: var(--bevel);
}
.so-tuile-illu {
  position: relative; aspect-ratio: 3 / 2;
  background: var(--illu) center / cover no-repeat;
  transition: filter 0.4s var(--ease);
}
.so-tuile-illu::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 38%, rgba(12, 8, 3, 0.88) 100%);
}
.so-tuile-illu b {
  position: absolute; z-index: 1; left: 8px; right: 8px; bottom: 6px;
  font-size: 0.78rem; font-weight: 700; line-height: 1.2; color: var(--parch);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}
/* PLUS PERSONNE NE VOIT : l'image s'endort, comme un calque eteint. */
.so-tuile.dort .so-tuile-illu { filter: saturate(0.25) brightness(0.55); }
.so-tuile.dort { border-color: rgba(226, 201, 141, 0.1); }

/* LE SEGMENT, et pas un interrupteur : « oui / non » et « tous / amis /
   personne » se lisent de la meme facon, et l'on voit ce qu'on n'a PAS
   choisi — un interrupteur ne montre que l'etat, jamais l'alternative. */
.so-seg {
  display: flex; margin: 7px; border-radius: 999px; overflow: hidden;
  border: 1px solid var(--wood-1); background: rgba(0, 0, 0, 0.3);
}
.so-seg button {
  flex: 1; min-width: 0; padding: 7px 2px; background: none; border: 0; cursor: pointer;
  color: var(--parch-dim); font: inherit; font-size: 0.68rem; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
/* Trois choix sous une demi-largeur : un cran plus petit, sans rogner. */
.so-seg button:first-child:nth-last-child(3),
.so-seg button:first-child:nth-last-child(3) ~ button { font-size: 0.62rem; padding: 7px 1px; }
.so-seg button + button { border-left: 1px solid var(--wood-1); }
.so-seg button.on { background: var(--moss-deep); color: #fff; font-weight: 600; }

/* La planche « Confidentialite » du profil : une rangee, un chevron. */
.hub-conf {
  display: flex; align-items: center; gap: 12px; width: 100%;
  margin-top: 12px; text-align: left; cursor: pointer;
}
.hub-conf > span { flex: none; color: var(--moss); }
.hub-conf svg { width: 24px; height: 24px; }
.hub-conf-txt { flex: 1; min-width: 0; }
.hub-conf-txt b { display: block; font-family: var(--display); font-size: 1rem; color: var(--gold); }
.hub-conf-txt i { font-style: normal; font-size: 0.72rem; color: var(--parch-dim); }
.hub-conf .hub-chev { flex: none; width: 15px; height: 15px; color: var(--parch-faint); }

/* ------------------------------------------------------------- l'ecran large */

/* Sur une tablette, les deux colonnes de la fiche : les chiffres et la
   comparaison se lisent cote a cote plutot que de s'etirer sur 700 px. */
@media (min-width: 720px) {
  .so-cmp-l { grid-template-columns: 64px 1fr 64px; }
}

/* ============================================================ LE CLASSEMENT

   La maquette (`temp/highscore.png`) : le segment a trois positions, le
   podium a lauriers dont le premier est surelevé, « Votre position », puis
   les rangees ou LA MIENNE EST VERTE — c'est celle qu'on cherche du regard,
   et la seule couleur de la liste. */

.so-vues { display: flex; padding: 6px; gap: 4px; }
.so-vue {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px;
  padding: 11px 4px; border: 0; border-radius: 999px; background: none;
  color: var(--parch-dim); font-size: 0.78rem; cursor: pointer; white-space: nowrap;
}
.so-vue svg { width: 18px; height: 18px; }
.so-vue.on {
  background: linear-gradient(180deg, var(--moss-deep), #23603a);
  color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.so-podium { margin-top: 12px; padding-bottom: 6px; }
.so-podium.vide { text-align: center; padding: 20px 16px; }
.so-podium.vide b { display: block; font-family: var(--display); color: var(--gold); }
/* LE TITRE PUIS SA LIGNE, l'un sous l'autre : cote a cote, « Podium de vos
   amis » passait a deux lignes et poussait le reste. */
.so-podium-t { margin-bottom: 14px; }
.so-podium-t b { font-family: var(--display); font-size: 1.12rem; color: var(--gold); }
.so-podium-t b { display: block; }
.so-podium-t i {
  font-style: normal; font-size: 0.68rem; color: var(--parch-dim);
  display: inline-flex; align-items: center; gap: 4px; margin-top: 2px;
}
.so-podium-t svg { width: 13px; height: 13px; color: var(--moss); }

/* Trois colonnes calees en BAS : c'est la hauteur des socles qui dit le
   rang, pas un chiffre qu'on aurait a lire. */
.so-marches { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 6px; }
.so-marche {
  position: relative; display: flex; flex-direction: column; align-items: center;
  background: none; border: 0; cursor: pointer; padding: 0;
}
.so-marche .so-face {
  width: 78px; height: 78px; border-width: 3px; position: relative; z-index: 2;
}
.so-marche.r1 .so-face { width: 96px; height: 96px; border-color: var(--gold); }
.so-marche.r2 .so-face { border-color: #c9cdd2; }
.so-marche.r3 .so-face { border-color: #b98a5c; }
.so-laurier {
  position: absolute; top: 14px; left: -2px; width: 26px; color: #d8dde2;
  z-index: 1; pointer-events: none;
}
.so-laurier.droite { left: auto; right: -2px; transform: scaleX(-1); }
.so-laurier svg { width: 100%; height: auto; display: block; }
.so-marche.r1 .so-laurier { color: var(--gold); top: 18px; width: 30px; }
.so-marche.r3 .so-laurier { color: #b98a5c; }
.so-rang {
  position: relative; z-index: 3; margin-top: -16px; width: 32px; height: 32px;
  border-radius: 50%; display: grid; place-items: center; font-style: normal;
  font-family: var(--display); font-size: 0.95rem; color: #2a1d10;
  background: linear-gradient(180deg, #e8eaec, #a9b0b6); border: 2px solid var(--bois-1);
}
.so-marche.r1 .so-rang { background: linear-gradient(180deg, #f2d98f, var(--gold-deep)); }
.so-marche.r3 .so-rang { background: linear-gradient(180deg, #d3a173, #9a6b40); }
.so-socle {
  margin-top: -14px; padding: 22px 6px 12px; width: 100%; text-align: center;
  background: var(--bois-grad); border: 2px solid var(--wood-1);
  border-radius: 12px 12px 6px 6px;
}
.so-marche.r1 .so-socle {
  padding-top: 26px; padding-bottom: 20px; border-color: var(--gold-deep);
}
.so-socle b {
  display: block; font-family: var(--display); font-size: 0.92rem; color: var(--parch);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.so-socle span { font-family: var(--display); font-size: 1rem; color: var(--moss); }
.so-marche.absente { visibility: hidden; }

.so-maplace { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.so-maplace-txt { flex: 1; min-width: 0; }
.so-maplace-txt > b {
  display: block; font-family: var(--display); font-size: 1.05rem; color: var(--gold);
}
.so-maplace-txt span {
  font-size: 0.8rem; color: var(--parch-dim); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; display: block;
}
.so-maplace .btn { padding-left: 14px; padding-right: 14px; font-size: 0.82rem; }
.so-maplace-txt span b { color: var(--parch); }
.so-maplace .btn { flex: none; }

.so-rangee { align-items: center; gap: 10px; }
.so-rangee.moi {
  background: linear-gradient(180deg, rgba(47, 122, 66, 0.55), rgba(30, 80, 45, 0.55));
  border-color: var(--moss);
}
.so-place {
  flex: none; width: 26px; text-align: center; font-family: var(--display);
  font-size: 1.05rem; color: var(--parch-dim);
}
.so-rangee.moi .so-place { color: var(--moss-soft); }
.so-nom {
  flex: 1; min-width: 0; font-weight: 600; font-size: 0.95rem; color: var(--parch);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.so-pts { flex: none; font-size: 0.85rem; color: var(--parch-dim); }
.so-tend { flex: none; }
.so-tend svg { width: 14px; height: 14px; }

/* ============================================================== L'ACTIVITE */

.so-filtres { display: flex; gap: 7px; overflow-x: auto; padding: 2px 0 6px; margin-bottom: 4px; }
.so-filtres::-webkit-scrollbar { display: none; }
/* QUATRE PASTILLES QUI TIENNENT DANS LA LARGEUR. Elles defilaient a
   l'horizontale et la derniere se lisait a moitie — un filtre coupe ne
   s'utilise pas. */
.so-filtre {
  flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center;
  justify-content: center; gap: 5px;
  padding: 9px 8px; border-radius: 999px; cursor: pointer;
  background: var(--bois-grad); border: 2px solid var(--wood-1);
  color: var(--parch-dim); font-size: 0.74rem; white-space: nowrap;
}
.so-filtre svg { width: 14px; height: 14px; flex: none; }
.so-filtre.on {
  background: linear-gradient(180deg, var(--moss-deep), #23603a);
  border-color: var(--moss); color: #fff;
}

.so-evt { align-items: center; gap: 10px; }
/* CE QU'ON N'A PAS ENCORE LU porte un trait vert a gauche, et rien d'autre :
   un fond different ferait deux listes la ou il n'y en a qu'une. */
.so-evt.neuf { border-left: 3px solid var(--moss); }
.so-evt-txt {
  font-weight: 500; font-size: 0.86rem; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.so-evt-txt b { color: var(--gold); font-weight: 700; }
.so-evt-txt i { font-style: italic; color: var(--parch); }
.so-evt .hub-ligne-txt span { display: flex; align-items: center; gap: 4px; margin-top: 3px; }
.so-evt .hub-ligne-txt svg { width: 12px; height: 12px; }
.so-evt .btn { flex: none; }
.btn.gold {
  background: linear-gradient(180deg, #b3934f, #7d6432); border-color: var(--gold-deep);
  color: #2a1d10;
}

/* ================================================================ LES SUCCES */

.so-anneau { width: 22px; height: 22px; color: var(--moss); }

.so-progress { margin-top: 12px; }
.so-progress-t { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; }
.so-progress-t > div { flex: 1; min-width: 0; }
.so-progress-t b {
  display: block; font-family: var(--display); font-size: 1.05rem; color: var(--gold);
}
.so-progress-t i { font-style: normal; font-size: 0.72rem; color: var(--parch-dim); }
.so-progress p { margin: 9px 0 0; }

.so-jauge.grande { height: 14px; border-radius: 7px; }
.so-jauge.petite { display: block; width: 100%; height: 7px; border-radius: 4px; margin: 8px 0 4px; }

/* LA GRILLE : deux par rangee, chacune de meme hauteur — des cartes qui se
   decalent d'une ligne a l'autre feraient un damier. */
.so-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.so-carte {
  position: relative; display: flex; flex-direction: column; align-items: center;
  min-width: 0; gap: 12px; padding: 16px 10px 14px; text-align: center; cursor: pointer;
  background: var(--bois-grad); border: 2px solid var(--gold-deep);
  border-radius: var(--radius); box-shadow: var(--shadow-2); color: var(--parch);
}
.so-carte.prise { border-color: var(--gold-deep); }
.so-carte.rare.prise { border-color: var(--gold); box-shadow: var(--shadow-2), var(--glow-gold); }
.so-carte-art { position: relative; display: block; flex: none; }
.so-carte-art .so-medaille { width: 96px; height: 96px; }
.so-carte-texte { display: flex; flex-direction: column; align-items: center; gap: 7px; flex: 1; width: 100%; min-width: 0; }
.so-carte-texte > b { min-height: 2.4em; display: grid; align-items: center; line-height: 1.2; }
.so-carte-texte > i { flex: 1; }
.so-carte .so-verrou { color: var(--parch-dim); font-size: 0.68rem; }
.so-aucun { grid-column: 1 / -1; text-align: center; color: var(--parch-dim); }
.so-carte b { font-family: var(--display); font-size: 0.9rem; color: var(--parch); }
.so-carte.prise b { color: var(--parch); }
.so-carte i { font-style: normal; font-size: 0.7rem; color: var(--parch-dim); line-height: 1.25; }
.so-carte .chip { margin-top: 4px; }
/* Dans une carte verticale, la jauge garde sa hauteur au lieu de se tasser. */
.so-carte .so-jauge { flex: none; }
.so-avance { font-size: 0.68rem; color: var(--parch-faint); }
.so-coche {
  position: absolute; top: 0; right: -3px; width: 25px; height: 25px;
  border-radius: 50%; display: grid; place-items: center;
  background: var(--bois-3); border: 1.5px solid var(--parch-dim);
  color: var(--parch-faint);
}
.so-carte.prise .so-coche { border-color: var(--moss); color: var(--moss); }
.so-coche svg { width: 13px; height: 13px; }
/* UN SUCCES VERROUILLE EST DE PIERRE, pas d'ombre : on doit reconnaitre son
   symbole pour avoir envie d'aller le chercher. Assombri, il disparaissait
   sur le bois de la carte. */
.so-medaille.eteinte { filter: grayscale(1) brightness(0.9); opacity: 0.8; }

/* ------------------------------------------- les paliers d'une famille (2.75.9)

   QUATRE JETONS SOUS LE NOM : bronze, argent, or, diamant. Pris, ils
   prennent la couleur du metal ; a prendre, ils restent des creux. On lit
   d'un coup d'oeil ou l'on en est et combien il reste devant — ce qu'une
   phrase ne donne qu'en la lisant. */
.so-paliers { display: flex; gap: 5px; justify-content: center; }
.so-pal {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(226, 201, 141, 0.20);
}
.so-pal.pris { border-color: rgba(255, 255, 255, 0.45); box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); }
.so-pal.bronze.pris  { background: linear-gradient(180deg, #d59a63, #94552a); }
.so-pal.argent.pris  { background: linear-gradient(180deg, #eef2f5, #9aa7b2); }
.so-pal.or.pris      { background: linear-gradient(180deg, #ffe38a, #c8901d); }
.so-pal.diamant.pris { background: linear-gradient(180deg, #e8fbff, #7fc4e8); }

/* L'ECHELLE, dans la feuille : les quatre crans l'un sous l'autre. Celui
   qu'on tient porte son jour, les suivants ce qu'ils demandent.
   `.so-cran`, et surtout PAS `.so-marche` : le podium du classement porte
   deja ce nom-la, en colonne — la regle d'a cote aurait couche celle-ci sans
   rien dire (une heure perdue dessus). */
.so-echelle { display: flex; flex-direction: column; gap: 8px; width: 100%; margin: 14px 0 4px; }
.so-cran {
  display: flex; flex-direction: row; align-items: center; gap: 10px; text-align: left;
  padding: 8px 10px; border-radius: 12px;
  background: rgba(12, 9, 5, 0.45); border: 1px solid rgba(201, 164, 104, 0.22);
}
.so-cran.pris { border-color: rgba(226, 201, 141, 0.5); background: var(--bois-grad); }
.so-cran-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.so-cran-txt b { font-family: var(--display); font-size: 0.9rem; color: var(--gold); }
.so-cran-txt i { font-style: normal; font-size: 0.74rem; color: var(--parch-dim); }
.so-cran-txt .so-jauge { margin: 2px 0 0; }
.so-cran > svg { width: 18px; height: 18px; flex: none; color: var(--parch-faint); }
.so-cran.pris > svg { color: var(--moss); }
.so-medaille.petite { width: 42px; height: 42px; }
.so-medaille.geante { width: 104px; height: 104px; margin-inline: auto; }

.so-prochain { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.so-prochain-t { flex: 1; min-width: 0; }
.so-prochain-t b {
  display: block; font-family: var(--display); font-size: 1.05rem; color: var(--gold);
}
.so-prochain-t i { font-style: normal; font-size: 0.74rem; color: var(--parch-dim); }
.so-prochain .btn { flex: none; }

.so-feuille-succes { text-align: center; }
.so-feuille-succes h2 { margin: 12px 0 6px; }
.so-feuille-succes .chip { margin-bottom: 8px; }
.so-feuille-succes p { margin: 8px 0 14px; }
.so-obtenu-le { color: var(--moss-soft); font-size: 0.85rem; }

/* Le social profite de l'ecran large ; les cartes gardent deux colonnes,
   comme la reference, avec le medaillon a gauche du texte. */
@media (min-width: 760px) {
  #screen-hub.onglet-social { width: min(100%, 860px); }
  #screen-hub.onglet-social .hub-scroll { max-width: 752px; }
  .onglet-social #hub-body { max-width: 720px; margin-inline: auto; }
  .onglet-social .so-entete { margin-bottom: 24px; }
  .onglet-social .so-inv { grid-template-columns: 48px minmax(0, 1fr) auto; }
  .onglet-social .so-inv-actes { grid-column: 3; grid-row: 1; }
  .onglet-social .so-inv > .chip { grid-column: 3; grid-row: 1; margin-right: 38px; }
  .onglet-social .so-inv > .so-menu { grid-column: 3; justify-self: end; }
  .onglet-social .so-compagnon { grid-template-columns: 48px minmax(0, 1fr) auto 44px; }
  .onglet-social .so-compagnon > .btn { grid-row: 1 / 3; min-height: 44px; }
  .onglet-social .so-compagnon > .so-etat { grid-column: 2; }
  .onglet-social .so-carte { flex-direction: row; text-align: left; padding: 18px; }
  .onglet-social .so-carte-texte { align-items: flex-start; }
  .onglet-social .so-carte-texte > b { min-height: 0; }
  .onglet-social .so-ruban { padding-block: 20px; }
}
@media (max-width: 359px) {
  .so-moncode { flex-wrap: wrap; }
  .so-moncode-actes { margin-left: auto; }
  .so-compagnon { grid-template-columns: 38px minmax(0, 1fr) auto 28px; gap: 4px; padding: 10px 8px; }
  .so-compagnon .so-face { width: 38px; height: 38px; }
  .so-compagnon .btn { padding-inline: 7px; }
  .so-ruban > div { column-gap: 5px; }
  .so-ruban svg { width: 20px; height: 20px; }
  .so-ruban span { font-size: 0.66rem; }
}
.so-coin:focus-visible, .so-porte:focus-visible, .so-carte:focus-visible,
.so-menu:focus-visible, .so-filtre:focus-visible, .so-tout:focus-visible {
  outline: 2px solid var(--moss); outline-offset: 3px;
}
/* Le fond floute reste calme derriere les noms, comme sur les maquettes. */
#screen-hub.onglet-social .home-bg {
  background-image: url('../assets/bg/modes-fond.webp');
}