/* =============================================================================
   INSTALL COMMUNICATION 33
   NOS RÉALISATIONS
=============================================================================*/


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

.ic33-realisations{

    position:relative;

    padding:120px 0 140px;

    background:#F7F9FC;

}


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

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

    width:min(2200px,96vw);

    margin:0 auto;

    padding:0;

}


/* =============================================================================
   EN-TÊTE
=============================================================================*/

.ic33-realisations-header{

    max-width:900px;

    margin:0 auto 90px;

    text-align:center;

}

.ic33-realisations-subtitle{

    margin-bottom:18px;

    color:#005FD6;

    font-size:14px;

    font-weight:700;

    letter-spacing:3px;

    text-transform:uppercase;

}

.ic33-realisations-title{

    margin:0;

    color:#081A2F;

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

    font-weight:900;

    line-height:1.1;

}

.ic33-realisations-intro{

    max-width:760px;

    margin:28px auto 0;

    color:#5D6778;

    font-size:19px;

    line-height:1.8;

}


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

.ic33-realisations-grid{

    display:grid;

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

    gap:50px;

    align-items:stretch;

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

.ic33-realisation-card{

    display:flex;

    flex-direction:column;

    height:100%;

    overflow:hidden;

    background:#FFF;

    border-radius:24px;

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

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

}

.ic33-realisation-card:hover{

    transform:translateY(-8px);

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

}


/* =============================================================================
   LIEN
=============================================================================*/

.ic33-realisation-link{

    display:flex;

    flex-direction:column;

    flex:1;

    text-decoration:none;

    color:inherit;

}


/* =============================================================================
   PHOTO
=============================================================================*/

.ic33-realisation-image{

    position:relative;

    width:100%;

    aspect-ratio:16 / 10;

    overflow:hidden;

    background:#ffffff;

    line-height:0;

}

.ic33-realisation-image img{

    display:block;

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

    transition:transform .45s ease;

}

.ic33-realisation-card:hover .ic33-realisation-image img{

    transform:scale(1.04);

}


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

.ic33-realisation-badge{

    position:absolute;

    top:24px;

    left:24px;

    z-index:10;

    padding:10px 22px;

    border-radius:999px;

    background:#005FD6;

    color:#FFFFFF;

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

}


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

.ic33-realisation-content{

    display:flex;

    flex-direction:column;

    flex:1;

    padding:28px 34px 34px;

}


/* =============================================================================
   BARRE ORANGE
=============================================================================*/

.ic33-realisation-content::before{

    content:"";

    display:block;

    width:70px;

    height:4px;

    margin-bottom:22px;

    border-radius:999px;

    background:#F58220;

}


/* =============================================================================
   CLIENT
=============================================================================*/

.ic33-realisation-client{

    margin-bottom:10px;

    color:#005FD6;

    font-size:13px;

    font-weight:800;

    letter-spacing:2px;

    text-transform:uppercase;

}


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

.ic33-realisation-title{

    margin:0 0 16px;

    color:#081A2F;

    font-size:34px;

    font-weight:900;

    line-height:1.15;

}


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

.ic33-realisation-description{

    flex:1;

    margin:0;

    color:#5D6778;

    font-size:17px;

    line-height:1.8;

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

.ic33-realisation-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    align-self:flex-start;

    gap:12px;

    margin-top:auto;

    min-height:56px;

    padding:0 32px;

    border:2px solid #F58220;

    border-radius:999px;

    background:transparent;

    color:#F58220;

    font-size:16px;

    font-weight:700;

    text-decoration:none;

    transition:
        all .30s ease;

}

.ic33-realisation-button:hover{

    background:#F58220;

    color:#FFFFFF;

    transform:translateY(-3px);

    box-shadow:0 14px 30px rgba(245,130,32,.25);

}

.ic33-realisation-button .ic33-arrow{

    transition:transform .30s ease;

}

.ic33-realisation-button:hover .ic33-arrow{

    transform:translateX(6px);

}


/* =============================================================================
   FOOTER
=============================================================================*/

.ic33-realisations-footer{

    display:flex;

    justify-content:center;

    margin-top:90px;

}

.ic33-realisations-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    min-height:60px;

    padding:0 42px;

    border:2px solid #005FD6;

    border-radius:999px;

    background:transparent;

    color:#005FD6;

    font-size:17px;

    font-weight:700;

    text-decoration:none;

    transition:all .30s ease;

}

.ic33-realisations-button:hover{

    background:#005FD6;

    color:#FFFFFF;

    transform:translateY(-3px);

    box-shadow:0 14px 30px rgba(0,95,214,.22);

}

.ic33-realisations-button .ic33-arrow{

    transition:transform .30s ease;

}

.ic33-realisations-button:hover .ic33-arrow{

    transform:translateX(6px);

}


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

@media (max-width:1600px){

    .ic33-realisations-grid{

        gap:40px;

    }

}

@media (max-width:1200px){

    .ic33-realisations-grid{

        grid-template-columns:1fr;

    }

}

@media (max-width:768px){

    .ic33-realisations{

        padding:90px 0;

    }

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

        width:92%;

    }

    .ic33-realisation-content{

        padding:24px;

    }

    .ic33-realisation-title{

        font-size:28px;

    }

    .ic33-realisation-description{

        font-size:16px;

    }

    .ic33-realisations-button{

        width:100%;

    }

}

@media (max-width:480px){

    .ic33-realisations-title{

        font-size:36px;

    }

    .ic33-realisations-intro{

        font-size:16px;

    }

}


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

.ic33-realisation-image img{

    user-select:none;

    -webkit-user-drag:none;

}

.ic33-realisation-card{

    will-change:transform;

}