/* =========================================================
   ELIAOLIVA 0.8.4 — CUSTOM CSS
   ========================================================= */


/* ---------------------------------------------------------
   PANIER — Code promo après les actions de commande
   --------------------------------------------------------- */

.cart-summary > .block-promo {
  margin-top: 14px;
  padding-top: 10px;
}

.cart-summary > .block-promo .promo-code-button {
  margin-bottom: 0;
  text-align: center;
}


/* ---------------------------------------------------------
   CATALOGUE PRODUITS
   Grille 3 colonnes sur ordinateur
   --------------------------------------------------------- */

.products.eliaoliva-products.row {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 30px !important;

  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* Les fiches produits doivent remplir leur colonne */

.products.eliaoliva-products.row > .product-miniature {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  flex: none !important;
}


/* Suppression des contraintes Bootstrap */

.products.eliaoliva-products.row > .col-xl-4,
.products.eliaoliva-products.row > .col-xs-6,
.products.eliaoliva-products.row > article {
  width: 100% !important;
  max-width: none !important;
  flex: none !important;
}


/* ---------------------------------------------------------
   TABLETTE — 2 colonnes
   --------------------------------------------------------- */

@media (max-width: 991px) {

  .products.eliaoliva-products.row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

}


/* ---------------------------------------------------------
   MOBILE — 1 colonne
   --------------------------------------------------------- */

@media (max-width: 575px) {

  .products.eliaoliva-products.row {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

}


/* ---------------------------------------------------------
   CATEGORIE — titre
   --------------------------------------------------------- */

.eliaoliva-category-header {
  text-align: center;
}

.eliaoliva-category-header h1 {
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 32px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  margin-bottom: 12px !important;
}


/* ---------------------------------------------------------
   ESPACEMENT ENTRE LES FICHES PRODUITS
   --------------------------------------------------------- */

.products.eliaoliva-products .product-miniature {
  box-sizing: border-box !important;
}


/* =========================================================
   FOOTER ELIAOLIVA
   ========================================================= */


/* ---------------------------------------------------------
   CONTENEUR PRINCIPAL
   --------------------------------------------------------- */

.eliaoliva-footer {
  margin-top: 72px !important;
  background: #f3f1f2 !important;
  border-top: 1px solid var(--elia-line) !important;
  color: var(--elia-ink) !important;
}


/* ---------------------------------------------------------
   ZONE PRINCIPALE DU FOOTER
   Marque + trois colonnes
   --------------------------------------------------------- */

.eliaoliva-footer-main {
  display: grid !important;

  /*
   * Première zone :
   * identité EliaOliva
   *
   * Deuxième zone :
   * les 3 colonnes du footer
   */
  grid-template-columns:
    minmax(280px, 1.05fr)
    minmax(0, 2.35fr) !important;

  gap: 55px !important;

  padding: 52px 0 38px !important;

  width: 100% !important;
  box-sizing: border-box !important;
}


/* ---------------------------------------------------------
   BLOC MARQUE
   --------------------------------------------------------- */

.eliaoliva-footer-brand {
  width: 100% !important;
  max-width: 360px !important;
  box-sizing: border-box !important;
}

.eliaoliva-footer-logo {
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 34px !important;
  line-height: 1 !important;
  color: #4e5257 !important;
  letter-spacing: .01em !important;
}

.eliaoliva-footer-logo span {
  display: block !important;
  margin-top: 6px !important;

  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 12px !important;
  letter-spacing: .2em !important;
  color: #77757b !important;
}

.eliaoliva-footer-tagline {
  margin: 18px 0 12px !important;

  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 18px !important;
  line-height: 1.45 !important;
  color: #4d5054 !important;
}

.eliaoliva-footer-copy {
  max-width: 330px !important;

  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: #707178 !important;
}


/* ---------------------------------------------------------
   COLONNES DU FOOTER
   IMPORTANT :
   le HTML contient 3 colonnes :
   Informations / Mon compte / Contact
   --------------------------------------------------------- */

.eliaoliva-footer-links {
  display: grid !important;

  grid-template-columns:
    minmax(0, 1.45fr)
    minmax(130px, .85fr)
    minmax(220px, 1.20fr) !important;

  gap: 42px !important;

  width: 100% !important;
  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  align-items: start !important;
  box-sizing: border-box !important;
}


/* ---------------------------------------------------------
   COLONNES
   --------------------------------------------------------- */

.eliaoliva-footer-column {
  width: 100% !important;
  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  box-sizing: border-box !important;
}


/* ---------------------------------------------------------
   TITRES DES COLONNES
   --------------------------------------------------------- */

.eliaoliva-footer-column h3 {
  margin: 0 0 14px !important;

  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;

  letter-spacing: .12em !important;
  color: #595b60 !important;

  white-space: nowrap !important;
}


/* ---------------------------------------------------------
   LISTES
   --------------------------------------------------------- */

.eliaoliva-footer-column ul {
  list-style: none !important;

  margin: 0 !important;
  padding: 0 !important;
}

.eliaoliva-footer-column li {
  margin: 0 0 7px !important;
  padding: 0 !important;

  line-height: 1.35 !important;
}


/* ---------------------------------------------------------
   LIENS
   --------------------------------------------------------- */

.eliaoliva-footer-column a {
  display: inline !important;

  max-width: 100% !important;

  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 13px !important;
  line-height: 1.4 !important;

  color: #66686f !important;
  text-decoration: none !important;

  /*
   * On ne coupe plus les mots artificiellement.
   */
  overflow-wrap: normal !important;
  word-break: normal !important;
}

.eliaoliva-footer-column a:hover {
  color: #4e5257 !important;
}


/* ---------------------------------------------------------
   CONTACT
   --------------------------------------------------------- */

.eliaoliva-footer-contact {
  width: 100% !important;
  min-width: 0 !important;
}

.eliaoliva-footer-contact .contact-rich,
.eliaoliva-footer-contact .block-contact {
  width: 100% !important;
  margin-bottom: 10px !important;
}

.eliaoliva-phone,
.eliaoliva-email {
  margin-top: 7px !important;
}


/*
 * Empêche le découpage mot par mot.
 */

.eliaoliva-footer-contact,
.eliaoliva-footer-contact p,
.eliaoliva-footer-contact li,
.eliaoliva-footer-contact a,
.eliaoliva-footer-contact address {
  overflow-wrap: normal !important;
  word-break: normal !important;
}


/* ---------------------------------------------------------
   BAS DU FOOTER
   --------------------------------------------------------- */

.eliaoliva-footer-bottom {
  display: flex !important;

  justify-content: space-between !important;
  align-items: center !important;

  gap: 20px !important;

  width: 100% !important;

  padding: 16px 0 20px !important;

  border-top: 1px solid var(--elia-line) !important;

  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 12px !important;
  line-height: 1.4 !important;

  color: #7a7b81 !important;

  box-sizing: border-box !important;
}


/* ---------------------------------------------------------
   LIENS LEGAUX
   --------------------------------------------------------- */

.eliaoliva-footer-legal {
  display: flex !important;

  gap: 18px !important;

  flex-wrap: wrap !important;
}

.eliaoliva-footer-legal a {
  color: inherit !important;
  text-decoration: none !important;
}


/* =========================================================
   RESPONSIVE — TABLETTE LARGE
   ========================================================= */

@media (max-width: 1199px) {

  .eliaoliva-footer-main {
    grid-template-columns:
      minmax(240px, 1fr)
      minmax(0, 2.2fr) !important;

    gap: 40px !important;
  }

  .eliaoliva-footer-links {
    grid-template-columns:
      minmax(0, 1.35fr)
      minmax(120px, .85fr)
      minmax(190px, 1.15fr) !important;

    gap: 28px !important;
  }

}


/* =========================================================
   RESPONSIVE — PETITE TABLETTE
   ========================================================= */

@media (max-width: 991px) {

  .eliaoliva-footer-main {
    grid-template-columns: 1fr !important;

    gap: 38px !important;

    padding: 48px 20px 38px !important;
  }

  .eliaoliva-footer-brand {
    max-width: none !important;
  }

  .eliaoliva-footer-copy {
    max-width: 600px !important;
  }

  .eliaoliva-footer-links {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    gap: 32px 36px !important;
  }

}


/* =========================================================
   RESPONSIVE — MOBILE
   ========================================================= */

@media (max-width: 575px) {

  .eliaoliva-footer {
    margin-top: 48px !important;
  }

  .eliaoliva-footer-main {
    display: block !important;

    padding: 40px 18px 30px !important;

    box-sizing: border-box !important;
  }

  .eliaoliva-footer-brand {
    width: 100% !important;
    max-width: none !important;

    margin-bottom: 30px !important;
  }

  .eliaoliva-footer-links {
    display: block !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  .eliaoliva-footer-column {
    width: 100% !important;

    margin-bottom: 26px !important;
  }

  .eliaoliva-footer-column h3 {
    margin-bottom: 12px !important;
  }

  .eliaoliva-footer-column li {
    margin-bottom: 6px !important;
  }

  .eliaoliva-footer-column a {
    font-size: 13px !important;
    line-height: 1.4 !important;
  }

  .eliaoliva-footer-contact {
    min-width: 0 !important;
  }

  .eliaoliva-footer-bottom {
    display: block !important;

    width: 100% !important;

    padding-left: 18px !important;
    padding-right: 18px !important;

    box-sizing: border-box !important;
  }

  .eliaoliva-footer-legal {
    gap: 10px 16px !important;

    margin-top: 12px !important;
  }

}
/* =========================================================
   CORRECTION FOOTER PC
   PRODUITS + NOTRE ASSOCIATION
   ========================================================= */

@media (min-width: 992px) {

  /* La colonne INFORMATIONS doit pouvoir contenir
     ses deux blocs internes */
  .eliaoliva-footer-column:first-child {
    min-width: 0 !important;
  }

  /* Les blocs générés par ps_linklist */
  .eliaoliva-footer-column:first-child > div {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 28px !important;
    width: 100% !important;
  }

  /* Chaque bloc interne */
  .eliaoliva-footer-column:first-child > div > div {
    min-width: 0 !important;
    width: 100% !important;
  }

  /* Évite que les titres se chevauchent */
  .eliaoliva-footer-column:first-child h3,
  .eliaoliva-footer-column:first-child h4 {
    white-space: normal !important;
  }

}