/* =============================================================================
   INSTALL COMMUNICATION 33
   HERO PREMIUM V7
=============================================================================*/


/* =============================================================================
   HERO
=============================================================================*/

.ic33-hero{

    position:relative;

    width:100%;

    overflow:hidden;

    background:#081321;

    isolation:isolate;

}


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

.ic33-hero__media{

    position:relative;

    width:100%;

    line-height:0;

}


.ic33-hero__image{

    display:block;

    width:100%;

    height:auto;

    user-select:none;

    -webkit-user-drag:none;

    backface-visibility:hidden;

    -webkit-backface-visibility:hidden;

}


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

.ic33-hero__overlay{

    position:absolute;

    inset:0;

    z-index:5;

    pointer-events:none;

    background:linear-gradient(
        90deg,
        rgba(8,19,33,.24) 0%,
        rgba(8,19,33,.15) 22%,
        rgba(8,19,33,.08) 42%,
        rgba(8,19,33,0) 66%
    );

}


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

.ic33-hero__content{

    position:absolute;

    z-index:20;

    top:50%;

    left:4%;

    transform:translateY(-50%);

    width:min(680px,38vw);

    max-width:680px;

    animation:ic33HeroFade .8s ease forwards;

}
/* =============================================================================
   SOUS-TITRE
=============================================================================*/

.ic33-hero__subtitle{

    display:block;

    margin:0 0 24px;

    color:#005FD6;

    font-size:18px;

    font-weight:700;

    letter-spacing:2px;

    line-height:1.3;

    text-transform:uppercase;

}


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

.ic33-hero__title{

    margin:0;

    color:#FFFFFF;

    font-size:clamp(58px,4.8vw,88px);

    font-weight:900;

    line-height:.95;

    letter-spacing:-2px;

    text-transform:uppercase;

    text-shadow:
        0 6px 20px rgba(0,0,0,.35);

}


/* =============================================================================
   DESCRIPTION
=============================================================================*/

.ic33-hero__description{

    margin:30px 0 42px;

    max-width:560px;

    color:#FFFFFF;

    font-size:20px;

    line-height:1.75;

    text-shadow:
        0 2px 8px rgba(0,0,0,.35);

}


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

.ic33-hero__actions{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:18px;

    margin-bottom:38px;

}


/* =============================================================================
   BOUTONS
=============================================================================*/

.ic33-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:240px;

    height:62px;

    padding:0 36px;

    border:none;

    border-radius:10px;

    text-decoration:none;

    text-transform:uppercase;

    font-size:15px;

    font-weight:700;

    letter-spacing:.5px;

    cursor:pointer;

    transition:
        transform .25s ease,
        background-color .25s ease,
        box-shadow .25s ease;

}


.ic33-button:hover{

    transform:translateY(-3px);

}


.ic33-button--primary{

    background:#F58220;

    color:#FFFFFF;

    box-shadow:
        0 16px 36px rgba(245,130,32,.28);

}


.ic33-button--primary:hover{

    background:#E97211;

}


.ic33-button--secondary{

    background:#005FD6;

    color:#FFFFFF;

    box-shadow:
        0 16px 36px rgba(0,95,214,.28);

}


.ic33-button--secondary:hover{

    background:#004DB1;

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

.ic33-hero__search{

    display:grid;

    grid-template-columns:1fr 210px;

    width:780px;

    max-width:100%;

    background:#FFFFFF;

    border-radius:10px;

    overflow:hidden;

    box-shadow:
        0 18px 45px rgba(0,0,0,.20);

}


.ic33-hero__search-input{

    width:100%;

    height:66px;

    padding:0 28px;

    border:none;

    outline:none;

    background:#FFFFFF;

    color:#1D2430;

    font-size:16px;

}


.ic33-hero__search-input::placeholder{

    color:#97A2B1;

}


.ic33-hero__search-button{

    display:flex;

    align-items:center;

    justify-content:center;

    border:none;

    cursor:pointer;

    background:#005FD6;

    color:#FFFFFF;

    font-size:15px;

    font-weight:700;

    letter-spacing:.5px;

    text-transform:uppercase;

    transition:background-color .25s ease;

}


.ic33-hero__search-button:hover{

    background:#004DB1;

}


/* =============================================================================
   ÉCRANS ULTRA LARGES
=============================================================================*/

@media (min-width:1921px){

    .ic33-hero__content{

        left:4%;

        width:720px;

        max-width:720px;

    }

    .ic33-hero__title{

        font-size:92px;

    }

    .ic33-hero__description{

        max-width:620px;

        font-size:21px;

    }

}


/* =============================================================================
   DESKTOP 1600
=============================================================================*/

@media (max-width:1600px){

    .ic33-hero__content{

        left:3%;

        width:min(620px,42vw);

    }

    .ic33-hero__title{

        font-size:72px;

    }

}


/* =============================================================================
   LAPTOP
=============================================================================*/

@media (max-width:1400px){

    .ic33-hero__content{

        left:40px;

        width:min(560px,46vw);

    }

    .ic33-hero__title{

        font-size:64px;

    }

    .ic33-hero__description{

        font-size:18px;

    }

    .ic33-button{

        min-width:220px;

    }

}
/* =============================================================================
   TABLETTE HORIZONTALE
=============================================================================*/

@media (max-width:1100px){

    .ic33-hero__content{

        left:35px;

        width:520px;

    }

    .ic33-hero__subtitle{

        font-size:16px;

    }

    .ic33-hero__title{

        font-size:56px;

    }

    .ic33-hero__description{

        font-size:17px;

        line-height:1.7;

    }

    .ic33-hero__actions{

        flex-wrap:wrap;

    }

    .ic33-button{

        min-width:210px;

    }

    .ic33-hero__search{

        width:100%;

        grid-template-columns:1fr 190px;

    }

}


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

@media (max-width:900px){

    .ic33-hero__content{

        left:30px;

        width:460px;

    }

    .ic33-hero__title{

        font-size:48px;

    }

    .ic33-hero__description{

        font-size:16px;

    }

}


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

@media (max-width:768px){

    .ic33-hero{

        position:relative;

        min-height:760px;

    }

    .ic33-hero__media{

        position:absolute;

        inset:0;

    }

    .ic33-hero__image{

        width:100%;

        height:100%;

        object-fit:cover;

        object-position:72% center;

    }

    .ic33-hero__overlay{

        background:linear-gradient(

            180deg,

            rgba(8,19,33,.82) 0%,

            rgba(8,19,33,.60) 38%,

            rgba(8,19,33,.25) 100%

        );

    }

    .ic33-hero__content{

        position:absolute;

        top:35px;

        left:20px;

        right:20px;

        width:auto;

        max-width:none;

        transform:none;

    }

    .ic33-hero__subtitle{

        margin-bottom:18px;

        font-size:14px;

        letter-spacing:1.5px;

    }

    .ic33-hero__title{

        font-size:42px;

        line-height:1.05;

        letter-spacing:-1px;

    }

    .ic33-hero__description{

        margin:22px 0 30px;

        max-width:100%;

        font-size:17px;

        line-height:1.7;

    }

    .ic33-hero__actions{

        flex-direction:column;

        align-items:stretch;

        gap:14px;

        margin-bottom:24px;

    }

    .ic33-button{

        width:100%;

        min-width:0;

        height:58px;

    }

    .ic33-hero__search{

        width:100%;

        grid-template-columns:1fr;

        border-radius:10px;

    }

    .ic33-hero__search-input{

        height:58px;

        font-size:16px;

    }

    .ic33-hero__search-button{

        height:58px;

        font-size:14px;

    }

}
/* =============================================================================
   PETITS SMARTPHONES
=============================================================================*/

@media (max-width:480px){

    .ic33-hero{

        min-height:700px;

    }

    .ic33-hero__image{

        object-position:74% center;

    }

    .ic33-hero__content{

        top:25px;

        left:16px;

        right:16px;

    }

    .ic33-hero__subtitle{

        font-size:13px;

        margin-bottom:16px;

    }

    .ic33-hero__title{

        font-size:34px;

        line-height:1.08;

    }

    .ic33-hero__description{

        margin:18px 0 24px;

        font-size:15px;

        line-height:1.65;

    }

    .ic33-button{

        height:54px;

        font-size:14px;

    }

    .ic33-hero__search-input{

        height:54px;

        padding:0 20px;

        font-size:15px;

    }

    .ic33-hero__search-button{

        height:54px;

        font-size:13px;

    }

}


/* =============================================================================
   ANIMATION
=============================================================================*/

/*
|--------------------------------------------------------------------------
| IMPORTANT
|
| Le Hero est maintenant en pleine largeur sur la page d'accueil.
| On conserve donc le translateY(-50%) pendant toute l'animation.
|--------------------------------------------------------------------------
*/

.ic33-hero__content{

    animation:ic33HeroFade .8s ease forwards;

}

@keyframes ic33HeroFade{

    from{

        opacity:0;

        transform:translateY(calc(-50% + 20px));

    }

    to{

        opacity:1;

        transform:translateY(-50%);

    }

}


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

.ic33-button:focus-visible,
.ic33-hero__search-input:focus,
.ic33-hero__search-button:focus{

    outline:2px solid #005FD6;

    outline-offset:2px;

}


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

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

    .ic33-hero__content{

        animation:none;

    }

    .ic33-button{

        transition:none;

    }

}


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

@media print{

    .ic33-hero{

        display:none;

    }

}


/* =============================================================================
   OPTIMISATIONS
=============================================================================*/

.ic33-button{

    will-change:transform;

}


/* =============================================================================
   FIN HERO.CSS
=============================================================================*/