.cosamirai-partners {
  padding-block: var(--spacing-big-section-block);
  background-color: var(--c-light-stone);
  color: var(--c-oak-text);
  /* Desktop : centrage vertical du contenu (utile pendant le pin) */
  min-height: 100vh;
  display: flex;
  align-items: center;

  .inner {
    width: 100%;
    padding-inline: 10% 0.625rem;

    .title {
      margin-bottom: 3.75rem;
      padding-left: 16.875rem;
      font-family: "PP Fragment Glare", serif;
      font-size: var(--fs-L-H2-S);
      font-weight: 300;
      line-height: 1.2;
    }

    .title:has(+ .subtitle) {
      margin-bottom: 1rem;
    }

    .subtitle {
      margin: 0 0 3.75rem;
      padding-left: 16.875rem;
      font-family: "PP Fragment Sans", sans-serif;
      font-size: var(--fs-L-body-Regular);
      font-weight: 400;
      line-height: 1.5;
      color: inherit;
    }

    /* Desktop : nav de catégories (gauche) + panels empilés (droite, actif visible) */
    .content {
      display: grid;
      grid-template-columns: 15rem 1fr;
      align-items: start;
      gap: 1.875rem;
    }

    .category-nav {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      /* "les uns en dessous des autres sans espaces" */
    }

    .category-nav__item {
      margin: 0.2rem 0;
      font-size: var(--fs-name-title);
      font-weight: 300;
      line-height: 1.6;
      cursor: pointer;
      opacity: 0.3;
      transition: opacity 0.3s ease;
    }

    .category-nav__item:hover {
      opacity: 0.6;
    }

    .category-nav__item.active {
      opacity: 1;
    }

    .groups {
      position: relative;
    }

    .group-wrapper {
      position: absolute;
      inset: 0;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      /* visibility bascule après le fondu pour garder le fade-out visible */
      transition: opacity 0.4s ease, visibility 0s linear 0.4s;

      &.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: opacity 0.4s ease, visibility 0s;
      }

      .group_name {
        /* Desktop : le nom est affiché dans .category-nav */
        display: none;
      }

      .list {
        padding-left: 0;
        margin: 0;
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 0.85rem;
        
        
        
        

        .partner {
          margin: 0;

          .partner-name {
            margin-bottom: 0;
            font-family: "PP Fragment Glare", serif;
            font-size: calc(var(--fs-S-body-XL) * 0.85);
            font-weight: 300;
            line-height: 1.2;
            word-wrap: break-word;
            color: inherit;
            text-decoration: none;
            transition: opacity 0.3s ease;
          }

          a.partner-name::after {
            content: "";
            display: inline-block;
            vertical-align: super;
            margin-left: 0.25em;
            width: 0.4em;
            height: 0.4em;
            background-image: url("../../assets/images/arrow-right-dark.svg");
            background-repeat: no-repeat;
            background-size: contain;
            background-position: 100% 100%;
            transform: rotate(-45deg);
            transform-origin: center;
          }

          a.partner-name:hover {
            opacity: 0.6;
          }
        }
      }
    }
  }
}

@media (max-width: 1200px) {
  .cosamirai-partners {
    .inner {
      padding-inline: 5% 0.625rem;
    }
  }
}

@media (max-width: 900px) {
  .cosamirai-partners {
    min-height: 0;
    display: block;

    .inner {
      padding-inline: 1.5rem;
      padding-block: 2.5rem;

      .title {
        padding-left: 0;
        margin-bottom: 2.5rem;
      }

      .subtitle {
        padding-left: 0;
      }

      /* On revient à l'affichage actuel : catégories empilées (nom + partners) */
      .content {
        display: flex;
        flex-direction: column;
        gap: 2rem;
      }

      .category-nav {
        display: none;
      }

      .groups {
        display: contents;
      }

      /* 550–900px : 2 colonnes (nom | partners) */
      .group-wrapper {
        position: static;
        inset: auto;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        display: grid;
        grid-template-columns: 10rem 1fr;
        align-items: start;
        gap: 1.5rem;

        .group_name {
          display: block;
          margin: 0;
          padding: 0;
          font-size: var(--fs-name-title);
          font-weight: 400;
          line-height: 1.6;
        }

        .list {
          .partner {
            .partner-name {
              font-size: calc(var(--fs-L-body-XL) * 0.85);
              line-height: 1.4;
            }
          }
        }
      }
    }
  }
}

/* < 550px : une seule colonne (nom au-dessus des partners) */
@media (max-width: 550px) {
  .cosamirai-partners .inner .group-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;

      .list {
      .partner {
        .partner-name {
          font-size: calc(var(--fs-L-body-XL) * 0.6);
          line-height: 1.2;
        }
      }
    }
  }


  .cosamirai-partners {
        .inner {
            padding-inline: 0rem;
            padding-block: 1rem;
        }
  }
}

/* ==================================================================================
   BACKEND PREVIEW STYLES
   ================================================================================== */

#editor .editor-visual-editor section.cosamirai-partners.cosamirai-partners-preview {
  min-height: 0;
  display: block;

  .inner {
    .title {
      font-size: 2.5rem;
      padding-left: 0;
    }

    /* La preview backend reste empilée (pas de scroll-switch dans l'éditeur) */
    .content {
      display: flex;
      flex-direction: column;
      gap: 2rem;
    }

    .group-wrapper {
      position: static;
      inset: auto;
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      display: grid;
      grid-template-columns: 12rem 1fr;
      gap: 1.5rem;

      .group_name {
        display: block;
        font-size: 1.125rem;
      }

      .list {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;

        .partner {
          .partner-name {
            font-size: 1.25rem;
          }
        }
      }
    }
  }
}