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

/* ---- 1. À votre rythme : deux cartes à icône, la photo d'un exercice adapté au milieu ---- */
.rythme { display: grid; grid-template-columns: 1fr .8fr 1fr; gap: 24px; align-items: stretch; margin-top: 48px; }
.rythme-carte { background: var(--creme); border-radius: 22px; padding: 30px 30px 32px; }
.rythme-carte .titre-h3 { font-size: 24px; margin: 18px 0 12px; }
.rythme-icone { display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 16px; background: var(--violet); }
.rythme-icone svg { width: 32px; height: 32px; fill: none; stroke: #FFFFFF; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rythme-icone .plein { fill: #FFFFFF; stroke: none; }
.rythme-photo { margin: 0; }
.rythme-photo img { display: block; width: 100%; height: 100%; min-height: 320px; object-fit: cover; border-radius: 22px; }

/* ---- 2. Le frein : fond violet, la grande phrase qui s'écrit, le texte dessous ---- */
.fond-violet { background: var(--violet); color: #ECE8FF; }
.fond-violet .titre-section { color: #FFFFFF; }
.fond-violet .titre-section::before { background: rgba(255,255,255,.22); }
.fond-violet strong { color: #FFFFFF; }
.frein { display: flex; flex-direction: column; align-items: center; }
/* Le titre lui-même en très grand (la phrase d'accroche de la note répétait le titre : retirée) */
.frein-titre.titre-section { font-size: clamp(40px, 5cqw, 68px); line-height: 1; }
.frein-titre::before { content: none; }
.frein-surligne { background: linear-gradient(transparent 62%, rgba(255,255,255,.22) 62%) no-repeat 0 0 / 0% 100%; transition: background-size 1.4s ease .3s;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.frein-titre.visible .frein-surligne { background-size: 100% 100%; }
.frein-texte { max-width: 980px; display: flex; flex-direction: column; align-items: center; }
.frein-texte .texte { max-width: 760px; }
.frein-texte .texte { margin-top: 34px; }
.bouton-clair { background: #FFFFFF; color: var(--violet-fonce); }
.bouton-clair:hover { background: var(--nuit); color: #FFFFFF; }

/* ---- 3. Activités : cartes photo légèrement inclinées qui se redressent au survol ---- */
.formats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 52px; }
.format { display: flex; flex-direction: column; background: var(--blanc); border-radius: 22px; padding: 12px 12px 0; box-shadow: 0 16px 34px rgba(13,13,16,.08);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; }
.format:nth-child(1) { transform: rotate(-1.2deg); }
.format:nth-child(2) { transform: rotate(1deg) translateY(10px); }
.format:nth-child(3) { transform: rotate(-.8deg); }
.format:hover, .format:focus-within { transform: none; box-shadow: 0 24px 46px rgba(42,26,140,.16); }
.format-photo { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 14px; }
.format-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.format-corps { display: flex; flex-direction: column; flex: 1; padding: 22px 14px 26px; }
.format-corps .titre-h3 { font-size: 28px; margin-bottom: 10px; }
.format-lien {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding: 0 16px; min-height: 42px;
  border-radius: 999px; background: var(--lilas); color: var(--violet-fonce); text-decoration: none; font-weight: 700; font-size: 15.5px;
}
.format-corps p + .format-lien { margin-top: 18px; }
.format-lien:hover { background: var(--violet); color: #FFFFFF; }

/* ---- 4. Résultats : trois blocs, une icône animée en accroche ---- */
.effets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
.effet { background: var(--creme); border-radius: 22px; padding: 28px 28px 30px; }
.effet .titre-h3 { font-size: 22px; margin-bottom: 10px; }
.effet-tete { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.effet-tete p { font: 800 21px/1.05 'Barlow Condensed', sans-serif; text-transform: uppercase; color: var(--violet-fonce); }
.effet-icone { flex: none; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: var(--lilas); }
.effet-icone svg { width: 34px; height: 34px; fill: none; stroke: var(--violet); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transform-box: fill-box; transform-origin: center; }
.effet.visible .effet-coeur svg { animation: bat 1.6s ease-in-out infinite; }
.effet.visible .effet-haltere svg { animation: souleve 2.2s ease-in-out infinite; }
.effet.visible .effet-eclair svg { animation: allume 2.4s ease-in-out infinite; }
@keyframes bat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.18); } 30% { transform: scale(1); } 45% { transform: scale(1.12); } }
@keyframes souleve { 0%, 100% { transform: translateY(4px); } 50% { transform: translateY(-5px); } }
@keyframes allume { 0%, 60%, 100% { fill: transparent; } 70%, 90% { fill: var(--violet); } }

@media (prefers-reduced-motion: reduce) {
  .frein-surligne { transition: none; background-size: 100% 100%; }
  .format, .format:nth-child(n) { transition: none; transform: none; }
  .effet.visible .effet-icone svg { animation: none; }
}

/* ---- Téléphone et tablette (1 023 px et moins) ---- */
@media (max-width: 1023.98px) {
  .rythme { grid-template-columns: 1fr; gap: 18px; margin-top: 34px; }
  .rythme-photo img { min-height: 0; aspect-ratio: 4 / 3; height: auto; }
  .rythme-carte, .effet { padding: 24px 22px; }
  .frein-titre.titre-section { font-size: 40px; }
  .formats, .effets { grid-template-columns: 1fr; gap: 24px; margin-top: 34px; }
  .format:nth-child(n) { transform: none; }
}


/* Le loup qui marche, au trait blanc, au-dessus du titre (choisi par Virginie le 26/10) */
/* La section commence par le loup : moins d’air au-dessus (Virginie, 26/10) */
.fond-violet[data-section="frein"] { padding-top: clamp(48px, 4.5cqw, 64px); }
.loup-marche { display: block; width: 260px; aspect-ratio: 450 / 328; margin: 0 auto 26px; background: #FFFFFF; opacity: .9;
  -webkit-mask: url(/m/marque/loup/codex-illustrations/04-en-mouvement.svg) no-repeat center / contain;
  mask: url(/m/marque/loup/codex-illustrations/04-en-mouvement.svg) no-repeat center / contain; }
@media (max-width: 1023.98px) { .loup-marche { width: 190px; margin-bottom: 20px; } }

/* ---- Tablette (Virginie, 27/10) : deux cartes = deux colonnes (dès 600 px), trois cartes = trois colonnes (dès 700 px) ---- */
@media (min-width: 700px) and (max-width: 1023.98px) {
  .formats, .effets { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .format-corps { padding: 20px 8px 22px; }
  .format-corps .titre-h3 { font-size: 22px; }
  .format-lien { font-size: 13.5px; padding: 0 12px; gap: 4px; }
  .effet { padding: 22px 18px 24px; }
  .effet-tete { flex-direction: column; align-items: flex-start; gap: 10px; }
  .effet-tete p { font-size: 19px; }
  .effet .titre-h3 { font-size: 20px; }
}