/**
 * SDC Header — styles scoped.
 *
 * Layout flex sur tablet+, stack mobile avec nav-burger toggle CSS-only.
 * Skip-link RGAA 12.10 herite du style global (cf. css/base.css).
 */

  /* ===================================================================
   * HEADER container
   * ================================================================= */

  .previensmoi-header {
    position: sticky;
    top: 0;
    z-index: var(--previensmoi-z-sticky);
    background-color: var(--previensmoi-color-paper-0);
    border-bottom: 1px solid var(--previensmoi-color-paper-200);
    box-shadow: var(--previensmoi-shadow-sm);
  }

  .previensmoi-header__container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--previensmoi-space-4);
    max-width: 1280px;
    margin-inline: auto;
    padding: var(--previensmoi-space-3) var(--previensmoi-space-4);
  }

  /* ===================================================================
   * BRAND — logo + nom + baseline
   * ================================================================= */

  .previensmoi-header__brand {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--previensmoi-color-ink-800);
    line-height: 1;
  }

  .previensmoi-header__brand-name {
    font-family: var(--previensmoi-font-title);
    font-size: var(--previensmoi-fontsize-2xl);
    font-weight: var(--previensmoi-fontweight-bold);
    letter-spacing: -0.02em;
  }

  .previensmoi-header__brand-baseline {
    margin-top: var(--previensmoi-space-1);
    font-size: var(--previensmoi-fontsize-xs);
    color: var(--previensmoi-color-ink-500);
    font-weight: var(--previensmoi-fontweight-medium);
  }

  /* ===================================================================
   * NAV TOGGLE (mobile)
   * ================================================================= */

  .previensmoi-header__nav-toggle-checkbox {
    /* Hidden mais on garde la fonctionnalite via le :checked */
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  .previensmoi-header__nav-toggle {
    margin-left: auto;
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: var(--previensmoi-radius-md);
    color: var(--previensmoi-color-ink-700);
  }

  .previensmoi-header__nav-toggle:hover {
    background-color: var(--previensmoi-color-paper-100);
  }

  .previensmoi-header__nav-toggle:focus-within {
    outline: var(--previensmoi-focus-ring-width) solid var(--previensmoi-focus-ring-color);
    outline-offset: var(--previensmoi-focus-ring-offset);
  }

  .previensmoi-header__nav-toggle-icon {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 22px;
  }

  .previensmoi-header__nav-toggle-icon span {
    display: block;
    height: 2px;
    background-color: currentColor;
    border-radius: 2px;
  }

  /* ===================================================================
   * NAV primary
   * ================================================================= */

  .previensmoi-header__nav {
    flex-basis: 100%;
    order: 3;
    display: none;
  }

  .previensmoi-header__nav-toggle-checkbox:checked ~ .previensmoi-header__nav {
    display: block;
  }

  .previensmoi-header__nav-list {
    list-style: none;
    margin: 0;
    padding: var(--previensmoi-space-2) 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--previensmoi-space-1);
  }

  .previensmoi-header__nav-link {
    display: flex;
    align-items: center;
    gap: var(--previensmoi-space-2);
    padding: var(--previensmoi-space-3) var(--previensmoi-space-4);
    border-radius: var(--previensmoi-radius-md);
    text-decoration: none;
    color: var(--previensmoi-color-ink-700);
    font-weight: var(--previensmoi-fontweight-medium);
    min-height: 2.75rem;
  }

  .previensmoi-header__nav-link:hover {
    background-color: var(--previensmoi-color-paper-100);
    color: var(--previensmoi-color-ink-800);
  }

  .previensmoi-header__nav-link--active {
    color: var(--previensmoi-color-primary-700);
    background-color: var(--previensmoi-color-primary-50);
  }

  .previensmoi-header__nav-icon {
    display: inline-flex;
    line-height: 0;
  }

  .previensmoi-header__nav-icon svg {
    width: 1.125em;
    height: 1.125em;
  }

  /* ===================================================================
   * USER slot
   * ================================================================= */

  .previensmoi-header__user {
    margin-left: auto;
  }

  /* ===================================================================
   * RESPONSIVE — tablet+ : nav horizontale + toggle cache
   * ================================================================= */

  @media (min-width: 768px) {
    .previensmoi-header__container {
      flex-wrap: nowrap;
      padding: var(--previensmoi-space-3) var(--previensmoi-space-8);
    }

    .previensmoi-header__nav-toggle {
      display: none;
    }

    .previensmoi-header__nav {
      display: block;
      flex-basis: auto;
      order: 0;
      flex-grow: 1;
      margin-inline: var(--previensmoi-space-6);
    }

    .previensmoi-header__nav-list {
      flex-direction: row;
      padding: 0;
      gap: var(--previensmoi-space-1);
    }

    .previensmoi-header__nav-link {
      padding: var(--previensmoi-space-2) var(--previensmoi-space-3);
    }
  }