/**
 * SDC Section — styles scoped.
 *
 * Architecture BEM. 3 variants visuels (default/warm/hero) × 4 containers
 * (narrow/normal/wide/full). Pattern de wrapper que toutes les autres
 * sections du site consomment.
 */

  /* ===================================================================
   * BASE
   * ================================================================= */

  .previensmoi-section {
    padding-block: var(--previensmoi-space-12);
    width: 100%;
  }

  .previensmoi-section__container {
    margin-inline: auto;
    padding-inline: var(--previensmoi-space-4);
    width: 100%;
  }

  .previensmoi-section__header {
    margin-bottom: var(--previensmoi-space-8);
  }

  .previensmoi-section__heading {
    font-family: var(--previensmoi-font-title);
    font-size: var(--previensmoi-fontsize-3xl);
    line-height: var(--previensmoi-lineheight-tight);
    color: var(--previensmoi-color-ink-800);
    margin: 0;
  }

  .previensmoi-section__intro {
    font-size: var(--previensmoi-fontsize-lg);
    line-height: var(--previensmoi-lineheight-relaxed);
    color: var(--previensmoi-color-ink-600);
    margin: var(--previensmoi-space-3) 0 0;
    max-width: 60ch; /* lecture confortable RGAA 10.5 */
  }

  .previensmoi-section__content {
    color: var(--previensmoi-color-ink-700);
  }

  .previensmoi-section__footer {
    margin-top: var(--previensmoi-space-8);
    padding-top: var(--previensmoi-space-6);
    border-top: 1px solid var(--previensmoi-color-paper-200);
  }

  /* ===================================================================
   * VARIANTS — default / warm / hero
   * ================================================================= */

  .previensmoi-section--default {
    background-color: var(--previensmoi-color-paper-50);
  }

  .previensmoi-section--warm {
    background-color: var(--previensmoi-color-paper-100);
  }

  .previensmoi-section--hero {
    background-color: var(--previensmoi-color-paper-200);
    padding-block: var(--previensmoi-space-16);
  }

  .previensmoi-section--hero .previensmoi-section__heading {
    font-size: var(--previensmoi-fontsize-5xl);
  }

  /* ===================================================================
   * CONTAINER — narrow / normal / wide / full
   * ================================================================= */

  .previensmoi-section--container-narrow .previensmoi-section__container {
    max-width: 640px;
  }

  .previensmoi-section--container-normal .previensmoi-section__container {
    max-width: 960px;
  }

  .previensmoi-section--container-wide .previensmoi-section__container {
    max-width: 1280px;
  }

  .previensmoi-section--container-full .previensmoi-section__container {
    max-width: none;
  }

  /* ===================================================================
   * UTILITES — sr-only (visually hidden, lu par les lecteurs d ecran)
   * Cf. https://www.tpgi.com/the-anatomy-of-visually-hidden/
   * ================================================================= */

  .previensmoi-section .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* ===================================================================
   * RESPONSIVE — padding plus grand sur tablet+
   * ================================================================= */

  @media (min-width: 768px) {
    .previensmoi-section__container {
      padding-inline: var(--previensmoi-space-8);
    }

    .previensmoi-section--hero {
      padding-block: var(--previensmoi-space-24);
    }
  }