/*
Theme Name: Divi-enfant
Template: Divi
Version: fjdsk6
*/

/* ETHOS REGULAR */
@font-face {
    font-family: 'Ethos';
    src: url('/wp-content/themes/Divi-enfant/fonts/ETHOS-REGULAR.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

/* IBM Plex Sans Light */
@font-face {
    font-family: 'imbplexsans-light';
    src: url('/wp-content/themes/Divi-enfant/fonts/IBMPlexSans-Light.ttf') format('truetype');
    font-weight: 300; /* "Light" = généralement 300 */
    font-style: normal;
}


#menu-menu-principal>li {
    position: relative;
    padding-right: 15px;
    /* espace avant la ligne */
    margin-right: 0px;
    /* espace après la ligne */
}

#menu-menu-principal>li:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 30%;
    bottom: 30%;
    width: 1px;
    background-color: rgba(0, 0, 0, 0.2);
    /* couleur pâle */
}



/* -------- Pagination WooCommerce -------- */
.woocommerce ul.products::after,
.woocommerce-page ul.products::after {
    /* rétablit la hauteur du <ul> en vidant les floats */
    content: "";
    display: block;
    clear: both;
}

.woocommerce nav.woocommerce-pagination {
    /* garantit que la pagination commence après la grille */
    clear: both;
}

@media (min-width:1200px) {
    ul.products.jpl-columns li.product {
        width: 25%;
    }
}

@media (max-width:1199px) and (min-width:981px) {
    ul.products.jpl-columns li.product {
        width: 33.333%;
    }
}

@media (max-width:980px) and (min-width:768px) {
    ul.products.jpl-columns li.product {
        width: 50%;
    }
}

@media (max-width:767px) {
    ul.products.jpl-columns li.product {
        width: 100%;
        margin-right: 0;
    }
}


.et_pb_wc_cart_notice .return-to-shop {
    display: none !important;
}

.favorites-list {
    background: #fff;
    border: 1px solid #000;
}

/*.simplefavorite-button i {*/
/*    font-size: 20px;*/
/* taille du cœur */
/*    color: #888;*/
/* gris lorsqu’il n’est PAS favori */
/*    transition: color .25s, transform .15s;*/
/*}*/

/* Survol : petit zoom pour le feedback */
/*.simplefavorite-button:hover i {*/
/*    transform: scale(1.15);*/
/*}*/

/* Cœur actif : couleur personnalisée (reprend par ex. votre variable CSS) */
/*.simplefavorite-button.active i {*/
/*    color: var(--colorMav, #ba0018);*/
/*}*/

.favorite {
  /* 1. make it square: */
  width: 2.5rem;
  height: 2.5rem;

  /* 2. background & border: */
  background: #fff;

  /* 3. rounded corners: */
  border-radius: 100%;

  /* 4. center the icon: */
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* 5. tidy up */
  padding: 0;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s, box-shadow 0.2s;

  /* 6. subtle shadow */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  
   z-index: 1000;         /* higher than the surrounding link */

  /* ensure it actually receives clicks */
  pointer-events: auto;
}

/* optional: stronger shadow on hover */
.favorite:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.favorite {
  color: red;
  font-size: 1.25rem;
}

.favorite:active {
    transform: scale(0.9);

}



/* --- conteneur global --------------------------------------------------- */
.jpl-favorites-list {
background: #fff;
    border-radius: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* --- chaque ligne : 4 colonnes + fond blanc ----------------------------- */
.jpl-fav-item {
    display: grid;
    grid-template-columns: 58px 88px 1fr auto;
    /* X | thumb | texte | bouton */
    align-items: center;
    padding: 12px 20px;
    /* petit espacement entre les lignes   */
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}

/* --- colonne 1 : bouton retrait ---------------------------------------- */
.jpl-fav-left {
    display: flex;
    /* centre X verticalement/horizontalement */
    align-items: center;
    justify-content: center;
}

.jpl-fav-left .simplefavorite-button {
    background: none;
    border: none;
    width: 58px;
    height: 48px;
    margin-right: 10px;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
}

/* on masque le cœur natif du plugin */
.jpl-fav-left .simplefavorite-button .fa-heart {
    display: none;
}

/* on dessine notre ✕ */
.jpl-fav-left .simplefavorite-button::before {
    content: "\2715";
    /* caractère X */
    font-size: 26px;
    line-height: 1;
    color: #ba0018;
    /* rouge maison, ajuste si besoin       */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* --- colonne 2 : miniature --------------------------------------------- */
/* Colonne 2 – miniature améliorée */
.jpl-fav-thumb {
    display: block;
    width: 88px;
    /* largeur fixe (ajustez si besoin)  */
    height: 88px;
    /* carré parfait                     */
    overflow: hidden;
    /* masque tout ce qui dépasse        */
    border-radius: 6px;
    /* coins doux                        */
}

.jpl-fav-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* remplit le carré en rognant       */
}

/* --- colonne 3 : texte -------------------------------------------------- */
.jpl-fav-title {
    margin: 0;
    font-size: 1rem;
    line-height: 1.2;
}

.jpl-fav-desc {
    margin: .35rem 0 0;
    font-size: .9rem;
    color: #555;
}

/* --- colonne 4 : bouton panier ----------------------------------------- */
.jpl-fav-right .button {
    white-space: nowrap;
    padding: 10px 18px;
    font-size: .85rem;
    border-radius: 30px;
    background: #ba0018;
    color: #fff;
    transition: background .2s;
}

.jpl-fav-right .button:hover {
    background: #981016;
}

/* --- responsive rapide (≤600 px) --------------------------------------- */
@media(max-width:600px) {
    .jpl-fav-item {
        grid-template-columns: 48px 72px 1fr;
        grid-template-areas:
            "left thumb info"
            "left thumb right";
    }

    .jpl-fav-left {
        grid-area: left;
    }

    .jpl-fav-thumb {
        grid-area: thumb;
    }

    .jpl-fav-info {
        grid-area: info;
    }

    .jpl-fav-right {
        grid-area: right;
        margin-top: 8px;
    }
}