/* Asarine - Hero de catégorie - charte Pradel (noir + #C30C20) */

.ash-hero{
    background:#ffffff;
    margin-bottom:clamp(18px,2.5vw,34px);
}
.ash-hero__inner{
    display:grid;
    grid-template-columns:1.15fr 0.85fr;
    gap:clamp(28px,4vw,64px);
    align-items:center;
    padding-block:clamp(16px,2.4vw,32px);
    padding-inline:clamp(24px,5vw,72px);
}
.ash-hero__body{
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.ash-hero__eyebrow{
    font-size:12px;
    font-weight:700;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:#C30C20;
    margin-bottom:14px;
}
.ash-hero__title{
    /* Aligné sur le titre affiché en prod : serif (défaut navigateur), ~60px, 400 */
    margin:0;
    color:#1D1D1D;
    font-family:"Times New Roman",Times,serif;
    font-size:clamp(34px,4.6vw,60px);
    font-weight:400;
    line-height:1.08;
    letter-spacing:normal;
    text-transform:none;
}
.ash-hero__desc{
    margin-top:16px;
    color:#5a5a5a;
    font-size:16px;
    max-width:62ch;
}
.ash-hero__desc p{margin:0 0 .6em;}
.ash-hero__items{
    list-style:none;
    padding:0;
    margin:22px 0 0;
    display:flex;
    gap:9px;
    flex-wrap:wrap;
}
.ash-chip{
    display:inline-flex;
    align-items:center;
    gap:7px;
    border:1.5px solid #d2d2d2;
    border-radius:100px;
    padding:8px 14px;
    font-size:13px;
    font-weight:600;
    color:#111111;
}
.ash-chip__ic{display:inline-flex;width:15px;height:15px;color:#C30C20;}
.ash-chip__ic svg{width:15px;height:15px;}
.ash-hero__cta{
    align-self:flex-start;
    margin-top:26px;
    background:#C30C20;
    color:#ffffff;
    text-decoration:none;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.02em;
    padding:14px 26px;
    border-radius:100px;
    font-size:14px;
    transition:background .15s ease;
}
.ash-hero__cta:hover{background:#9c0a19;color:#ffffff;}

/* Image : cadrée sur ~72vh, coins arrondis */
.ash-hero__media{
    position:relative;
    height:72vh;
    min-height:360px;
    max-height:620px;
    border-radius:16px;
    overflow:hidden;
}
.ash-hero__media img{width:100%;height:100%;object-fit:cover;display:block;border-radius:16px;}
.ash-hero__badge{
    position:absolute;
    top:16px;left:16px;
    z-index:2;
    background:#C30C20;
    color:#ffffff;
    font-size:11px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
    padding:7px 13px;
    border-radius:100px;
}
.ash-hero--noimg .ash-hero__inner{grid-template-columns:1fr;}

/* Ancre pour le CTA (scroll vers la liste). Le décalage précis est géré en JS. */
#ash-liste{display:block;scroll-margin-top:20px;}

/* Bouton "Filtrer" masqué tant qu'on n'est pas au niveau des produits (mobile) */
.ash-filter-off{opacity:0 !important;pointer-events:none !important;}

/* Contenu Creative Elements du bas (déplacé en pleine largeur par le JS) */
.pe-cat-description{margin-top:40px;}

/* Correctif thème : bouton "Retour en haut" en texte blanc sur fond blanc -> lisible */
#ancre-cat.elementor-button,
#ancre-cat.elementor-button .elementor-button-text{color:#C30C20 !important;}

/* Alignement vertical texte + chevron du bouton "Retour en haut" */
#ancre-cat.elementor-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;}
#ancre-cat.elementor-button .material-icons{line-height:1;}

/* ===== Filtres sticky en desktop, jusqu'au bandeau Creative Elements ===== */
/* Le thème force overflow-x:hidden sur html/body, ce qui force overflow-y:auto
   et casse position:sticky. overflow-x:clip coupe l'horizontal sans créer de
   conteneur de scroll, donc le sticky redevient possible. */
@media (min-width:992px){
    html, body{overflow-x:clip;}
    /* Le décalage haut s'adapte au menu / bandeau promo qui deviennent
       collants au scroll : --ash-sticky-top est recalculé en JS. */
    #left-column{position:sticky;top:var(--ash-sticky-top,24px);align-self:flex-start;}
}

/* Bandeau réassurance noir, pleine largeur */
.ash-reassure{
    background:#000000;
    color:#ffffff;
    width:100vw;
    margin-left:calc(50% - 50vw);
    margin-bottom:clamp(18px,2.5vw,34px);
}
.ash-reassure__inner{
    max-width:1240px;
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(4,1fr);
}
.ash-reassure__cell{
    display:flex;
    gap:13px;
    align-items:center;
    padding:20px 22px;
}
.ash-reassure__cell + .ash-reassure__cell{border-left:1px solid #262626;}
.ash-reassure__ic{
    width:40px;height:40px;flex:none;
    border-radius:9px;
    background:#1a1a1a;
    display:grid;place-items:center;
    color:#C30C20;
}
.ash-reassure__ic svg{width:21px;height:21px;}
.ash-reassure__t{font-weight:700;font-size:14px;}
.ash-reassure__s{font-size:12px;color:#a9a9a9;}

/* ---- Mobile : contenu d'abord, image cadrée, marges alignées ---- */
@media (max-width:900px){
    /* Marge au-dessus du hero pour laisser la place au bandeau promo. Ajuste la valeur si besoin. */
    .ash-hero{margin-top:44px;}
    .ash-hero__inner{
        grid-template-columns:1fr;
        gap:20px;
        padding-block:18px;
        padding-inline:0;
    }
    .ash-hero__body{order:1;}
    .ash-hero__media{
        order:2;
        height:auto;
        aspect-ratio:16/10;
        max-height:none;
        min-height:0;
    }
    .ash-reassure__inner{grid-template-columns:repeat(2,1fr);}
    .ash-reassure__cell:nth-child(3){border-left:none;}
    .ash-reassure__cell:nth-child(n+3){border-top:1px solid #262626;}
}
@media (max-width:560px){
    .ash-hero__title{font-size:clamp(30px,8vw,44px);}
    .ash-reassure__inner{grid-template-columns:1fr;}
    .ash-reassure__cell + .ash-reassure__cell{border-left:none;border-top:1px solid #262626;}
}