/* ===========================================
   PAIN
   Section "Ce n'est pas le ménage qui vous épuise..."
   5 blocs : titre, texte+main, main+texte, 2 cards, résolution.
   =========================================== */

.pain {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 70px;
  padding: 100px 85px;
  /* Clippe les suns qui débordent côté section */
  overflow: hidden;
}

/* --- Titre principal --- */
.pain__heading {
  width: 100%;
  max-width: 1270px;
  padding: 10px;
  margin: 0;
  font-size: 36px;
  font-weight: 600;
  line-height: 54px;
  text-align: center;
  color: var(--color-text);
}

.pain__heading-accent,
.pain__accent {
  color: var(--color-accent);
}

/* Sous-titre avec icône de quote sous le h2 (particulier section 4).
   Réutilise .pain__quote-icon (50x50) du bloc 1. */
.pain__heading-quote {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 1270px;
  padding: 0 10px;
  margin: 0;
}

.pain__heading-sub {
  margin: 0;
  font-size: 24px;
  font-style: italic;
  line-height: 36px;
  color: var(--color-text);
}

/* Liste à puces pour le bloc d'agitation (particulier section 4) :
   3 idées principales en bullets, avec puces colorées accent. */
.pain__intro-list {
  margin: 0;
  padding: 0 0 0 30px;
  list-style: disc outside;
  font-size: 20px;
  line-height: 30px;
  color: var(--color-text);
}

.pain__intro-list li + li {
  margin-top: 10px;
}

.pain__intro-list li::marker {
  color: var(--color-accent);
}

/* --- Bloc générique texte + image ---
   Frame 72, 24, 25 : row layout sur desktop/tablet, column sur mobile. */
.pain__block {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
  width: 100%;
  max-width: 840px;
}

/* Modifier pour Frame 24 : sur mobile, l'ordre source (hand puis text)
   doit être inversé visuellement → text au-dessus de la hand.
   column-reverse fait l'affaire. */
.pain__block--reverse-mobile {
  /* Desktop : pas de changement */
}

.pain__block-text {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* --- Texte intro du Bloc 1 --- */
.pain__intro {
  margin: 0;
  font-size: 20px;
  line-height: 30px;
  color: var(--color-text);
}

/* --- Quote (Bloc 1) --- */
.pain__quote {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pain__quote-icon {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
}

.pain__quote-text {
  margin: 0;
  font-size: 20px;
  font-style: italic;
  line-height: 30px;
  color: var(--color-text);
}

/* --- Texte plein (Bloc 2) avec accents bold colorés --- */
.pain__text-full {
  margin: 0;
  font-size: 20px;
  line-height: 30px;
  color: var(--color-text);
}

.pain__text-full strong.pain__accent {
  font-weight: var(--fw-bold);
}

/* --- Hand SVG --- */
.pain__hand {
  flex-shrink: 0;
  display: block;
}

/* --- Cards container (Frame 73) ---
   overflow: hidden retiré pour permettre aux suns (enfants des wraps)
   de dépasser. C'est le parent .pain (section) qui clippera si besoin. */
.pain__cards {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 100px;
  padding: 10px 0;
  width: 100%;
  max-width: 1270px;
}

/* --- Wrapper card + soleil ---
   Pattern identique à audience : sun et card frères dans un wrapper
   positionné. Le sun suit la card sur tous les layouts. */
.pain-card-wrap {
  position: relative;
  width: 476px;
}

/* Variant 3 colonnes (utilisé sur particulier section 4 — sous-blocs
   d'auto-identification). Cartes plus étroites et gap réduit pour
   tenir dans 1270px. */
.pain__cards--three {
  gap: 40px;
}

.pain__cards--three .pain-card-wrap {
  width: auto;
  flex: 1 1 0;
  min-width: 0;
}

/* Paragraphe seul (sans liste à puces) pour les cartes section 4. */
.pain-card__text {
  margin: 0;
  padding: 10px;
  font-size: 20px;
  line-height: 30px;
  color: var(--color-text);
}

/* --- Soleils décoratifs ---
   SVG inline avec fill="currentColor", positionné en absolute dans
   le wrapper, derrière la card (z-index 0 vs card z-index 1). */
.pain__decor {
  position: absolute;
  opacity: 0.3;
  pointer-events: none;
  z-index: 0;
}

/* Particulier : sun orange centré à 1/3 du haut, côté gauche de la card */
.pain-card-wrap--particulier .pain__decor {
  width: 370px;
  height: 370px;
  top: 33%;
  left: 0;
  transform: translate(-50%, -50%);
  color: var(--color-accent);
}

/* Pro : sun mint centré à 1/3 du bas, côté droit de la card */
.pain-card-wrap--professionnel .pain__decor {
  width: 370px;
  height: 370px;
  bottom: 33%;
  right: 0;
  transform: translate(50%, 50%);
  color: var(--color-mint);
}

/* --- Pain card --- */
.pain-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  height: 100%; /* remplit le wrap → les 2 cards toujours même hauteur */
  padding: 10px 10px 30px 10px;
  background-color: var(--color-bg);
  border: 2px solid var(--color-text);
  box-shadow: 8px 8px 0 0 var(--card-shadow-color, var(--color-accent));
}

.pain-card--professionnel {
  --card-shadow-color: var(--color-mint-dark);
}

.pain-card__title {
  margin: 0;
  padding: 10px;
  font-size: 24px;
  font-weight: var(--fw-medium);
  line-height: 36px;
  text-align: center;
}

.pain-card--particulier .pain-card__title {
  color: var(--color-accent);
}

.pain-card--professionnel .pain-card__title {
  color: var(--color-mint-dark);
}

.pain-card__description {
  margin: 0;
  padding: 10px 10px 10px 30px;
  list-style: disc outside;
  font-size: 20px;
  line-height: 30px;
  color: var(--color-text);
}

.pain-card__description li + li {
  margin-top: 20px;
}

.pain-card__description li::marker {
  color: var(--card-shadow-color, var(--color-accent));
}

/* --- Bloc résolution (Frame 25) --- */
.pain__resolution-title {
  margin: 0;
  font-size: 24px;
  font-weight: var(--fw-medium);
  line-height: 36px;
  color: var(--color-text);
}

.pain__resolution-subtitle {
  margin: 0;
  font-size: 20px;
  line-height: 30px;
  color: var(--color-text);
}

/* ============================
   TABLET (768-1199px)
   Cards stacked, blocs texte+hand restent row.
   ============================ */
@media (max-width: 1199px) {
  .pain {
    padding: 100px 85px;
    gap: 70px;
  }

  .pain__block {
    max-width: 664px;
  }

  .pain__cards {
    flex-direction: column;
    align-items: center;
    gap: 100px;
    max-width: 664px;
  }
}

/* ============================
   MOBILE (< 768px)
   Tous les blocs deviennent column. Bloc 2 (Frame 24) inversé.
   ============================ */
@media (max-width: 767px) {
  .pain {
    padding: 60px 20px;
    gap: 40px;
  }

  .pain__heading {
    font-size: 32px;
    line-height: 48px;
    text-align: left;
    padding: 10px 20px;
  }

  .pain__block {
    flex-direction: column;
    gap: 60px;
  }

  /* Frame 24 : sur mobile, le texte doit être AU-DESSUS de la hand
     (alors qu'en desktop la hand est à GAUCHE du texte). */
  .pain__block--reverse-mobile {
    flex-direction: column-reverse;
  }

  .pain__intro,
  .pain__quote-text,
  .pain__text-full,
  .pain-card__description,
  .pain__resolution-subtitle {
    font-size: 16px;
    line-height: 24px;
  }

  .pain__resolution-title {
    font-size: 24px;
    line-height: 36px;
  }

  .pain__cards {
    gap: 50px;
  }

  .pain-card-wrap {
    width: 100%;
    max-width: 353px;
  }

  /* Soleils ajustés pour mobile (plus petits / repositionnés) */
  .pain__decor--sun-orange {
    width: 250px;
    height: 250px;
    top: -100px;
    left: -100px;
  }

  .pain__decor--sun-mint {
    width: 280px;
    height: 280px;
    top: 500px;
    right: -100px;
  }
}

/* Reveal au scroll : chaque élément animé indépendamment quand 20%
   entre dans le viewport. Scoped sous .js → si JS off, tout visible. */
@keyframes pain-slide-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pain-slide-from-right {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes pain-slide-from-left {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}

.js .pain__heading[data-reveal],
.js .pain__block[data-reveal],
.js .pain__cards[data-reveal] .pain-card-wrap {
  opacity: 0;
}

.pain__heading.is-visible {
  animation: pain-slide-up 600ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.pain__block--intro.is-visible,
.pain__block--resolution.is-visible {
  animation: pain-slide-from-right 600ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.pain__block--reverse-mobile.is-visible {
  animation: pain-slide-from-left 600ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.pain__cards.is-visible .pain-card-wrap {
  animation: pain-slide-up 600ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.pain__cards.is-visible .pain-card-wrap--particulier    { animation-delay:   0ms; }
.pain__cards.is-visible .pain-card-wrap--professionnel  { animation-delay: 200ms; }

/* Stagger pour la variante 3 cartes (sans modifiers d'identité). */
.pain__cards--three.is-visible .pain-card-wrap:nth-child(1) { animation-delay:   0ms; }
.pain__cards--three.is-visible .pain-card-wrap:nth-child(2) { animation-delay: 150ms; }
.pain__cards--three.is-visible .pain-card-wrap:nth-child(3) { animation-delay: 300ms; }

@media (prefers-reduced-motion: reduce) {
  .js .pain__heading[data-reveal],
  .js .pain__block[data-reveal],
  .js .pain__cards[data-reveal] .pain-card-wrap {
    opacity: 1;
    animation: none;
  }
}

/* Rotation des décors-soleils liée au scroll de la section pain.
   Réutilise les keyframes sun-spin-* définies dans audience.css :
   les translate values sont identiques (translate(-50%,-50%) pour
   le gauche, translate(50%,50%) pour le droit). */
.pain {
  view-timeline-name: --pain-view;
}

.pain-card-wrap--particulier .pain__decor {
  animation: sun-spin-particulier linear;
  animation-timeline: --pain-view;
}

.pain-card-wrap--professionnel .pain__decor {
  animation: sun-spin-professionnel linear;
  animation-timeline: --pain-view;
}

@media (prefers-reduced-motion: reduce) {
  .pain__decor {
    animation: none;
  }
}