/* =============================================================================
   INSTALL COMMUNICATION 33
   NOS UNIVERS
   VERSION 4.0
=============================================================================*/


/* =============================================================================
   SECTION
=============================================================================*/

.ic33-univers{

    position:relative;

    padding:120px 0 140px;

    background:#f7f9fc;

    overflow:hidden;

}


/* =============================================================================
   CONTENEURS
=============================================================================*/

.ic33-univers > .ic33-container,
.ic33-univers > .ic33-container-wide{

    width:min(2200px,96vw);

    margin:0 auto;

    padding:0;

}


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

.ic33-section-title{

    max-width:900px;

    margin:0 auto 90px;

    text-align:center;

}

.ic33-section-subtitle{

    display:inline-block;

    margin-bottom:18px;

    color:#005fd6;

    font-size:14px;

    font-weight:700;

    letter-spacing:3px;

    text-transform:uppercase;

}

.ic33-section-title h2{

    margin:0;

    color:#081a2f;

    font-size:clamp(46px,4vw,64px);

    font-weight:900;

    line-height:1.1;

}

.ic33-section-title p{

    max-width:760px;

    margin:28px auto 0;

    color:#5d6778;

    font-size:19px;

    line-height:1.9;

}


/* =============================================================================
   GRILLE
=============================================================================*/

.ic33-univers-grid{

    display:grid;

    grid-template-columns:repeat(4,minmax(420px,1fr));

    gap:42px;

    width:100%;

    align-items:stretch;

}
/* =============================================================================
   CARTES
=============================================================================*/

.ic33-univers-card{

    position:relative;

    display:flex;

    flex-direction:column;

    width:100%;

    height:100%;

    overflow:hidden;

    border-radius:24px;

    background:#081a2f;

    text-decoration:none;

    box-shadow:0 18px 50px rgba(8,26,47,.10);

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.ic33-univers-card:hover{

    transform:translateY(-10px);

    box-shadow:0 30px 70px rgba(8,26,47,.18);

}


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

.ic33-univers-card__image{

    position:relative;

    overflow:hidden;

    background:#081a2f;

    line-height:0;

}

.ic33-univers-card__image img{

    display:block;

    width:100%;

    height:auto;

    transition:transform .6s ease;

}

.ic33-univers-card:hover .ic33-univers-card__image img{

    transform:scale(1.04);

}

.ic33-univers-card__image::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        to top,
        rgba(8,26,47,.22),
        rgba(8,26,47,0) 60%
    );

    pointer-events:none;

}


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

.ic33-univers-card__content{

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    align-items:center;

    flex:1;

    padding:38px 34px;

    text-align:center;

    background:#081a2f;

}

.ic33-univers-card__content h3{

    margin:0;

    color:#ffffff;

    font-size:30px;

    font-weight:800;

    line-height:1.25;

    text-transform:uppercase;

    text-align:center;

}

.ic33-univers-card__content h3::after{

    content:"";

    display:block;

    width:70px;

    height:3px;

    margin:20px auto 0;

    border-radius:999px;

    background:#ff7a00;

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

.ic33-univers-card__content p{

    flex:1;

    display:flex;

    align-items:center;

    justify-content:center;

    width:100%;

    margin:28px 0 36px;

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

    font-size:17px;

    font-weight:400;

    line-height:1.85;

    text-align:center;

}


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

.ic33-univers-card__button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    margin-top:auto;

    padding:15px 28px;

    border:2px solid #ff7a00;

    border-radius:999px;

    color:#ff7a00;

    font-size:15px;

    font-weight:700;

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

}

.ic33-arrow{

    transition:transform .30s ease;

}

.ic33-univers-card:hover .ic33-univers-card__button{

    background:#ff7a00;

    color:#ffffff;

}

.ic33-univers-card:hover .ic33-arrow{

    transform:translateX(6px);

}


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

.ic33-univers-card:focus-visible{

    outline:none;

    box-shadow:
        0 0 0 4px rgba(0,95,214,.15),
        0 30px 70px rgba(8,26,47,.20);

}


/* =============================================================================
   RESPONSIVE
=============================================================================*/

@media (max-width:1850px){

    .ic33-univers-grid{

        grid-template-columns:repeat(4,1fr);

        gap:34px;

    }

}

@media (max-width:1450px){

    .ic33-univers-grid{

        grid-template-columns:repeat(2,1fr);

        gap:34px;

    }

}

@media (max-width:768px){

    .ic33-univers{

        padding:90px 0;

    }

    .ic33-univers > .ic33-container,
    .ic33-univers > .ic33-container-wide{

        width:92%;

    }

    .ic33-univers-grid{

        grid-template-columns:1fr;

        gap:28px;

    }

    .ic33-univers-card__content{

        padding:28px;

    }

    .ic33-univers-card__content h3{

        font-size:24px;

    }

    .ic33-univers-card__content p{

        font-size:15px;

        line-height:1.8;

    }

}

@media (max-width:480px){

    .ic33-section-title h2{

        font-size:34px;

    }

    .ic33-section-title p{

        font-size:16px;

    }

}


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

.ic33-univers-card{

    will-change:transform;

}

.ic33-univers-card img{

    display:block;

    width:100%;

    height:auto;

    backface-visibility:hidden;

    -webkit-backface-visibility:hidden;

}