/* =============================================================================
   INSTALL COMMUNICATION 33
   HERO CATÉGORIE WOOCOMMERCE
   =============================================================================
   
   OBJECTIF :
   - Hero pleine largeur de la fenêtre
   - Aucun héritage de largeur du container WooCommerce
   - Aucun débordement horizontal
   - Image affichée intégralement
   - Fil d'Ariane intégré dans le Hero
   - Titre intégré dans le Hero
   - Responsive propre
   - Ne modifie PAS les produits
   - Ne modifie PAS les filtres
   - Ne modifie PAS les sous-catégories
============================================================================= */


/* =============================================================================
   HERO — STRUCTURE PRINCIPALE
============================================================================= */

.ic33-category-hero{

    position:relative;

    display:block;

    width:100vw !important;

    max-width:none !important;

    height:auto;

    margin-top:0 !important;

    margin-right:0 !important;

    margin-bottom:0 !important;

    margin-left:calc(50% - 50vw) !important;

    padding:0 !important;

    overflow:hidden;

    background:none !important;

    line-height:0;

    box-sizing:border-box;

}


/* =============================================================================
   IMAGE
============================================================================= */

.ic33-category-hero__image{

    display:block;

    width:100% !important;

    max-width:none !important;

    height:auto !important;

    min-width:100%;

    margin:0 !important;

    padding:0 !important;

    border:0;

    vertical-align:top;

    object-fit:cover;

    object-position:center center;

}


/* =============================================================================
   OVERLAY
============================================================================= */

.ic33-category-hero__overlay{

    position:absolute;

    inset:0;

    z-index:2;

    display:block;

    width:100%;

    height:100%;

    margin:0;

    padding:0;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.72) 0%,
            rgba(0,0,0,.57) 25%,
            rgba(0,0,0,.25) 52%,
            rgba(0,0,0,.04) 78%,
            rgba(0,0,0,0) 100%
        );

    pointer-events:none;

}


/* =============================================================================
   CONTENEUR INTERNE DU HERO
   -----------------------------------------------------------------------------
   IMPORTANT :
   On ne laisse pas le .ic33-container global imposer sa largeur au Hero.
============================================================================= */

.ic33-category-hero > .ic33-container,
.ic33-category-hero .ic33-container{

    position:absolute;

    top:0;
    right:0;
    bottom:0;
    left:0;

    width:100% !important;

    max-width:none !important;

    height:100%;

    margin:0 !important;

    padding:0 50px !important;

    box-sizing:border-box;

    display:flex;

    align-items:center;

    justify-content:flex-start;

    z-index:3;

}


/* =============================================================================
   CONTENU
============================================================================= */

.ic33-category-hero__content{

    position:relative;

    width:auto;

    max-width:900px;

    margin:0;

    padding:0;

    line-height:normal;

    z-index:4;

}


/* =============================================================================
   FIL D'ARIANE
============================================================================= */

.ic33-category-hero__breadcrumb{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:9px;

    margin:0 0 18px;

    padding:0;

    color:rgba(255,255,255,.85);

    font-size:14px;

    font-weight:500;

    line-height:1.4;

}


/* Navigation WooCommerce générée dans le Hero */

.ic33-category-hero__breadcrumb .woocommerce-breadcrumb{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:9px;

    margin:0;

    padding:0;

    color:inherit;

    font-size:inherit;

    line-height:inherit;

}


/* Liens du fil d'Ariane */

.ic33-category-hero__breadcrumb a{

    color:#FFFFFF;

    text-decoration:none;

    transition:
        color .25s ease,
        opacity .25s ease;

}


.ic33-category-hero__breadcrumb a:hover{

    color:#F58220;

}


/* Séparateur */

.ic33-category-hero__breadcrumb .ic33-breadcrumb-separator,
.ic33-category-hero__breadcrumb .ic33-breadcrumb__separator{

    color:rgba(255,255,255,.50);

    font-size:13px;

}


/* =============================================================================
   TEXTE "CATÉGORIE"
============================================================================= */

.ic33-category-hero__eyebrow{

    display:block;

    margin:0 0 8px;

    padding:0;

    color:rgba(255,255,255,.70);

    font-size:13px;

    font-weight:500;

    line-height:1.2;

    letter-spacing:.4px;

    text-transform:uppercase;

}


/* =============================================================================
   TITRE
============================================================================= */

.ic33-category-hero__title{

    display:block;

    margin:0;

    padding:0;

    color:#FFFFFF;

    font-size:68px;

    font-weight:900;

    line-height:1;

    letter-spacing:-2px;

    text-transform:uppercase;

    text-shadow:
        0 5px 18px rgba(0,0,0,.55);

}


/* =============================================================================
   DESCRIPTION
   -----------------------------------------------------------------------------
   Conservée uniquement si une description de catégorie est utilisée.
============================================================================= */

.ic33-category-hero__description{

    max-width:760px;

    margin:24px 0 0;

    padding:0;

    color:rgba(255,255,255,.90);

    font-size:18px;

    font-weight:400;

    line-height:1.7;

}


.ic33-category-hero__description p{

    margin:0;

    padding:0;

}


/* =============================================================================
   SUPPRESSION DES RÈGLES STOREFRONT QUI LIMITENT LE HERO
============================================================================= */

body.tax-product_cat .site-main{

    margin-top:0 !important;

    padding-top:0 !important;

}


body.tax-product_cat .ic33-category-page{

    margin-top:0 !important;

    padding-top:0 !important;

}


/*
 * WooCommerce peut générer son propre fil d'Ariane.
 *
 * Celui-ci ne doit PAS apparaître en dehors du Hero.
 */

body.tax-product_cat > .woocommerce-breadcrumb,
body.tax-product_cat .site-main > .woocommerce-breadcrumb{

    display:none !important;

}


/* =============================================================================
   IMPORTANT — PAS DE LIMITE DE LARGEUR
============================================================================= */

body.tax-product_cat .ic33-category-hero{

    width:100vw !important;

    max-width:none !important;

}


/*
 * Neutralisation des éventuelles règles de Storefront
 * appliquées aux enfants directs du site-main.
 */

body.tax-product_cat .site-main > .ic33-category-hero{

    width:100vw !important;

    max-width:none !important;

}


/* =============================================================================
   ÉCRANS LARGE
============================================================================= */

@media (min-width:1601px){

    .ic33-category-hero > .ic33-container,
    .ic33-category-hero .ic33-container{

        padding-left:50px !important;

        padding-right:50px !important;

    }


    .ic33-category-hero__title{

        font-size:68px;

    }

}


/* =============================================================================
   ÉCRAN 17" / PETIT DESKTOP
============================================================================= */

@media (max-width:1600px) and (min-width:1201px){

    .ic33-category-hero > .ic33-container,
    .ic33-category-hero .ic33-container{

        padding-left:36px !important;

        padding-right:36px !important;

    }


    .ic33-category-hero__content{

        max-width:760px;

    }


    .ic33-category-hero__title{

        font-size:clamp(
            52px,
            4.5vw,
            64px
        );

    }

}


/* =============================================================================
   TABLETTE
============================================================================= */

@media (max-width:1200px){

    .ic33-category-hero > .ic33-container,
    .ic33-category-hero .ic33-container{

        padding-left:32px !important;

        padding-right:32px !important;

    }


    .ic33-category-hero__title{

        font-size:clamp(
            44px,
            5.5vw,
            58px
        );

        letter-spacing:-1.5px;

    }


    .ic33-category-hero__breadcrumb{

        margin-bottom:14px;

        font-size:13px;

    }

}


/* =============================================================================
   TABLETTE PETITE
============================================================================= */

@media (max-width:992px){

    .ic33-category-hero > .ic33-container,
    .ic33-category-hero .ic33-container{

        padding-left:24px !important;

        padding-right:24px !important;

    }


    .ic33-category-hero__content{

        max-width:680px;

    }


    .ic33-category-hero__eyebrow{

        font-size:12px;

    }


    .ic33-category-hero__title{

        font-size:clamp(
            38px,
            6vw,
            52px
        );

    }


    .ic33-category-hero__description{

        font-size:16px;

    }

}


/* =============================================================================
   MOBILE
============================================================================= */

@media (max-width:768px){

    .ic33-category-hero > .ic33-container,
    .ic33-category-hero .ic33-container{

        padding-left:20px !important;

        padding-right:20px !important;

    }


    .ic33-category-hero__content{

        max-width:100%;

    }


    .ic33-category-hero__breadcrumb{

        margin-bottom:12px;

        gap:7px;

        font-size:12px;

    }


    .ic33-category-hero__eyebrow{

        margin-bottom:7px;

        font-size:11px;

    }


    .ic33-category-hero__title{

        font-size:clamp(
            32px,
            8vw,
            46px
        );

        letter-spacing:-1px;

    }


    .ic33-category-hero__description{

        margin-top:18px;

        font-size:15px;

        line-height:1.55;

    }


    .ic33-category-hero__overlay{

        background:
            linear-gradient(
                90deg,
                rgba(0,0,0,.74) 0%,
                rgba(0,0,0,.48) 55%,
                rgba(0,0,0,.12) 100%
            );

    }

}


/* =============================================================================
   TRÈS PETIT MOBILE
============================================================================= */

@media (max-width:480px){

    .ic33-category-hero > .ic33-container,
    .ic33-category-hero .ic33-container{

        padding-left:16px !important;

        padding-right:16px !important;

    }


    .ic33-category-hero__breadcrumb{

        font-size:11px;

    }


    .ic33-category-hero__title{

        font-size:clamp(
            28px,
            9vw,
            38px
        );

        letter-spacing:-.5px;

    }

}


/* =============================================================================
   CORRECTIONS IMAGE
============================================================================= */

.ic33-category-hero img{

    box-sizing:border-box;

}


/* =============================================================================
   ACCESSIBILITÉ
============================================================================= */

.ic33-category-hero a:focus-visible{

    outline:2px solid #F58220;

    outline-offset:3px;

}


/* =============================================================================
   RÉDUCTION DES ANIMATIONS
============================================================================= */

@media (prefers-reduced-motion:reduce){

    .ic33-category-hero a{

        transition:none;

    }

}
/* Masquer le libellé CATÉGORIE dans le Hero */
.ic33-category-hero__eyebrow {
    display: none !important;
}