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

/* ---- 1. Durable : la photo dans un cadre décalé, deux blocs à icône séparés par un filet ---- */
.durable { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 4cqw, 64px); align-items: center; margin-top: 48px; }
.durable-photo { position: relative; margin: 0; }
.durable-photo img { display: block; width: 100%; aspect-ratio: 4 / 4.4; object-fit: cover; border-radius: 22px; }
.durable-blocs { display: flex; flex-direction: column; }
.durable-bloc + .durable-bloc { margin-top: 28px; padding-top: 28px; border-top: 2px solid var(--sable); }
.durable-icone { display: inline-flex; width: 48px; height: 48px; border-radius: 14px; background: var(--lilas); align-items: center; justify-content: center; margin-bottom: 14px; }
.durable-icone svg { width: 28px; height: 28px; fill: none; stroke: var(--violet-fonce); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.durable-bloc .titre-h3 { font-size: 24px; margin-bottom: 10px; }

/* ---- 2. Activités : trois lignes cliquables ---- */
.lignes { display: flex; flex-direction: column; gap: 14px; margin-top: 44px; }
.ligne {
  display: grid; grid-template-columns: 150px 1fr 56px; gap: 26px; align-items: center; padding: 14px 24px 14px 14px;
  border-radius: 22px; background: var(--blanc); color: var(--encre); text-decoration: none;
  transition: transform .25s, box-shadow .25s, background .25s;
}
.ligne > img { width: 150px; height: 150px; object-fit: cover; border-radius: 16px; display: block; }
.ligne .titre-h3 { font-size: 28px; margin-bottom: 8px; }
.ligne-fleche { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--lilas); color: var(--violet-fonce); font-size: 24px; font-weight: 800; transition: background .25s, color .25s, transform .25s; }
.ligne:hover { transform: translateX(6px); box-shadow: 0 16px 34px rgba(42,26,140,.12); color: var(--encre); }
.ligne:hover .ligne-fleche { background: var(--violet); color: #FFFFFF; transform: translateX(4px); }
.ligne:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; }

/* ---- 3. Accompagnement : deux cartes, des marches qui montent et une boussole ---- */
.soutiens { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 48px; }
.soutien { background: var(--creme); border-radius: 22px; padding: 30px 32px; }
.soutien .titre-h3 { font-size: 24px; margin: 20px 0 10px; }
.soutien-visuel { display: flex; height: 64px; }
.soutien-marches { align-items: flex-end; gap: 6px; }
.soutien-marches i { width: 26px; border-radius: 6px 6px 2px 2px; background: var(--violet); transform: scaleY(0); transform-origin: bottom; transition: transform .5s ease; }
.soutien-marches i:nth-child(1) { height: 25%; } .soutien-marches i:nth-child(2) { height: 50%; transition-delay: .15s; }
.soutien-marches i:nth-child(3) { height: 75%; transition-delay: .3s; } .soutien-marches i:nth-child(4) { height: 100%; transition-delay: .45s; }
.soutien.visible .soutien-marches i { transform: none; }
.soutien-boussole svg { width: 64px; height: 64px; fill: none; stroke: var(--violet); stroke-width: 2.5; }
.soutien-boussole .aiguille { fill: var(--violet); stroke: none; transform-box: view-box; transform-origin: 32px 32px; transform: rotate(-60deg); transition: transform 1.4s cubic-bezier(.3,1.6,.5,1) .3s; }
.soutien-boussole .plein { fill: #FFFFFF; stroke: none; }
.soutien.visible .soutien-boussole .aiguille { transform: rotate(20deg); }

/* ---- 4. Régularité : une année en 52 semaines, une case qui s'allume après l'autre ---- */
.fond-nuit .regularite-texte { color: rgba(245,244,241,.86); }
.fond-nuit .regularite-texte strong { color: #FFFFFF; }
.regularite { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 4cqw, 64px); align-items: center; margin-top: 48px; }
.regularite-accroche { margin-top: 26px; font: 800 30px/1.1 'Barlow Condensed', sans-serif; text-transform: uppercase; color: #FFFFFF; }
.semaines { display: grid; grid-template-columns: repeat(13, 1fr); gap: 8px; }
.semaines i { aspect-ratio: 1; border-radius: 6px; background: #2E2E37; transition: background .3s; transition-delay: calc(var(--i) * 45ms); }
.semaines.visible i { background: var(--violet); }
.reperes { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.reperes li { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 18px; border-radius: 18px; background: #24242B; }
.reperes span { display: flex; width: 48px; height: 48px; border-radius: 14px; background: var(--violet); align-items: center; justify-content: center; }
.reperes svg { width: 28px; height: 28px; fill: none; stroke: #FFFFFF; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.reperes p { font: 800 22px/1 'Barlow Condensed', sans-serif; text-transform: uppercase; color: #FFFFFF; }

@media (prefers-reduced-motion: reduce) {
  .ligne, .ligne-fleche, .soutien-marches i, .soutien-boussole .aiguille, .semaines i { transition: none; }
  .ligne:hover, .ligne:hover .ligne-fleche { transform: none; }
  .soutien-marches i { transform: none; } .soutien-boussole .aiguille { transform: rotate(20deg); }
  .semaines i { background: var(--violet); }
}

/* ---- Téléphone et tablette (1 023 px et moins) ---- */
@media (max-width: 1023.98px) {
  .durable, .soutiens, .regularite { grid-template-columns: 1fr; gap: 34px; margin-top: 34px; }
  .durable-photo img { aspect-ratio: 4 / 3; }
  .lignes { margin-top: 34px; }
  .ligne { grid-template-columns: 96px 1fr; gap: 16px; padding: 12px 16px 12px 12px; }
  .ligne > img { width: 96px; height: 96px; }
  .ligne .titre-h3 { font-size: 23px; }
  .ligne-fleche { display: none; }
  .ligne:hover { transform: none; }
  .soutien { padding: 24px 22px; }
  .regularite-accroche { text-align: center; font-size: 26px; }
  .semaines { gap: 5px; }
  .reperes { grid-template-columns: 1fr; gap: 12px; margin-top: 34px; }
}
@media (max-width: 499.98px) {
  /* La ligne passe en carte : photo au-dessus du texte (règle 16) */
  .ligne { grid-template-columns: 1fr; }
  .ligne > img { width: 100%; height: auto; aspect-ratio: 16 / 9; }
}

/* ---- 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) {
  /* les deux blocs côte à côte, le filet passe de l'horizontale à la verticale */
  .durable-blocs { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
  .durable-bloc:first-child { padding-right: 28px; }
  .durable-bloc + .durable-bloc { margin-top: 0; padding-top: 0; border-top: 0; padding-left: 28px; border-left: 2px solid var(--sable); }
  .soutiens { grid-template-columns: 1fr 1fr; gap: 16px; }
}