/* =====================================================
   peugeot-detail.css
   Résidu CSS — uniquement ce qui ne peut pas être
   exprimé en classes Tailwind :
   • pseudo-éléments (::before / ::after)
   • sélecteurs imbriqués / :not()
   • propriétés SVG spécifiques (stroke, stroke-linecap…)
   • gradient multi-stop "to top" sur fond hero
   ===================================================== */


/* ── HERO GRADIENT ── */
.hero-gradient {
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.85) 0%,
        rgba(0,0,0,0.35) 50%,
        rgba(0,0,0,0.15) 100%
    );
}


/* ── FEAT-CARD : barre rouge animée en bas (::after) ── */
.feat-card {
    position: relative;
    overflow: hidden;
}
.feat-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: #C30027;
    transition: width 0.4s ease;
}
.feat-card:hover::after {
    width: 100%;
}


/* ── FEAT-ICON : SVG stroke properties ── */
.feat-icon svg {
    width: 36px;
    height: 36px;
    stroke: #0A0A0A;
    stroke-width: 1.35;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke 0.3s ease;
}
.feat-card:hover .feat-icon svg {
    stroke: #C30027;
}


/* ── SECTION-LABEL : barre verticale rouge (::before) ── */
.section-label::before {
    content: '';
    display: block;
    width: 3px;
    height: 22px;
    background: #C30027;
    flex-shrink: 0;
}


/* ── GALLERY THUMBNAILS : opacité sur :not(.active) ── */
.thumb:not(.active)       { opacity: 0.55; }
.thumb:not(.active):hover { opacity: 0.85; }


/* ── COLOR SWATCH : outline-offset (supporté en Tailwind
   mais .active ne peut pas être ciblé en Tailwind pur) ── */
.color-swatch.active {
    outline: 2px solid #C30027;
    outline-offset: 3px;
}