/*
 * Découvrir Penta Com (mobile/decouvrir.php) : visite guidée avec des données fictives.
 * Couleurs : variables de mobile_header.php (modes jour et nuit). Grille de 8 pt, cartes sans ombre ni dégradé,
 * couleur de sport en filet de 4 px (toujours avec le nom du sport).
 */
.pcd { overflow-x: clip; --pcd-doux: color-mix(in srgb, var(--white) 66%, transparent); }
.pcd-surtitre { margin: 16px 0 0; font: 600 .8125rem/1.4 Inter, -apple-system, system-ui, sans-serif; letter-spacing: .04em; text-transform: uppercase; color: var(--blue); }

/* Bandeau « Exemple » : toujours visible en haut, sans couleur d'alerte */
.pcd-fictif { margin: 0 0 16px; padding: 12px 16px; border: 1px dashed var(--rule); border-radius: 12px; font-size: .875rem; line-height: 1.45; color: var(--pcd-doux); }
.pcd-fictif strong { display: inline-block; margin-right: 4px; padding: 0 8px; border-radius: 999px; background: var(--blue); color: var(--sur-blue); font-size: .75rem; line-height: 1.6; letter-spacing: .04em; text-transform: uppercase; }

/* Étapes de la visite : puces en pilule, collées sous l'en-tête en faisant défiler */
.pcd-chapitres {
    position: sticky; top: calc(56px + env(safe-area-inset-top, 0px)); z-index: 5; display: flex; gap: 8px; overflow-x: auto;
    margin: 0 -16px 8px; padding: 8px 16px; background: var(--ink); scrollbar-width: none;
}
.pcd-chapitres::-webkit-scrollbar { display: none; }
.pcd-chapitres a {
    flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border: 1px solid var(--rule); border-radius: 999px;
    color: var(--white); font-size: .875rem; font-weight: 600; text-decoration: none; transition: transform .14s ease-out;
}
.pcd-chapitres a:active { transform: scale(.98); background: var(--ink3); }

body:not(.pma-accueil) .pm-page > section.pcd-etape { margin: 0; padding: 24px 0 16px; scroll-margin-top: 112px; border: 0; border-top: 1px solid var(--rule); border-radius: 0; background: none; }
body:not(.pma-accueil) .pm-page > section.pcd-etape:first-of-type { border-top: 0; }
.pcd-num { margin: 0 0 4px; font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-size: 1rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--blue); font-variant-numeric: tabular-nums; }
.pcd-titre { margin: 0 0 8px; font-size: 1.25rem; line-height: 1.3; font-weight: 600; color: var(--white); }
.pcd-texte { margin: 0 0 16px; font-size: 1rem; line-height: 1.5; color: color-mix(in srgb, var(--white) 78%, transparent); }
.pcd-ou { margin: 12px 0 0; font-size: .8125rem; line-height: 1.4; color: var(--pcd-doux); }

.pcd-bloc { padding: 16px; border: 1px solid var(--rule); border-radius: 20px; background: var(--ink2); }
.pcd-etiquette { margin: 0 0 8px; font-size: .8125rem; line-height: 1.4; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--pcd-doux); }
.pcd-legende { margin: 0; font-size: .8125rem; line-height: 1.4; color: var(--pcd-doux); }

/* PentaNow d'exemple : même allure que mobile/css/nowbar.css */
.pcd-rangee { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px; padding: 0 16px 4px; scroll-snap-type: x mandatory; scroll-padding: 0 16px; scrollbar-width: none; }
.pcd-rangee::-webkit-scrollbar { display: none; }
.pcd-carte { flex: 0 0 min(76vw, 280px); scroll-snap-align: start; display: flex; flex-direction: column; gap: 8px; padding: 16px; border: 1px solid var(--rule); border-radius: 20px; background: var(--ink2); }
.pcd-carte > * { margin: 0; }
.pcd-carte .pcd-etiquette { margin: 0; }
.pcd-seance { border-left: 4px solid var(--disc, var(--blue)); }
.pcd-chiffre { display: flex; align-items: baseline; gap: 8px; font-size: 1.75rem; line-height: 1.15; font-weight: 600; font-variant-numeric: tabular-nums; }
.pcd-chiffre span { font-size: .8125rem; font-weight: 400; color: var(--pcd-doux); }
.pcd-quand { font-size: .8125rem; font-weight: 600; color: var(--blue); }
.pcd-seance-titre { font-size: 1rem; line-height: 1.4; font-weight: 600; }

/* Ma forme : reprend les tuiles de penta-com-finitions.css */
.pcd .forme-chiffres { margin-bottom: 8px; }

/* Minutes par semaine : barres fines ancrées en bas, bout arrondi de 4 px, la semaine en cours seule étiquetée */
.pcd-barres { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); align-items: end; gap: 8px; height: 128px; padding-top: 24px; border-bottom: 1px solid var(--rule); }
.pcd-barre { position: relative; height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.pcd-barre-trait { display: block; width: 100%; max-width: 24px; border-radius: 4px 4px 0 0; background: color-mix(in srgb, var(--blue) 45%, transparent); }
.pcd-barre-actuelle .pcd-barre-trait { background: var(--blue); }
.pcd-barre-valeur { position: absolute; top: -24px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: .75rem; font-weight: 600; color: var(--white); font-variant-numeric: tabular-nums; }

/* Listes de séances (carnet, plan) : une ligne, filet du sport à gauche */
.pcd-liste { display: grid; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.pcd-etape .pcd-liste:first-child, .pcd-bloc > .pcd-etiquette + .pcd-liste { margin-top: 0; }
.pcd-liste li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 8px 12px; border-left: 4px solid var(--disc, var(--rule)); border-radius: 12px; background: var(--ink3, var(--ink)); }
.pcd-liste li > span:first-child { display: grid; gap: 2px; min-width: 0; }
.pcd-liste strong { font-size: .9375rem; line-height: 1.35; font-weight: 600; }
.pcd-liste small, .pcd-club small { font-size: .8125rem; line-height: 1.4; color: var(--pcd-doux); }
.pcd-liste-valeur { flex: 0 0 auto; font-size: .9375rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.pcd-liste .pcd-repos { background: transparent; border: 1px dashed var(--rule); border-left-width: 4px; }
.pcd-liste .pcd-repos strong { font-weight: 400; color: var(--pcd-doux); }
.pcd-liste .pcd-aujourdhui { outline: 2px solid var(--blue); outline-offset: -2px; }

/* Fil d'exemple */
.pcd-post { margin-bottom: 8px; padding: 16px; border: 1px solid var(--rule); border-radius: 20px; background: var(--ink2); }
.pcd-post header { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.pcd-post header > span:last-child { display: grid; }
.pcd-post header strong { font-size: .9375rem; }
.pcd-post header small { font-size: .8125rem; color: var(--pcd-doux); }
.pcd-post > p { margin: 0; font-size: 1rem; line-height: 1.5; }
.pcd-avatar { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: 0 0 40px; border-radius: 999px; background: var(--ink3, var(--ink)); color: var(--white); font-weight: 700; }
.pcd-avatar-club { border-radius: 12px; background: var(--blue); color: var(--sur-blue); }
.pcd-post .pcd-post-chiffre { display: flex; align-items: baseline; justify-content: space-between; margin-top: 12px; padding: 12px 16px; border-radius: 12px; background: var(--ink3, var(--ink)); font-size: .875rem; color: var(--pcd-doux); }
.pcd-post-chiffre b { font-size: 1.75rem; color: var(--white); font-variant-numeric: tabular-nums; }
.pcd-post footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 12px; font-size: .8125rem; color: var(--pcd-doux); }
.pcd-mot { color: var(--blue); font-weight: 600; }

/* Défi des clubs : une seule série, la valeur toujours écrite à droite */
.pcd-classement { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.pcd-classement li { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 12px; }
.pcd-rang { font-size: 1rem; font-weight: 700; color: var(--pcd-doux); font-variant-numeric: tabular-nums; text-align: center; }
.pcd-club { display: grid; gap: 4px; min-width: 0; }
.pcd-club strong { font-size: .9375rem; font-weight: 600; }
.pcd-jauge { display: block; height: 8px; border-radius: 999px; background: var(--ink3, var(--ink)); overflow: hidden; }
.pcd-jauge span { display: block; height: 100%; border-radius: 999px; background: color-mix(in srgb, var(--blue) 45%, transparent); }
.pcd-mien .pcd-jauge span { background: var(--blue); }
.pcd-mien .pcd-rang { color: var(--blue); }

/* Fin : une seule action principale */
.pcd-fin { display: grid; gap: 8px; margin-top: 24px; padding: 24px 16px; border: 1px solid var(--rule); border-radius: 20px; background: var(--ink2); text-align: center; }
.pcd-fin .pcd-texte { margin-bottom: 8px; }
.pcd-bouton { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border-radius: 14px; background: var(--blue); color: var(--sur-blue); font-size: 1rem; font-weight: 700; text-decoration: none; transition: transform .14s ease-out; }
.pcd-bouton:active { transform: scale(.98); }
.pcd-lien { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; color: var(--white); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.pcd a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    .pcd-chapitres a, .pcd-bouton { transition: none; }
    .pcd-chapitres a:active, .pcd-bouton:active { transform: none; }
}