/* ========================================================= */
/* CLYCO - INTERACTIONS DESKTOP                              */
/* ========================================================= */

/*
  Effets uniquement sur les appareils
  qui possèdent une vraie souris.
*/

@media (hover: hover) and (pointer: fine) {

  /* CARTES ACCUEIL */

  .clyco-service-card {
    transition:
      transform 0.25s ease,
      box-shadow 0.25s ease;
  }

  .clyco-service-card:hover {
    transform: translateY(-6px);

    box-shadow:
      0 18px 40px rgba(0, 0, 0, 0.09);

    position: relative;
    z-index: 2;
  }


  /* PROFESSIONNELS */

  .pro-solution-card {
    transition:
      transform 0.25s ease,
      box-shadow 0.25s ease;
  }

  .pro-solution-card:hover {
    transform: translateY(-6px);

    box-shadow:
      0 18px 40px rgba(0, 0, 0, 0.09);

    position: relative;
    z-index: 2;
  }


  /* PARTICULIERS */

  .private-card {
    transition:
      transform 0.25s ease,
      box-shadow 0.25s ease;
  }

  .private-card:hover {
    transform: translateY(-6px);

    box-shadow:
      0 18px 40px rgba(0, 0, 0, 0.09);

    position: relative;
    z-index: 2;
  }


  /* CONTACT */

  .contact-need-card,
  .contact-big-card {
    transition:
      transform 0.25s ease,
      box-shadow 0.25s ease;
  }

  .contact-need-card:hover,
  .contact-big-card:hover {
    transform: translateY(-6px);

    box-shadow:
      0 18px 40px rgba(0, 0, 0, 0.09);

    position: relative;
    z-index: 2;
  }


  /* BLOCS MÉTHODE / POURQUOI CLYCO */

  .clyco-why-grid article,
  .pro-method-grid article,
  .private-method-grid article {
    transition:
      transform 0.22s ease,
      border-color 0.22s ease;
  }

  .clyco-why-grid article:hover,
  .pro-method-grid article:hover,
  .private-method-grid article:hover {
    transform: translateY(-4px);

    border-color: #b51d27;
  }


  /* LIENS FLÉCHÉS */

  .service-link span,
  .contact-need-card > a span {
    transition: transform 0.2s ease;
  }

  .service-link:hover span,
  .contact-need-card > a:hover span {
    transform: translateX(5px);
  }

}

/* ========================================================= */
/* CARTES PROFESSIONNELS - SURVOL ROUGE                      */
/* ========================================================= */

@media (hover: hover) and (pointer: fine) {

  .pro-solution-card:hover {
    background: #b51d27;
  }

  .pro-solution-card:hover h3,
  .pro-solution-card:hover p,
  .pro-solution-card:hover .pro-solution-number {
    color: #ffffff;
  }

}


/* ========================================================= */
/* CARTES ACCUEIL - SURVOL ROUGE                             */
/* ========================================================= */

@media (hover: hover) and (pointer: fine) {

  .clyco-service-card:hover {
    background: #b51d27;
  }

  .clyco-service-card:hover h3 {
    color: #ffffff;
  }

  .clyco-service-card:hover p {
    color: rgba(255, 255, 255, 0.82);
  }

  .clyco-service-card:hover .service-number {
    color: rgba(255, 255, 255, 0.6);
  }

  .clyco-service-card:hover .service-tag {
    color: rgba(255, 255, 255, 0.7);
  }

  .clyco-service-card:hover .service-link {
    color: #ffffff;
  }

}

/* ========================================================= */
/* CARTES CONTACT - SURVOL ROUGE                             */
/* ========================================================= */

@media (hover: hover) and (pointer: fine) {

  .contact-need-card {
    transition:
      background 0.25s ease,
      transform 0.25s ease,
      box-shadow 0.25s ease;
  }

  .contact-need-card:hover {
    background: #b51d27;
  }

  .contact-need-card:hover .contact-card-number,
  .contact-need-card:hover .contact-card-label,
  .contact-need-card:hover h3,
  .contact-need-card:hover p,
  .contact-need-card:hover a,
  .contact-need-card:hover a:visited {
    color: #ffffff;
  }

}

/* =========================================================
   CARTES PARTICULIERS CLIQUABLES
   ========================================================= */

.private-card-link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.private-card-link:visited {
  color: inherit;
}

.private-card-cta {
  display: inline-block;
  margin-top: 24px;
  color: #b51d27;
  font-size: 14px;
  font-weight: 700;
  transition: color 0.25s ease;
}

@media (hover: hover) and (pointer: fine) {

  .private-card-link:hover .private-card-cta {
    color: #ffffff;
  }

}

/* =========================================================
   CARTES ACCUEIL CLIQUABLES
   ========================================================= */

.clyco-service-card-link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.clyco-service-card-link:visited {
  color: inherit;
}