/*
 * Catalogue de Formation — CSS front-end
 * Placement uniquement. Polices, couleurs et tailles : à ajuster dans Divi.
 */


/* ══════════════════════════════════════════════════════════════
   1. CONTENEUR PRINCIPAL — CSS Grid
   ══════════════════════════════════════════════════════════════ */

.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
    display: grid !important;
    grid-template-columns: 1fr auto;
    grid-template-rows:
        auto   /* image / badges (superposés) */
        auto   /* titre        */
        auto   /* description  */
        1fr    /* gap flexible */
        auto;  /* footer       */

    grid-template-areas:
        "image   image"
        "title   title"
        "excerpt excerpt"
        "gap     gap"
        "price   meta";

    height: 100%;
    align-items: start;
    position: relative !important; /* conservé pour compatibilité */
}


/* ══════════════════════════════════════════════════════════════
   2. AFFECTATION DES ZONES GRID
   ══════════════════════════════════════════════════════════════ */

.woocommerce ul.products li.product a.woocommerce-LoopProduct-link .et_shop_image {
    grid-area: image;
}

.woocommerce ul.products li.product a.woocommerce-LoopProduct-link .woocommerce-loop-product__title {
    grid-area: title;
}

.woocommerce ul.products li.product a.woocommerce-LoopProduct-link > .price {
    grid-area: price;
    align-self: end;
}

.cf-excerpt {
    grid-area: excerpt;
    margin: 0;
}

.cf-footer-meta {
    grid-area: meta;
    align-self: end;
    text-align: right;
}

/* Séparateur visuel avant le footer */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link > .price,
.cf-footer-meta {
    padding-top: 10px;
    margin-top:  10px;
    border-top: 1px solid #ddd;
}


/* ══════════════════════════════════════════════════════════════
   3. BADGES — même zone grid que l'image → superposition
   ══════════════════════════════════════════════════════════════
   .cf-badges reçoit grid-area: image, exactement comme .et_shop_image.
   CSS Grid les place tous les deux dans la même cellule : ils se
   superposent. .cf-badges hérite ainsi de la hauteur exacte de
   l'image, sans JS et sans connaître cette hauteur à l'avance.
   ══════════════════════════════════════════════════════════════ */

.cf-badges {
    grid-area: image;      /* ← même zone que .et_shop_image    */
    align-self: stretch;   /* occupe toute la hauteur de la zone */
    justify-self: stretch; /* occupe toute la largeur            */
    position: relative;
    z-index: 10;
    pointer-events: none;
}

/* Badge catégorie — haut gauche */
.cf-badges__top-left {
    position: absolute;
    top:  12px;
    left: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Badge accessibilité — bas droite */
.cf-badges__bottom-right {
    position: absolute;
    bottom: 12px;
    right:  12px;
}

/* Forme pilule commune */
.cf-badge {
    display:       inline-block;
    padding:       4px 12px;
    border-radius: 999px;
    pointer-events: auto;
    white-space:   nowrap;
}

.cf-badge--cat {
    background-color: #f3d2e8;
    color: #7a3560;
}

.cf-badge--access {
    background-color: #fff;
    border: 1px solid #ccc;
    color: #333;
}


/* ══════════════════════════════════════════════════════════════
   4. PAGE PRODUIT UNIQUE
   ══════════════════════════════════════════════════════════════ */

.cf-single-meta {
    margin: 16px 0;
}

.cf-single-row {
    display: flex;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid #eee;
}

.cf-single-row:last-child {
    border-bottom: none;
}

.cf-single-row dt {
    flex: 0 0 140px;
    font-weight: 600;
}

.cf-single-row dd {
    margin: 0;
    flex: 1;
}