/* =========================================================
   Maison Innée — Page « Signature olfactive sur-mesure » (offre 2)
   Réutilise styles.css (header, footer, .btn, section, .section-head,
   .title-initial) ET offre-abonnement.css pour les composants partagés,
   à l'identique : carrousel (.sol-carousel / .sol-mood + @keyframes
   sol-marquee), FAQ (.sol-faq*), avis clients (.sol-avis*), liste
   d'étapes (.sol-steps), hero texte (.sol-hero*) et redirection (.sol-redirect).
   Les classes propres à cette page sont préfixées « sol2- ».
   Breakpoints alignés sur styles.css : 1279 / 1023 / 767.
   ========================================================= */

/* Mots accentués (beige-600) dans les titres : poids uniforme semibold. */
.sol2-hero .t-accent,
.section-head .t-accent { font-weight: 600; }

/* ===================== 2. VOTRE PARFUM, VOTRE EXCLUSIVITÉ ===================== */
.sol2-exclusivite { background: var(--color-beige-50); }
.sol2-pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.sol2-pillar {
  background: var(--color-neutre-50);
  border: 1px solid var(--color-beige-100);
  border-radius: var(--radius-md);
  padding: clamp(24px, 3vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform var(--tr-med), box-shadow var(--tr-med);
}
.sol2-pillar:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }
.sol2-pillar__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem; /* 20px */
  color: var(--color-neutre-500);
  line-height: 1.25;
}
.sol2-pillar__desc {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.45;
  color: var(--color-neutre-300);
}

/* ===================== 3. ACCOMPAGNEMENT DE A À Z ===================== */
.sol2-accompagnement { background: var(--color-neutre-50); }
.sol2-accompagnement__inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(40px, 5vw, 64px);
  align-items: center;
}
.sol2-accompagnement__copy {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.sol2-accompagnement__copy .section-head { margin-bottom: 0; max-width: none; }
.sol2-accompagnement__copy .btn { align-self: flex-start; }

/* Timeline : le trait vertical et la couleur des puces sont gérés de façon
   partagée dans offre-abonnement.css (.sol-steps__item ::before / ::after),
   identiques à la page d'accueil. Rien à surcharger ici. */

.sol2-accompagnement__media img {
  width: 100%;
  aspect-ratio: 417 / 480;
  object-fit: cover;
  border: 1px solid var(--color-neutre-100);
  border-radius: var(--radius-lg);
  display: block;
}

/* ===================== 5. EXPLOITEZ — LEVIER DE MARQUE ===================== */
.sol2-levier { background: var(--color-neutre-50); }
.sol2-levier__head { max-width: 940px; }
.sol2-levier__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.sol2-levier__item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: var(--color-beige-50);
  border: 1px solid var(--color-beige-100);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  transition: transform var(--tr-med), box-shadow var(--tr-med);
}
.sol2-levier__item:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }
.sol2-levier__icon {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #FFFFFF;
  color: var(--color-beige-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sol2-levier__text h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.125rem; /* 18px */
  color: var(--color-neutre-500);
  line-height: 1.3;
  margin-bottom: 4px;
}
.sol2-levier__text p {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.4;
  color: var(--color-neutre-300);
}
.sol2-levier__cta { margin-top: clamp(24px, 3vw, 32px); }

/* =========================================================
   RESPONSIVE
   ========================================================= */

/* ----- Tablet (≤ 1023) ----- */
@media (max-width: 1023px) {
  /* Piliers exclusivité → 1 colonne (3 blocs de texte) */
  .sol2-pillars { grid-template-columns: 1fr; }

  /* Accompagnement : visuel au-dessus du texte */
  .sol2-accompagnement__inner { grid-template-columns: 1fr; gap: 32px; }
  .sol2-accompagnement__media { order: -1; }
  .sol2-accompagnement__media img { aspect-ratio: 16 / 10; }
}

/* ----- Mobile (≤ 767) ----- */
@media (max-width: 767px) {
  /* CTA pleine largeur, comme sur l'offre 1 */
  .sol2-accompagnement__copy .btn,
  .sol2-levier__cta .btn { width: 100%; }
  .sol2-levier__cta { display: flex; }
}