/* Boutique Design : le tableau de comparaison de produits.

   Le nombre de colonnes est pose par le serveur sur l'element lui-meme, car il
   depend du shortcode. */
.dilo-cmp {
  --dilo-cmp-cols: 3;
  --dilo-cmp-intitule: 150px;

  width: 100%;
  color: var(--dilo-primaire);
  font-family: inherit;
}

.dilo-cmp__grille {
  display: grid;
  grid-template-columns: var(--dilo-cmp-intitule) repeat(var(--dilo-cmp-cols), minmax(0, 1fr));
  align-items: stretch;
}

.dilo-cmp__cellule {
  padding: 14px 16px;
  border-bottom: 1px solid var(--dilo-trait);
  min-width: 0;
}

.dilo-cmp__tete {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  text-align: center;
  padding-bottom: 20px;
}

.dilo-cmp__coin {
  border-bottom: 1px solid var(--dilo-trait);
}

.dilo-cmp__select {
  width: 100%;
  max-width: 260px;
  padding: 9px 34px 9px 12px;
  font: inherit;
  font-size: 14px;
  color: var(--dilo-primaire);
  background-color: var(--dilo-doux-2);
  /* Gris neutre plutot qu'une couleur de la palette : une image de fond ne peut
     pas lire une variable CSS, et ce gris reste lisible sur toutes les teintes. */
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666B7A' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px 16px;
  border: 1px solid var(--dilo-trait);
  border-radius: 999px;
  appearance: none;
  cursor: pointer;
}

.dilo-cmp__select:focus-visible {
  outline: 2px solid var(--dilo-accent);
  outline-offset: 2px;
}

.dilo-cmp__media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 190px;
  /* Garde-fou : plusieurs feuilles du site imposent height:auto aux images
     (WooCommerce, Elementor, le reset du theme). Si l'une d'elles l'emporte,
     l'image debordait de son cadre et venait recouvrir le prix et le bouton.
     Ici, meme dans ce cas, elle ne peut plus sortir. */
  overflow: hidden;
}

/* Tailles forcees pour que l'image s'adapte au cadre au lieu d'etre coupee. */
.dilo-cmp .dilo-cmp__media img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain;
  object-position: center;
}

.dilo-cmp__prix {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--dilo-accent);
}

.dilo-cmp__lien {
  display: inline-block;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 500;
  color: #FFFFFF;
  text-decoration: none;
  background: var(--dilo-accent);
  border: 1px solid var(--dilo-accent);
  border-radius: 999px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Au survol, le bouton fonce au lieu de devenir transparent : pose sur une
   image, un fond transparent rendait le libelle illisible. */
.dilo-cmp__lien:hover,
.dilo-cmp__lien:focus-visible {
  color: #FFFFFF;
  background: var(--dilo-primaire);
  border-color: var(--dilo-primaire);
}

.dilo-cmp__intitule {
  font-size: 13px;
  font-weight: 600;
  color: var(--dilo-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  background: var(--dilo-doux-2);
  display: flex;
  align-items: center;
}

.dilo-cmp__valeur {
  font-size: 15px;
  line-height: 1.45;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dilo-cmp__valeur--vide {
  color: var(--dilo-muted);
}

.dilo-cmp__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Tablette : on reste a 3 colonnes mais plus compactes */
@media (max-width: 1024px) {
  .dilo-cmp {
    --dilo-cmp-intitule: 120px;
  }
  .dilo-cmp__cellule {
    padding: 12px 10px;
  }
  .dilo-cmp__media {
    height: 150px;
  }
  .dilo-cmp__valeur {
    font-size: 14px;
  }
}

/* Mobile : 2 modeles, le libelle passe en pleine largeur au-dessus */
@media (max-width: 767px) {
  .dilo-cmp {
    --dilo-cmp-cols: 2;
  }
  .dilo-cmp__grille {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* Deux produits cote a cote au maximum : au-dela, les colonnes seraient trop
     etroites pour etre lues. Les suivantes restent accessibles en tournant le
     telephone, ou sur un plus grand ecran. */
  .dilo-cmp__coin,
  .dilo-cmp [data-col="2"],
  .dilo-cmp [data-col="3"] {
    display: none;
  }
  .dilo-cmp__intitule {
    grid-column: 1 / -1;
    padding: 8px 12px;
    font-size: 12px;
    border-bottom: 0;
  }
  .dilo-cmp__cellule {
    padding: 10px 8px;
  }
  .dilo-cmp__media {
    height: 130px;
  }
  .dilo-cmp__valeur {
    font-size: 13px;
  }
  .dilo-cmp__select {
    font-size: 13px;
    padding: 8px 30px 8px 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dilo-cmp__lien {
    transition: none;
  }
}