/* ============================================================
   LANDING — chargé par accueil.html, index.html, programme.html,
   et les pages secondaires (contact, cgv, mentions-légales,
   influenceurs) qui réutilisent les mêmes composants .lp-*.
   Issu du split de style.css le 30 août 2026.
   ============================================================ */

/* =====================================================
   POLICE ALTERNATIVE, Helvetica sur la landing page
   (appliquée uniquement via body.theme-warm, cf. accueil.html)
   ===================================================== */
body.theme-warm {
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
}


/* =====================================================
   LANDING, BARRE DE STATS
   ===================================================== */
.lp-stats {
  display: flex;
  justify-content: center;
  gap: 56px;
  flex-wrap: wrap;
  padding: 28px 24px;
  background: var(--color-text);
}
.lp-stats__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
}
.lp-stats__number {
  font-size: 1.8rem;
  font-weight: 800;
  color: #fff;
}
.lp-stats__label {
  font-size: 0.82rem;
  color: #c8c8ce;
  text-align: center;
}


/* =====================================================
   LANDING, SECTIONS GÉNÉRIQUES
   ===================================================== */
.lp-section {
  padding: 72px 56px;
  max-width: 1200px;
  margin: 0 auto;
}
.lp-section--alt {
  background: var(--color-surface);
  max-width: none;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.lp-section--alt > * {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
.lp-section__intro {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 40px;
}
.lp-section__tag {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-primary-text);
  margin: 0 0 10px;
}
.lp-section__intro h2 {
  font-size: 2rem;
  margin: 0 0 14px;
}
.lp-section__lead {
  color: var(--color-muted);
  font-size: 1.05rem;
  margin: 0;
}
.lp-section__lead--muted {
  font-style: italic;
  font-size: 0.92rem;
}
.lp-section__intro .btn {
  margin-top: 20px;
}


/* =====================================================
   LANDING, LES CRÉATEURS DU PROJET (fondateur + mécanicien)
   ===================================================== */
.lp-founder {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 40px;
  align-items: start;
  max-width: 960px;
  margin: 0 auto;
}
.lp-founder__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid var(--color-primary);
}
.lp-founder__name {
  font-size: 1.3rem;
  font-weight: 800;
  margin: 0 0 2px;
}
.lp-founder__role {
  color: var(--color-primary-text);
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 18px;
}
.lp-founder__text p {
  color: var(--color-text);
  line-height: 1.7;
  margin: 0 0 16px;
}
@media (max-width: 900px) {
  /* Le layout 2 colonnes de .lp-founder (240px + 1fr) écrasait le texte
     sur mobile car cette règle, chargée après core.css, gagnait la
     cascade sur la règle responsive de core.css qui visait la même
     classe avec la même spécificité. On la réaffirme ici, dans le même
     fichier et après la règle desktop, pour garantir l'empilement. */
  .lp-founder {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .lp-founder__media img {
    width: 100%;
    max-width: 160px;
    margin: 0 auto;
  }
}


/* =====================================================
   PAGE PROGRAMME, liste détaillée des modules
   ===================================================== */
.programme-list {
  max-width: 900px;
  margin: 0 auto;
  padding: 16px 24px 72px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.programme-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 28px 32px;
}
.programme-item h2 {
  font-size: 1.3rem;
  margin: 0 0 8px;
}
.programme-item__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--color-primary-text);
  text-decoration: none;
}
.programme-item__link:hover {
  text-decoration: underline;
}
.programme-item__link .icon {
  width: 16px;
  height: 16px;
}


/* =====================================================
   LANDING, CARTES (problème / avantages)
   ===================================================== */
.lp-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}
.lp-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 28px 24px;
}
.lp-card__icon {
  font-size: 1.8rem;
  margin: 0 0 12px;
}
.lp-card h3 {
  font-size: 1.1rem;
  margin: 0 0 8px;
}
.lp-card p {
  color: var(--color-muted);
  font-size: 0.94rem;
  margin: 0;
  line-height: 1.6;
}

/* Variante "problème" : badge d'icône coloré, relief et micro-interaction au survol */
.lp-card--problem {
  position: relative;
  overflow: hidden;
  padding-top: 30px;
  box-shadow: 0 1px 2px rgba(20, 20, 20, 0.04);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.lp-card--problem::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--color-primary);
  opacity: 0.85;
}
.lp-card--problem:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(20, 20, 20, 0.08);
  border-color: transparent;
}
.lp-card__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-primary) 14%, transparent);
  margin: 0 0 18px;
}
.lp-card__badge .icon {
  width: 24px;
  height: 24px;
  color: var(--color-primary);
}
.lp-card--problem h3 {
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 10px;
}
.lp-card--problem p {
  font-size: 0.95rem;
}

/* Variante "bonus" : badge d'icône encore plus grand, avec numéro */
.lp-card--bonus {
  position: relative;
  padding-top: 32px;
}
.lp-card--bonus .lp-card__badge {
  width: 72px;
  height: 72px;
  margin-bottom: 20px;
  background: color-mix(in srgb, var(--color-primary) 16%, transparent);
}
.lp-card--bonus .lp-card__badge .icon {
  width: 34px;
  height: 34px;
}
.lp-card--bonus__num {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--color-muted);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 3px 10px;
}
.lp-card--bonus h3 {
  font-size: 1.15rem;
}


/* =====================================================
   LANDING, LEAD MAGNET (formulaire Excel / influenceur)
   ===================================================== */
.lp-leadmagnet {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.lp-leadmagnet > * {
  /* Sans ça, une grille à 1 colonne sur mobile peut quand même déborder :
     par défaut, un enfant de grille ne rétrécit jamais sous la largeur de
     son contenu (ex. l'email non coupable dans la liste de contact). */
  min-width: 0;
}
.lp-leadmagnet--influ {
  grid-template-columns: 0.9fr 1.1fr;
}
.lp-leadmagnet__text h2 {
  font-size: 1.8rem;
  margin: 10px 0 14px;
}
.lp-leadmagnet__text p {
  color: var(--color-muted);
  margin-bottom: 16px;
}

.lp-form {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.lp-form__row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
@media (max-width: 420px) {
  /* Sur très petit écran, deux champs à 160px min. + le padding du
     formulaire dépassent la largeur de l'écran (scroll horizontal) :
     on les empile plutôt que de les mettre côte à côte. */
  .lp-form__row {
    flex-direction: column;
  }
  .lp-form label {
    min-width: 0;
  }
}
.lp-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--color-muted);
  flex: 1;
  min-width: 160px;
}
.lp-form input,
.lp-form textarea,
.lp-form select {
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 0.95rem;
  font-family: var(--font);
  resize: vertical;
  background: var(--color-surface);
  color: var(--color-text);
}
.lp-form__note {
  font-size: 0.78rem;
  color: var(--color-muted);
  text-align: center;
  margin: 0;
}

.lp-leadmagnet__success {
  grid-column: 2;
  background: #f1faf4;
  border: 1px solid #cdecd8;
  border-radius: 14px;
  padding: 28px;
  text-align: center;
}
.lp-leadmagnet--influ .lp-leadmagnet__success {
  grid-column: 2;
}
.lp-leadmagnet__success-title {
  font-weight: 700;
  font-size: 1.1rem;
  margin: 0 0 8px;
}
.lp-leadmagnet__success-note {
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid #cdecd8;
  font-size: 0.85rem;
  color: var(--color-text);
}


/* =====================================================
   GALERIE PHOTO (mosaïque)
   ===================================================== */
.lp-gallery {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 140px;
  gap: 10px;
  padding: 0 24px 24px;
  max-width: 1200px;
  margin: 0 auto;
}
.lp-gallery__item {
  margin: 0;
  overflow: hidden;
  border-radius: 12px;
  grid-column: span 2;
  grid-row: span 1;
}
.lp-gallery__item--tall {
  grid-row: span 2;
}
.lp-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.lp-gallery__item:hover img {
  transform: scale(1.06);
}
.lp-gallery--strip {
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 220px;
}
.lp-gallery--strip .lp-gallery__item {
  grid-column: span 1;
}


/* =====================================================
   LANDING, TÉMOIGNAGES
   ===================================================== */
.lp-cards--testimonials {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.lp-testimonial {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 26px 22px;
}
.lp-testimonial p:first-child {
  font-size: 0.98rem;
  color: var(--color-text);
  line-height: 1.6;
  margin: 0 0 14px;
}
.lp-testimonial__author {
  font-size: 0.85rem;
  color: var(--color-muted);
  margin: 0;
}


/* =====================================================
   COMPTE À REBOURS, OFFRE DE LANCEMENT
   ===================================================== */
.lp-offer__countdown {
  margin: 4px 0 24px;
  padding: 16px 20px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-bg);
}
.lp-offer__countdown-label {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text);
}
.lp-offer__countdown-label .icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--color-primary);
}
.lp-offer__countdown-text {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
}
.promo-code {
  display: inline-block;
  white-space: nowrap;
  background: rgba(200, 151, 63, 0.14);
  color: var(--color-primary-text);
  border: 1px solid rgba(200, 151, 63, 0.4);
  border-radius: 6px;
  padding: 1px 7px;
  margin: 0 1px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.lp-offer__countdown-timer {
  display: flex;
  justify-content: center;
  gap: 12px;
}
.lp-offer__countdown-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 56px;
  padding: 8px 6px;
  border-radius: 8px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.lp-offer__countdown-unit span {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--color-primary-text);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.lp-offer__countdown-unit small {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-muted);
}
.lp-offer__countdown.is-expired {
  border-color: #d64545;
  background: #fdf1f1;
}
.lp-offer__countdown.is-expired .lp-offer__countdown-label {
  color: #b52c2c;
}
.lp-offer__countdown.is-expired .lp-offer__countdown-label .icon {
  color: #d64545;
}
@media (max-width: 480px) {
  .lp-offer__countdown-unit {
    min-width: 46px;
    padding: 6px 4px;
  }
  .lp-offer__countdown-unit span {
    font-size: 1.15rem;
  }
}

.lp-offer__list {
  list-style: none;
  padding: 0;
  margin: 24px 0 8px;
  text-align: left;
  display: inline-block;
}
.lp-offer__list li {
  margin-bottom: 10px;
  font-size: 0.96rem;
}
.lp-offer__test-note {
  margin: 12px 0 0;
  font-size: 0.78rem;
  color: #b4670a;
}

/* =====================================================
   LANDING, FAQ (accordéon)
   ===================================================== */
.lp-faq {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lp-faq__item {
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-surface);
}
.lp-faq__question {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 18px 20px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--color-text);
}
.lp-faq__question span {
  font-size: 1.2rem;
  color: var(--color-primary-text);
  transition: transform var(--transition);
}
.lp-faq__item.is-open .lp-faq__question span {
  transform: rotate(45deg);
}
.lp-faq__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition);
  padding: 0 20px;
}
.lp-faq__item.is-open .lp-faq__answer {
  max-height: 240px;
  padding: 0 20px 18px;
}
.lp-faq__answer p {
  margin: 0;
  color: var(--color-muted);
  line-height: 1.6;
}


/* =====================================================
   INFLUENCEURS, ÉTAPES
   ===================================================== */
.lp-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}
.lp-step {
  text-align: center;
  padding: 12px;
}
.lp-step__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-weight: 800;
  margin-bottom: 14px;
}
.lp-step h3 {
  margin: 0 0 8px;
  font-size: 1.05rem;
}
.lp-step p {
  color: var(--color-muted);
  font-size: 0.92rem;
  margin: 0;
}


/* =====================================================
   PAGE PROGRAMME, listes de modules avec coches
   ===================================================== */
.programme-item .content__list--grid {
  list-style: none;
  padding-left: 0;
}
.programme-item .content__list--grid li {
  position: relative;
  padding-left: 26px;
}
.programme-item .content__list--grid li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 14px;
  height: 8px;
  border-left: 2px solid #2f9e5c;
  border-bottom: 2px solid #2f9e5c;
  transform: translateY(-60%) rotate(-45deg);
}


/* =====================================================
   BANDEAU CTA, carnet Excel (remplace l'ancienne section pleine page)
   ===================================================== */
.lp-leadmagnet-banner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 24px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 24px 28px;
}
.lp-leadmagnet-banner__icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-primary) 16%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
}
.lp-leadmagnet-banner__icon .icon {
  width: 26px;
  height: 26px;
}
.lp-leadmagnet-banner__text {
  flex: 1;
}
.lp-leadmagnet-banner__tag {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-primary-text);
  margin: 0 0 4px;
}
.lp-leadmagnet-banner__text h3 {
  font-size: 1.15rem;
  margin: 0 0 4px;
}
.lp-leadmagnet-banner__text p {
  color: var(--color-muted);
  font-size: 0.92rem;
  margin: 0;
}
.lp-leadmagnet-banner .btn {
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .lp-leadmagnet-banner {
    flex-direction: column;
    text-align: center;
  }
}
.lp-leadmagnet-banner__note {
  max-width: 900px;
  margin: 14px auto 0;
  padding: 0 28px;
  font-size: 0.85rem;
  color: var(--color-muted);
  text-align: center;
}


/* =====================================================
   LANDING, PROGRAMME : titre "10 modules" + sous-titre + cadre bonus
   ===================================================== */
.lp-programme__title {
  font-size: 2.6rem;
  font-weight: 800;
  color: var(--color-navy);
  margin: 0 0 4px;
}
.lp-programme__subtitle {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-muted);
  margin: 0 0 16px;
}
.lp-programme__bonus-box {
  margin: 20px 0 24px;
  padding: 22px 24px;
  background: linear-gradient(135deg, var(--color-surface), var(--color-bg));
  border: 1px solid var(--color-border);
  border-radius: 16px;
  text-align: left;
}
.lp-programme__bonus-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--color-navy);
  margin: 0 0 14px;
  font-size: 1rem;
}
.lp-programme__bonus-title .icon {
  width: 18px;
  height: 18px;
  color: var(--color-primary);
  flex-shrink: 0;
}
.lp-programme__bonus-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lp-programme__bonus-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  font-size: 0.9rem;
  color: var(--color-text);
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.lp-programme__bonus-list li:hover {
  border-color: var(--color-primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(200, 151, 63, 0.18);
}
.lp-programme__bonus-num {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
}
@media (max-width: 640px) {
  .lp-programme__bonus-list {
    grid-template-columns: 1fr;
  }
}


/* =====================================================
   LANDING, OFFRE : sous-liste des 6 bonus dans le bloc de prix
   ===================================================== */
.lp-offer__list-item--bonus {
  margin-top: 4px;
  padding: 14px 16px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 10px;
}
.lp-offer__list-item--bonus strong {
  color: var(--color-navy);
  font-size: 1rem;
}
.lp-offer__bonus-list {
  list-style: none;
  margin: 8px 0 0;
  padding-left: 0;
  font-size: 0.9rem;
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lp-offer__bonus-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.lp-offer__bonus-list .icon {
  color: #2f9e5c;
  margin-top: 2px;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}


/* =====================================================
   LANDING, TÉMOIGNAGES AVEC PHOTO (galerie fusionnée)
   ===================================================== */
.lp-testimonial--photo {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.lp-testimonial--photo img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}
.lp-testimonial--photo figcaption {
  padding: 22px;
}
.lp-testimonial--photo figcaption p:first-child {
  font-size: 0.98rem;
  color: var(--color-text);
  line-height: 1.6;
  margin: 0 0 14px;
}


/* =====================================================
   LANDING, FONDATEURS : deux cartes côte à côte + bloc "nous"
   ===================================================== */
.lp-founders-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  max-width: 960px;
  margin: 0 auto 32px;
}
.lp-founders-grid .lp-founder {
  max-width: none;
  margin: 0;
}
.lp-founders-note {
  max-width: 720px;
  margin: 20px auto 0;
  text-align: center;
}
.lp-founders-note p {
  color: var(--color-text);
  line-height: 1.7;
  margin: 0;
}
@media (max-width: 700px) {
  .lp-founders-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}


/* =====================================================
   LANDING, SECTION "SATISFAIT OU REMBOURSÉ"
   ===================================================== */
.lp-guarantee {
  display: flex;
  align-items: center;
  gap: 40px;
  max-width: 900px;
  margin: 0 auto;
  padding: 48px 24px;
}
.lp-guarantee__seal {
  flex-shrink: 0;
  width: 150px;
  height: 150px;
}
.lp-guarantee__text h2 {
  margin: 0 0 12px;
  font-size: 1.7rem;
}
.lp-guarantee__text p {
  color: var(--color-text);
  line-height: 1.6;
  margin: 0 0 10px;
}
.lp-guarantee__text p:last-child {
  margin-bottom: 0;
}
.lp-guarantee__text a {
  color: var(--color-primary-text);
  font-weight: 600;
}
@media (max-width: 640px) {
  .lp-guarantee {
    flex-direction: column;
    text-align: center;
    gap: 24px;
  }
}