/* =========================================================
   BLOCK — Nos plateformes
========================================================= */

.nos-plateformes{ width: 100%; }

/* =========================================================
   EXCEPTION — Mode clair: background transparent uniquement ici
========================================================= */

.nos-plateformes.is-theme-light{
  --theme-bg: transparent;
}

/* =========================================================
   CONTAINER
========================================================= */

.nos-plateformes__container{
  max-width: var(--layout-wide-size);
  margin: 0 auto;
  padding: 0 20px;
}
.nos-plateformes__container_100{
  max-width: 100%;
  padding: 0;
}

/* =========================================================
   TOP (même style que nos-modeles)
========================================================= */

.nos-plateformes__top{
  padding: 30px 0 22px;
}

.nos-plateformes__top .nos-plateformes__container{
  padding-right: 35%;
}

.nos-plateformes__kicker{
  text-transform: uppercase;
  color: var(--theme-text);
  font-size: var(--font-size-s, 15px);
  font-weight: 500;
  letter-spacing: .04em;
  margin-bottom: 8px;
}

.nos-plateformes__title{
  margin: 0 0 10px;
  color: var(--theme-text);
  font-size: var(--font-size-xxl, 40px);
  font-weight: 500;
  line-height: 1.1;
}

.nos-plateformes__intro{ max-width: 90ch; }

/* Sous-titre grand */
.nos-plateformes__subtitle p{
  margin-top: 16px;
  color: var(--theme-text);
  font-size: var(--font-size-l, 22px);
  font-weight: 500;
  line-height: 1.2;
  max-width: 70ch;
}

/* Accent si tu mets <strong>…</strong> dans l’ACF */
.nos-plateformes__subtitle p strong{
  color: var(--page-accent);
  font-weight: inherit;
}

/* =========================================================
   GRID ZONE
========================================================= */

.nos-plateformes__gridZone{
  background: var(--theme-bg);
  padding: 30px 0;
}

/* =========================================================
   GRID — FILET 1PX SANS DOUBLONS + RÈGLES EXACTES
   Résumé demandé :
   - 1ère ligne (1 & 2) : pas de border-top
   - dernière ligne : pas de border-bottom
   - blocs de gauche : pas de border-left
   - blocs de droite : pas de border-right

   ✅ Technique (sans doubles 2px) :
   On dessine UNIQUEMENT :
   - border-right sur la colonne gauche (séparateur central)
   - border-bottom sur toutes les lignes sauf la dernière
   => jamais deux bordures au même endroit.
========================================================= */

.np-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* item cliquable */
.np-item{
  display: flex;
  align-items: center;
  gap: 16px;

  padding: 18px 20px;
  min-height: 92px;

  text-decoration: none;
  color: inherit;
  background: transparent;

  /* base : aucune bordure */
  border: 0;

  /* ✅ horizontales (1px) : on utilise uniquement le bottom */
  border-bottom: 1px solid var(--color-blanc-fonce);

  /* ✅ verticales (1px) : séparateur central uniquement sur la colonne gauche */
  border-right: 1px solid var(--color-blanc-fonce);

  transition:
    background-color .35s ease,
    border-color .35s ease,
    transform .35s ease;
}

.np-item:focus-visible{
  outline: 2px solid var(--theme-on-bg);
  outline-offset: 4px;
}

/* ---------------------------------------------------------
   Colonnes
--------------------------------------------------------- */

/* blocs de droite => pas de border-right (extérieur droit) */
.np-item:nth-child(2n){
  border-right: 0;
}

/* blocs de gauche => pas de border-left (déjà 0 par défaut) */
/* (rien à faire, on ne dessine jamais border-left) */

/* ---------------------------------------------------------
   Lignes
--------------------------------------------------------- */

/* 1ère ligne => pas de border-top (déjà 0 par défaut) */
/* (rien à faire, on ne dessine jamais border-top) */

/* dernière ligne => pas de border-bottom
   - on enlève bottom sur les 2 derniers
   - puis on le remet sur l'avant-dernier si le total est impair
     (cas 5 items: on remet sur le #4)
*/
.np-item:nth-last-child(-n+2){
  border-bottom: 0;
}
.np-item:nth-last-child(2):nth-child(even){
  border-bottom: 1px solid var(--color-blanc-fonce);
}

/* ---------------------------------------------------------
   Hover (sans ajouter d’épaisseur)
--------------------------------------------------------- */

.np-item:hover{
  background: rgba(255,255,255,0.03);
  /* border-bottom-color: color-mix(in srgb, var(--color-blanc-fonce) 65%, var(--page-accent)); */
}

/* =========================================================
   IMAGE
========================================================= */

.np-item__img{
  width: 85px;
  height: 48px;
  border-radius: 999px;
  overflow: hidden;
  flex: 0 0 auto;
}

.np-item__img img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;

  transform: scale(1.02);
  transition: transform .45s ease;
}

.np-item:hover .np-item__img img{
  transform: scale(1.10);
}

/* =========================================================
   CONTENT
========================================================= */

.np-item__content{
  flex: 1 1 auto;
  min-width: 0;
}

.np-item__title{
  margin: 0;
  color: var(--theme-on-bg);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1.2;
}

.np-item__desc{
  margin-top: 4px;
  color: var(--theme-on-bg);
  opacity: .85;
  font-size: var(--font-size-s);
  line-height: 1.35;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* =========================================================
   ARROW + HOVER ANIM
========================================================= */

.np-item__arrow{
  border-radius: 999px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: var(--page-accent);
  flex: 0 0 auto;

  transform: rotate(0deg);
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
}

.np-item__arrow svg{
  display: block;
}

.np-item:hover .np-item__arrow{
  transform: rotate(45deg) translate3d(2px, -2px, 0);
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 980px){
  .np-item{ padding: 16px 16px; }
}

/* 1 colonne
   - pas de border-left/right
   - séparateurs horizontaux via border-bottom uniquement
   - dernier => pas de border-bottom
*/
@media (max-width: 720px){
  .nos-plateformes__top .nos-plateformes__container{
    padding-right: 0;
  }

  .nos-plateformes__container{
    padding: 0;
  }

  .np-grid{
    grid-template-columns: 1fr;
  }

  .np-item{
    min-height: 88px;
    border-right: 0;
    border-bottom: 1px solid var(--color-blanc-fonce);
  }

  .np-item:last-child{
    border-bottom: 0;
  }
}