/* Page Première visite : seulement ses sections propres. Haut de page, bandeau, titres, FAQ et fin
   de page viennent des styles communs (accueil, page Hyrox). Préfixe pv- partout. */

/* Rubrique active de l'en-tête : marquée par le menu commun (version-2c-fluo.css, 06/10). */
/* Bandeau : la piste recule de la moitié de sa largeur ; l'écart final la fait tomber juste. */
.pv-page .hy-ribbon>div{padding-right:28px}

/* 1. Haut de page : « PREMIÈRE », puis « SÉANCE » en étiquette fluo à sa gauche (comme COACHING + PERSO). */
.pv-page .hm-edge-word{font-size:27px;right:8%}
.pv-edge-second{position:absolute;z-index:1;top:70px;right:calc(8% + 58px);padding:10px 6px 9px;background:var(--fluo);box-shadow:4px 4px 0 #202322;color:#202322;font-size:27px;font-weight:900;line-height:1;letter-spacing:.19em;pointer-events:none;text-transform:uppercase;user-select:none;writing-mode:vertical-rl}
.pv-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. Les trois moments de la séance en frise verticale : la ligne au centre, le numéro posé dessus, les
      cartes de part et d'autre (1 à gauche, 2 à droite, 3 à gauche), un trait de la carte au numéro. */
.pv-course{background:var(--soft)}
.pv-moments{position:relative;display:grid;gap:26px;max-width:1000px;margin:0 auto;padding:10px 0 20px;list-style:none}
.pv-moments:before{content:'';position:absolute;left:50%;top:0;bottom:0;width:4px;margin-left:-2px;border-radius:2px;background:var(--night)}
.pv-moment{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 120px minmax(0,1fr);align-items:center}
.pv-num{grid-column:2;grid-row:1;justify-self:center;position:relative;z-index:1;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--fluo);color:var(--night);font-size:24px;font-weight:900;box-shadow:0 0 0 6px var(--soft),4px 4px 0 6px var(--night)}
.pv-moment-card{grid-row:1;position:relative;display:flex;align-items:center;gap:22px;padding:30px 30px 30px 28px;border-radius:12px;background:var(--paper);box-shadow:10px 10px 0 var(--night)}
.pv-moment-card:after{content:'';position:absolute;top:50%;width:32px;height:4px;margin-top:-2px;background:var(--night)}
.pv-moment:nth-child(odd) .pv-moment-card{grid-column:1;transform:rotate(-1deg)}
.pv-moment:nth-child(odd) .pv-moment-card:after{right:-32px}
.pv-moment:nth-child(even) .pv-moment-card{grid-column:3;background:var(--sky);transform:rotate(1deg)}
.pv-moment:nth-child(even) .pv-moment-card:after{left:-32px}
.pv-moment-card p{margin:0}

/* 4. Préparez votre séance : trois cartes, une couleur chacune (blanc, bleu, gris — Virginie, 05/10). */
.pv-prepare{background:var(--paper)}
.pv-prepare .hx-title{text-align:center}
.pv-checks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;align-items:stretch;padding:0 10px 10px 0}
.pv-check{display:flex;flex-direction:column;gap:14px;padding:34px 30px 30px;border-radius:12px;background:var(--paper);box-shadow:8px 8px 0 var(--night)}
.pv-check:nth-child(2){background:var(--sky)}
.pv-check:nth-child(3){background:var(--soft)}
.pv-check h3{margin:0;font-size:23px!important;line-height:1.25}
.pv-check p{flex:1 1 auto;margin:0}

/* 5. Tous les niveaux : le texte sur une carte, la photo à côté (colonnes égales, la plus courte centrée). */
.pv-levels{background:var(--sky)}
.pv-levels .hx-title{text-align:center}
.pv-levels-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:70px;align-items:center;padding:0 10px 10px 0}
.pv-card{padding:38px 40px;border-radius:12px;background:var(--paper);color:var(--night);box-shadow:10px 10px 0 var(--night);transform:rotate(-1deg)}
.pv-card p{margin:0 0 14px}
.pv-card p:last-child{margin:0}
.pv-photo{margin:0}
.pv-photo img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;box-shadow:10px 10px 0 var(--night);transform:rotate(1.5deg)}

/* 6. Ce qui vous attend, sur le moucheté : la photo de la salle à côté du texte. */
.pv-attend{background:var(--night) url('/m/assets/v2c-fluo/mouchete.svg') center/240px;color:var(--paper)}
.pv-attend .hx-title{color:var(--paper);text-align:center}
.pv-attend-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:70px;align-items:center;padding:0 10px 10px 0}
.pv-attend .pv-card{box-shadow:10px 10px 0 var(--fluo)}
.pv-cta-centre{display:flex;justify-content:center;margin-top:46px}
.pv-attend .pv-card .v-cta{margin-top:10px}
.pv-door{margin:0;aspect-ratio:4/3;border-radius:12px;overflow:clip;box-shadow:10px 10px 0 var(--fluo);transform:rotate(1deg)}
.pv-door img{display:block;width:100%;height:100%;object-fit:cover}

/* 7. Les questions : la FAQ de l'accueil, avec son introduction. */
.pv-faq{background:var(--paper)}
.pv-faq-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:50px;align-items:center;margin:-14px 0 30px;padding:0 10px 10px 0}
.pv-faq-intro p{margin:0}
.pv-call{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:24px 26px;border-radius:12px;background:var(--sky);box-shadow:8px 8px 0 var(--night);transform:rotate(1.5deg)}
.pv-call b{font-size:26px;font-weight:900;letter-spacing:-.01em}
.pv-call .v-cta{margin-top:4px}
.pv-call-ico{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--fluo)}
.pv-call-ico svg{width:20px;height:20px;fill:none;stroke:var(--night);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

@media(max-width:1023px){
  .pv-checks,.pv-levels-grid,.pv-attend-grid,.pv-faq-top{grid-template-columns:1fr;gap:40px}
  .pv-moments:before{left:28px}
  .pv-moment{grid-template-columns:56px minmax(0,1fr);gap:20px}
  .pv-num{grid-column:1}
  .pv-moment:nth-child(n) .pv-moment-card{grid-column:2;transform:none}
  .pv-moment-card:after{display:none}
  .pv-card,.pv-photo img,.pv-door{transform:none}
  /* Version téléphone (08/10) : l'icône des étapes au-dessus du texte, et moins de marge intérieure — le texte
     n'avait plus qu'une colonne d'environ 95 px, un ou deux mots par ligne. Les cartes respirent moins. */
  .pv-moments:before{left:21px}
  .pv-moment{grid-template-columns:44px minmax(0,1fr);gap:14px}
  .pv-num{width:44px;height:44px;font-size:18px}
  .pv-moment-card{flex-direction:column;align-items:flex-start;gap:12px;padding:22px 20px}
  .pv-moment-card svg{width:36px;height:36px}
  .pv-card{padding:28px 22px}
  .pv-card .v-cta{gap:8px;padding-left:18px}   /* « Réserver ma séance d'essai » sur une ligne dans la carte */
}
/* Grand titre sur téléphone (22/10) : « première séance » fait 285 px à 40 px ; la taille se réduit pour qu'il tienne (hyrox-mix/page.css). */
.hy-hero-copy h1.pg-h1-grand{--pg-h1-ratio:0.1404}