/* ============================================================
   TFE — Membership page layout: funnel + "Why subscribe?" sidebar
   Tokens: primary #6D2929 | text #282828 | radius 0
   Headlines: Georgia | Body/labels: Arial
   ============================================================ */

/* ----------------------------------------------------------------
   1) WRAPPER — devient une grille 2 colonnes à partir de 1000px.
   À ajouter autour de <aside class="tfe-why-subscribe"> et de
   <div class="tfe-membership-wrap"> (voir patch PHP associé) :

   <div class="tfe-membership-layout">
     <aside class="tfe-why-subscribe">...</aside>
     <div class="tfe-membership-wrap">...</div>
   </div>
---------------------------------------------------------------- */

.tfe-membership-layout {
  display: block;
}

@media screen and (min-width: 1000px) {
  .tfe-membership-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 40px;
    align-items: start;
    max-width: 1100px;
    margin: 0 auto;
  }

  /* Sidebar sticky : reste visible pendant le scroll du funnel */
  .tfe-membership-layout .tfe-why-subscribe {
    position: sticky;
    top: 24px;
  }

  /* Le funnel passe en 2e colonne, à droite */
  .tfe-membership-layout .tfe-membership-wrap {
    order: 2;
  }
}

/* ----------------------------------------------------------------
   2) SIDEBAR "Why subscribe?" — version compacte
---------------------------------------------------------------- */

.tfe-why-subscribe {
  color: #282828;
  padding: 20px 0;
}

.tfe-why-subscribe__title {
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 16px;
  color: #282828;
}

.tfe-why-subscribe__list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.tfe-why-subscribe__item {
  align-items: flex-start;
  display: flex;
  gap: 12px;
}

.tfe-why-subscribe__icon {
  align-items: center;
  background: #dcb5b5;
  border-radius: 0;
  color: #6D2929;
  display: flex;
  flex: 0 0 auto;
  height: 36px;
  justify-content: center;
  width: 36px;
}

.tfe-why-subscribe__icon svg {
  display: block;
}

.tfe-why-subscribe__copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tfe-why-subscribe__item-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

.tfe-why-subscribe__item-text {
  font-size: 13px;
  line-height: 1.45;
  color: #5a5a5a;
}

/* ----------------------------------------------------------------
   3) MOBILE / TABLETTE (<1000px) — empilé : funnel puis sidebar.
   On force l'ordre visuel via flex/order pour ne pas dépendre de
   l'ordre du markup (utile si le HTML place la sidebar en premier
   pour des raisons d'accessibilité / lecture au clavier).
---------------------------------------------------------------- */

@media screen and (max-width: 999px) {
  .tfe-membership-layout {
    display: flex;
    flex-direction: column;
  }

  .tfe-membership-layout .tfe-membership-wrap {
    order: 1;
  }

  .tfe-membership-layout .tfe-why-subscribe {
    order: 2;
    border-top: 1px solid #e8dede;
    margin-top: 32px;
    padding-top: 24px;
  }

  .tfe-why-subscribe__title {
    text-align: center;
    font-size: 26px;
  }

  .tfe-why-subscribe__list {
    max-width: 480px;
    margin: 0 auto;
  }
}