/**
 * PREVALA — Styles spécifiques aux pages d accueil et template overrides.
 *
 * Composants ad-hoc (hero CTA, features grid) en attendant que ces patterns
 * soient promus en SDC dedies si la frequence d utilisation le justifie.
 */

  /* ===================================================================
   * Home — Hero CTA group
   * ================================================================= */

  .previensmoi-hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--previensmoi-space-4);
    margin-top: var(--previensmoi-space-6);
  }

  /* ===================================================================
   * Home — Features grid (3 colonnes desktop, 1 col mobile)
   * ================================================================= */

  .previensmoi-features {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--previensmoi-space-8);
  }

  .previensmoi-feature {
    padding: var(--previensmoi-space-6);
    background-color: var(--previensmoi-color-paper-0);
    border-radius: var(--previensmoi-radius-xl);
    box-shadow: var(--previensmoi-shadow-sm);
  }

  .previensmoi-feature h3 {
    font-family: var(--previensmoi-font-title);
    font-size: var(--previensmoi-fontsize-xl);
    color: var(--previensmoi-color-ink-800);
    margin: 0 0 var(--previensmoi-space-3);
  }

  .previensmoi-feature p {
    margin: 0;
    color: var(--previensmoi-color-ink-600);
    font-size: var(--previensmoi-fontsize-base);
    line-height: var(--previensmoi-lineheight-normal);
  }

  @media (min-width: 768px) {
    .previensmoi-features {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  /* ===================================================================
   * Fiche atelier (node--activite--full)
   *
   * Layout 2 colonnes : description+meta (main) + encart QR latéral
   * (aside). Stack en mobile (< 768px), cote-a-cote au-dela.
   *
   * Pas de classes Tailwind dans le Twig (regle absolue 6 du CLAUDE.md
   * du theme). Toute classe layout vit ICI.
   * ================================================================= */

  .previensmoi-fiche-activite {
    display: block;
  }

  .previensmoi-fiche-activite__hero-media {
    margin-top: var(--previensmoi-space-6);
    border-radius: var(--previensmoi-radius-xl);
    overflow: hidden;
  }

  .previensmoi-fiche-activite__hero-media img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 16 / 9;
  }

  .previensmoi-fiche-activite__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--previensmoi-space-8);
  }

  @media (min-width: 768px) {
    .previensmoi-fiche-activite__layout {
      grid-template-columns: 2fr 1fr;
      align-items: start;
    }
  }

  .previensmoi-fiche-activite__main {
    min-width: 0; /* evite l overflow de longues meta */
  }

  .previensmoi-fiche-activite__aside {
    display: flex;
    justify-content: center;
    align-self: start;
  }

  .previensmoi-fiche-activite__description {
    margin-bottom: var(--previensmoi-space-6);
    font-size: var(--previensmoi-fontsize-lg);
    line-height: var(--previensmoi-lineheight-relaxed);
    color: var(--previensmoi-color-ink-700);
  }

  .previensmoi-fiche-activite__cta-stack {
    display: flex;
    flex-wrap: wrap;
    gap: var(--previensmoi-space-4);
    margin-top: var(--previensmoi-space-4);
  }