/* Page Perte de poids : seulement ses sections propres. Haut de page, bandeau, titres et fin
   de page viennent des styles communs (accueil, page Hyrox). */

/* Bande verticale « FEEL GOOD » : 27 px, comme « COACHING », pour s'arrêter avant la petite photo. */
.pd-edge-word{font-size:27px}
.pd-icon{width:46px;height:46px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.pd-badge{flex:none;display:block;width:30px;height:30px;padding:13px;border-radius:50%;background:var(--fluo);color:var(--night);fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;box-sizing:content-box}

/* 3. Sous le haut de page : la dépense en chapô, puis la balance et le texte cardio + renforcement. */
.pd-start{background:var(--soft)}
/* Trois colonnes, la balance au milieu (Virginie, 08/10). */
.pd-pair.pd-trio{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) minmax(0,1fr);gap:32px}
/* Au milieu, la balance resserrée pour que « Renforcement » et « Endurance » tiennent dans leur bouton. */
.pd-trio .pd-balance{padding:34px 24px 32px}
.pd-trio .pd-modes button{padding:12px 4px;font-size:13px}
.pd-trio .pd-gains li{padding:9px 3px}
/* La balance à la hauteur de son contenu, centrée en hauteur ; les deux cartes gardent la même hauteur (Virginie, 08/10). */
.pd-trio .pd-balance{align-self:center}
/* Sous 1 200 px, trois colonnes ne tiennent plus : la balance revient au-dessus, les deux cartes dessous. */
@media(max-width:1199px){
  .pd-pair.pd-trio{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:50px 50px}
  .pd-trio .pd-balance{grid-column:1/-1;order:-1;justify-self:center;align-self:auto;width:min(100%,460px)}
}
.pd-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:70px;align-items:stretch;padding:0 10px 10px 0}
.pd-balance{display:flex;flex-direction:column;justify-content:center;border-radius:14px;box-shadow:10px 10px 0 var(--night);padding:34px 40px 32px;background:var(--paper);transform:rotate(-1deg)}
.pd-mix-card{display:flex;flex-direction:column;justify-content:center;border-radius:14px;box-shadow:10px 10px 0 var(--night);padding:40px 42px;background:var(--sky);transform:rotate(1deg)}
.pd-mix-card .pd-badge{margin-bottom:22px}
.pd-mix-card p{margin:0}
.pd-mix-clair{background:var(--paper);transform:rotate(-1deg)}
.pd-balance-label{margin:0 0 16px;padding-left:.14em;text-align:center;font-size:12px!important;font-weight:850;letter-spacing:.14em;line-height:1.3!important;text-transform:uppercase}
.pd-modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:6px;border-radius:40px;background:var(--soft)}
.pd-modes button{padding:12px 8px;border:0;border-radius:30px;background:none;color:var(--night);font:inherit;font-size:14px;font-weight:800;line-height:1.2;cursor:pointer;transition:background .25s,color .25s}
.pd-modes button[aria-checked=true]{background:var(--night);color:var(--fluo)}
.pd-modes button:focus-visible{outline:3px solid var(--fluo);outline-offset:2px}
.pd-scale{position:relative;height:150px;margin:30px 34px 0}
.pd-beam{position:absolute;left:0;right:0;top:86px;height:10px;border-radius:6px;background:var(--night);transition:transform .7s cubic-bezier(.3,1.5,.45,1)}
.pd-pan{position:absolute;bottom:10px;display:grid;place-items:center;width:84px;height:84px;border-radius:50%;font-size:13px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;transition:transform .7s cubic-bezier(.3,1.5,.45,1)}
.pd-pan-cardio{left:-10px;background:var(--fluo);color:var(--night)}
.pd-pan-renfo{right:-10px;background:var(--night);color:var(--fluo)}
.pd-pivot{position:absolute;left:50%;top:96px;width:0;height:0;border-left:30px solid transparent;border-right:30px solid transparent;border-bottom:48px solid var(--night);transform:translateX(-50%)}
.pd-scale.is-cardio .pd-beam{transform:rotate(-9deg)}
.pd-scale.is-renfo .pd-beam{transform:rotate(9deg)}
.pd-scale.is-cardio .pd-pan{transform:rotate(9deg)}
.pd-scale.is-renfo .pd-pan{transform:rotate(-9deg)}
.pd-gains{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:26px 0 0;padding:0}
.pd-gains li{padding:9px 6px;border-radius:30px;background:var(--soft);color:#8b918d;font-size:13px;font-weight:850;text-align:center;transition:background .3s,color .3s}
.pd-gains li.is-on[data-side=cardio]{background:var(--fluo);color:var(--night)}
.pd-gains li.is-on[data-side=renfo]{background:var(--night);color:var(--fluo)}
.pd-balance-result{min-height:28px;margin:20px 0 0;font-size:17px!important;font-weight:850;line-height:1.5!important;text-align:center}
.pd-balance-result span{display:inline-grid;place-items:center;width:28px;height:28px;margin-right:8px;border-radius:50%;background:var(--fluo);color:var(--night);font-size:15px}

/* 4. Les activités : trois chemins, un même objectif, sur le moucheté (seule section sombre). */
.pd-routes-section{background:var(--night) url('/m/assets/v2c-fluo/mouchete.svg') center/240px;color:var(--paper)}
.pd-routes-section .hx-title{color:var(--paper);text-align:center}
.pd-routes-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:70px;align-items:center;padding:0 10px 10px 0}
.pd-routes-card{padding:40px 42px;border-radius:12px;background:var(--paper);color:var(--night);box-shadow:10px 10px 0 var(--fluo);transform:rotate(-1deg)}
.pd-routes-card p{margin:0;font-size:20px!important;line-height:1.6!important}
.pd-routes-card a,.pd-mix-card a{color:inherit;text-decoration:underline;text-decoration-color:var(--fluo);text-decoration-thickness:4px;text-underline-offset:3px}
.pd-starts{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0;padding:0}
.pd-starts a{display:block;padding:13px 8px;border:2px solid #ffffff3d;border-radius:30px;background:#20232299;color:var(--paper);font-size:14px;font-weight:850;line-height:1.2;text-align:center;text-decoration:none;transition:background .25s,color .25s,border-color .25s,transform .25s}
.pd-starts a:hover,.pd-starts a:focus-visible,.pd-starts a.is-lit{border-color:var(--fluo);background:var(--fluo);color:var(--night);transform:translateY(-3px)}
.pd-starts a:focus-visible{outline:3px solid var(--paper);outline-offset:3px}
.pd-routes{display:block;width:100%;height:auto;overflow:visible}
.pd-routes path{fill:none;stroke:#fffefab3;stroke-width:5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.2s cubic-bezier(.4,0,.2,1),stroke .25s,stroke-width .25s}
.pd-paths.is-drawn .pd-routes path{stroke-dashoffset:0}
.pd-routes path:nth-child(2){transition-delay:.25s,0s,0s}
.pd-routes path:nth-child(3){transition-delay:.5s,0s,0s}
.pd-routes path.is-lit{stroke:var(--fluo);stroke-width:7}
.pd-goal{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:-4px}
.pd-goal-icon{width:42px;height:42px;padding:22px;border-radius:50%;background:var(--fluo);color:var(--night);fill:none;stroke:currentColor;stroke-width:2.8;box-sizing:content-box;box-shadow:0 0 0 10px #d9ff2524;transition:box-shadow .4s}
.pd-paths.is-lit .pd-goal-icon{box-shadow:0 0 0 18px #d9ff2533}
.pd-goal span{font-size:14px;font-weight:850;letter-spacing:.14em;text-transform:uppercase}

/* 5. Le coach et la régularité : deux cartes, puis la courbe de l'envie. */
.pd-coach-section{background:var(--paper)}
.pd-coach-section .hx-title{text-align:center}  /* au-dessus des deux cartes et de la courbe (Virginie, 01/10) */
.pd-coach-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px;align-items:stretch;padding:0 10px 10px 0}
.pd-coach-card{display:flex;flex-direction:column;justify-content:center;padding:38px 40px;border-radius:12px;background:var(--soft);box-shadow:10px 10px 0 var(--night);transform:rotate(-1deg)}
.pd-coach-card .pd-badge{margin-bottom:22px}
.pd-coach-card p{margin:0}
.pd-coach-fluo{background:var(--fluo);transform:rotate(1deg)}
.pd-coach-fluo .pd-badge{background:var(--night);color:var(--fluo)}
.pd-curve{margin-top:74px;padding:30px 40px 28px;border-radius:14px;background:var(--sky)}
.pd-curve-top{display:flex;justify-content:space-between;align-items:center;gap:20px}
.pd-curve-label{margin:0;font-size:12px!important;font-weight:850;letter-spacing:.14em;line-height:1.3!important;text-transform:uppercase}
.pd-curve-count{margin:0;padding:7px 14px;border-radius:30px;background:var(--paper);font-size:14px!important;font-weight:850;line-height:1.3!important}
.pd-curve.is-complete .pd-curve-count{background:var(--fluo)}
.pd-curve-stage{position:relative;margin:40px 0 0}
.pd-curve-svg{display:block;width:100%;height:auto;overflow:visible}
.pd-envie{fill:none;stroke:#8f9893;stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.8s cubic-bezier(.4,0,.2,1)}
.pd-curve.is-drawn .pd-envie{stroke-dashoffset:0}
.pd-hold{stroke:var(--night);stroke-width:2;stroke-dasharray:4 6}
.pd-steady{stroke:var(--night);stroke-width:4;stroke-linecap:round}
.pd-sessions circle{fill:var(--fluo);stroke:var(--night);stroke-width:3}
.pd-coach{position:absolute;padding:0;border:0;background:none;font:inherit;cursor:pointer;transform:translate(-50%,-50%)}
.pd-coach:focus-visible{outline:none}
.pd-coach-tag{display:inline-block;padding:8px 13px;border-radius:30px;background:var(--night);color:var(--fluo);font-size:12px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;animation:pd-halo 1.8s infinite}
.pd-coach:focus-visible .pd-coach-tag{outline:3px solid var(--night);outline-offset:3px}
.pd-coach.is-seen .pd-coach-tag{animation:none;background:var(--fluo);color:var(--night)}
.pd-coach-say{position:absolute;left:50%;bottom:calc(100% + 12px);padding:10px 15px;border-radius:12px;background:var(--paper);color:var(--night);font-size:15px;font-weight:850;white-space:nowrap;box-shadow:6px 6px 0 var(--night);visibility:hidden;opacity:0;pointer-events:none;transform:translate(-50%,6px);transition:opacity .25s,transform .25s,visibility 0s .25s}
.pd-coach.is-open .pd-coach-say{visibility:visible;opacity:1;transform:translate(-50%,0);transition:opacity .25s,transform .25s,visibility 0s}
.pd-curve-legend{display:flex;gap:28px;margin:22px 0 0;font-size:14px!important;font-weight:750;line-height:1.4!important}
.pd-key-envie:before{content:'';display:inline-block;width:28px;height:3px;margin-right:10px;background:#8f9893;vertical-align:middle}
.pd-key-steady:before{content:'';display:inline-block;width:12px;height:12px;margin-right:10px;border:3px solid var(--night);border-radius:50%;background:var(--fluo);vertical-align:middle}
@keyframes pd-halo{0%{box-shadow:0 0 0 0 #202322aa}70%{box-shadow:0 0 0 12px #20232200}100%{box-shadow:0 0 0 0 #20232200}}

@media(prefers-reduced-motion:reduce){
  .pd-beam,.pd-pan,.pd-routes path,.pd-envie,.pd-coach-say{transition:none}
  .pd-coach-tag{animation:none}
}
@media(max-width:1023px){
  .pd-pair,.pd-pair.pd-trio,.pd-routes-grid,.pd-coach-grid{grid-template-columns:1fr}
  .pd-balance,.pd-mix-card,.pd-routes-card,.pd-coach-card{transform:none}
  .pd-routes-card{padding:28px 24px}   /* 22/10 : 40/42 px laissaient 250 px au texte, « Chez » et « Le » seuls en fin de ligne */
  /* Version téléphone (08/10) : la bulle du dernier coach s'aligne sur sa droite (centrée, elle sortait de l'écran :
     388 px pour 375) ; les trois « Coach » et les trois modes de la balance passent à 44 px au doigt. */
  .pd-curve-stage .pd-coach:last-of-type .pd-coach-say{left:auto;right:0;transform:translate(0,6px)}
  .pd-curve-stage .pd-coach:last-of-type.is-open .pd-coach-say{transform:translate(0,0)}
  .pd-coach{display:grid;place-items:center;min-width:44px;min-height:44px}
  .pd-modes button,.pd-trio .pd-modes button{min-height:44px;font-size:14px}
  .pd-trio .pd-modes{grid-template-columns:.8fr 1fr 1.45fr}   /* « Renforcement » touchait le bord de sa pastille */
  /* La courbe des coachs : moins de marge intérieure, pour que les trois « Coach » ne se chevauchent plus ; « 0 sur 3 »
     sur une ligne. */
  .pd-curve{padding:24px 16px 22px}
  .pd-curve-count{white-space:nowrap}
  .pd-coach-tag{padding:7px 10px;font-size:12px;letter-spacing:.06em}
  .pd-gains{grid-template-columns:repeat(2,minmax(0,1fr))}
}