/* =========================================================

   BLOCK — Nos services

   - TOP toujours "clair" (texte noir, pas de fond sombre)

   - Mode clair/sombre = uniquement sur la ZONE CARDS + cards

   - En sombre : fond noir pleine largeur + texte des cards #fff

   - En clair : fond transparent + cards gris clair + texte noir

   - Pas de bord sur les cards

========================================================= */



.nos-services{

  width: 100%;

}



/* =========================================================

   THEME (CARDS ZONE + CARDS)

========================================================= */



.nos-services.is-theme-dark{

  --ns-zone-bg: var(--color-noir);     /* fond pleine largeur sous les cards */

  --ns-card-bg: var( --color-gris);     /* fond card */

  --ns-card-text: #ffffff;   /* ✅ texte cards en blanc */

  --ns-card-hover: var(--color-noir);  /* fond card au hover */

}



.nos-services.is-theme-light{

  --ns-zone-bg: transparent; /* fond sous les cards en clair */

  --ns-card-bg: var(--color-blanc);

  --ns-card-text: var(--color-noir);

  --ns-card-hover: var(--color-blanc-fonce);

}



/* =========================================================

   CONTAINER

========================================================= */



.nos-services__container{

  max-width: var(--layout-wide-size);

  margin: 0 auto;

  padding: 0 20px;

}



/* =========================================================

   TOP (TOUJOURS CLAIR)

========================================================= */



.nos-services__top{

  padding: 30px 0 18px;

  background: transparent;

}



.nos-services__topGrid{

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 22px;

}



.nos-services__intro{

  max-width: 95ch;

}



.nos-services__title{

  margin: 0 0 10px;

  color: var(--color-noir);

  font-size: var(--font-size-xxl);

  font-weight: 500;

  line-height: 1.1;

}



.nos-services__text{

  color: var(--color-noir);

  font-size: var(--font-size-s);

  font-weight: 400;

  line-height: 1.45;

}



.nos-services__actions{

  display: flex;

  flex-direction: column;

  align-items: flex-end;

  gap: 10px;

  flex-shrink: 0;

}



/* lien texte + flèche accent */

.nos-services__link{

  display: inline-flex;

  align-items: center;

  gap: 8px;



  color: var(--color-noir);

  font-size: var(--font-size-s);

  font-weight: 500;

  text-decoration: none;

}



.nos-services__linkArrow{

  color: var(--page-accent);

  font-size: 1.05em;

  line-height: 1;

}



.nos-services__link:hover .nos-services__linkLabel{

  text-decoration: underline;

  text-decoration-thickness: 1px;

  text-underline-offset: 3px;

}



/* =========================================================

   CARDS ZONE (fond dépend du mode)

========================================================= */



.nos-services__cards{

  padding: 30px 0 30px;

  background: var(--ns-zone-bg);

}



/* =========================================================

   GRID

========================================================= */



.nos-services__grid{

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 18px;

}



/* =========================================================

   CARD

========================================================= */



.ns-card{

  position: relative;

  display: flex;

  align-items: stretch;

  justify-content: space-between;

  gap: 16px;



  min-height: 140px;



  background: var(--ns-card-bg);

  color: var(--ns-card-text);

  text-decoration: none;



  border: none; /* ✅ suppression bord */



  overflow: hidden;

  transition: transform .25s ease, background-color .35s ease, box-shadow .25s ease;

}



.ns-card:hover{

  background: var(--ns-card-hover);

  transform: translateY(-3px);

  box-shadow: 0 10px 26px rgba(0,0,0,.18);

}



.ns-card:focus-visible{

  outline: 2px solid var(--page-accent);

  outline-offset: 3px;

}



/* contenu */

.ns-card__content{

  padding: 16px;

  display: flex;

  align-items: flex-start;

  flex: 1 1 auto;

}



.ns-card__title{

  margin: 0;

  font-size: var(--font-size-l);

  font-weight: 500;

  line-height: 1.15;

  max-width: 22ch;



  color: currentColor; /* garantit l'héritage du blanc/noir selon mode */



  display: -webkit-box;

  -webkit-box-orient: vertical;

  -webkit-line-clamp: 2;

  overflow: hidden;

}



/* media à droite (demi-lune) */

.ns-card__media{

  width: 130px;

  min-width: 110px;



  /* la card est overflow hidden, on peut déborder */

  height: calc(100% + 70px);

  margin-top: -35px;



  display: flex;

  align-items: stretch;

  justify-content: stretch;



  overflow: hidden;

  border-radius: 999px 0 0 999px;

}



.ns-card__media img{

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

  transition: transform .35s ease;

}



.ns-card:hover .ns-card__media img{

  transform: scale(1.05);

}



/* empêcher toute variation de couleur du titre au hover */

.ns-card,

.ns-card:hover,

.ns-card:focus,

.ns-card:active{

  color: var(--ns-card-text);

}



.ns-card__title,

.ns-card:hover .ns-card__title,

.ns-card:focus .ns-card__title,

.ns-card:active .ns-card__title{

  color: var(--ns-card-text)!important;

}





/* =========================================================

   RESPONSIVE

========================================================= */



@media (max-width: 980px){

  .nos-services__grid{

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }



  .nos-services__topGrid{

    flex-direction: column;

    align-items: flex-start;

  }



  .nos-services__actions{

    align-items: flex-start;

  }

}



@media (max-width: 680px){

  .nos-services__grid{

    grid-template-columns: 1fr;

  }



  .ns-card{

    min-height: 120px;

  }



  .ns-card__media{

    width: 110px;

    min-width: 110px;

    height: calc(100% + 60px);

    margin-top: -30px;

  }

}