@charset "utf-8";
/* Page Renforcement musculaire — ce qui lui est propre. Le commun est dans ../commun.css. */

/* ---- 1. Bénéfices : deux cartes, des disques qui s'empilent et une silhouette qui se redresse ---- */
.bienfaits { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 48px; }
.bienfait { background: var(--creme); border-radius: 22px; padding: 30px 32px 32px; }
.bienfait .titre-h3 { font-size: 24px; margin: 22px 0 10px; }
.bienfait-visuel { display: flex; height: 92px; align-items: flex-end; }
.bienfait-pile { flex-direction: column-reverse; align-items: flex-start; justify-content: flex-start; gap: 5px; }
.bienfait-pile i { display: block; height: 14px; border-radius: 7px; background: var(--violet); opacity: 0; transform: translateY(-18px); transition: opacity .35s, transform .45s cubic-bezier(.3,1.5,.5,1); }
.bienfait-pile i:nth-child(1) { width: 110px; } .bienfait-pile i:nth-child(2) { width: 96px; transition-delay: .15s; background: #7A62FF; }
.bienfait-pile i:nth-child(3) { width: 82px; transition-delay: .3s; background: #9C8BFF; } .bienfait-pile i:nth-child(4) { width: 68px; transition-delay: .45s; background: #B9AEFF; }
.bienfait.visible .bienfait-pile i { opacity: 1; transform: none; }
.bienfait-niveau svg { width: 150px; height: 64px; fill: none; stroke: var(--violet-fonce); stroke-width: 3; }
.bienfait-niveau rect { fill: var(--lilas); }
.bienfait-niveau .bulle { fill: var(--violet); stroke: none; transform-box: view-box; transform: translateX(-14px); transition: transform 1.3s cubic-bezier(.3,1.4,.5,1) .3s; }
.bienfait.visible .bienfait-niveau .bulle { transform: translateX(40px); }

/* ---- 2. Activités : quatre cartes photo cliquables, deux par ligne pour des photos plus grandes (Virginie, 30/10) ---- */
.chapo-2 { max-width: 760px; margin: 26px auto 0; text-align: center; }  /* centré comme le titre (Virginie, 26/10) */
.activites { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 44px; }
.activite { display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; background: var(--blanc); color: var(--encre); text-decoration: none;
  transition: transform .25s, box-shadow .25s; }
.activite-photo { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.activite-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s; }
.activite-pied { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px 22px; }
.activite-nom { font: 800 24px/1 'Barlow Condensed', sans-serif; text-transform: uppercase; display: flex; align-items: center; }
.activite-nom .picto-loup { width: 24px; margin-right: 9px; }
.activite-bouton { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px; border-radius: 999px;
  background: var(--lilas); color: var(--violet-fonce); font-weight: 700; font-size: 15px; transition: background .2s, color .2s; }
.activite:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(42,26,140,.14); color: var(--encre); }
.activite:hover .activite-photo img { transform: scale(1.06); }
.activite:hover .activite-bouton { background: var(--violet); color: #FFFFFF; }
.activite:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; }

/* ---- 3. Pourquoi : texte à gauche, trois blocs empilés à droite, sur fond nuit ---- */
.raisons-r { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 4cqw, 64px); align-items: center; margin-top: 48px; }
.raisons-r-texte { color: rgba(245,244,241,.86); }
.raisons-r-texte strong { color: #FFFFFF; }
.blocs-r { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.blocs-r li { display: flex; align-items: center; gap: 18px; padding: 20px 22px; border-radius: 18px; background: #24242B; color: rgba(245,244,241,.86); }
.blocs-r li:nth-child(2) { margin-left: 28px; } .blocs-r li:nth-child(3) { margin-left: 56px; }
.blocs-r li > span { flex: none; display: flex; width: 56px; height: 56px; border-radius: 16px; background: var(--violet); align-items: center; justify-content: center; }
.blocs-r svg { width: 30px; height: 30px; fill: none; stroke: #FFFFFF; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.blocs-r svg .plein { fill: #FFFFFF; stroke: none; }
.bloc-r-titre { font: 800 24px/1 'Barlow Condensed', sans-serif; text-transform: uppercase; color: #FFFFFF; margin-bottom: 6px; }
.bloc-r-titre strong { color: #FFFFFF; }

@media (prefers-reduced-motion: reduce) {
  .bienfait-pile i, .bienfait-niveau .bulle, .activite, .activite-photo img { transition: none; }
  .bienfait-niveau .bulle { transform: translateX(40px); }
  .bienfait-pile i { opacity: 1; transform: none; }
  .activite:hover, .activite:hover .activite-photo img { transform: none; }
}

/* ---- Téléphone et tablette (1 023 px et moins) ---- */
@media (max-width: 1023.98px) {
  .bienfaits, .raisons-r { grid-template-columns: 1fr; gap: 24px; margin-top: 34px; }
  .raisons-r { margin-top: 22px; }
  .raisons-r-texte { text-align: center; }  /* Virginie, 26/10 */
  .bienfait { padding: 24px 22px; }
  .activites { grid-template-columns: 1fr; gap: 18px; margin-top: 34px; }  /* une colonne (Virginie, 26/10) */
  .activite-photo { aspect-ratio: 16 / 10; }
  .activite-nom { font-size: 21px; }
  .activite-pied { padding: 14px 14px 18px; }
  .blocs-r li:nth-child(n) { margin-left: 0; }
}
@media (max-width: 359.98px) { .activite-nom { font-size: 18px; } .activite-bouton { padding: 0 12px; } }

/* ---- Tablette (Virginie, 27/10) : deux cartes = deux colonnes (dès 600 px), trois cartes = trois colonnes (dès 700 px) ---- */
@media (min-width: 600px) and (max-width: 1023.98px) {
  .bienfaits { grid-template-columns: 1fr 1fr; gap: 16px; }
  .activites { grid-template-columns: 1fr 1fr; gap: 16px; }  /* quatre activités : deux par ligne */
}