/*
 * Questionnaire sportif « Découvrir mon profil » — lot B (écrans publics),
 * demande de Pierre du 25/10/2026. Charte Volt (docs/CHARTE-VOLT.md) :
 * aucun border-radius, marine / panneau / carte, orange #FF6C02, Archivo
 * Black pour les titres, hover d'un bouton orange = fond blanc.
 *
 * Fil conducteur visuel : le « / » de PRO/ACTIVE. Barre de progression en
 * segments obliques, trait qui balaie l'écran au départ, liseré oblique du
 * graphique d'accueil.
 *
 * Toute animation est conditionnée à `.ps-js-anim` sur <html>, posée par
 * profil-sportif.js SEULEMENT si `prefers-reduced-motion` ne la refuse pas :
 * sans JS ou en mouvement réduit, tout est visible et immobile.
 *
 * Sommaire : 1. socle · 2. bloc de l'accueil du site · 3. écran d'accueil
 * du questionnaire · 4. étapes · 5. semaine · 6. ressentis · 7. fiche en
 * direct · 8. résultat · 9. pistes et coordonnées · 10. graphiques SVG ·
 * 11. page du lien privé · 12. mouvements.
 */

/* ==========================================================================
   1. Socle
   ========================================================================== */

.ps [hidden],
.ps-rappel [hidden],
.ps-bloc [hidden] { display: none !important; }

.ps-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.ps-ic {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.ps {
  background: var(--pa-fond);
  color: var(--pa-texte);
  overflow-x: clip;
}

.ps-noscript { padding-block: 64px; }
.ps-noscript a { color: var(--pa-accent); }

.ps-facultatif {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: none;
  font-weight: 600;
  color: var(--pa-placeholder);
  margin-left: 6px;
}

.ps-aide {
  margin: 0 0 16px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--pa-texte-4);
}

.ps-alerte {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 18px 0 0;
  padding: 14px 16px;
  font-size: 14.5px;
  line-height: 1.5;
}

.ps-mention-courte {
  margin: 22px 0 0;
  padding-left: 12px;
  border-left: 2px solid var(--pa-bordure);
  font-size: 13px;
  line-height: 1.5;
  color: var(--pa-sourdine);
}

.ps-lien-discret {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  background: none;
  border: 0;
  cursor: pointer;
  font: 700 14px/1.3 var(--pa-police-texte);
  color: var(--pa-texte-4);
  text-decoration: underline;
  text-decoration-color: rgba(234, 242, 249, 0.3);
  text-underline-offset: 4px;
}
.ps-lien-discret:hover { color: var(--pa-accent); text-decoration-color: var(--pa-accent); }
.ps-lien-discret .ps-ic { width: 16px; height: 16px; }

.ps :focus-visible,
.ps-bloc :focus-visible,
.ps-rappel :focus-visible {
  outline: 2px solid var(--pa-accent);
  outline-offset: 3px;
}
.ps .ps-etape__titre:focus,
.ps .ps-res-entete__titre:focus { outline: none; }

.pa-btn .ps-ic,
.pa-btn-secondaire .ps-ic { width: 18px; height: 18px; }

/* ==========================================================================
   2. Bloc « Découvrir mon profil » sur l'accueil du site
   ========================================================================== */

.ps-bloc {
  position: relative;
  background: var(--pa-fond-profond);
  border-bottom: 1px solid var(--pa-bordure-douce);
  overflow: hidden;
  padding-block: 44px;
}

.ps-bloc__grille {
  position: relative;
  display: grid;
  gap: 28px;
  align-items: center;
}

.ps-bloc__titre {
  margin: 10px 0 12px;
  font-family: var(--pa-police-titre);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.035em;
  line-height: 0.95;
  font-size: clamp(30px, 8.4vw, 58px);
  color: var(--pa-blanc);
}
.ps-bloc__titre span { display: block; }
.ps-bloc__titre span + span { color: var(--pa-accent); }

.ps-bloc__texte {
  margin: 0 0 22px;
  max-width: 54ch;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--pa-texte-2);
}

.ps-bloc__reperes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  font-weight: 700;
  color: var(--pa-sourdine);
}
.ps-bloc__reperes li { position: relative; padding-left: 14px; }
.ps-bloc__reperes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 7px;
  height: 2px;
  background: var(--pa-accent);
}

/* Le graphique du bloc : la même semaine qui monte que sur l'écran d'accueil. */
.ps-bloc__visuel {
  position: relative;
  background: var(--pa-panneau);
  border-left: 4px solid var(--pa-accent);
  padding: 18px 18px 10px;
  max-width: 520px;
}
.ps-bloc__visuel .ps-cap { display: block; width: 100%; height: auto; }

@media (min-width: 900px) {
  .ps-bloc { padding-block: 72px; }
  .ps-bloc__grille { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 56px; }
  .ps-bloc__visuel { justify-self: end; width: 100%; }
}

/* ==========================================================================
   3. Écran d'accueil du questionnaire : le bouton « Découvrir mon profil »
   ========================================================================== */

.ps-intro {
  position: relative;
  min-height: calc(100svh - 72px);
  display: flex;
  align-items: center;
  padding-block: 40px 56px;
  background:
    linear-gradient(180deg, var(--pa-fond) 0%, var(--pa-fond-profond) 100%);
}

.ps-intro__grille {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  align-items: center;
}

.ps-intro__titre {
  margin: 14px 0 0;
  font-family: var(--pa-police-titre);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.04em;
  line-height: 0.92;
  /* « Construisons-le. » doit tenir sur une ligne : ~10,5 em de large. */
  font-size: clamp(30px, 8.4vw, 92px);
  color: var(--pa-blanc);
}
.ps-intro__ligne { display: block; }
.ps-intro__ligne--accent { color: var(--pa-accent); }

.ps-intro__phrase {
  margin: 0 0 28px;
  max-width: 46ch;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--pa-texte-2);
}

.ps-intro__reperes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--pa-sourdine);
}
.ps-intro__reperes li { position: relative; padding-left: 15px; }
.ps-intro__reperes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 8px;
  height: 2px;
  background: var(--pa-accent);
}

.ps-intro__visuel {
  position: relative;
  background: var(--pa-panneau);
  padding: 22px 20px 12px;
  border: 1px solid var(--pa-bordure-douce);
}
.ps-intro__visuel .ps-cap { display: block; width: 100%; height: auto; position: relative; z-index: 1; }

/* Le « / » de la marque, posé de biais sur le coin du graphique. */
.ps-intro__slash {
  position: absolute;
  top: -16px;
  left: 30px;
  width: 14px;
  height: 64px;
  background: var(--pa-accent);
  transform: skewX(-22deg);
  z-index: 2;
}

@media (min-width: 900px) {
  .ps-intro { padding-block: 48px 64px; }
  .ps-intro__grille {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    grid-template-areas: "tete tete" "texte visuel";
    column-gap: 64px;
    row-gap: 40px;
    align-items: start;
  }
  .ps-intro__texte { padding-top: 12px; }
  .ps-intro__tete { grid-area: tete; }
  .ps-intro__texte { grid-area: texte; }
  .ps-intro__visuel { grid-area: visuel; padding: 30px 28px 14px; }
  .ps-intro__titre { font-size: min(6.8vw, 92px); }
}

/* Graphique « cap » (accueil du questionnaire et bloc de l'accueil) */
.ps-cap__grille line { stroke: rgba(234, 242, 249, 0.1); stroke-width: 1; stroke-dasharray: 3 5; }
.ps-cap__barres rect { fill: rgba(234, 242, 249, 0.14); }
.ps-cap__barres rect:last-child { fill: rgba(255, 108, 2, 0.32); }
.ps-cap__trace {
  fill: none;
  stroke: var(--pa-accent);
  stroke-width: 4;
  stroke-linejoin: miter;
  stroke-linecap: square;
}
.ps-cap__cible rect { fill: var(--pa-accent); }
.ps-cap__cible-onde { fill: none !important; stroke: var(--pa-accent); stroke-width: 2; }
.ps-cap__etiquette {
  font: 800 12px var(--pa-police-texte);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  fill: var(--pa-sourdine);
}
.ps-cap__etiquette--fin { text-anchor: end; fill: var(--pa-accent); }

/* Le bouton de départ */
.ps-depart {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: var(--pa-accent);
  color: var(--pa-fond);
  font: 800 15px/1 var(--pa-police-texte);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  isolation: isolate;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.ps-depart__texte { position: relative; z-index: 1; padding: 22px 24px 22px 26px; }
.ps-depart__fleche {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  background: var(--pa-fond);
  color: var(--pa-accent);
  overflow: hidden;
}
.ps-depart__fleche .ps-ic { width: 24px; height: 24px; stroke-width: 2.2; transition: transform 0.25s ease; }
.ps-depart:hover,
.ps-depart:focus-visible { background: #fff; }
.ps-depart:hover .ps-depart__fleche .ps-ic,
.ps-depart:focus-visible .ps-depart__fleche .ps-ic { transform: translateX(5px); }
.ps-depart:active { transform: translateY(1px); }

/* Ondes carrées autour du bouton (animées en §12). */
.ps-depart__onde {
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 2px solid var(--pa-accent);
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 420px) {
  .ps-depart { width: 100%; }
  .ps-depart__texte { flex: 1; text-align: left; padding-inline: 20px 12px; }
}

/* ==========================================================================
   4. Étapes
   ========================================================================== */

.ps-questions { padding-block: 20px 64px; }

.ps-questions__grille {
  display: grid;
  gap: 28px;
  align-items: start;
  max-width: 1240px;
}

.ps-panneau {
  background: var(--pa-panneau);
  padding: 22px 18px 26px;
  border-top: 3px solid var(--pa-accent);
  min-width: 0;
}

@media (min-width: 700px) {
  .ps-panneau { padding: 34px 40px 36px; }
}

@media (min-width: 1080px) {
  .ps-questions { padding-block: 40px 88px; }
  .ps-questions__grille { grid-template-columns: minmax(0, 1fr) 360px; gap: 36px; }
}

/* Progression : cinq segments obliques, le « / » de la marque. */
.ps-progression { margin-bottom: 26px; }
.ps-progression__texte {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin: 0 0 12px;
}
.ps-progression__num {
  font-family: var(--pa-police-titre);
  font-size: 26px;
  line-height: 1;
  color: var(--pa-accent);
}
.ps-progression__total {
  font-family: var(--pa-police-titre);
  font-size: 15px;
  color: var(--pa-sourdine);
}
.ps-progression__nom {
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pa-texte-4);
}
.ps-progression__barre {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 7px;
  padding-inline: 4px;
}
.ps-progression__barre span {
  position: relative;
  height: 8px;
  background: rgba(234, 242, 249, 0.12);
  transform: skewX(-28deg);
  overflow: hidden;
}
.ps-progression__barre span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--pa-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ps-progression__barre span.est-fait::after { transform: scaleX(1); }
.ps-progression__barre span.est-courant::after { transform: scaleX(0.5); }

.ps-etape__titre {
  margin: 0 0 26px;
  font-family: var(--pa-police-titre);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 0.98;
  font-size: clamp(28px, 7.6vw, 46px);
  color: var(--pa-blanc);
}
.ps-etape > .ps-aide { margin-top: -12px; }

.ps-groupe {
  margin: 0 0 26px;
  padding: 0;
  border: 0;
  min-width: 0;
}
.ps-groupe > legend { padding: 0; float: left; width: 100%; }
.ps-groupe > legend + * { clear: both; }

/* Cartes de choix */
.ps-choix-grille { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ps-choix-grille--liste { grid-template-columns: 1fr; }
.ps-choix-grille--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ps-choix-grille--puces { display: flex; flex-wrap: wrap; }

@media (min-width: 700px) {
  .ps-choix-grille--sports { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ps-choix-grille--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ps-choix-grille--liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ps-choix {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  margin: 0;
  padding: 14px 16px;
  cursor: pointer;
  text-align: left;
  background: var(--pa-fond);
  border: 2px solid var(--pa-bordure-douce);
  color: var(--pa-texte);
  font: 800 14.5px/1.3 var(--pa-police-texte);
  transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.ps-choix:hover { border-color: rgba(255, 108, 2, 0.55); }
.ps-choix:active { transform: scale(0.98); }
.ps-choix[aria-pressed="true"] {
  background: rgba(255, 108, 2, 0.12);
  border-color: var(--pa-accent);
  color: var(--pa-blanc);
}
/* Coin coupé orange : la marque du choix retenu. */
.ps-choix::after {
  content: "";
  position: absolute;
  top: -2px;
  right: -2px;
  width: 18px;
  height: 18px;
  background: var(--pa-accent);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  transform: scale(0);
  transform-origin: top right;
  transition: transform 0.2s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.ps-choix[aria-pressed="true"]::after { transform: scale(1); }

.ps-choix--sport {
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  min-height: 92px;
  gap: 10px;
}
.ps-choix__ic { width: 28px; height: 28px; stroke-width: 1.6; color: var(--pa-sourdine); transition: color 0.18s ease; }
.ps-choix[aria-pressed="true"] .ps-choix__ic,
.ps-choix:hover .ps-choix__ic { color: var(--pa-accent); }

.ps-choix--puce { min-height: 46px; padding: 11px 16px; font-size: 14px; }

.ps-choix-grille--3 .ps-choix { justify-content: center; text-align: center; padding-inline: 10px; }

/* Navigation */
.ps-nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--pa-bordure-douce);
}
.ps-nav .pa-btn,
.ps-nav .pa-btn-secondaire {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: auto;
}
.ps-nav__retour { padding-inline: 18px; }
.ps-nav__suite { flex: 1; max-width: 300px; margin-left: auto; }
.ps-nav__suite:disabled {
  cursor: not-allowed;
  background: rgba(255, 108, 2, 0.28);
  color: rgba(1, 38, 71, 0.75);
}
.ps-nav__suite:disabled:hover { background: rgba(255, 108, 2, 0.28); }
.ps-nav__manque {
  margin: 12px 0 0;
  min-height: 1.4em;
  font-size: 13px;
  line-height: 1.45;
  color: var(--pa-sourdine);
  text-align: right;
}

.est-en-cours { position: relative; color: transparent !important; }
.est-en-cours::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 3px solid var(--pa-fond);
  border-right-color: transparent;
  animation: ps-tourne 0.7s linear infinite;
}

/* ==========================================================================
   5. Semaine : histogramme qu'on règle aux boutons ou au doigt
   ========================================================================== */

.ps-semaine {
  background: var(--pa-fond);
  border: 1px solid var(--pa-bordure-douce);
  padding: 18px 12px 12px;
}
.ps-semaine__total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 6px;
  margin-bottom: 16px;
  padding-inline: 4px;
  color: var(--pa-sourdine);
  font-weight: 700;
  font-size: 14px;
}
.ps-semaine__total strong {
  font-family: var(--pa-police-titre);
  font-weight: 400;
  font-size: clamp(30px, 8vw, 40px);
  line-height: 1;
  color: var(--pa-blanc);
  letter-spacing: -0.02em;
}
.ps-semaine__actifs {
  margin-left: auto;
  padding: 5px 9px;
  background: rgba(255, 108, 2, 0.12);
  color: var(--pa-accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ps-semaine__graphe {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  height: 170px;
}
.ps-semaine__echelle {
  display: grid;
  grid-template-rows: repeat(5, 1fr);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--pa-placeholder);
}
.ps-semaine__echelle span { transform: translateY(-0.6em); }
.ps-semaine__dessin {
  position: relative;
  touch-action: none;
  cursor: ns-resize;
  user-select: none;
}
.ps-semaine__dessin .ps-svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }

.ps-semaine__jours {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin-left: 30px;
  margin-top: 10px;
  border-top: 2px solid rgba(234, 242, 249, 0.3);
  padding-top: 8px;
}
.ps-jour {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.ps-jour__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 44px;
  height: 34px;
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 2px solid var(--pa-bordure);
  color: var(--pa-texte);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.ps-jour__btn .ps-ic { width: 16px; height: 16px; stroke-width: 2.4; }
.ps-jour__btn:hover:not(:disabled) { border-color: var(--pa-accent); color: var(--pa-accent); }
.ps-jour__btn:active:not(:disabled) { background: var(--pa-accent); color: var(--pa-fond); }
.ps-jour__btn:disabled { opacity: 0.3; cursor: default; }
.ps-jour__valeur {
  font-family: var(--pa-police-titre);
  font-size: 16px;
  line-height: 1.3;
  color: var(--pa-sourdine);
  font-variant-numeric: tabular-nums;
}
.ps-jour.est-actif .ps-jour__valeur { color: var(--pa-blanc); }
.ps-jour__nom {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--pa-texte-4);
}
.ps-jour.est-actif .ps-jour__nom { color: var(--pa-accent); }
.ps-semaine__unite {
  margin: 10px 0 0;
  text-align: right;
  font-size: 11.5px;
  color: var(--pa-placeholder);
}

@media (min-width: 700px) {
  .ps-semaine { padding: 22px 22px 16px; }
  .ps-semaine__graphe { height: 220px; grid-template-columns: 38px minmax(0, 1fr); }
  .ps-semaine__jours { margin-left: 38px; }
  .ps-jour__btn { height: 38px; }
}

/* ==========================================================================
   6. Ressentis : curseurs 0-10
   ========================================================================== */

.ps-curseurs { display: grid; gap: 14px; margin-bottom: 28px; }

@media (min-width: 900px) {
  .ps-curseurs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
}

.ps-curseur {
  background: var(--pa-fond);
  border: 1px solid var(--pa-bordure-douce);
  border-left: 3px solid rgba(234, 242, 249, 0.18);
  padding: 14px 16px 12px;
  transition: border-color 0.2s ease;
}
.ps-curseur.est-renseigne { border-left-color: var(--pa-accent); }
.ps-curseur__tete {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.ps-curseur__libelle { font-weight: 800; font-size: 14.5px; color: var(--pa-texte); }
.ps-curseur__valeur {
  font-family: var(--pa-police-titre);
  font-size: 26px;
  line-height: 1;
  color: var(--pa-sourdine);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.ps-curseur__valeur small { font-size: 13px; color: var(--pa-placeholder); margin-left: 2px; }
.ps-curseur.est-renseigne .ps-curseur__valeur { color: var(--pa-accent); }
.ps-curseur__bornes {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 2px 0 0;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--pa-placeholder);
}
.ps-curseur__bornes span:last-child { text-align: right; }

.ps-range {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 36px;
  margin: 6px 0 0;
  background: transparent;
  cursor: pointer;
  --remplissage: rgba(234, 242, 249, 0.3);
}
.ps-curseur.est-renseigne .ps-range { --remplissage: var(--pa-accent); }
.ps-range::-webkit-slider-runnable-track {
  height: 6px;
  background: linear-gradient(to right, var(--remplissage) 0 calc(var(--part, 0.5) * 100%), rgba(234, 242, 249, 0.12) 0);
}
.ps-range::-moz-range-track {
  height: 6px;
  background: linear-gradient(to right, var(--remplissage) 0 calc(var(--part, 0.5) * 100%), rgba(234, 242, 249, 0.12) 0);
}
.ps-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  margin-top: -9px;
  background: var(--pa-panneau);
  border: 3px solid var(--pa-sourdine);
  transform: rotate(45deg) scale(0.85);
  transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.ps-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 0;
  background: var(--pa-panneau);
  border: 3px solid var(--pa-sourdine);
  transform: rotate(45deg) scale(0.85);
}
.ps-curseur.est-renseigne .ps-range::-webkit-slider-thumb { background: #fff; border-color: var(--pa-accent); transform: rotate(45deg); }
.ps-curseur.est-renseigne .ps-range::-moz-range-thumb { background: #fff; border-color: var(--pa-accent); transform: rotate(45deg); }
.ps-range:active::-webkit-slider-thumb { transform: rotate(45deg) scale(1.15); }
.ps-range:focus-visible { outline: 2px solid var(--pa-accent); outline-offset: 2px; }

/* ==========================================================================
   7. Fiche « Votre profil se dessine » (ordinateur)
   ========================================================================== */

.ps-fiche { display: none; }

@media (min-width: 1080px) {
  .ps-fiche {
    display: block;
    position: sticky;
    top: 96px;
    background: var(--pa-fond-profond);
    border: 1px solid var(--pa-bordure-douce);
    padding: 24px 24px 20px;
    overflow: hidden;
  }
  .ps-fiche::before {
    content: "";
    position: absolute;
    top: -20px;
    right: 34px;
    width: 14px;
    height: 70px;
    background: var(--pa-accent);
    transform: skewX(-22deg);
  }
}
.ps-fiche .pa-surtitre { margin: 0 0 18px; }
.ps-fiche__sport { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; }
.ps-fiche__ic {
  width: 52px;
  height: 52px;
  padding: 11px;
  background: var(--pa-panneau);
  color: var(--pa-accent);
  stroke-width: 1.5;
}
.ps-fiche__grand {
  margin: 0;
  font-family: var(--pa-police-titre);
  font-size: 19px;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--pa-blanc);
}
.ps-fiche__petit { margin: 4px 0 0; font-size: 13.5px; font-weight: 700; color: var(--pa-texte-4); }
.ps-fiche .est-vide { color: var(--pa-desactive); }
.ps-fiche__lignes { margin: 0 0 18px; display: grid; gap: 1px; background: var(--pa-bordure-douce); }
.ps-fiche__lignes div {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 10px;
  padding: 10px 0;
  background: var(--pa-fond-profond);
}
.ps-fiche__lignes dt { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pa-sourdine); padding-top: 2px; }
.ps-fiche__lignes dd { margin: 0; font-size: 14px; font-weight: 700; color: var(--pa-texte); }
.ps-fiche__bloc { margin-top: 16px; }
.ps-fiche__titre-bloc {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pa-sourdine);
}
.ps-fiche__titre-bloc strong {
  font-family: var(--pa-police-titre);
  font-weight: 400;
  letter-spacing: 0;
  font-size: 18px;
  color: var(--pa-blanc);
}
.ps-fiche .ps-svg { display: block; width: 100%; height: auto; }

/* ==========================================================================
   8. Résultat
   ========================================================================== */

.ps-resultat { padding-block: 36px 72px; }

.ps-res-entete { max-width: 980px; margin-bottom: 30px; }
.ps-res-entete .pa-surtitre { margin: 0 0 14px; }
.ps-res-entete__titre {
  margin: 0 0 12px;
  font-family: var(--pa-police-titre);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.04em;
  line-height: 0.93;
  font-size: clamp(38px, 10.6vw, 92px);
  color: var(--pa-blanc);
}
.ps-res-entete__cap { margin: 0 0 22px; font-size: 17px; font-weight: 700; color: var(--pa-texte-4); }
.ps-res-profil {
  margin: 0 0 10px;
  padding: 18px 20px;
  background: var(--pa-panneau);
  border-left: 4px solid var(--pa-accent);
  font-size: clamp(19px, 4.8vw, 26px);
  font-weight: 800;
  line-height: 1.3;
  color: var(--pa-blanc);
  max-width: 34ch;
}

.ps-res-grille { display: grid; gap: 28px; align-items: start; }
.ps-res-colonne { display: grid; gap: 16px; min-width: 0; }

@media (min-width: 1000px) {
  .ps-resultat { padding-block: 56px 96px; }
  .ps-res-grille { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 36px; }
}

/* Trois repères chiffrés */
.ps-reperes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--pa-bordure-douce);
  border: 1px solid var(--pa-bordure-douce);
}
.ps-repere {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 12px 14px;
  background: var(--pa-panneau);
  min-width: 0;
}
.ps-repere dt {
  order: 2;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pa-texte-4);
  line-height: 1.3;
}
.ps-repere dd { order: 1; margin: 0; color: var(--pa-blanc); white-space: nowrap; }
.ps-repere dd strong {
  font-family: var(--pa-police-titre);
  font-weight: 400;
  font-size: clamp(30px, 9vw, 48px);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.ps-repere dd small { margin-left: 2px; font-size: 13px; font-weight: 800; color: var(--pa-sourdine); }
.ps-repere__jauge { order: 3; display: block; height: 4px; background: rgba(234, 242, 249, 0.12); overflow: hidden; }
.ps-repere__jauge span {
  display: block;
  height: 100%;
  background: var(--pa-accent);
  transform: scaleX(var(--part, 0));
  transform-origin: left;
  transition: transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (min-width: 700px) {
  .ps-repere { padding: 20px 20px 18px; }
}

/* Cartes des graphiques */
.ps-carte {
  background: var(--pa-panneau);
  padding: 20px 16px 18px;
  min-width: 0;
}
@media (min-width: 700px) { .ps-carte { padding: 26px 26px 22px; } }
.ps-carte__titre {
  margin: 0 0 8px;
  font-family: var(--pa-police-titre);
  font-weight: 400;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--pa-blanc);
}
.ps-carte__chiffre { margin: 0 0 14px; font-size: 14px; font-weight: 700; color: var(--pa-sourdine); }
.ps-carte__chiffre strong {
  font-family: var(--pa-police-titre);
  font-weight: 400;
  font-size: 30px;
  color: var(--pa-accent);
  letter-spacing: -0.02em;
}
.ps-carte__note { display: inline-block; margin-left: 12px; font-size: 13px; font-weight: 700; color: var(--pa-texte-4); }
.ps-carte__note--bloc { display: block; margin: 0 0 16px; font-weight: 500; line-height: 1.5; }
.ps-graphe-res .ps-svg { display: block; width: 100%; height: auto; overflow: visible; }

/* ==========================================================================
   9. Pistes, cartes verrouillées, coordonnées
   ========================================================================== */

.ps-pistes__titre {
  margin: 0;
  font-family: var(--pa-police-titre);
  font-weight: 400;
  font-size: 22px;
  text-transform: uppercase;
  color: var(--pa-blanc);
}
.ps-pistes { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }

.ps-piste {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  padding: 20px 18px 20px 16px;
  background: var(--pa-panneau);
  border-left: 4px solid var(--pa-accent);
}
.ps-piste__num {
  font-family: var(--pa-police-titre);
  font-size: 32px;
  line-height: 0.9;
  color: var(--pa-accent);
  letter-spacing: -0.03em;
}
.ps-piste__titre {
  margin: 0 0 8px;
  font-family: var(--pa-police-titre);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--pa-blanc);
}
.ps-piste__texte { margin: 0; font-size: 15px; line-height: 1.6; color: var(--pa-texte-2); }
.ps-piste__lien {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 10px 14px;
  border: 2px solid rgba(255, 108, 2, 0.5);
  font-size: 14px;
  font-weight: 800;
  color: var(--pa-accent);
  text-decoration: none;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.ps-piste__lien:hover { background: var(--pa-accent); color: var(--pa-fond); }
.ps-piste__lien .ps-ic { width: 16px; height: 16px; stroke-width: 2.2; }

.ps-verrou { display: grid; gap: 14px; }
.ps-verrou__cartes { display: grid; gap: 10px; }
.ps-piste--verrou {
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto;
  align-items: center;
  row-gap: 10px;
  border-left-color: rgba(255, 108, 2, 0.4);
  overflow: hidden;
}
.ps-piste--verrou .ps-piste__num { grid-row: 1 / 4; align-self: start; opacity: 0.55; }
.ps-flou {
  grid-column: 2;
  display: block;
  height: 10px;
  width: 92%;
  background: rgba(234, 242, 249, 0.2);
  filter: blur(4px);
}
.ps-flou--titre { height: 16px; width: 70%; background: rgba(255, 255, 255, 0.45); }
.ps-flou--court { width: 55%; }
.ps-verrou__ic {
  grid-column: 3;
  grid-row: 1;
  width: 22px;
  height: 22px;
  color: var(--pa-accent);
}
.ps-verrou__texte {
  margin: 4px 0 0;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.4;
  color: var(--pa-blanc);
}

.ps-coord {
  display: grid;
  gap: 16px;
  padding: 22px 18px;
  background: var(--pa-carte-alt);
  border-top: 3px solid var(--pa-accent);
}
@media (min-width: 700px) { .ps-coord { padding: 28px 28px 26px; } }
.ps-coord .pa-label { margin-bottom: 7px; }
.ps-coord .pa-input[aria-invalid="true"] { border-color: var(--pa-accent); }
.ps-coord__consentement { position: relative; }
.ps-coord__consentement .pa-check { font-size: 13.5px; line-height: 1.55; }
.ps-coord__lien {
  display: inline-block;
  margin: 8px 0 0 33px;
  font-size: 13px;
  font-weight: 700;
  color: var(--pa-accent);
}
.ps-coord__lien:hover { color: var(--pa-accent-hover); }
.ps-coord .ps-alerte { margin: 0; }

.ps-envoye { display: grid; gap: 14px; }
.ps-envoye .ps-alerte { margin: 0; font-weight: 700; }
.ps-envoye .ps-ic { width: 20px; height: 20px; stroke-width: 2.4; margin-top: 1px; }

/* Rappel */
.ps-rappel { display: grid; gap: 12px; }
.ps-rappel__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.ps-rappel__ligne { display: grid; gap: 10px; }
.ps-rappel .ps-alerte { margin: 0; }
@media (min-width: 560px) {
  .ps-rappel__btn { justify-self: start; }
  .ps-rappel__ligne { grid-template-columns: minmax(0, 1fr) auto; }
}

.ps-mention {
  margin: 44px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--pa-bordure-douce);
  font-size: 13px;
  line-height: 1.5;
  color: var(--pa-sourdine);
}

/* ==========================================================================
   10. Graphiques SVG (dessinés en JS ou rendus par le serveur)
   ========================================================================== */

.ps-svg__grille line { stroke: rgba(234, 242, 249, 0.1); stroke-width: 1; stroke-dasharray: 2 4; }
.ps-svg__base { stroke: rgba(234, 242, 249, 0.3); stroke-width: 1.5; }
.ps-svg__barre { fill: var(--pa-accent); }
.ps-svg__barre--vide { fill: rgba(234, 242, 249, 0.12); }
.ps-svg__valeur {
  font: 800 11px var(--pa-police-texte);
  fill: var(--pa-blanc);
  text-anchor: middle;
}
.ps-svg__jour {
  font: 800 11px var(--pa-police-texte);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  fill: var(--pa-sourdine);
  text-anchor: middle;
}
.ps-svg__lib { font: 700 13px var(--pa-police-texte); fill: var(--pa-texte); }
.ps-svg__lib--compact { font-size: 10.5px; fill: var(--pa-texte-4); }
.ps-svg__note { font-weight: 500; font-size: 11.5px; fill: var(--pa-sourdine); }
.ps-svg__chiffre { font: 400 14px var(--pa-police-titre); fill: var(--pa-blanc); text-anchor: end; }
.ps-svg__piste { fill: rgba(234, 242, 249, 0.1); }
.ps-svg__barre-h { fill: var(--pa-accent); }

/* Histogramme réglable de l'étape « Semaine » */
.ps-svg-direct .ps-svg__colonne { fill: transparent; transition: fill 0.15s ease; }
.ps-svg-direct .ps-svg__colonne:hover { fill: rgba(234, 242, 249, 0.04); }
.ps-svg__barre--direct {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: scaleY(var(--part, 0));
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), fill 0.2s ease;
  pointer-events: none;
}
.est-tire .ps-svg__barre--direct { transition-duration: 0.08s; }

/* Rangs des barres rendues par le serveur (délai de la cascade, sans style en ligne). */
.ps-svg__barre--1, .ps-svg__valeur--1, .ps-svg__barre-h--1 { --i: 1; }
.ps-svg__barre--2, .ps-svg__valeur--2, .ps-svg__barre-h--2 { --i: 2; }
.ps-svg__barre--3, .ps-svg__valeur--3, .ps-svg__barre-h--3 { --i: 3; }
.ps-svg__barre--4, .ps-svg__valeur--4, .ps-svg__barre-h--4 { --i: 4; }
.ps-svg__barre--5, .ps-svg__valeur--5, .ps-svg__barre-h--5 { --i: 5; }
.ps-svg__barre--6, .ps-svg__valeur--6 { --i: 6; }

/* ==========================================================================
   11. Page du lien privé (résultat complet, rendu par le serveur)
   ========================================================================== */

.ps-prive .ps-res-entete { margin-bottom: 30px; }
.ps-jauge { display: block; width: 100%; height: 100%; }
/* Géométrie fixe du serveur (viewBox de 350) : on borne la largeur pour que
   le texte du graphique ne grossisse pas démesurément sur grand écran. */
.ps-prive .ps-graphe-res .ps-svg { max-width: 520px; }
@media (min-width: 700px) {
  .ps-prive .ps-svg__lib { font-size: 11px; }
  .ps-prive .ps-svg__chiffre { font-size: 11.5px; }
  .ps-prive .ps-svg__valeur,
  .ps-prive .ps-svg__jour { font-size: 9px; }
}
.ps-carte__note--pied { margin: 12px 0 0; }
.ps-prive__rappel {
  margin-top: 8px;
  padding: 22px 18px;
  background: var(--pa-carte-alt);
  border-top: 3px solid var(--pa-accent);
}
.ps-prive__rappel p { margin: 0 0 14px; font-size: 15px; line-height: 1.55; color: var(--pa-texte-2); }
@media (min-width: 700px) { .ps-prive__rappel { padding: 28px; } }
.ps-prive__date { margin: 0 0 18px; font-size: 13px; font-weight: 700; color: var(--pa-sourdine); }

/* ==========================================================================
   12. Mouvements (seulement sous `.ps-js-anim`, jamais en mouvement réduit)
   ========================================================================== */

@keyframes ps-tourne { to { transform: rotate(360deg); } }

@keyframes ps-monte {
  from { opacity: 0; transform: translateY(0.45em); }
  to { opacity: 1; transform: none; }
}
@keyframes ps-apparait {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@keyframes ps-barre-pousse {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}
@keyframes ps-trace {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}
@keyframes ps-cible {
  0% { transform: scale(0); }
  70% { transform: scale(1.25); }
  100% { transform: scale(1); }
}
@keyframes ps-onde {
  0% { opacity: 0.8; transform: scale(1, 1); }
  55% { opacity: 0; transform: scale(1.06, 1.5); }
  100% { opacity: 0; transform: scale(1.06, 1.5); }
}
@keyframes ps-onde-cible {
  0% { opacity: 0.9; transform: scale(1); }
  100% { opacity: 0; transform: scale(2.4); }
}
@keyframes ps-balaie {
  from { transform: translateX(-130%) skewX(-22deg); }
  to { transform: translateX(230%) skewX(-22deg); }
}
@keyframes ps-entre-avant {
  from { opacity: 0; transform: translateX(28px); }
  to { opacity: 1; transform: none; }
}
@keyframes ps-entre-arriere {
  from { opacity: 0; transform: translateX(-28px); }
  to { opacity: 1; transform: none; }
}
@keyframes ps-pulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.3); color: var(--pa-accent); }
  100% { transform: scale(1); }
}
@keyframes ps-revele {
  from { opacity: 0; filter: blur(8px); transform: translateY(12px); }
  to { opacity: 1; filter: none; transform: none; }
}

/* Écran d'accueil du questionnaire : une seule séquence orchestrée. */
.ps-js-anim .ps-intro__surtitre { animation: ps-apparait 0.6s ease both; }
.ps-js-anim .ps-intro__ligne { animation: ps-monte 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.ps-js-anim .ps-intro__ligne:nth-child(1) { animation-delay: 0.08s; }
.ps-js-anim .ps-intro__ligne:nth-child(2) { animation-delay: 0.22s; }
.ps-js-anim .ps-intro__phrase { animation: ps-apparait 0.6s ease 0.4s both; }
.ps-js-anim .ps-intro__action { animation: ps-apparait 0.6s ease 0.55s both; }
.ps-js-anim .ps-intro__reperes { animation: ps-apparait 0.6s ease 0.7s both; }

.ps-js-anim .ps-cap__barres rect {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: ps-barre-pousse 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.ps-js-anim .ps-cap__barres rect:nth-child(1) { animation-delay: 0.3s; }
.ps-js-anim .ps-cap__barres rect:nth-child(2) { animation-delay: 0.38s; }
.ps-js-anim .ps-cap__barres rect:nth-child(3) { animation-delay: 0.46s; }
.ps-js-anim .ps-cap__barres rect:nth-child(4) { animation-delay: 0.54s; }
.ps-js-anim .ps-cap__barres rect:nth-child(5) { animation-delay: 0.62s; }
.ps-js-anim .ps-cap__barres rect:nth-child(6) { animation-delay: 0.7s; }
.ps-js-anim .ps-cap__barres rect:nth-child(7) { animation-delay: 0.78s; }
.ps-js-anim .ps-cap__trace {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: ps-trace 1.3s cubic-bezier(0.6, 0, 0.3, 1) 0.9s forwards;
}
.ps-js-anim .ps-cap__cible > rect:first-child {
  transform-box: fill-box;
  transform-origin: center;
  animation: ps-cible 0.45s ease 2.1s both;
}
.ps-js-anim .ps-cap__cible-onde {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: ps-onde-cible 2.2s ease-out 2.4s infinite;
}
.ps-js-anim .ps-depart__onde { animation: ps-onde 2.4s ease-out 1.6s infinite; }
.ps-js-anim .ps-depart__onde--2 { animation-delay: 2.8s; }
.ps-js-anim .ps-depart:hover .ps-depart__onde { animation-play-state: paused; opacity: 0; }

/* Passage d'écran : le « / » balaie l'écran. */
.ps-balayage {
  position: fixed;
  inset: 0;
  z-index: 300;
  pointer-events: none;
  display: none;
  overflow: hidden;
}
.ps-balayage.est-actif { display: block; }
.ps-balayage::before {
  content: "";
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: 0;
  width: 75vw;
  background: var(--pa-accent);
  animation: ps-balaie 0.8s cubic-bezier(0.7, 0, 0.3, 1) forwards;
}

/* Étapes */
.ps-js-anim .ps-entre-avant { animation: ps-entre-avant 0.38s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.ps-js-anim .ps-entre-arriere { animation: ps-entre-arriere 0.38s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.ps-js-anim .ps-jour.est-pulse .ps-jour__valeur { animation: ps-pulse 0.3s ease; }

/* Résultat : graphiques qui se dessinent à l'apparition. */
.ps-js-anim .ps-graphe-res .ps-svg__barre,
.ps-js-anim [data-ps-anime] .ps-svg__barre {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: scaleY(0);
  transition: transform 0.75s cubic-bezier(0.2, 0.8, 0.2, 1) calc(var(--i, 0) * 70ms);
}
.ps-js-anim .ps-graphe-res .ps-svg__barre-h,
.ps-js-anim [data-ps-anime] .ps-svg__barre-h {
  transform-box: fill-box;
  transform-origin: 0 50%;
  transform: scaleX(0);
  transition: transform 0.85s cubic-bezier(0.2, 0.8, 0.2, 1) calc(var(--i, 0) * 80ms);
}
.ps-js-anim .ps-graphe-res .ps-svg__valeur,
.ps-js-anim [data-ps-anime] .ps-svg__valeur {
  opacity: 0;
  transition: opacity 0.4s ease calc(0.4s + var(--i, 0) * 70ms);
}
.ps-js-anim .est-dessine .ps-svg__barre,
.ps-js-anim .est-dessine.ps-svg__barre { transform: scaleY(1); }
.ps-js-anim .est-dessine .ps-svg__barre-h { transform: scaleX(1); }
.ps-js-anim .est-dessine .ps-svg__valeur { opacity: 1; }

.ps-js-anim .ps-resultat:not([hidden]) .ps-res-entete > * { animation: ps-apparait 0.55s ease both; }
.ps-js-anim .ps-resultat:not([hidden]) .ps-res-entete > :nth-child(2) { animation-delay: 0.08s; }
.ps-js-anim .ps-resultat:not([hidden]) .ps-res-entete > :nth-child(3) { animation-delay: 0.16s; }
.ps-js-anim .ps-resultat:not([hidden]) .ps-res-entete > :nth-child(4) { animation-delay: 0.26s; }
.ps-js-anim .ps-resultat:not([hidden]) .ps-res-entete > :nth-child(5) { animation-delay: 0.36s; }

.ps-js-anim .ps-piste--revele { animation: ps-revele 0.7s ease calc(0.15s + var(--i, 0) * 0.18s) both; }

/* Bloc de l'accueil du site : pas de profil-sportif.js sur l'accueil. On
   s'appuie sur le socle commun `animations.js` : `.js-anim` sur <html> (jamais
   en mouvement réduit) et `.est-visible` posée sur `[data-anim]` quand le
   bloc arrive à l'écran. Sans JS, le graphique est simplement complet. */
.js-anim .ps-bloc__visuel .ps-cap__barres rect {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: scaleY(0);
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.js-anim .ps-bloc__visuel .ps-cap__barres rect:nth-child(2) { transition-delay: 0.08s; }
.js-anim .ps-bloc__visuel .ps-cap__barres rect:nth-child(3) { transition-delay: 0.16s; }
.js-anim .ps-bloc__visuel .ps-cap__barres rect:nth-child(4) { transition-delay: 0.24s; }
.js-anim .ps-bloc__visuel .ps-cap__barres rect:nth-child(5) { transition-delay: 0.32s; }
.js-anim .ps-bloc__visuel .ps-cap__barres rect:nth-child(6) { transition-delay: 0.4s; }
.js-anim .ps-bloc__visuel .ps-cap__barres rect:nth-child(7) { transition-delay: 0.48s; }
.js-anim .ps-bloc__visuel .ps-cap__trace {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.3s cubic-bezier(0.6, 0, 0.3, 1) 0.6s;
}
.js-anim .ps-bloc__visuel .ps-cap__cible > rect:first-child {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  transition: transform 0.4s cubic-bezier(0.3, 1.6, 0.5, 1) 1.8s;
}
.js-anim .ps-bloc__visuel.est-visible .ps-cap__barres rect { transform: scaleY(1); }
.js-anim .ps-bloc__visuel.est-visible .ps-cap__trace { stroke-dashoffset: 0; }
.js-anim .ps-bloc__visuel.est-visible .ps-cap__cible > rect:first-child { transform: scale(1); }
.js-anim .ps-bloc__visuel.est-visible .ps-cap__cible-onde {
  transform-box: fill-box;
  transform-origin: center;
  animation: ps-onde-cible 2.2s ease-out 2.2s infinite;
}
.js-anim .ps-bloc .ps-depart__onde { animation: ps-onde 2.4s ease-out 1.2s infinite; }
.js-anim .ps-bloc .ps-depart__onde--2 { animation-delay: 2.4s; }
.js-anim .ps-bloc .ps-depart:hover .ps-depart__onde { animation-play-state: paused; opacity: 0; }

/* Filet : en mouvement réduit, plus aucune animation ni transition, même si
   une classe d'animation avait été posée. */
@media (prefers-reduced-motion: reduce) {
  .ps *,
  .ps *::before,
  .ps *::after,
  .ps-bloc *,
  .ps-bloc *::before,
  .ps-bloc *::after {
    animation: none !important;
    transition: none !important;
  }
  .ps-balayage { display: none !important; }
}