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

.ff-edge-word{font-size:27px}
.ff-icon{width:46px;height:46px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ff-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. Qu'est-ce que le Functional Fitness : deux cartes de même hauteur. */
.ff-what{background:var(--soft)}
.ff-what-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px;align-items:stretch;padding:0 10px 10px 0}
.ff-what-card{display:flex;flex-direction:column;justify-content:center;padding:40px 42px;border-radius:12px;background:var(--paper);box-shadow:10px 10px 0 var(--night);transform:rotate(-1deg)}
.ff-what-sky{background:var(--sky);transform:rotate(1deg)}
.ff-what-card .ff-badge{margin-bottom:22px}
.ff-what-card p{margin:0 0 14px}
.ff-what-card p:last-child{margin:0}

/* 4. Pourquoi chez Pornic Hybrid Training : trois cartes de même hauteur. */
.ff-why{background:var(--paper)}
.ff-why .hx-title{text-align:center;text-wrap:balance}  /* centré sur les trois cartes, deux lignes équilibrées */
.ff-why-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;align-items:stretch;padding:0 10px 10px 0}
.ff-why-card{display:flex;flex-direction:column;justify-content:center;padding:36px 32px;border-radius:12px;background:var(--soft);box-shadow:10px 10px 0 var(--night);transform:rotate(-1deg)}
.ff-why-card:nth-child(2){background:var(--fluo);transform:rotate(.8deg)}
.ff-why-card:nth-child(2) .ff-badge{background:var(--night);color:var(--fluo)}
.ff-why-card:nth-child(3){background:var(--sky);transform:rotate(-.6deg)}
.ff-why-card .ff-badge{margin-bottom:20px}
.ff-why-card h3{font-size:23px!important}
.ff-why-card p{margin:0;font-size:16.5px!important}

/* 5. Une séance : le tableau blanc, trois colonnes, l'intensité en barres. */
.ff-session{background:var(--soft)}
.ff-session .hx-title,.ff-skills .hx-title{text-align:center}  /* titres au-dessus d'un bloc centré pleine largeur */
.ff-session-lead{max-width:860px;margin:0 auto 44px;text-align:center}
.ff-session-lead p{margin:0;font-size:20px!important;line-height:1.6!important}
.ff-board{position:relative;padding:44px 40px 40px;border:10px solid #cfd2cc;border-radius:12px;background:#fffffd;box-shadow:10px 10px 0 var(--night)}
.ff-board-label{position:absolute;top:14px;left:40px;margin:0;font-size:12px!important;font-weight:850;letter-spacing:.14em;line-height:1.3!important;text-transform:uppercase;color:#7d837f}
.ff-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.ff-step{padding:0 30px}
.ff-step:first-child{padding-left:0}
.ff-step:last-child{padding-right:0}
.ff-step+.ff-step{border-left:2px dashed #20232233}
.ff-bars{display:flex;align-items:flex-end;gap:8px;height:110px}
.ff-bars i{flex:1;height:var(--h);border-radius:5px 5px 0 0;background:var(--night);transform:scaleY(0);transform-origin:bottom;transition:transform .7s cubic-bezier(.3,1.3,.5,1)}
.ff-step:nth-child(2) .ff-bars i{background:var(--fluo);box-shadow:inset 0 0 0 2px var(--night)}
.ff-board.is-drawn .ff-bars i{transform:scaleY(1)}
.ff-board.is-drawn .ff-step:nth-child(2) .ff-bars i{transition-delay:.25s}
.ff-board.is-drawn .ff-step:nth-child(3) .ff-bars i{transition-delay:.5s}
.ff-step:hover .ff-bars i{animation:ff-pulse .9s ease-in-out infinite alternate}
.ff-step:hover .ff-bars i:nth-child(2n){animation-delay:.2s}
.ff-step-num{display:grid;place-items:center;width:38px;height:38px;margin:24px 0 14px;border-radius:50%;background:var(--fluo);color:var(--night);font-size:17px;font-weight:900;box-shadow:3px 3px 0 var(--night)}
.ff-step h3{font-size:23px!important;margin-bottom:14px!important}
.ff-step p{margin:0;font-size:16.5px!important}
.ff-session-result{margin-top:40px;text-align:center}
.ff-session-result p{display:inline-block;max-width:900px;margin:0;padding:16px 26px;border-radius:40px;background:var(--fluo);font-size:18px!important;line-height:1.5!important}
@keyframes ff-pulse{from{transform:scaleY(1)}to{transform:scaleY(.82)}}

/* 6. Les 10 qualités : la toile, sur le moucheté (seule section sombre). */
.ff-skills{background:var(--night) url('/m/assets/v2c-fluo/mouchete.svg') center/240px;color:var(--paper)}
.ff-skills .hx-title{color:var(--paper)}
.ff-web{position:relative;width:640px;max-width:100%;aspect-ratio:1;margin:0 auto}
.ff-web-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ff-web-ring{fill:none;stroke:#fffefa30;stroke-width:1.5}
.ff-web-axis{stroke:#fffefa40;stroke-width:2;transition:stroke .3s,stroke-width .3s}
.ff-web-axis.is-lit{stroke:#d9ff2599}
.ff-web-axis.is-hot{stroke:var(--fluo);stroke-width:4}
.ff-web-dot{fill:var(--night);stroke:#fffefa66;stroke-width:3;transition:fill .3s,stroke .3s,r .3s}
.ff-web-dot.is-lit{fill:var(--fluo);stroke:var(--fluo)}
.ff-web-dot.is-hot{r:11}
.ff-skill-list{list-style:none;margin:0;padding:0}
.ff-skill{position:absolute;width:170px;transform:translate(-50%,-50%);text-align:center;cursor:default}
.ff-skill h3{margin:0!important;font-size:17px!important;font-weight:850;line-height:1.25!important;letter-spacing:-.01em;color:#fffefa8c;transition:color .3s}
.ff-skill.is-lit h3{color:var(--paper)}
.ff-skill.is-hot h3{color:var(--fluo)}

/* 7. Functional Fitness et CrossFit : les deux cercles, puis les deux encadrés. */
.ff-versus{background:var(--paper)}
.ff-versus .hx-title{text-align:center}  /* au-dessus des cercles, centrés */
.ff-venn{position:relative;max-width:560px;margin:0 auto}
.ff-venn-svg{display:block;width:100%;height:auto}
.ff-venn-ff{fill:var(--sky);transition:fill .3s}
.ff-venn-cf{fill:var(--accent);transition:fill .3s}
.ff-venn-both{fill:var(--fluo);transition:opacity .3s}
.ff-venn.is-diff .ff-venn-ff{fill:#c4d6e6}
.ff-venn.is-diff .ff-venn-cf{fill:#a9dcc3}
.ff-venn.is-diff .ff-venn-both{opacity:.55}
.ff-venn.is-common .ff-venn-ff,.ff-venn.is-common .ff-venn-cf{fill:#eef0ea}
.ff-venn-zone{position:absolute;top:50%;margin:0;transform:translate(-50%,-50%);color:var(--night);font-weight:900;line-height:1.15;text-align:center;cursor:default}
.ff-venn-left{left:22%;width:120px;font-size:20px}
.ff-venn-right{left:78%;font-size:20px}
.ff-venn-mid{left:50%;width:110px;font-size:15px!important;line-height:1.25!important}
.ff-boxes{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px;align-items:stretch;margin-top:60px;padding:0 10px 10px 0}
.ff-box{display:flex;gap:20px;align-items:center;padding:32px 34px;border-radius:12px;background:var(--fluo);box-shadow:10px 10px 0 var(--night);transform:rotate(-1deg);transition:transform .3s}
.ff-box[data-box=diff]{background:var(--soft);transform:rotate(1deg)}
.ff-box[data-box=common] .ff-badge{background:var(--night);color:var(--fluo)}
.ff-box.is-lit{transform:rotate(0) translateY(-6px)}
.ff-box p{margin:0}
.ff-box p.ff-box-title{margin:0 0 8px;font-size:19px!important;font-weight:850}
.ff-pornic{margin-top:56px;padding:34px 40px;border-radius:12px;background:var(--night);color:var(--paper)}
.ff-pornic p{margin:0;font-size:19px!important;line-height:1.6!important}
.ff-pornic strong{color:var(--fluo)}

@media(prefers-reduced-motion:reduce){
  .ff-bars i,.ff-web-axis,.ff-web-dot,.ff-box{transition:none}
  .ff-step:hover .ff-bars i{animation:none}
}
@media(max-width:1023px){
  .ff-what-grid,.ff-why-grid,.ff-boxes,.ff-steps{grid-template-columns:1fr}
  .ff-what-card,.ff-why-card,.ff-box{transform:none}
  /* Téléphone (22/10) : l'icône au-dessus du texte (à côté, 12 lignes hachées) ; les mots du diagramme ne se touchent plus
     (« Functional Fitness » chevauchait le centre de 23 px à 375 px). */
  .ff-box{flex-direction:column;align-items:flex-start;gap:16px;padding:26px 24px}
  .ff-venn-left{left:20%;width:92px;font-size:15px}
  .ff-venn-right{left:80%;font-size:15px}
  .ff-venn-mid{width:96px;font-size:14px!important}
  .ff-step,.ff-step:first-child,.ff-step:last-child{padding:0 0 26px}
  .ff-step+.ff-step{border-left:0;border-top:2px dashed #20232233;padding-top:26px}
  /* Version téléphone (08/10) : la toile plus petite et ses étiquettes plus étroites — « Endurance musculaire »
     sortait de l'écran (409 px pour 375). */
  /* La toile au complet, puis ses dix qualités en liste sur deux colonnes : posées autour d'une toile de 250 px,
     leurs étiquettes se chevauchaient (« Endurance cardiovasculaire et respiratoire » sur « Coordination »). */
  .ff-web{width:100%;aspect-ratio:auto;margin-top:26px}
  .ff-web-svg{position:relative;display:block;width:86%;height:auto;aspect-ratio:1;margin:0 auto}
  .ff-skill-list{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;margin-top:22px}
  .ff-skill{position:static;width:auto;transform:none;text-align:left;padding-left:16px;border-left:3px solid #fffefa33}
  .ff-skill.is-lit{border-left-color:var(--fluo)}
  .ff-skill h3{font-size:15px!important}
  /* Le tableau de la séance : moins de bordure et de marge intérieure (le texte n'avait que 227 px de large), et les
     barres d'intensité en petit à droite du numéro et du titre — le tableau faisait 2,3 écrans. */
  .ff-board{padding:40px 20px 24px;border-width:6px;box-shadow:7px 7px 0 var(--night)}
  .ff-board-label{left:20px}
  .ff-step{display:grid;grid-template-columns:minmax(0,1fr) 92px;column-gap:14px;align-items:center}
  .ff-bars{grid-column:2;grid-row:1/3;height:58px;gap:4px}
  .ff-step-num{grid-column:1;grid-row:1;margin:0 0 10px}
  .ff-step h3{grid-column:1;grid-row:2;margin-bottom:0!important;font-size:21px!important}
  .ff-step p{grid-column:1/-1;margin-top:14px}
  .ff-session-lead p{font-size:17.5px!important}
  .ff-session-result p{padding:16px 20px;font-size:16.5px!important}
}
/* Grand titre sur téléphone (22/10) : « Functional Fitness » fait 308 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.1299}