/**
 * Décoration sobre du site — couche entièrement séparable.
 *
 * Règle du jeu : rien qui perturbe la lecture ni qui change la façon d'utiliser
 * le site. Uniquement du noir et deux gris « sérieux » (graphite et ardoise),
 * jamais de couleur vive ajoutée : les couleurs vives du thème (bleu, or,
 * violet) gardent leur rôle de repère fonctionnel.
 *
 * Pour tout retirer : supprimer l'appel à ce fichier dans functions.php
 * (recherche « progressport-decor »). Aucune autre feuille n'en dépend.
 *
 * @package ProgresSport
 */

:root {
	--pp-graphite: #14181d;
	--pp-slate: #3c4652;
	--pp-wash: #f6f7f9;
}

/* 1. Fond de page : un voile clair en haut, qui redevient blanc sous le
      contenu. Assez léger pour ne jamais gêner la lecture, assez présent
      pour que la page ne soit plus une feuille blanche brute. */
/* Pas de `background-attachment: fixed` : c'est une source connue de
   saccades au défilement sur téléphone. Le dégradé est simplement peint en
   haut du document. */
body {
	background: var(--pp-wash);
	background-image: linear-gradient(180deg, #eef0f4 0, var(--pp-wash) 260px, #ffffff 620px);
	background-repeat: no-repeat;
}

/* 2. En-tête : filet graphite sous la bordure, pour asseoir la barre du haut. */
.pp-header {
	box-shadow: 0 1px 0 rgba(20, 24, 29, 0.06), 0 6px 18px rgba(20, 24, 29, 0.05);
}

/* 3. Titres de page : un court trait noir dessous. C'est le seul ornement
      vraiment visible, et il structure la page au lieu de la décorer. */
.pp-page__title::after,
.pp-hero__title::after,
.pp-sports-title::after,
.pp-classement-title::after {
	content: "";
	display: block;
	width: 46px;
	height: 3px;
	margin: 10px 0 0;
	border-radius: 2px;
	background: var(--pp-graphite);
}

/* Le héros est centré : son trait doit l'être aussi. */
.pp-hero__title::after { margin-left: auto; margin-right: auto; }

/* 4. Cartes et blocs : ombre plus fine et plus froide que l'ombre « pleine »
      d'origine, plus un liseré clair en haut qui donne un léger relief. */
.pp-sport-card,
.pp-card,
.pp-plan,
.pp-friend,
.pp-classement-wrap {
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85),
		0 1px 2px rgba(20, 24, 29, 0.06),
		0 6px 16px rgba(20, 24, 29, 0.06);
}

/* 5. Pied de page : fond graphite. C'est la seule zone franchement sombre du
      site — elle referme la page et rappelle le logo noir. */
.pp-footer {
	background-color: var(--pp-graphite);
	/* Fines hachures à 3 % : donne une matière à la zone sombre sans qu'on
	   distingue vraiment un motif. */
	background-image: repeating-linear-gradient(
		135deg,
		rgba(255, 255, 255, 0.03) 0 2px,
		transparent 2px 8px
	);
	border-top: 0;
	color: #cbd2da;
}

.pp-footer__brand {
	color: #8b95a1;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.78rem;
	font-weight: 700;
}
.pp-footer__nav a { color: #e8ecf1; }
.pp-footer__nav a:hover { color: #ffffff; text-decoration: underline; }

/* 6. Séparateur discret au-dessus du pied de page. */
.pp-footer::before {
	content: "";
	display: block;
	height: 3px;
	background: linear-gradient(90deg, var(--pp-slate), var(--pp-graphite) 60%);
}

/* 7. Marque du logo dans le pied de page : le fichier est noir, on l'inverse
      pour l'obtenir en blanc sur le fond graphite. */
.pp-footer__mark { filter: invert(1); opacity: 0.9; }

/* 8. Filet d'accent tout en haut de la fenêtre : referme le cadre de la page
      par le haut, comme le pied de page le fait par le bas. */
body::before {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	z-index: 200;
	background: linear-gradient(90deg, var(--pp-graphite), var(--pp-slate) 45%, var(--pp-graphite));
	pointer-events: none;
}

/* 9. Sélection de texte en graphite plutôt que le bleu du navigateur. */
::selection { background: var(--pp-graphite); color: #fff; }

/* 10. Repère de focus clavier, identique partout. Détail d'apparence, mais
       surtout de confort : sans lui, on ne sait pas où l'on est au clavier. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--pp-slate);
	outline-offset: 2px;
	border-radius: 8px;
}

/* 11. Barres de défilement fines sur grand écran (sur mobile, le système
       gère déjà des barres discrètes). */
@media (min-width: 900px) {
	html { scrollbar-width: thin; scrollbar-color: #c3c9d2 transparent; }
	::-webkit-scrollbar { width: 11px; height: 11px; }
	::-webkit-scrollbar-track { background: transparent; }
	::-webkit-scrollbar-thumb {
		background: #c3c9d2;
		border-radius: 999px;
		border: 3px solid #ffffff;
	}
	::-webkit-scrollbar-thumb:hover { background: var(--pp-slate); }
}

/* 12. Cartes de sport : léger relief au survol. Aucune couleur ajoutée,
       juste une réponse au geste. */
.pp-sport-card {
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.pp-sport-card:hover {
	transform: translateY(-2px);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9),
		0 2px 4px rgba(20, 24, 29, 0.08),
		0 14px 26px rgba(20, 24, 29, 0.10);
}

/* 13. Encadrés « rien à afficher » : pointillés graphite froid plutôt que
       gris tiède, pour rester dans la même famille. */
.pp-classement-empty,
.pp-friend-empty {
	border-color: #c9cfd7;
	background: #fbfcfd;
}

/* 14. Fine règle au-dessus de la liste des sports : sépare le haut de page
       du choix du sport sans ajouter de titre ni de cadre. */
.pp-sports-section {
	border-top: 1px solid rgba(20, 24, 29, 0.08);
	padding-top: 18px;
}

/* 19. Simplification : « Ton sport, ton programme, chaque jour. » est une
       phrase d'accroche pour un visiteur. Une fois connecté, elle n'apprend
       plus rien et repousse les sports vers le bas — on la masque, comme le
       sous-titre l'était déjà. Le titre reste dans la page pour les visiteurs
       et pour les moteurs de recherche. */
.logged-in .pp-hero__title { display: none; }
.logged-in .pp-hero { padding-top: 6px; }

/* 15. Titres de section secondaires : un petit repère vertical graphite
       devant le texte. Structure la page sans ajouter de cadre. */
.pp-friend-section__title,
.pp-dash-card__title,
.pp-phase__title,
.pp-grp-section__title {
	border-left: 3px solid var(--pp-graphite);
	padding-left: 10px;
}

/* 16. En-tête des tableaux (classement, parrainage) en graphite : la ligne
       de titres se distingue enfin des lignes de données, y compris quand
       elle reste collée en haut au défilement. */
/*    Le sélecteur avec [class] est nécessaire : `.pp-classement-table
      .pp-c-rank` (deux classes) impose sinon sa couleur sombre à la cellule
      « # », qui deviendrait noire sur graphite. */
.pp-classement-table thead th,
.pp-classement-table thead th[class] {
	background: var(--pp-graphite);
	color: #e3e8ee;
	border-bottom-color: var(--pp-graphite);
}

/* 17. Liens de contenu : soulignement décollé du texte, plus lisible. */
.pp-page__lead a,
.pp-footer__nav a,
.pp-classement-sub a {
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

/* 18. Bouton « Accueil » des pages internes : passe en graphite au survol,
       comme le reste de la décoration. */
.pp-back-btn:hover {
	background: var(--pp-graphite);
	border-color: var(--pp-graphite);
	color: #ffffff;
}

/* =====================================================================
 * Touches de noir — série 2
 *
 * Le noir sert de fil conducteur d'une page à l'autre. Il ne remplace
 * jamais une couleur qui porte un sens (bleu = action, or = Premium,
 * violet = défi, orange = parrainage) : il vient en accent, sur des
 * éléments neutres.
 * ================================================================== */

/* 20. Cartes de sport : liseré noir à gauche, qui s'épaissit au survol.
       C'est l'accent le plus visible de l'accueil. */
.pp-sport-card {
	position: relative;
	overflow: hidden;
}

.pp-sport-card::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background: var(--pp-graphite);
	transition: width 0.15s ease;
}

.pp-sport-card:hover::before { width: 7px; }

/* 21. Boutons secondaires : noir au survol. Ce sont des actions neutres
       (Pass, Classement, Progression, Parrainer…), le bleu reste réservé
       aux actions principales. */
.pp-btn--ghost:hover,
.pp-btn--ghost:focus-visible {
	background: var(--pp-graphite);
	border-color: var(--pp-graphite);
	color: #ffffff;
}

/* 22. Carte de profil de l'accueil : même liseré noir, pour rimer avec les
       cartes de sport juste en dessous. */
.pp-home-profile__inner {
	border-left: 4px solid var(--pp-graphite);
}

/* 23. Séparation entre les phases du programme. */
.pp-phase + .pp-phase {
	border-top: 1px solid rgba(20, 24, 29, 0.10);
	padding-top: 16px;
}

/* 24. Puces des descriptions d'exercice en noir. */
.pp-exo__desc ul li::marker { color: var(--pp-graphite); }

/* =====================================================================
 * Touches de noir — série 3 : allure professionnelle
 * ================================================================== */

/* 26. Le bouton principal de l'accueil passe en noir. C'est le point de
       fixation de la page ; en noir plein il a l'air d'une décision, pas
       d'un lien de plus. Le bleu reste la couleur d'action PARTOUT
       ailleurs (« Lancez-vous », « Ajouter », « Inviter »…). */
.pp-hero .pp-btn--primary {
	background: var(--pp-graphite);
	border-color: var(--pp-graphite);
	color: #ffffff;
	box-shadow: 0 4px 0 rgba(20, 24, 29, 0.28);
}

.pp-hero .pp-btn--primary:hover {
	background: var(--pp-slate);
	border-color: var(--pp-slate);
	color: #ffffff;
}

/* 27. Intitulés de section en capitales espacées : c'est ce détail
       typographique, plus que la couleur, qui fait « sérieux ». */
.pp-sports-title,
.pp-friend-section__title {
	text-transform: uppercase;
	letter-spacing: 0.10em;
	font-size: 0.95rem;
	color: var(--pp-graphite);
}

/* 28. (Les ronds noirs autour des icônes de sport ont été retirés à la
       demande de Vincent : l'accent des cartes de sport reste le liseré
       de gauche, règle 20.) */

/* 29. Filet noir sous le bloc de titre des pages internes : sépare
       l'en-tête de page du contenu. */
.pp-classement-head {
	border-bottom: 2px solid var(--pp-graphite);
	padding-bottom: 14px;
}

/* 30. Offres d'abonnement : arête noire en haut de la carte Pro. La carte
       Premium garde la sienne dorée, elle porte une information. */
.pp-plan { border-top: 4px solid var(--pp-graphite); }
.pp-plan--premium { border-top-color: var(--pp-yellow); }

/* 31. Ombre des gros boutons en noir plutôt qu'en gris. */
.pp-btn--lg { box-shadow: 0 4px 0 rgba(20, 24, 29, 0.22); }

/* =====================================================================
 * Touches de noir — série 4 : le liseré devient la signature du site
 *
 * Le même liseré noir à gauche que sur les cartes de sport est étendu aux
 * autres cartes. D'une page à l'autre, l'œil retrouve le même repère —
 * c'est ce qui donne l'impression d'un ensemble, pas d'une collection de
 * pages. Il cède toujours la place quand une couleur porte un sens.
 * ================================================================== */

/* 32. Exercices du programme. */
.pp-exo { border-left: 4px solid var(--pp-graphite); }

/* Un exercice terminé s'efface : son liseré aussi. */
.pp-exo.is-done { border-left-color: var(--pp-line-soft); }

/* 33. Cartes du tableau de bord (Mon compte). */
.pp-dash-card { border-left: 4px solid var(--pp-graphite); }

/* 34. Personnes de la page Amis — sauf les amis, dont le bord bleu est
       justement ce qui les distingue. */
.pp-friend:not(.pp-friend--pal) { border-left: 4px solid var(--pp-graphite); }

/* 35. Membres du défi de groupe — sauf ceux qui ont fait leur programme,
       signalés en vert. */
.pp-grp-member:not(.is-done) { border-left: 4px solid var(--pp-graphite); }

/* 36. Champs de recherche : noirs au repos, bleus une fois actifs. Une
       couleur d'action n'a de sens que quand l'élément est actif. */
.pp-c-search,
.pp-friend-search {
	border-color: var(--pp-graphite);
}

.pp-c-search:focus-within,
.pp-friend-search:focus-within {
	border-color: var(--pp-blue);
	box-shadow: 0 0 0 3px rgba(43, 168, 224, 0.18);
}

/* La barre reste rouge quand la recherche ne donne rien. */
.pp-c-search.is-empty { border-color: #e05a4b; }

/* 37. Onglets inactifs : même liseré, pour que la barre d'onglets rime
       avec les cartes qu'elle commande. */
.pp-c-tab:not(.is-active) { border-left: 4px solid var(--pp-graphite); }

/* 38. Barre du haut un peu plus affirmée. */
.pp-header { border-bottom-width: 3px; }

/* =====================================================================
 * Touches de noir — série 5
 * ================================================================== */

/* 39. Icône de compte cerclée, comme le bouton Amis à l'autre bout de la
       barre : l'en-tête était déséquilibré, une icône nue à gauche et un
       bouton cerclé à droite. */
.pp-header__profile {
	border: 2px solid var(--pp-graphite);
	background: #ffffff;
}

.pp-header__profile:hover {
	background: var(--pp-graphite);
	color: #ffffff;
}

/* 40. Prix des abonnements en noir : un prix en couleur d'action ressemble
       à un lien, un prix en noir ressemble à un prix. */
.pp-plan__amount { color: var(--pp-graphite); }

/* 41. Puces des avantages en noir plutôt qu'en bleu — le bleu est réservé
       à ce sur quoi on peut cliquer. */
.pp-plan__features li::before { background: var(--pp-graphite); }

/* 42. Encadrés « rien à afficher » : pointillés noirs discrets. */
.pp-classement-empty,
.pp-friend-empty {
	border-color: rgba(20, 24, 29, 0.30);
}

/* =====================================================================
 * Accueil
 * ================================================================== */

/* 43. Règle noire pleine au-dessus de la liste des sports (elle n'était
       qu'un filet à 8 %) : elle sépare franchement le profil du choix
       du sport. */
.pp-sports-section {
	border-top: 2px solid var(--pp-graphite);
	padding-top: 20px;
}

/* 44. Nom du sport plus affirmé : c'est l'information de la carte. */
.pp-sport-card__name {
	font-weight: 800;
	color: var(--pp-graphite);
}

/* 45. Carte de profil sur fond neutre plutôt que bleuté : avec son liseré
       noir, elle passe du bloc décoratif au bloc d'information. */
.pp-home-profile__inner {
	background: linear-gradient(135deg, #fbfcfd, #ffffff);
	border-color: rgba(20, 24, 29, 0.12);
}

@media (max-width: 640px) {
	/* 46. Intitulés des cases du classement en noir : ils étaient gris sur
	       gris clair, à la limite du lisible. */
	.pp-classement-table tbody td[data-label]::before {
		color: var(--pp-graphite);
	}
}

/* =====================================================================
 * Touches de noir — série 6 : offres et accueil
 * ================================================================== */

/* 47. Dégradé venu des BORDS vers le centre (gradient radial inversé) :
       la couleur cerne la carte et le texte reste sur du blanc, donc
       parfaitement lisible. Or pour Premium, bleu pour Pro. */
/*
 * L'or monte : le blanc central se réduit (38 % → 22 %), la dorure démarre
 * plus tôt et finit franchement plus dense, et une seconde couche pose une
 * lumière chaude en haut de la carte. Le texte reste sur une zone claire, donc
 * toujours lisible — c'est la contrainte qui borne la quantité d'or.
 */
.pp-plan--premium {
	background:
		radial-gradient(
			80% 50% at 50% 0%,
			rgba(245, 197, 24, 0.30) 0%,
			rgba(245, 197, 24, 0) 70%
		),
		radial-gradient(
			125% 95% at 50% 52%,
			#fffdf4 22%,
			rgba(245, 197, 24, 0.26) 55%,
			rgba(245, 197, 24, 0.58) 82%,
			rgba(214, 158, 10, 0.72) 100%
		);
	border-color: var(--pp-yellow);
}

/* L'or se prolonge sur les détails de l'offre, comme le bleu le fait pour Pro :
   puces, intitulé et prix. La carte devient dorée d'un bout à l'autre. */
.pp-plan--premium .pp-plan__features li::before { background: #b8860b; }
.pp-plan--premium .pp-plan__label { color: #8a6100; }

/* La couronne posée au-dessus de la carte prend la même dorure. */
.pp-plan--premium .pp-plan__crown { filter: drop-shadow(0 2px 3px rgba(184, 134, 11, 0.45)); }

.pp-plan--pro {
	background: radial-gradient(
		125% 95% at 50% 50%,
		#ffffff 42%,
		rgba(43, 168, 224, 0.10) 76%,
		rgba(43, 168, 224, 0.30) 100%
	);
	/* Bordures noires conservées, comme demandé. */
	border-color: var(--pp-graphite);
}

/* Le bleu se prolonge sur les détails de l'offre Pro. */
.pp-plan--pro .pp-plan__features li::before { background: var(--pp-blue-dark); }
.pp-plan--pro .pp-plan__label { color: var(--pp-blue-dark); }

/* 48. Accueil : la zone de profil devient une bande grise refermée par une
       règle noire. Le haut de page se lit comme un bandeau, la liste des
       sports comme le contenu. */
.pp-home-profile {
	background: linear-gradient(180deg, #eef1f5, #f7f8fa);
	border-bottom: 2px solid var(--pp-graphite);
	padding-bottom: 16px;
}

/* La règle au-dessus des sports ferait doublon avec celle-ci. */
.pp-sports-section { border-top: 0; }

/* 49. Cartes de sport : fond gris très clair au survol, le blanc étant
       réservé au repos. */
.pp-sport-card:hover { background: #f4f6f8; }

/* 50. Le héros perd son fond blanc plein : un dégradé gris très léger le
       relie à la bande de profil au-dessus. */
.pp-hero { background: linear-gradient(180deg, #ffffff, #fbfcfd); }

/* =====================================================================
 * Touches de noir — série 7
 * ================================================================== */

/* 51. Titres de page en noir franc et resserrés : c'est le premier mot
       que l'œil lit sur chaque page. */
.pp-page__title,
.pp-classement-title {
	color: var(--pp-graphite);
	letter-spacing: -0.02em;
}

/* 52. Le trait sous les titres passe de 46 à 64 px et s'épaissit :
       plus assumé, moins « décoratif ». */
.pp-page__title::after,
.pp-hero__title::after,
.pp-sports-title::after,
.pp-classement-title::after {
	width: 64px;
	height: 4px;
}

/* 53. Accueil : bandeau noir plein entre le profil et les sports. C'est le
       repère le plus fort de la page, il annonce le contenu. */
.pp-sports-title {
	position: relative;
	padding: 12px 14px;
	margin-bottom: 14px;
	border-radius: 12px;
	background: var(--pp-graphite);
	color: #ffffff;
}

/* Sur fond noir, le trait doit être clair pour rester visible. */
.pp-sports-title::after { background: #ffffff; opacity: 0.7; }

/* 54. Numéro d'ordre discret sur chaque carte de sport : la liste devient
       un classement lisible d'un coup d'œil. */
.pp-sports { counter-reset: pp-sport; }

.pp-sport-card {
	counter-increment: pp-sport;
	padding-left: 34px;
}

.pp-sport-card::after {
	content: counter(pp-sport, decimal-leading-zero);
	position: absolute;
	left: 11px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 0.7rem;
	font-weight: 900;
	letter-spacing: 0.04em;
	color: rgba(20, 24, 29, 0.32);
}

/* 55. Cartes du programme : bandeau de phase en noir, comme sur l'accueil.
       Le sélecteur est doublé (.pp-phase--technique .pp-phase__title existe
       dans main.css et forçait un texte BLEU, illisible sur le noir). */
.pp-phase__title,
.pp-phase .pp-phase__title {
	padding: 10px 14px;
	border-left: 0;
	border-radius: 12px;
	background: var(--pp-graphite);
	color: #ffffff;
}

/* 56. Avatar de l'accueil cerclé de noir. */
.pp-home-profile__avatar,
.pp-home-profile .pp-avatar-wrap { border-color: var(--pp-graphite); }

/* 57. Boutons pleins (hors accueil) : socle noir au lieu d'une ombre grise,
       ils prennent du relief sans changer de couleur. */
.pp-btn--primary { box-shadow: 0 3px 0 rgba(20, 24, 29, 0.30); }

/* 58. Pied de page : les liens se soulignent en blanc au survol, sur un
       filet noir permanent qui structure la colonne. */
.pp-footer__nav ul { border-top: 1px solid rgba(255, 255, 255, 0.10); padding-top: 14px; }

/* 59. Défi de groupe et Amis : titres de bloc en noir plein aussi. */
.pp-friend-section__title,
.pp-grp-section__title {
	padding: 9px 12px;
	border-left: 0;
	border-radius: 10px;
	background: var(--pp-graphite);
	color: #ffffff;
}

/* ===========================================================================
 * SÉRIE 8 — La carte de profil de l'accueil et ses boutons
 *
 * C'est le premier bloc que l'utilisateur voit en arrivant : il méritait le
 * même traitement noir que le reste. Les couleurs qui PORTENT UN SENS ne sont
 * pas touchées (Équipement en bleu, Défi de groupe en violet, la flamme de
 * série, la pastille de niveau en or).
 * ======================================================================== */

/* 60. La carte de profil : cadre noir et barre noire pleine sur son bord
       gauche. Elle se détache du fond au lieu de flotter. */
.pp-home-profile__inner {
	border-color: var(--pp-graphite);
	border-left-width: 5px;
	background: linear-gradient(135deg, #ffffff, #f2f4f7);
}

/* 61. Le petit appareil photo posé sur l'avatar passe en noir plein : il était
       gris sur gris, on ne le voyait pas.

       La BORDURE de l'avatar, elle, n'est PAS touchée : c'est une bordure
       cosmétique gagnée dans le ProgresPass (`pp-avatar-border--*`). La
       repeindre en noir effacerait une récompense — exactement ce que la règle
       de cette feuille interdit. */
.pp-home-profile .pp-avatar-edit__badge {
	background: var(--pp-graphite);
	border: 2px solid #ffffff;
	color: #ffffff;
}

/* 62. « Bonjour X » en noir franc : c'est le nom de l'utilisateur, pas une
       ligne de service. */
.pp-home-profile__hello { color: var(--pp-graphite); letter-spacing: -0.01em; }

/* 63. Boutons neutres de la carte (Pass, Classement, Progression, Parrainer) :
       contour noir, texte noir, et au survol ils s'inversent en noir plein.
       Le sélecteur est doublé pour passer devant `.pp-home-profile__actions
       .pp-btn` d'equipment.css. Défi de groupe est exclu : son violet dit
       « c'est autre chose ». */
.pp-home-profile__actions .pp-btn--ghost {
	border-color: var(--pp-graphite);
	color: var(--pp-graphite);
	font-weight: 800;
}

.pp-home-profile__actions .pp-btn--ghost:hover,
.pp-home-profile__actions .pp-btn--ghost:focus-visible {
	background: var(--pp-graphite);
	border-color: var(--pp-graphite);
	color: #ffffff;
}

/* 64. Le bouton Défi garde son violet, mais reçoit le même socle noir que les
       autres boutons pleins du site : la rangée reste homogène. */
.pp-home-profile__actions .pp-btn--defi {
	box-shadow: 0 3px 0 rgba(20, 24, 29, 0.32);
}

/* 65. Bandeau du profil : filet noir en haut aussi, pas seulement en bas —
       la bande devient une vraie zone, refermée des deux côtés. */
.pp-home-profile { border-top: 2px solid var(--pp-graphite); }

@media (max-width: 520px) {
	/* Sur téléphone la carte est compacte : on garde le cadre noir mais on
	   allège la barre de gauche, sinon elle mange la largeur utile. */
	.pp-home-profile__inner { border-left-width: 4px; }
}

@media (max-width: 640px) {
	/* 25. Position dans le classement : pastille noire, chiffre blanc.
	       Le rang saute aux yeux au lieu de se fondre dans la carte. */
	.pp-classement-table tbody .pp-c-rank {
		background: var(--pp-graphite);
		color: #ffffff;
	}

	/* La dorure Premium reprend la main : elle porte une information. */
	.pp-classement-table tbody tr.pp-c-row--premium .pp-c-rank {
		background: linear-gradient(135deg, #ffe49a, #f5c518);
		color: #7a5300;
	}
}

/* ===========================================================================
 * SÉRIE 9 — Gris et noir sur l'accueil : la liste des sports
 *
 * Le haut de page était déjà traité (bandeau de profil, titre en noir plein).
 * Ce qui restait clair, c'est le corps de la page : treize cartes blanches sur
 * un fond blanc, sans hiérarchie. On pose donc un fond gris sous la liste pour
 * que les cartes s'en détachent, et on remonte le contraste de chaque carte.
 * ======================================================================== */

/* 66. Fond gris sous la liste des sports, refermé par un filet noir en bas.
       Les cartes blanches se détachent enfin de leur support. */
.pp-sports-section {
	background: linear-gradient(180deg, #eceff3, #f5f6f8 220px, #f7f8fa);
	border-bottom: 2px solid var(--pp-graphite);
	padding-bottom: 28px;
}

/* 67. Carte de sport : contour noir franc et socle sombre. Elle passe du
       rectangle posé à l'élément cliquable. */
.pp-sport-card {
	border-color: rgba(20, 24, 29, 0.55);
	box-shadow: 0 2px 0 rgba(20, 24, 29, 0.10);
}

.pp-sport-card:hover {
	border-color: var(--pp-graphite);
	box-shadow: 0 3px 0 rgba(20, 24, 29, 0.22);
}

/* 68. L'emoji du sport est posé sur un disque gris : il tient dans un cadre
       au lieu de flotter, et la colonne de gauche devient une vraie colonne. */
.pp-sport-card__icon {
	width: 46px;
	height: 46px;
	margin: 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #eceff3;
	box-shadow: inset 0 0 0 1.5px rgba(20, 24, 29, 0.18);
}

.pp-sport-card:hover .pp-sport-card__icon {
	background: #e3e7ec;
	box-shadow: inset 0 0 0 1.5px rgba(20, 24, 29, 0.38);
}

/* 69. Bouton « Lancez-vous » : contour noir, et il se remplit de noir au
       survol — même langage que les boutons de la carte de profil. */
.pp-sport-card .pp-btn--primary {
	background: #ffffff;
	border: 2px solid var(--pp-graphite);
	color: var(--pp-graphite);
	box-shadow: 0 2px 0 rgba(20, 24, 29, 0.18);
}

.pp-sport-card .pp-btn--primary:hover,
.pp-sport-card .pp-btn--primary:focus-visible {
	background: var(--pp-graphite);
	border-color: var(--pp-graphite);
	color: #ffffff;
}

/* 70. Le numéro d'ordre passe du gris pâle au gris franc : il se lit. */
.pp-sport-card::after { color: rgba(20, 24, 29, 0.55); font-size: 0.74rem; }

/* 71. Sous-titre du héros en gris soutenu plutôt qu'en gris clair. */
.pp-hero__subtitle { color: #4a5259; }

/* 72. Un sport déjà en cours reste signalé par sa couleur — le noir ne
       remplace pas une information. On lui ajoute seulement le socle. */
.pp-sport-card.is-current { box-shadow: 0 3px 0 rgba(20, 24, 29, 0.22); }

@media (max-width: 520px) {
	/* Sur téléphone la carte est plus serrée : disque et socle réduits pour
	   ne pas voler de largeur au nom du sport. */
	.pp-sport-card__icon { width: 38px; height: 38px; }
	.pp-sports-section { padding-bottom: 20px; }
}

/* ===========================================================================
 * SÉRIE 10 — Gris et noir sur le reste du parcours
 *
 * L'accueil est traité ; on prolonge sur les pages où l'œil passe le plus de
 * temps : le programme du jour et le défi de groupe. Toujours la même règle —
 * le noir structure, il ne remplace jamais une couleur qui informe (le bleu
 * d'un exercice fait, le vert d'un membre à jour, le dégradé de la frise).
 * ======================================================================== */

/* 73. Défi de groupe : un membre au repos est en GRAPHITE, pas en vert. Il a
       tenu sa journée, mais il n'a pas fait de séance — les deux états ne
       doivent pas se confondre. Le vert reste réservé au programme terminé. */
.pp-grp-member.is-rest {
	border-color: var(--pp-graphite);
	background: linear-gradient(135deg, #eef1f5, #ffffff 65%);
}

.pp-grp-member.is-rest .pp-grp-member__state { color: #3a4149; font-weight: 700; }

/* 74. La frise : rail gris foncé et repères de palier en noir. Le dégradé de
       remplissage ne bouge pas — c'est lui qui porte la progression. */
.pp-frise__rail {
	background: #d7dde5;
	box-shadow: inset 0 0 0 1.5px rgba(20, 24, 29, 0.22);
}

.pp-frise__tick { background: rgba(20, 24, 29, 0.45); width: 2.5px; height: 14px; margin-top: -7px; }

/* 75. Programme du jour : chaque exercice est numéroté dans sa phase. La
       séance se lit comme une liste ordonnée, on sait où on en est. */
.pp-exos { counter-reset: pp-exo; }

.pp-exo {
	counter-increment: pp-exo;
	position: relative;
	box-shadow: 0 2px 0 rgba(20, 24, 29, 0.09);
}

.pp-exo::after {
	content: counter(pp-exo, decimal-leading-zero);
	position: absolute;
	top: 10px;
	right: 12px;
	font-size: 0.68rem;
	font-weight: 900;
	letter-spacing: 0.04em;
	color: rgba(20, 24, 29, 0.28);
	pointer-events: none;
}

/* Un exercice fait garde son bleu : le numéro s'y adapte sans l'effacer. */
.pp-exo.is-done::after { color: rgba(20, 24, 29, 0.42); }

/* 76. En-tête du site : le filet du bas devient une vraie règle noire, et le
       fond passe du blanc pur à un blanc légèrement gris — la barre se
       distingue du contenu au lieu de s'y fondre. */
.pp-header {
	background: linear-gradient(180deg, #ffffff, #f4f6f8);
	border-bottom: 2px solid var(--pp-graphite);
}

/* 77. Titres de section du défi de groupe et des amis : même filet noir à
       gauche que partout ailleurs. */
.pp-grp-section {
	border-left: 4px solid var(--pp-graphite);
	padding-left: 10px;
}

/* 78. Cartes de membres : contour plus sombre au repos comme à l'attente,
       pour qu'elles ne flottent pas sur le fond. */
.pp-grp-member { border-color: rgba(20, 24, 29, 0.30); }

@media (max-width: 520px) {
	/* Le numéro d'exercice ne doit pas venir gêner le bouton « Difficulté ». */
	.pp-exo::after { top: 8px; right: 9px; font-size: 0.62rem; }
}

/* ===========================================================================
 * SÉRIE 11 — Du gris dans la carte de profil
 *
 * La carte était presque blanche sur une bande déjà grise : les deux se
 * confondaient. On inverse le rapport — la carte devient franchement grise, et
 * la bande qui la porte s'éclaircit. Les boutons blancs à contour noir qu'elle
 * contient s'en détachent alors nettement.
 * ======================================================================== */

/* 79. La carte de profil reste BLANCHE. Une première version la peignait
       entièrement en gris : c'était trop, la carte perdait sa clarté. Le gris
       n'est ici qu'une touche — un voile à peine perceptible dans le coin bas,
       qui donne du relief sans changer la base. */
.pp-home-profile__inner {
	background: linear-gradient(160deg, #ffffff 0%, #ffffff 62%, #f1f3f6 100%);
	border-color: var(--pp-graphite);
}

/* 80. C'est la BANDE qui porte la carte qui est grise, pas la carte. Le
       contraste vient de là : une carte blanche posée sur du gris. */
.pp-home-profile {
	background: linear-gradient(180deg, #e8ebef, #f4f6f8);
}

/* 81. Fin filet gris entre la ligne d'identité et la rangée de boutons : la
       carte se lit en deux temps — qui tu es, puis où tu vas. C'est la touche
       de gris qui structure, sans colorer le fond. */
.pp-home-profile__actions {
	border-top: 1px solid rgba(20, 24, 29, 0.14);
	padding-top: 10px;
	margin-top: 4px;
	flex: 1 1 100%;
}

/* 82. Les boutons gardent leur socle gris foncé : posés sur du blanc, c'est
       lui qui leur donne du relief. Sélecteur doublé pour repasser devant la
       règle 63 et devant equipment.css. */
.pp-home-profile .pp-home-profile__actions .pp-btn--ghost {
	background: #ffffff;
	box-shadow: 0 2px 0 rgba(20, 24, 29, 0.16);
}

.pp-home-profile .pp-home-profile__actions .pp-btn--ghost:hover,
.pp-home-profile .pp-home-profile__actions .pp-btn--ghost:focus-visible {
	background: var(--pp-graphite);
	color: #ffffff;
}

/* 83. La pastille de série (les flammes) était blanche sur blanc, sans
       contour visible : elle prend un liseré gris franc. */
.pp-home-profile .pp-streak-pill {
	background: #ffffff;
	border-color: rgba(20, 24, 29, 0.28);
}

@media (prefers-reduced-motion: reduce) {
	.pp-sport-card { transition: none; }
	.pp-sport-card:hover { transform: none; }
	.pp-sport-card::before { transition: none; }
}