/* =============================================================================
   INSTALL COMMUNICATION 33
   HEADER PREMIUM
   -----------------------------------------------------------------------------
   FICHIER : assets/css/header.css
============================================================================= */


/* =============================================================================
   VARIABLES
============================================================================= */

:root{

    --ic33-header-height:130px;
    --ic33-header-height-scroll:92px;
    --ic33-header-transition:.35s ease;

}


/* =============================================================================
   HEADER
============================================================================= */

.ic33-header{

    position:fixed;

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

    width:100%;

    height:var(--ic33-header-height);

    background:#FFFFFF;

    border-bottom:1px solid rgba(8,26,47,.08);

    box-shadow:none;

    z-index:99999;

    transition:
        height var(--ic33-header-transition),
        background var(--ic33-header-transition),
        box-shadow var(--ic33-header-transition),
        border-color var(--ic33-header-transition);

}


/* =============================================================================
   HEADER AU SCROLL
============================================================================= */

.ic33-header.is-scrolled{

    height:var(--ic33-header-height-scroll);

    background:rgba(255,255,255,.97);

    backdrop-filter:blur(14px);

    -webkit-backdrop-filter:blur(14px);

    box-shadow:0 10px 35px rgba(0,0,0,.10);

}


/* =============================================================================
   DÉCALAGE DU CONTENU
============================================================================= */

body{

    padding-top:var(--ic33-header-height);

}


/* =============================================================================
   CONTENEUR
============================================================================= */

.ic33-header__container{

    width:100%;
    height:100%;

}


.ic33-header .ic33-container{

    width:min(2200px,96vw);

    height:100%;

    margin-inline:auto;

    padding:0;

}


/* =============================================================================
   LIGNE PRINCIPALE
============================================================================= */

.ic33-header__inner{

    display:grid;

    grid-template-columns:
        190px
        minmax(0,1fr)
        minmax(500px,620px);

    align-items:center;

    column-gap:28px;

    height:100%;

}


/* =============================================================================
   LOGO
============================================================================= */

.ic33-header__logo{

    display:flex;

    align-items:center;

    justify-content:flex-start;

    height:100%;

}


.ic33-header__logo img{

    display:block;

    width:auto;

    height:112px;

    max-width:none;

    transition:
        height var(--ic33-header-transition);

}


.ic33-header.is-scrolled .ic33-header__logo img{

    height:80px;

}


/* =============================================================================
   NAVIGATION
============================================================================= */

.ic33-header__navigation{

    display:flex;

    align-items:center;

    justify-content:center;

    width:100%;

    height:100%;

    min-width:0;

}


/* =============================================================================
   MENU PRINCIPAL
============================================================================= */

.ic33-menu{

    display:flex;

    align-items:center;

    justify-content:center;

    flex-wrap:nowrap;

    gap:clamp(18px,2.2vw,42px);

    width:100%;

    min-width:0;

    margin:0;
    padding:0;

    list-style:none;

}


.ic33-menu > li{

    position:relative;

    display:flex;

    align-items:center;

    height:100%;

    min-width:0;

    margin:0;
    padding:0;

}


/* =============================================================================
   LIENS
============================================================================= */

.ic33-menu > li > a{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    height:100%;

    padding:10px 0;

    color:#081A2F;

    font-size:clamp(16px,1.15vw,22px);

    font-weight:700;

    letter-spacing:.15px;

    text-decoration:none;

    white-space:nowrap;

    transition:
        color .30s ease;

}


/* =============================================================================
   SOULIGNEMENT ORANGE
============================================================================= */

.ic33-menu > li > a::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:0;

    width:0;

    height:3px;

    border-radius:999px;

    background:#F58220;

    transform:translateX(-50%);

    transition:
        width .30s ease;

}


/* =============================================================================
   ÉTAT ACTIF
============================================================================= */

.ic33-menu > li:hover > a,
.ic33-menu > li.current-menu-item > a,
.ic33-menu > li.current_page_item > a,
.ic33-menu > li.current-menu-parent > a,
.ic33-menu > li.current-menu-ancestor > a,
.ic33-menu > li.current_page_parent > a,
.ic33-menu > li.current_page_ancestor > a,
.ic33-menu > li.ic33-shop-active > a{

    color:#0057A4;

}


.ic33-menu > li:hover > a::after,
.ic33-menu > li.current-menu-item > a::after,
.ic33-menu > li.current_page_item > a::after,
.ic33-menu > li.current-menu-parent > a::after,
.ic33-menu > li.current-menu-ancestor > a::after,
.ic33-menu > li.current_page_parent > a::after,
.ic33-menu > li.current_page_ancestor > a::after,
.ic33-menu > li.ic33-shop-active > a::after{

    width:100%;

}


/* =============================================================================
   SOUS-MENUS
============================================================================= */

.ic33-menu .sub-menu{

    position:absolute;

    top:100%;
    left:0;

    min-width:260px;

    margin-top:16px;

    padding:14px 0;

    list-style:none;

    background:#FFFFFF;

    border-radius:18px;

    box-shadow:0 20px 50px rgba(0,0,0,.12);

    opacity:0;

    visibility:hidden;

    transform:translateY(10px);

    transition:
        opacity .25s ease,
        transform .25s ease,
        visibility .25s ease;

    z-index:999;

}


.ic33-menu li:hover > .sub-menu{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}


.ic33-menu .sub-menu li{

    width:100%;

}


.ic33-menu .sub-menu a{

    display:block;

    padding:14px 24px;

    color:#081A2F;

    font-size:16px;

    font-weight:600;

    text-decoration:none;

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

}


.ic33-menu .sub-menu a:hover{

    background:#F4F8FC;

    color:#0057A4;

}


/* =============================================================================
   ACTIONS HEADER
============================================================================= */

.ic33-header__actions{

    display:flex;

    align-items:center;

    justify-content:flex-end;

    gap:12px;

    width:100%;

    min-width:0;

    height:auto;

    align-self:center;

}


/* =============================================================================
   RECHERCHE
============================================================================= */

.ic33-header__search{

    position:relative;

    top:auto;

    display:flex;

    align-items:center;

    justify-content:flex-start;

    align-self:center;

    flex:1 1 auto;

    width:auto;

    min-width:0;

    max-width:none;

    height:54px;

    margin:0;

    padding:0 18px;

    border:1px solid #D9E3ED;

    border-radius:999px;

    background:#FFFFFF;

    transition:
        border-color .30s ease,
        box-shadow .30s ease,
        background .30s ease;

}


.ic33-header__search:hover{

    border-color:#B7C8D8;

}


.ic33-header__search:focus-within{

    border-color:#0057A4;

    box-shadow:
        0 0 0 4px rgba(0,87,164,.10);

}


/* =============================================================================
   RESET INPUT
============================================================================= */

.ic33-header__search input,
.ic33-header__search button{

    margin:0;

    padding:0;

    border:none;

    background:transparent;

    outline:none;

    box-shadow:none;

}


/* =============================================================================
   BOUTON RECHERCHE
============================================================================= */

.ic33-header__search-button{

    display:flex;

    align-items:center;

    justify-content:center;

    flex:0 0 26px;

    width:26px;

    height:26px;

    margin:0;

    padding:0;

    cursor:pointer;

    color:#081A2F;

    transition:
        color .30s ease;

}


.ic33-header__search:hover
.ic33-header__search-button{

    color:#0057A4;

}


.ic33-header__search-icon{

    display:block;

    width:24px;

    height:24px;

}


/* =============================================================================
   INPUT
============================================================================= */

.ic33-header__search-input{

    flex:1 1 auto;

    width:100%;

    min-width:0;

    margin-left:14px !important;

    padding:0 !important;

    color:#081A2F;

    font-size:18px;

    font-weight:500;

    line-height:1.2;

}


.ic33-header__search-input::placeholder{

    color:#7B8794;

    font-size:18px;

}


/* =============================================================================
   COMPTE / PANIER
============================================================================= */

.ic33-header__account,
.ic33-header__cart{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    align-self:center;

    flex:0 0 58px;

    width:58px;

    height:58px;

    margin:0;

    padding:0;

    color:#081A2F;

    text-decoration:none;

    transition:
        color .30s ease,
        transform .30s ease;

}


.ic33-header__account:hover,
.ic33-header__cart:hover{

    color:#0057A4;

    transform:translateY(-2px);

}


.ic33-header__account svg,
.ic33-header__cart svg{

    display:block;

    width:34px;

    height:34px;

    margin:0;

    padding:0;

    stroke-width:2;

}


/* =============================================================================
   BADGE PANIER
============================================================================= */

.ic33-cart-count{

    position:absolute;

    top:-6px;

    right:-8px;

    display:flex;

    align-items:center;

    justify-content:center;

    min-width:24px;

    height:24px;

    padding:0 6px;

    background:#F58220;

    color:#FFFFFF;

    border-radius:999px;

    font-size:13px;

    font-weight:800;

    line-height:1;

    z-index:20;

}


/* =============================================================================
   HEADER AU SCROLL
============================================================================= */

.ic33-header.is-scrolled .ic33-header__inner{

    height:100%;

}


.ic33-header.is-scrolled .ic33-menu > li > a{

    font-size:clamp(15px,1.05vw,20px);

}


.ic33-header.is-scrolled .ic33-header__search{

    height:48px;

}


.ic33-header.is-scrolled .ic33-header__account,
.ic33-header.is-scrolled .ic33-header__cart{

    flex-basis:52px;

    width:52px;

    height:52px;

}


.ic33-header.is-scrolled .ic33-header__account svg,
.ic33-header.is-scrolled .ic33-header__cart svg{

    width:30px;

    height:30px;

}


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

.ic33-mobile-toggle{

    display:none;

}


.ic33-mobile-menu{

    display:none;

}


/* =============================================================================
   GRAND ÉCRAN
============================================================================= */

@media (min-width:1601px){

    .ic33-header__inner{

        grid-template-columns:
            200px
            minmax(0,1fr)
            minmax(520px,620px);

        column-gap:32px;

    }


    .ic33-menu{

        gap:clamp(28px,2.3vw,46px);

    }

}


/* =============================================================================
   ÉCRAN 17" / PETIT DESKTOP
   -----------------------------------------------------------------------------
   Objectif :
   - les 6 onglets restent sur UNE SEULE LIGNE
   - À PROPOS ne passe jamais sous la recherche
   - la recherche reste dans sa colonne
   - les icônes restent centrées
============================================================================= */

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

    .ic33-header .ic33-container{

        width:calc(100% - 48px);

        max-width:none;

    }


    .ic33-header__inner{

        grid-template-columns:
            165px
            minmax(650px,1fr)
            minmax(420px,520px);

        column-gap:20px;

    }


    .ic33-header__logo img{

        height:96px;

    }


    .ic33-menu{

        gap:clamp(16px,1.5vw,28px);

        justify-content:space-between;

    }


    .ic33-menu > li{

        flex:0 0 auto;

    }


    .ic33-menu > li > a{

        font-size:clamp(15px,1.15vw,18px);

    }


    .ic33-header__actions{

        gap:8px;

    }


    .ic33-header__search{

        height:50px;

        flex:1 1 auto;

    }


    .ic33-header__search-input{

        font-size:16px;

    }


    .ic33-header__search-input::placeholder{

        font-size:16px;

    }


    .ic33-header__account,
    .ic33-header__cart{

        flex:0 0 46px;

        width:46px;

        height:46px;

    }


    .ic33-header__account svg,
    .ic33-header__cart svg{

        width:28px;

        height:28px;

    }

}


/* =============================================================================
   PETIT DESKTOP
   -----------------------------------------------------------------------------
   Ici on réduit encore le menu AVANT de passer en tablette.
============================================================================= */

@media (max-width:1400px) and (min-width:1101px){

    .ic33-header .ic33-container{

        width:calc(100% - 40px);

        max-width:none;

    }


    .ic33-header__inner{

        grid-template-columns:
            145px
            minmax(590px,1fr)
            minmax(370px,450px);

        column-gap:16px;

    }


    .ic33-header__logo img{

        height:88px;

    }


    .ic33-menu{

        gap:clamp(10px,1.15vw,20px);

        justify-content:space-between;

    }


    .ic33-menu > li > a{

        font-size:clamp(14px,1.05vw,16px);

    }


    .ic33-header__actions{

        gap:6px;

    }


    .ic33-header__search{

        height:48px;

    }


    .ic33-header__search-input{

        font-size:14px;

    }


    .ic33-header__search-input::placeholder{

        font-size:14px;

    }


    .ic33-header__account,
    .ic33-header__cart{

        flex:0 0 42px;

        width:42px;

        height:42px;

    }


    .ic33-header__account svg,
    .ic33-header__cart svg{

        width:26px;

        height:26px;

    }

}


/* =============================================================================
   ZONE DE SÉCURITÉ AVANT TABLETTE
   -----------------------------------------------------------------------------
   Si l'écran devient trop petit pour afficher correctement :
   logo + menu complet + recherche + compte + panier,
   on passe au comportement tablette.
============================================================================= */

@media (max-width:1100px){

    .ic33-header{

        height:92px;

    }


    body{

        padding-top:92px;

    }


    .ic33-header .ic33-container{

        width:calc(100% - 32px);

        max-width:none;

    }


    .ic33-header__inner{

        grid-template-columns:
            auto
            minmax(0,1fr)
            auto;

        column-gap:16px;

    }


    .ic33-header__navigation{

        display:none;

    }


    .ic33-header__search{

        display:none;

    }


    .ic33-mobile-toggle{

        display:flex;

        align-items:center;

        justify-content:center;

        width:48px;

        height:48px;

        margin:0;

        padding:0;

        border:none;

        background:none;

        cursor:pointer;

    }

}


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

@media (max-width:768px){

    .ic33-header{

        height:82px;

    }


    body{

        padding-top:82px;

    }


    .ic33-header .ic33-container{

        width:calc(100% - 24px);

    }


    .ic33-header__logo img{

        height:70px;

    }


    .ic33-header__actions{

        gap:4px;

    }


    .ic33-header__account,
    .ic33-header__cart{

        flex:0 0 46px;

        width:46px;

        height:46px;

    }


    .ic33-header__account svg,
    .ic33-header__cart svg{

        width:26px;

        height:26px;

    }


    .ic33-cart-count{

        top:-4px;

        right:-4px;

        min-width:20px;

        height:20px;

        padding:0 5px;

        font-size:11px;

    }

}


/* =============================================================================
   PETITS MOBILES
============================================================================= */

@media (max-width:480px){

    .ic33-header .ic33-container{

        width:calc(100% - 16px);

    }


    .ic33-header__inner{

        column-gap:8px;

    }


    .ic33-header__logo img{

        height:64px;

    }


    .ic33-header__account,
    .ic33-header__cart{

        flex:0 0 42px;

        width:42px;

        height:42px;

    }


    .ic33-header__account svg,
    .ic33-header__cart svg{

        width:24px;

        height:24px;

    }

}


/* =============================================================================
   ANIMATIONS
============================================================================= */

.ic33-header{

    will-change:
        height,
        background,
        box-shadow,
        backdrop-filter;

}


.ic33-header__logo img{

    will-change:
        height,
        transform;

}


.ic33-menu > li > a{

    will-change:
        color;

}


.ic33-header__search{

    will-change:
        border-color,
        box-shadow;

}


.ic33-header__account,
.ic33-header__cart{

    will-change:
        transform,
        color;

}


/* =============================================================================
   SÉLECTION
============================================================================= */

.ic33-menu > li > a::selection,
.ic33-header__search-input::selection{

    background:#0057A4;

    color:#FFFFFF;

}


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

.ic33-menu > li > a:focus-visible,
.ic33-header__account:focus-visible,
.ic33-header__cart:focus-visible,
.ic33-header__search-input:focus-visible{

    outline:2px solid #0057A4;

    outline-offset:3px;

}


/* =============================================================================
   CORRECTIFS
============================================================================= */

.ic33-menu,
.ic33-header__actions,
.ic33-header__navigation{

    min-width:0;

}


.ic33-header__search{

    min-width:0;

}


.ic33-header__search-input{

    min-width:0;

}


.ic33-header__logo img{

    max-width:none;

}


/* =============================================================================
   IMPRESSION
============================================================================= */

@media print{

    .ic33-header{

        display:none !important;

    }

}


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

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

    .ic33-header,
    .ic33-header *,
    .ic33-menu > li > a,
    .ic33-header__logo img{

        transition:none !important;

        animation:none !important;

    }

}


/* =============================================================================
   FIN DU FICHIER
============================================================================= */