/**
 * Bloc Solutions Cards — styles de base (génériques)
 * Les spécificités visuelles d'un site donné se surchargent dans le thème.
 */

.solutions-cards {
  --solutions-cards-columns: 4;
  --solutions-card-radius: 12px;
  --solutions-card-icon-bg: var(--wp--preset--color--accent, #00a88c);
  --solutions-card-ratio: 342 / 554;
  width: 100%;
}

.solutions-cards__heading {
  color: var(--heading-color, var(--wp--preset--color--primary, #003764));
  margin: 0 0 1.5rem;
}

/* En-tête optionnel : titre à gauche, bouton à droite (même ligne). */
.solutions-cards__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 24px;
  margin-bottom: 1.5rem;
}

/* Le titre ne porte plus la marge basse quand il est dans l'en-tête flex. */
.solutions-cards__header .solutions-cards__heading {
  margin-bottom: 0;
}

/* Bouton d'en-tête : style minimal générique (le thème applique le look final). */
.solutions-cards__header-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.solutions-cards__heading--left {
  text-align: left;
}

.solutions-cards__heading--center {
  text-align: center;
}

.solutions-cards__heading--right {
  text-align: right;
}

.solutions-cards__container {
  position: relative;
}

/* Mobile : le carousel sort de la gouttiere de page (16px) pour que les
   cartes atteignent le bord de l'ecran. On annule exactement ce padding via
   une marge negative (plus fiable que 50vw, qui inclut la scrollbar et cree
   un debordement horizontal). L'inset de 16px en debut/fin est gere par
   slidesOffsetBefore/After (script.js), pas par un padding ici. */
@media (max-width: 767.98px) {
  .solutions-cards__container {
    margin-inline: -16px;
  }
}

/* Swiper : la grille desktop est gérée par slidesPerView. */
.solutions-cards .swiper {
  width: 100%;
}

/* Largeurs de slide définies dès le 1er rendu (avant l'init Swiper) pour éviter
   le FOUC : sans cela les slides font 100% et les cartes portrait s'affichent
   énormes une fraction de seconde avant que Swiper ne les redimensionne.
   Swiper applique ensuite ses largeurs inline (priorité) sans saut visible. */
.solutions-cards .swiper-wrapper {
  display: flex;
}

/* Espacement inter-cartes AVANT l'init (Swiper ne pose ses marges qu'après) :
   évite le décalage horizontal au montage. Retiré une fois initialisé, Swiper
   gère alors l'espacement via spaceBetween. Le calc de largeur desktop tient
   déjà compte des 16px de gouttière. */
.solutions-cards .swiper:not(.swiper-initialized) .swiper-wrapper {
  gap: 16px;
}

.solutions-cards .swiper-slide {
  height: auto;
  flex-shrink: 0;
  width: 80%;
}

@media (min-width: 768px) {
  .solutions-cards .swiper-slide {
    width: 44%;
  }
}

@media (min-width: 1024px) {
  .solutions-cards .swiper-slide {
    width: calc(
      (100% - (var(--solutions-cards-columns) - 1) * 16px) /
        var(--solutions-cards-columns)
    );
  }

  /* Grille statique (cartes ≤ colonnes, pas de slider) : cartes centrées.
     Réservé au desktop hors mode slider — en slider Swiper translate le
     wrapper, en mobile/tablette le carousel est actif. Le margin-right
     inline (spaceBetween) du dernier slide est neutralisé pour un centrage
     exact ; sans effet de bord ici car le wrapper ne translate jamais. */
  .solutions-cards:not(.solutions-cards--has-slider) .swiper-wrapper {
    justify-content: center;
  }

  .solutions-cards:not(.solutions-cards--has-slider) .swiper-slide:last-child {
    margin-right: 0 !important;
  }
}

/* ---------- Carte ---------- */
.solutions-card {
  position: relative;
  height: 100%;
}

.solutions-card__link {
  position: relative;
  display: block;
  height: 100%;
  border-radius: var(--solutions-card-radius);
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  aspect-ratio: var(--solutions-card-ratio);
}

.solutions-card__media,
.solutions-card__bg,
.solutions-card__overlay {
  position: absolute;
  inset: 0;
  display: block;
}

.solutions-card__bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.solutions-card__link:hover .solutions-card__bg,
.solutions-card__link:focus-visible .solutions-card__bg {
  transform: scale(1.05);
}

.solutions-card__overlay {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.15) 0%,
    rgba(0, 0, 0, 0.55) 60%,
    rgba(0, 0, 0, 0.8) 100%
  );
}

.solutions-card__icon {
  position: absolute;
  top: 40px;
  left: 40px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 4px;
  background: var(--solutions-card-icon-bg);
}

.solutions-card__icon img {
  width: 28px;
  height: auto;
  max-height: 28px;
  object-fit: contain;
}

.solutions-card__content {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 40px;
}

.solutions-card__title {
  margin: 0;
  color: #fff;
}

.solutions-card__excerpt {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.9);
}

.solutions-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin-top: 8px;
  padding: 8px 16px;
  border-radius: 8px;
  background: #fff;
  /* Couleur réglable via l'onglet Styles de texte (custom property posée sur
     la racine du bloc) ; le hover ci-dessous garde la main. */
  color: var(
    --solutions-card-cta-color,
    var(--wp--preset--color--primary, #003764)
  );
  font-size: 0.875rem;
  font-weight: 600;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.solutions-card__link:hover .solutions-card__cta,
.solutions-card__link:focus-visible .solutions-card__cta {
  background: var(--solutions-card-icon-bg);
  color: #fff;
}

.solutions-card__cta-icon {
  flex: 0 0 auto;
}

/* ---------- Flèches de défilement (desktop, mode slider) ---------- */
/* Petite flèche dans un carré, sur les bords des cartes. Affichées uniquement
   en desktop quand le bloc est en mode slider (cards > colonnes). */
.solutions-cards__nav {
  display: none;
  position: absolute;
  top: 50%;
  z-index: 3;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--wp--preset--color--white, #fff);
  border-radius: 8px;
  background: transparent;
  color: var(--wp--preset--color--white, #fff);
  cursor: pointer;
  transform: translateY(-50%);
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    opacity 0.2s ease;
}

.solutions-cards__nav:hover {
  background: var(--wp--preset--color--white, #fff);
  color: var(--wp--preset--color--secondary, #00a88c);
}

.solutions-cards__nav--prev {
  left: 12px;
}

.solutions-cards__nav--prev svg {
  transform: rotate(180deg);
}

.solutions-cards__nav--next {
  right: 12px;
}

/* Désactivée (début / fin de liste) : masquée. */
.solutions-cards__nav.swiper-button-disabled {
  opacity: 0;
  pointer-events: none;
}

/* Visibles seulement en desktop et en mode slider. */
@media (min-width: 1024px) {
  .solutions-cards--has-slider .solutions-cards__nav {
    display: inline-flex;
  }
}

/* ============================================================
   Variante "Clair" : image arrondie + titre/description dessous
   (sans overlay, sans icône, sans bouton). Texte sur fond
   transparent ; couleurs issues de la palette du thème.
   ============================================================ */
.solutions-cards--style-light {
  --solutions-card-radius: 16px;
  --solutions-card-ratio: 286 / 345;
}

/* Le lien devient une colonne en flux normal (image puis texte). */
.solutions-cards--style-light .solutions-card__link {
  display: flex;
  flex-direction: column;
  height: auto;
  aspect-ratio: auto;
  border-radius: 0;
  overflow: visible;
  color: inherit;
}

/* L'image redevient un bloc en flux, arrondi, avec son propre ratio. */
.solutions-cards--style-light .solutions-card__media {
  position: relative;
  inset: auto;
  border-radius: var(--solutions-card-radius);
  overflow: hidden;
  aspect-ratio: var(--solutions-card-ratio);
}

/* Éléments non utilisés par cette variante. */
.solutions-cards--style-light .solutions-card__overlay,
.solutions-cards--style-light .solutions-card__icon,
.solutions-cards--style-light .solutions-card__cta {
  display: none;
}

/* Le contenu passe sous l'image, aligné à gauche, texte navy. */
.solutions-cards--style-light .solutions-card__content {
  position: static;
  inset: auto;
  padding: 16px 0 0;
  gap: 8px;
}

.solutions-cards--style-light .solutions-card__title {
  color: var(--wp--preset--color--primary, #003764);
  font-weight: 700;
}

.solutions-cards--style-light .solutions-card__excerpt {
  font-size: 1rem;
  color: var(--wp--preset--color--primary, #003764);
}

.solutions-cards--style-light .solutions-cards__nav {
  background-color: var(--wp--preset--color--white, #fff);
  color: var(--wp--preset--color--secondary, #00a88c);
}

.solutions-cards--style-light .solutions-cards__nav:hover {
  background-color: var(--wp--preset--color--secondary, #00a88c);
  color: var(--wp--preset--color--white, #fff);
}

/* Léger feedback au survol : l'image zoome (déjà géré), le titre vire teal. */
.solutions-cards--style-light
  .solutions-card__link:hover
  .solutions-card__title,
.solutions-cards--style-light
  .solutions-card__link:focus-visible
  .solutions-card__title {
  color: var(--wp--preset--color--secondary, #00a88c);
}

/* Réglages de style optionnels : quand une couleur inline est posée sur le
   titre (onglet Styles de texte), le feedback teal au survol doit reprendre
   la main sur le style inline — d'où le !important, scopé par [style*=…]
   pour rester sans effet quand aucun réglage n'est défini. */
.solutions-cards--style-light
  .solutions-card__link:hover
  .solutions-card__title[style*="color"],
.solutions-cards--style-light
  .solutions-card__link:focus-visible
  .solutions-card__title[style*="color"] {
  color: var(--wp--preset--color--secondary, #00a88c) !important;
}

/* Même principe pour le libellé du bouton d'en-tête : le CTA du thème
   s'inverse au survol (blanc → teal), la couleur inline du libellé est
   relâchée pour laisser l'inversion s'appliquer. */
.solutions-cards__header-cta:hover > span[style*="color"],
.solutions-cards__header-cta:focus-visible > span[style*="color"] {
  color: inherit !important;
}

/* ---------- Placeholder front ---------- */
.solutions-cards-placeholder {
  padding: 24px;
  border: 1px dashed var(--wp--preset--color--neutral, #7f7e7e);
  border-radius: 8px;
  text-align: center;
  color: var(--wp--preset--color--neutral, #7f7e7e);
}