/*
 * Pro/Active — page du sport : /parcours/<sport>/
 * (objectifs → niveau → plan). Le choix du sport, lui, vit sur l'accueil.
 * Charte Volt : aucun border-radius, hiérarchie par teintes, accent orange.
 * Chargé uniquement sur cette page (en plus de proactive.css + vitrine.css).
 */

/* La barre CTA collante de la vitrine ferait doublon avec le parcours. */
.vt-cta-bar { display: none; }

/* L'attribut `hidden` doit gagner : une règle `display:` sur une classe le
   surclasse sinon (le message « c'est noté » s'affichait avant tout envoi). */
.pc [hidden] { display: none; }

/* ==========================================================================
   Cadre
   ========================================================================== */

.pc {
  position: relative;
  overflow: hidden;
  background: var(--pa-fond);
}
/* Barre diagonale décorative (motif Volt), très discrète. */
.pc::before {
  content: "";
  position: absolute;
  top: -20%;
  right: -12%;
  width: 34%;
  height: 150%;
  background: linear-gradient(180deg, rgba(255, 108, 2, 0.16), rgba(255, 108, 2, 0));
  transform: skewX(-14deg);
  pointer-events: none;
}

.pc__cadre {
  position: relative;
  max-width: 900px;
  min-height: calc(100vh - 74px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 56px;
  padding-bottom: 72px;
}

/* ==========================================================================
   Bandeau « votre sport » — rappel compact du choix fait sur l'accueil
   ========================================================================== */

.pc__sport {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  margin-bottom: 20px;
  background: var(--pa-panneau);
  border-left: 4px solid var(--pa-accent);
}
.pc__sport-icone {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  stroke: var(--pa-accent);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pc__sport-texte {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.pc__sport-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pa-sourdine);
}
.pc__sport-nom {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--pa-blanc);
}
.pc__sport-changer {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.pc__non-reconnu {
  margin: 0 0 20px;
  padding: 12px 16px;
  background: var(--pa-erreur-bg);
  color: var(--pa-erreur-texte);
  font-size: 14.5px;
  line-height: 1.5;
  border-left: 3px solid var(--pa-accent);
}

.pc__tete {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 34px;
}
.pc__progression {
  flex: 1;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 6px;
}
.pc__progression span {
  height: 4px;
  background: var(--pa-bordure-douce);
  transition: background 0.25s;
}
.pc__progression span.is-fait { background: var(--pa-accent); }
.pc__progression span.is-courant { background: var(--pa-blanc); }
.pc__compteur {
  margin: 0;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--pa-texte-4);
  font-variant-numeric: tabular-nums;
}
.pc__compteur-sep { color: var(--pa-accent); margin: 0 3px; }

/* ==========================================================================
   Étapes
   ========================================================================== */

/* Avant que parcours.js n'ait pris la main (chargé en defer), les cases sont
   atténuées et inertes : sur une connexion lente, un clic trop tôt ne donne
   plus l'impression que « ça ne marche pas » (recette du 04/09/2026). */
.pc__etapes:not(.is-pret) { opacity: 0.55; pointer-events: none; }
.pc__etapes { transition: opacity 0.2s; }

.pc__etape { display: none; }
.pc__etape.is-active {
  display: block;
  animation: pc-entree 0.32s ease-out both;
}
@keyframes pc-entree {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pc__etape.is-active { animation: none; }
}

.pc__titre {
  font-family: var(--pa-police-titre);
  text-transform: uppercase;
  color: var(--pa-blanc);
  font-size: clamp(36px, 6.4vw, 76px);
  line-height: 0.92;
  letter-spacing: -0.04em;
  margin: 12px 0 22px;
  outline: none;
}
/* Titre-phrase (« Pour la course à pied, vous voulez surtout… ») : plus long
   qu'un titre de deux mots, il respire mieux un cran en dessous. */
.pc__titre--phrase {
  font-size: clamp(30px, 4.4vw, 52px);
  line-height: 0.98;
  letter-spacing: -0.03em;
}
.pc__texte {
  font-size: 18px;
  line-height: 1.6;
  color: var(--pa-texte-3);
  max-width: 580px;
  margin: 0 0 30px;
}
.pc__note {
  margin: 14px 0 0;
  font-size: 13.5px;
  color: var(--pa-sourdine);
}
.pc__note a { font-weight: 700; }

/* Formulaire téléphone */
.pc__form { max-width: 620px; }
.pc__ligne {
  display: flex;
  gap: 12px;
  align-items: stretch;
}
.pc__ligne--compacte { gap: 10px; }
.pc__input {
  flex: 1;
  font-size: 19px;
  font-weight: 700;
  padding: 18px 20px;
  letter-spacing: 0.02em;
}
.pc__ligne--compacte .pc__input { font-size: 17px; padding: 15px 16px; }
.pc__bouton { white-space: nowrap; }
.pc__bouton[disabled] {
  background: var(--pa-carte-alt);
  color: var(--pa-desactive);
  cursor: not-allowed;
}

.pc__erreur {
  margin: 12px 0 0;
  padding: 11px 14px;
  background: var(--pa-erreur-bg);
  color: var(--pa-erreur-texte);
  font-size: 14.5px;
  border-left: 3px solid var(--pa-accent);
}
.pc__ok {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 0;
  padding: 12px 14px;
  background: var(--pa-succes-bg);
  color: var(--pa-succes-texte);
  font-weight: 700;
  font-size: 15px;
}
.pc__ok svg {
  width: 20px;
  height: 20px;
  stroke: var(--pa-succes);
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pc__lien {
  display: inline-block;
  margin-top: 26px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--pa-texte-4);
  font-weight: 700;
  font-size: 14.5px;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.pc__lien:hover { color: var(--pa-accent); }

.pc__retour {
  padding: 12px 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--pa-texte-3);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pc__retour:hover { color: var(--pa-accent); }

.pc__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 30px;
}
.pc__actions .pc__lien { margin-top: 0; }
.pc__actions--fin { justify-content: flex-end; }

/* ==========================================================================
   Chips (sports, objectifs, niveaux)
   ========================================================================== */

.pc__grille {
  display: grid;
  gap: 12px;
}
.pc__grille--objectifs { grid-template-columns: repeat(2, 1fr); }
.pc__grille--niveaux { grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); }

.pc__chip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 74px;
  padding: 18px 20px;
  background: var(--pa-panneau);
  border: 2px solid var(--pa-bordure-douce);
  color: var(--pa-blanc);
  font-family: var(--pa-police-texte);
  font-weight: 800;
  font-size: 16px;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.pc__chip:hover { border-color: var(--pa-accent); }
.pc__chip:focus-visible {
  outline: 2px solid var(--pa-accent);
  outline-offset: 2px;
}
.pc__chip:active { transform: scale(0.985); }
.pc__chip[aria-pressed="true"] {
  background: var(--pa-accent);
  border-color: var(--pa-accent);
  color: var(--pa-fond);
}

.pc__chip-corps { display: flex; flex-direction: column; gap: 4px; }
.pc__chip-corps small {
  font-weight: 500;
  font-size: 13.5px;
  color: var(--pa-texte-4);
}
.pc__chip[aria-pressed="true"] .pc__chip-corps small { color: rgba(1, 38, 71, 0.78); }

.pc__chip--objectif { min-height: 92px; align-items: center; }
.pc__chip-case {
  flex-shrink: 0;
  margin-left: auto;
  width: 24px;
  height: 24px;
  border: 2px solid var(--pa-bordure-vive);
  display: grid;
  place-items: center;
}
.pc__chip-case svg {
  width: 16px;
  height: 16px;
  stroke: var(--pa-fond);
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
}
.pc__chip[aria-pressed="true"] .pc__chip-case {
  background: var(--pa-blanc);
  border-color: var(--pa-blanc);
}
.pc__chip[aria-pressed="true"] .pc__chip-case svg { opacity: 1; }
.pc__chip-fleche {
  margin-left: auto;
  color: var(--pa-accent);
  font-size: 22px;
}
.pc__chip[aria-pressed="true"] .pc__chip-fleche { color: var(--pa-fond); }

/* ==========================================================================
   Résultat
   ========================================================================== */

.pc__resume {
  margin: -6px 0 26px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--pa-texte-3);
}
.pc__resume strong { color: var(--pa-accent); }

.pc__plan {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.pc__item {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 22px 24px;
  background: var(--pa-panneau);
  border: 2px solid var(--pa-bordure-douce);
}
.pc__item--une { border-color: rgba(255, 108, 2, 0.55); }
.pc__item-n {
  font-family: var(--pa-police-titre);
  font-size: 26px;
  line-height: 1;
  color: var(--pa-accent);
}
.pc__item-entete {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.pc__item-entete .pa-titre-2 { margin: 0; font-size: 19px; }
.pc__item-pourquoi {
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--pa-texte-2);
}
.pc__item-pied {
  display: flex;
  gap: 16px;
  font-size: 13.5px;
  color: var(--pa-sourdine);
  font-weight: 700;
}
.pc__item-pied strong { color: var(--pa-blanc); }
.pc__item .pa-btn,
.pc__item .pa-btn-secondaire { white-space: nowrap; }

.pc__vide { color: var(--pa-texte-3); }

.pc__final {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 14px;
  margin-top: 26px;
}
.pc__final-col {
  padding: 28px;
  background: var(--pa-carte-alt);
}
.pc__final-col--compte { border-top: 4px solid var(--pa-accent); }
.pc__final .pc__ligne--compacte { flex-direction: column; align-items: stretch; }
.pc__final-col .pa-titre-2 { margin: 0 0 8px; }
.pc__final-col .pa-texte { margin: 0 0 18px; }
.pc__final-col .pc__note { margin-top: 12px; }

.pc__avertissement {
  margin: 20px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--pa-sourdine);
}

.pc__noscript {
  margin-top: 24px;
  padding: 14px 18px;
  background: var(--pa-panneau);
  color: var(--pa-texte-2);
}

/* Repli sans sport : l'accueil rend encore ce gabarit tant qu'il n'a pas le sien. */
.pc__sans-sport .pa-btn { margin-top: 4px; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 900px) {
  .pc__cadre { min-height: 0; padding-top: 40px; padding-bottom: 56px; }
  .pc__final { grid-template-columns: 1fr; }
  .pc__item {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 20px 18px 20px 20px;
  }
  .pc__item-n { font-size: 18px; }
  .pc__item .pa-btn,
  .pc__item .pa-btn-secondaire { width: 100%; }
}

@media (max-width: 640px) {
  .pc__cadre { padding-top: 30px; padding-bottom: 48px; }
  .pc__tete { margin-bottom: 26px; }
  .pc__sport { flex-wrap: wrap; gap: 12px; padding: 12px 14px; }
  .pc__sport-icone { width: 28px; height: 28px; }
  .pc__sport-nom { font-size: 16px; }
  .pc__sport-changer { margin-left: auto; }
  .pc__titre { font-size: clamp(32px, 10vw, 46px); }
  .pc__titre--phrase { font-size: clamp(27px, 8vw, 38px); }
  .pc__texte { font-size: 16.5px; margin-bottom: 24px; }
  .pc__ligne { flex-direction: column; }
  .pc__bouton { width: 100%; }
  .pc__grille--objectifs,
  .pc__grille--niveaux { grid-template-columns: 1fr; }
  .pc__chip { min-height: 66px; padding: 14px 14px; font-size: 15px; gap: 10px; }
  .pc__chip--objectif { min-height: 78px; }
  .pc__actions { margin-top: 24px; }
  .pc__actions .pc__bouton { width: 100%; order: -1; }
  .pc__final-col { padding: 22px 18px; }
  .pc__lien { margin-top: 20px; }
}