/* ===================================================================================================================
 * LIVEROK — progression : rang, forces, hauts faits, comparaison, parrainage.
 *
 * L'inspiration est celle d'une fiche de personnage de jeu de rôle, mais le dessin reste celui du site : parchemin
 * léger, corail, menthe, coins très arrondis. Un habillage « gamer » plaqué sur une plateforme de sorties entre amis
 * aurait l'air d'une application différente collée au milieu du profil — et c'est exactement ce qu'il ne faut pas.
 *
 * Une seule couleur par catégorie, réutilisée PARTOUT (barres de force, pastilles d'accomplissement, hauts faits,
 * duel) : c'est ce qui permet de reconnaître d'un coup d'œil qu'un haut fait appartient à « Transmission » sans avoir
 * à lire quoi que ce soit.
 * ================================================================================================================ */

/* Le bloc porte sa propre marge. Il NE DOIT PAS reprendre la classe `.profile-section` pour l'hériter : product.js
   écrit le formulaire du compte dans `view.querySelector('.profile-section')`, et le bloc, inséré juste avant la vraie
   section, était exactement ce que ce sélecteur trouvait. Il disparaissait donc à la première ouverture du profil,
   silencieusement. */
.xp-block{margin:35px 0;--xp-terrain:#e96d3a;--xp-exploration:#2f7e5f;--xp-transmission:#8a6d1f;--xp-liens:#1c4e80}
.xp-block,.xp-member{--xp-line:var(--line,#e6e2d8);--xp-muted:var(--muted,#6b7c76)}
.xp-heading{font:800 22px 'Baloo 2';margin:0 0 16px}
.xp-title{font:800 12px 'DM Sans';letter-spacing:.7px;text-transform:uppercase;color:var(--xp-muted);margin:26px 0 10px;
  display:flex;align-items:center;gap:8px}
.xp-title small{font:600 11px 'DM Sans';letter-spacing:0;text-transform:none;color:var(--xp-muted);opacity:.85}
.xp-count{font-style:normal;font-size:10px;font-weight:800;padding:2px 7px;border-radius:100px;background:#f2efe8}
.xp-loading,.xp-note{color:var(--xp-muted);font-size:12.5px;line-height:1.6;margin:8px 0}

/* ——— Carte de rang ———
 * L'emblème est volontairement gros : c'est l'objet que les gens montreront à leurs amis. Le fond en dégradé sombre
 * tranche avec le reste de la page — c'est la seule zone qui a le droit de le faire, et c'est ce qui la fait lire en
 * premier. */
.xp-rank{display:grid;grid-template-columns:auto 1fr;gap:14px 18px;align-items:center;
  background:linear-gradient(135deg,#17392d 0%,#245140 60%,#2f7e5f 140%);color:#fff;
  border-radius:22px;padding:20px 22px;position:relative;overflow:hidden}
.xp-rank:after{content:"";position:absolute;inset:auto -40px -60px auto;width:180px;height:180px;border-radius:50%;
  background:rgba(255,255,255,.06);pointer-events:none}
.xp-rank-emblem{font-size:40px;line-height:1;width:66px;height:66px;display:grid;place-items:center;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);border-radius:20px}
.xp-rank-copy{display:grid;gap:2px;min-width:0}
.xp-rank-copy .eyebrow{color:#ffd9c7;font-size:10px}
.xp-rank-copy strong{font:800 24px 'Baloo 2';line-height:1.1}
.xp-rank-copy small{color:rgba(255,255,255,.78);font-size:12px}
.xp-rank-bar{grid-column:1/-1;display:grid;gap:6px}
.xp-rank-bar small{color:rgba(255,255,255,.8);font-size:11.5px}
.xp-rank-bar b{color:#fff}
.xp-rank .xp-bar{background:rgba(255,255,255,.18)}
.xp-rank .xp-bar i{background:linear-gradient(90deg,#ffb38a,#e96d3a)}
.xp-rank.is-compact{padding:14px 16px;border-radius:18px;gap:10px 14px}
.xp-rank.is-compact .xp-rank-emblem{width:48px;height:48px;font-size:28px;border-radius:15px}
.xp-rank.is-compact .xp-rank-copy strong{font-size:18px}

/* Une seule barre pour tout l'écran : rang, force, haut fait à venir. Elles doivent se ressembler, sinon on croit
   qu'elles mesurent des choses différentes. */
.xp-bar{height:9px;border-radius:9px;background:#eee9df;overflow:hidden}
.xp-bar i{display:block;height:100%;border-radius:9px;background:var(--coral,#e96d3a);transition:width .5s ease}

.xp-standing{margin:14px 0 0;font-size:13px;color:var(--xp-muted)}
.xp-standing b{color:var(--ink,#17392d)}

/* ——— Les quatre forces ———
 * La pièce qui garantit que chacun est bon à quelque chose : quatre axes, une couleur chacun, et la meilleure porte
 * une mention. C'est la ligne la plus flatteuse de la page et elle ne coûte rien. */
.xp-strengths{display:grid;gap:12px}
.xp-strength{display:grid;gap:5px}
.xp-strength-head{font:700 13px 'DM Sans';display:flex;align-items:center;gap:7px}
.xp-crown{font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
  padding:2px 8px;border-radius:100px;background:#fdf3d6;color:#8a6d1f}
.xp-strength small{color:var(--xp-muted);font-size:11.5px}
.xp-strength-hint{opacity:.75}
.xp-strength[data-category=terrain] .xp-bar i{background:var(--xp-terrain)}
.xp-strength[data-category=exploration] .xp-bar i{background:var(--xp-exploration)}
.xp-strength[data-category=transmission] .xp-bar i{background:var(--xp-transmission)}
.xp-strength[data-category=liens] .xp-bar i{background:var(--xp-liens)}
.xp-strength.is-best .xp-strength-head{font-weight:800}

/* ——— Prochains hauts faits ———
 * Trois, jamais plus : une liste de quarante objectifs n'en est plus une. Ce sont les plus proches, parce que c'est
 * ce qui est à portée qui fait sortir. */
.xp-goals{display:grid;gap:9px}
.xp-goal{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:center;
  border:1px solid var(--xp-line);border-radius:16px;padding:11px 14px;background:#fff}
.xp-goal-emblem{grid-row:1/3;font-size:22px;width:40px;height:40px;display:grid;place-items:center;
  background:#fdf3d6;border-radius:13px}
.xp-goal-copy{display:grid;gap:1px;min-width:0}
.xp-goal-copy strong{font:800 14px 'Baloo 2'}
.xp-goal-copy small{color:var(--xp-muted);font-size:11.5px}
.xp-goal .xp-bar{grid-column:2}

/* ——— Le palmarès ———
 * Des chiffres et des mots, jamais un score seul : « 8 sorties organisées » se raconte, « 480 points » non. */
.xp-deeds{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px}
.xp-deed{display:grid;grid-template-columns:auto auto 1fr auto;gap:9px;align-items:center;
  border:1px solid var(--xp-line);border-radius:14px;padding:10px 13px;background:#fff}
.xp-deed-emblem{font-size:18px;width:32px;height:32px;display:grid;place-items:center;background:#f7f2e9;border-radius:11px}
.xp-deed b{font:800 17px 'Baloo 2'}
.xp-deed span{font-size:12.5px;color:#3f524c;min-width:0}
.xp-deed i{font-style:normal;font-size:11px;font-weight:800;color:var(--xp-muted);white-space:nowrap}
.xp-deed i em{font-style:normal;display:block;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:#8a6d1f}
.xp-deed[data-category=terrain]{border-left:3px solid var(--xp-terrain)}
.xp-deed[data-category=exploration]{border-left:3px solid var(--xp-exploration)}
.xp-deed[data-category=transmission]{border-left:3px solid var(--xp-transmission)}
.xp-deed[data-category=liens]{border-left:3px solid var(--xp-liens)}
.xp-deeds.is-compact{grid-template-columns:1fr 1fr;gap:6px;margin:12px 0}
.xp-deeds.is-compact .xp-deed{grid-template-columns:auto auto 1fr;padding:7px 10px;border-radius:11px}
.xp-deeds.is-compact .xp-deed b{font-size:14px}
.xp-deeds.is-compact .xp-deed span{font-size:11px}

.xp-badges{display:flex;flex-wrap:wrap;gap:7px}
.xp-badge{font-size:11.5px;font-weight:800;padding:6px 12px;border-radius:100px;background:#f2efe8;color:#3f524c;
  border:1px solid transparent}
.xp-badge[data-category=terrain]{background:#fdeee7;color:#a8431d;border-color:#f3d5c6}
.xp-badge[data-category=exploration]{background:var(--mint-pale,#e8f5ee);color:#20705c;border-color:#c7e6d6}
.xp-badge[data-category=transmission]{background:#fdf3d6;color:#8a6d1f;border-color:#eedfab}
.xp-badge[data-category=liens]{background:#eaf2fb;color:#1c4e80;border-color:#cfe0f2}
.xp-badges.is-compact{margin:10px 0}
.xp-badges.is-compact .xp-badge{font-size:10.5px;padding:4px 9px}

.xp-empty{border:1px dashed var(--xp-line);border-radius:18px;padding:18px 20px;background:#fbf6ee}
.xp-empty p{margin:0 0 6px;font-size:13px;line-height:1.6;color:#455650}
.xp-empty p:last-child{margin:0}

/* ——— Le cercle ———
 * Le SEUL classement nominatif du système : des amis, pas des inconnus. Se comparer à quinze personnes qu'on connaît
 * est un jeu ; se comparer à quinze mille est une humiliation statistique. */
.xp-board{display:grid;gap:6px}
.xp-board-row{display:grid;grid-template-columns:32px 34px 1fr auto;gap:11px;align-items:center;
  border:1px solid var(--xp-line);border-radius:14px;padding:9px 13px;background:#fff}
.xp-board-row.is-me{border-color:var(--coral,#e96d3a);background:#fff7f3}
.xp-board-rank{font:800 15px 'Baloo 2';text-align:center;color:var(--xp-muted)}
.xp-board-row img{width:34px;height:34px;border-radius:50%;object-fit:cover}
.xp-board-name{display:grid;gap:1px;font:700 13px 'DM Sans';min-width:0}
.xp-board-name small{color:var(--xp-muted);font-size:11px;font-weight:600}
.xp-board-row b{font:800 15px 'Baloo 2'}

/* ——— Parrainage ——— */
.xp-referral{border:1px solid var(--xp-line);border-radius:18px;padding:16px 18px;background:#fff}
.xp-referral>p{margin:0 0 12px;font-size:13px;line-height:1.6;color:#455650}
.xp-copy{display:flex;gap:8px;flex-wrap:wrap}
.xp-copy input{flex:1 1 240px;min-width:0;border:1px solid var(--xp-line);border-radius:100px;padding:10px 15px;
  font:600 12px 'DM Sans';background:#fbf6ee}
.xp-referral-count{margin:12px 0 0;font-size:13px}
.xp-referral-count b{font:800 16px 'Baloo 2'}
.xp-waiting{color:var(--xp-muted);font-size:12px}
.xp-filleuls{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.xp-filleul{display:flex;align-items:center;gap:7px;border:1px solid var(--xp-line);background:#fff;cursor:pointer;
  border-radius:100px;padding:4px 11px 4px 4px;font:700 12px 'DM Sans'}
.xp-filleul img{width:26px;height:26px;border-radius:50%;object-fit:cover}
.xp-filleul i{font-style:normal;font-size:11px;color:var(--xp-muted)}
.xp-filleul.is-counted{border-color:var(--mint,#8fd0b4);background:var(--mint-pale,#e8f5ee)}
.xp-filleul.is-counted i{color:#20705c}
.xp-referrer{margin:12px 0 0;font-size:13px;color:#455650}
.xp-declare{display:grid;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid var(--xp-line)}
.xp-declare label{display:grid;gap:6px;font:700 12.5px 'DM Sans'}
.xp-declare input{border:1px solid var(--xp-line);border-radius:100px;padding:10px 15px;font:600 13px 'DM Sans'}
.xp-declare small{color:var(--xp-muted);font-size:11.5px}
.xp-declare button{justify-self:start}

.xp-tariff{margin-top:26px;border-top:1px solid var(--xp-line);padding-top:14px}
.xp-tariff summary{cursor:pointer;font:800 12px 'DM Sans';letter-spacing:.6px;text-transform:uppercase;color:var(--xp-muted)}
.xp-tariff p{font-size:12.5px;line-height:1.65;color:#455650}
.xp-tariff-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:5px}
.xp-tariff-grid div{display:flex;align-items:center;gap:7px;font-size:12px;color:#455650;
  background:#fbf6ee;border-radius:10px;padding:6px 11px}
.xp-tariff-grid b{margin-left:auto;font:800 12px 'Baloo 2';color:var(--coral-dark,#c8451c)}

/* ——— Face-à-face, dans la fiche d'un membre ———
 * Sur quatre axes, il est rare que l'un des deux mène partout : chacun repart avec un terrain où il est devant. Un
 * total unique n'aurait produit qu'un gagnant, et la comparaison n'aurait donné envie à personne. */
.xp-member{margin:18px 0;display:grid;gap:12px}
.xp-duel{border:1px solid var(--xp-line);border-radius:18px;padding:14px 16px;background:#fbf6ee;display:grid;gap:9px}
.xp-duel-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;text-align:center}
.xp-duel-head span{display:grid;gap:1px}
.xp-duel-head b{font:800 20px 'Baloo 2'}
.xp-duel-head small{color:var(--xp-muted);font-size:11px}
.xp-duel-vs{font:800 11px 'DM Sans';letter-spacing:1px;text-transform:uppercase;color:var(--xp-muted)}
.xp-duel-row{display:grid;grid-template-columns:1fr auto;gap:3px 10px;align-items:center}
.xp-duel-label{font:700 12px 'DM Sans'}
.xp-duel-row small{color:var(--xp-muted);font-size:11px;white-space:nowrap}
/* Deux moitiés d'une même barre : la part gauche est la vôtre. On lit qui mène sans lire un chiffre. */
.xp-duel-bar{grid-column:1/-1;height:8px;border-radius:8px;background:#d9d3c6;overflow:hidden}
.xp-duel-bar i{display:block;height:100%;background:var(--coral,#e96d3a);border-radius:8px}
.xp-duel-row.is-theirs .xp-duel-bar i{background:#8aa39a}
.xp-duel-row.is-equal .xp-duel-bar i{background:#b7ac97}

@media(max-width:640px){
  .xp-rank{grid-template-columns:auto 1fr;padding:16px 16px;border-radius:18px}
  .xp-rank-emblem{width:54px;height:54px;font-size:30px}
  .xp-rank-copy strong{font-size:20px}
  .xp-deeds{grid-template-columns:1fr}
  .xp-deeds.is-compact{grid-template-columns:1fr}
  /* L'indice de chaque force passe à la trappe : sur téléphone il double la hauteur du bloc pour un gain nul. */
  .xp-strength-hint{display:none}
  .xp-board-row{grid-template-columns:26px 30px 1fr auto;gap:8px;padding:8px 10px}
}

/* ===== Bandeau de progression sur l'accueil — audit de parcours du 01/08/2026 ======================================
 * Constat : le membre audité était niveau 8, « Pilier », à 1 365 points de « Vétéran » — la chose la plus motivante
 * que le produit sache dire de lui, et elle était invisible sur son écran d'accueil. Une ligne suffit : le rang, la
 * barre, et surtout CE QU'IL RESTE À FAIRE. Un total de points ne fait agir personne ; « encore 2 sorties » si.
 * ================================================================================================================= */
.xp-home{margin:0 0 18px;border:1px solid rgba(226,102,31,.28);border-radius:16px;
  background:linear-gradient(180deg,rgba(255,214,170,.20),rgba(255,214,170,.06));overflow:hidden}
.xp-home-main{display:flex;align-items:center;gap:12px;width:100%;padding:12px 16px;background:none;border:0;
  cursor:pointer;text-align:left;min-height:56px}
.xp-home-badge{font-size:26px;line-height:1;flex:none}
.xp-home-text{display:grid;gap:2px;flex:1 1 auto;min-width:0}
.xp-home-text strong{font-size:.98rem}
.xp-home-text small{font-size:.82rem;opacity:.82;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xp-home-pct{font-weight:800;font-size:1.05rem;flex:none;opacity:.85}
.xp-home-bar{height:5px;background:rgba(15,23,42,.10)}
.xp-home-bar i{display:block;height:100%;background:linear-gradient(90deg,#e2661f,#f0a24a);transition:width .5s ease}
@media(max-width:640px){.xp-home-main{padding:11px 13px;gap:10px}.xp-home-badge{font-size:22px}}