/* ==========================================================================
   Accueil — section « Tous nos produits » (grille bento)
   ========================================================================== */

.pcx {
    --pcx-navy: #00234d;
    --pcx-pink: #d8327f;
    --pcx-muted: #526170;
    position: relative;
    padding: 96px 0 88px;
    background:
        radial-gradient(700px 360px at 100% 0%, rgba(216, 50, 127, .08), transparent 70%),
        radial-gradient(600px 320px at 0% 100%, rgba(0, 35, 77, .06), transparent 70%),
        #fdf2f8;
    overflow: hidden;
}

/* En-tête */
.pcx-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 44px;
}
.pcx-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    margin-bottom: 16px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--pcx-pink);
    background: #fff;
    border: 1px solid rgba(216, 50, 127, .2);
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(216, 50, 127, .08);
}
.pcx-kicker::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--pcx-pink);
}
.pcx-title {
    margin: 0 0 12px;
    font-size: clamp(30px, 4vw, 46px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--pcx-navy);
}
.pcx-title span { color: var(--pcx-pink); }
.pcx-sub {
    max-width: 520px;
    margin: 0;
    font-size: 16px;
    line-height: 1.7;
    color: var(--pcx-muted);
}
.pcx-cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: var(--pcx-navy);
    border-radius: 999px;
    text-decoration: none;
    transition: background .3s ease, transform .3s ease, box-shadow .3s ease;
}
.pcx-cta svg { width: 16px; height: 16px; transition: transform .3s ease; }
.pcx-cta:hover {
    color: #fff;
    background: var(--pcx-pink);
    box-shadow: 0 12px 28px rgba(216, 50, 127, .3);
    transform: translateY(-2px);
}
.pcx-cta:hover svg { transform: translateX(4px); }

/* Grille bento : 1 grande carte + 4 cartes */
.pcx-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 250px;
    gap: 20px;
}
.pcx-card {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 22px;
    background: var(--pcx-navy);
    color: #fff;
    text-decoration: none;
    isolation: isolate;
    box-shadow: 0 10px 30px rgba(0, 35, 77, .08);
    transition: transform .4s ease, box-shadow .4s ease;
}
.pcx-card.is-feature { grid-column: span 2; grid-row: span 2; }
.pcx-card:hover {
    color: #fff;
    transform: translateY(-6px);
    box-shadow: 0 24px 50px rgba(0, 35, 77, .2);
}
.pcx-card:focus-visible { outline: 3px solid var(--pcx-pink); outline-offset: 3px; }

.pcx-img,
.pcx-placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
}
.pcx-img {
    object-fit: cover;
    transition: transform 1s cubic-bezier(.2, .7, .2, 1);
}
.pcx-card:hover .pcx-img { transform: scale(1.07); }
.pcx-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 70% 25%, rgba(216, 50, 127, .55), transparent 55%),
        linear-gradient(145deg, #0b3b75, var(--pcx-navy));
    color: rgba(255, 255, 255, .85);
}
.pcx-placeholder svg { width: 34%; max-width: 110px; height: auto; transition: transform .6s ease; }
.pcx-card:hover .pcx-placeholder svg { transform: scale(1.08) rotate(-3deg); }

.pcx-shade {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(0, 20, 45, 0) 35%, rgba(0, 20, 45, .78) 100%);
    transition: background .4s ease;
}
.pcx-card:hover .pcx-shade {
    background: linear-gradient(180deg, rgba(0, 20, 45, .05) 20%, rgba(0, 20, 45, .88) 100%);
}

.pcx-count {
    position: absolute;
    top: 16px;
    left: 16px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--pcx-navy);
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(6px);
    border-radius: 999px;
}

.pcx-body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding: 22px;
}
.pcx-text-wrap { min-width: 0; }
.pcx-card-title {
    display: block;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
    overflow-wrap: break-word;
    hyphens: auto;
}
.pcx-card.is-feature .pcx-card-title { font-size: clamp(24px, 2.6vw, 34px); }
.pcx-card-text {
    display: block;
    max-height: 0;
    margin-top: 0;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .85);
    opacity: 0;
    transition: max-height .4s ease, opacity .4s ease, margin .4s ease;
}
.pcx-card.is-feature .pcx-card-text,
.pcx-card:hover .pcx-card-text,
.pcx-card:focus-visible .pcx-card-text {
    max-height: 60px;
    margin-top: 6px;
    opacity: 1;
}
.pcx-card.is-feature .pcx-card-text { font-size: 15px; max-width: 360px; }

.pcx-arrow {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--pcx-navy);
    background: #fff;
    border-radius: 50%;
    transition: background .3s ease, color .3s ease, transform .3s ease;
}
.pcx-arrow svg { width: 18px; height: 18px; }
.pcx-card:hover .pcx-arrow {
    color: #fff;
    background: var(--pcx-pink);
    transform: translateX(3px) rotate(-45deg);
}

/* Bandeau d'arguments */
.pcx-perks {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 36px 0 0;
    padding: 0;
    list-style: none;
}
.pcx-perks li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    font-size: 14px;
    color: var(--pcx-muted);
    background: rgba(255, 255, 255, .75);
    border: 1px solid rgba(0, 35, 77, .06);
    border-radius: 16px;
}
.pcx-perks svg {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    padding: 9px;
    color: var(--pcx-pink);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(216, 50, 127, .12);
}
.pcx-perks b { color: var(--pcx-navy); font-weight: 600; }

/* Responsive */
@media (max-width: 1199.98px) {
    .pcx-grid { grid-auto-rows: 220px; }
}

@media (max-width: 991.98px) {
    .pcx { padding: 72px 0 64px; }
    .pcx-head { flex-direction: column; align-items: flex-start; gap: 20px; }
    .pcx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 210px; }
    .pcx-card.is-feature { grid-column: span 2; grid-row: span 1; }
    .pcx-perks { grid-template-columns: 1fr; gap: 10px; }
    .pcx-card-text { max-height: 60px; margin-top: 6px; opacity: 1; }
}

@media (max-width: 575.98px) {
    .pcx { padding: 56px 0 48px; }
    .pcx-head { margin-bottom: 28px; }
    .pcx-sub { font-size: 15px; }
    .pcx-cta { width: 100%; justify-content: center; }
    .pcx-grid { gap: 12px; grid-auto-rows: 170px; }
    .pcx-card { border-radius: 18px; }
    .pcx-card.is-feature { grid-row: span 1; }
    .pcx-body { padding: 14px; gap: 10px; }
    .pcx-card-title { font-size: 16px; }
    .pcx-card-text { display: none; }
    .pcx-card.is-feature .pcx-card-text { display: block; font-size: 13px; }
    .pcx-arrow { width: 34px; height: 34px; }
    .pcx-card:not(.is-feature) .pcx-arrow { display: none; }
    .pcx-arrow svg { width: 15px; height: 15px; }
    .pcx-count { top: 10px; left: 10px; padding: 4px 10px; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
    .pcx-card, .pcx-img, .pcx-arrow, .pcx-card-text, .pcx-cta { transition: none; }
}