
    /* Familles theme: caramel / sable chaud (cream-tile assombri pour texte blanc) */
    .hero { background: linear-gradient(135deg, #B8946A 0%, #8E6F4A 100%); }

    /* Pilier card */
    .pilier-card {
      background: var(--cream-tile);
      border-left: 4px solid #B8946A;
      padding: 22px 26px;
      border-radius: 8px;
      margin: 18px 0;
    }
    .pilier-card h3 { color: #8E6F4A !important; margin-bottom: 8px !important; }

    /* Bloc "Mon histoire en 3 chapitres" */
    .histoire-block {
      margin: 26px 0;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
    }
    .histoire-card {
      display: block;
      background: var(--cream-tile);
      border: 1px solid var(--rule);
      border-radius: 14px;
      padding: 22px 20px;
      text-decoration: none !important;
      color: var(--charcoal) !important;
      transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    }
    .histoire-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 24px rgba(61,39,68,0.08);
      border-color: rgba(184,148,106,0.4);
    }
    .histoire-card .histoire-chapter {
      font-size: 0.72rem; text-transform: uppercase; letter-spacing: 1.4px;
      color: #B8946A; font-weight: 700;
      margin-bottom: 8px;
    }
    .histoire-card .histoire-title {
      font-size: 1rem; font-weight: 700; color: var(--prune);
      line-height: 1.4;
    }
    @media (max-width: 720px) {
      .histoire-block { grid-template-columns: 1fr; }
    }

    /* Teaser coffret "bientôt" */
    .coffret-teaser {
      margin-top: 50px;
      padding: 40px 32px;
      background: var(--banner-grad);
      color: #fff;
      border-radius: 18px;
      text-align: left;
    }
    .coffret-teaser .badge {
      display: inline-block;
      background: #B8946A; color: var(--prune);
      padding: 6px 14px; border-radius: 50px;
      font-size: 0.72rem; text-transform: uppercase; letter-spacing: 1.4px;
      font-weight: 700;
      margin-bottom: 16px;
    }
    .coffret-teaser h2 { color: #fff !important; margin-bottom: 14px; font-size: 1.6rem; }
    .coffret-teaser p { color: rgba(255,255,255,0.94); margin-bottom: 14px; }
    .coffret-teaser ul.bullets li {
      border-bottom-color: rgba(255,255,255,0.14);
      color: rgba(255,255,255,0.94);
    }
    .coffret-teaser ul.bullets li::before { color: #B8946A; }
    .coffret-teaser .coffret-note {
      margin-top: 14px; font-style: italic; opacity: 0.94; font-size: 0.98rem;
    }
    @media (max-width: 640px) {
      .coffret-teaser { padding: 30px 22px; }
      .coffret-teaser h2 { font-size: 1.35rem; }
    }
  
