/* Packs produits — rendu du shortcode [acp_packs]
 *
 * Même palette que prix-suivis.css : #c2410c (5,18:1 avec le blanc) et non
 * l'orange d'accent #f97316 qui plafonne à 2,80:1. Ne pas y revenir sans
 * refaire la mesure.
 *
 * Tout est cantonné sous .acp-packs. Le thème pose
 * `h1,h2,h3,h4,h5,h6 { color:#333 }` en global, ce qui casse l'héritage :
 * chaque titre du bloc déclare donc sa couleur explicitement.
 */

.acp-packs {
    margin: 42px 0;
    padding: 26px 22px 20px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #ffffff;
}

.acp-packs .acp-packs-titre {
    margin: 0 0 6px;
    font-size: 1.6rem;
    line-height: 1.25;
    color: #0f172a;
}

.acp-packs .acp-packs-chapo {
    margin: 0 0 18px;
    color: #475569;        /* 7,4:1 sur blanc */
    font-size: 0.98rem;
}

.acp-packs .acp-packs-consigne {
    margin: 0 0 16px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #475569;
}

.acp-packs-grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 18px;
}

.acp-pack {
    display: flex;
    flex-direction: column;
    padding: 16px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #ffffff;
    text-align: center;
}

.acp-pack-visuel {
    /* hauteur fixe : les visuels du marchand sont carrés mais de cadrages
       inégaux, sans cela les cartes d'une même rangée se décalent */
    height: 190px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.acp-pack-visuel img {
    max-width: 100%;
    max-height: 190px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.acp-packs .acp-pack-nom {
    margin: 0 0 6px;
    font-size: 1.02rem;
    line-height: 1.35;
    color: #0f172a;
}

.acp-pack-accroche {
    margin: 0 0 12px;
    font-size: 0.88rem;
    line-height: 1.45;
    color: #475569;
}

.acp-pack-prix {
    margin: 0 0 4px;
    font-size: 1.35rem;
    font-weight: 700;
    color: #c2410c;
}

.acp-pack-etat {
    margin: 0 0 8px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #9a3412;        /* 7,31:1 sur blanc */
}

/* Le bouton est poussé en bas : les cartes d'une rangée alignent le leur
   quelle que soit la longueur du nom. */
.acp-pack-bouton {
    display: block;
    margin-top: auto;
    padding: 12px 16px;
    background: #c2410c;
    color: #ffffff !important;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none !important;
    line-height: 1.3;
}

.acp-pack-bouton:hover,
.acp-pack-bouton:focus {
    background: #9a3412;
    color: #ffffff !important;
}

.acp-pack-bouton:focus-visible {
    outline: 3px solid #0f172a;
    outline-offset: 2px;
}

.acp-pack-rupture .acp-pack-visuel img {
    opacity: 0.55;
}

.acp-pack-rupture .acp-pack-bouton {
    background: #475569;   /* 7,4:1 — un pack en rupture ne s'annonce pas
                              comme une offre disponible */
}

.acp-pack-rupture .acp-pack-bouton:hover,
.acp-pack-rupture .acp-pack-bouton:focus {
    background: #334155;
}

.acp-pack-mention {
    margin: 8px 0 0;
    font-size: 0.76rem;
    color: #475569;
}

.acp-packs .acp-packs-pied {
    margin: 18px 0 0;
    font-size: 0.78rem;
    line-height: 1.5;
    color: #475569;
}

@media (max-width: 600px) {
    .acp-packs {
        padding: 20px 14px 16px;
    }

    .acp-packs-grille {
        grid-template-columns: 1fr;
    }

    .acp-pack-visuel,
    .acp-pack-visuel img {
        height: 150px;
        max-height: 150px;
    }
}