/* =============================================================================
   INSTALL COMMUNICATION 33
   NOS MARQUES PARTENAIRES
   VERSION 2.0
=============================================================================*/


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

.ic33-marques{

    position:relative;

    padding:140px 0;

    background:#FFFFFF;

}


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

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

    width:min(2200px,96vw);

    margin:0 auto;

    padding:0;

}


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

.ic33-marques-header{

    max-width:980px;

    margin:0 auto 90px;

    text-align:center;

}


/* =============================================================================
   PETIT TITRE BLEU
=============================================================================*/

.ic33-marques-subtitle{

    display:inline-block;

    margin-bottom:18px;

    color:#005FD6;

    font-size:14px;

    font-weight:700;

    letter-spacing:3px;

    text-transform:uppercase;

}


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

.ic33-marques-title{

    margin:0;

    color:#081A2F;

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

    font-weight:900;

    line-height:1.1;

    text-transform:uppercase;

    letter-spacing:1px;

}


/* =============================================================================
   TEXTE
=============================================================================*/

.ic33-marques-intro{

    max-width:820px;

    margin:32px auto 0;

    color:#5D6778;

    font-size:19px;

    line-height:1.9;

}


/* =============================================================================
   BLOC CATÉGORIE
=============================================================================*/

.ic33-marques-category{

    margin-bottom:75px;

}

.ic33-marques-category:last-child{

    margin-bottom:0;

}

.ic33-marques-category-header{

    margin-bottom:34px;

}


/* =============================================================================
   TITRE CATÉGORIE
=============================================================================*/

.ic33-marques-category-title{

    display:inline-block;

    margin:0;

    color:#081A2F;

    font-size:30px;

    font-weight:900;

    line-height:1.2;

    text-transform:uppercase;

    letter-spacing:1px;

}


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

.ic33-marques-category-line{

    display:block;

    width:95px;

    height:4px;

    margin-top:14px;

    border-radius:999px;

    background:#F58220;

}


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

.ic33-marques-grid{

    display:grid;

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

    gap:34px;

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

.ic33-marque-card{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:210px;

    padding:40px;

    background:#FFFFFF;

    border:none;

    border-radius:24px;

    overflow:hidden;

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

}

.ic33-marque-card:hover{

    transform:translateY(-8px);

    border-color:#005FD6;

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

}


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

.ic33-marque-link{

    display:flex;

    align-items:center;

    justify-content:center;

    width:100%;

    height:100%;

    text-decoration:none;

}


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

.ic33-marque-logo{

    display:flex;

    align-items:center;

    justify-content:center;

    width:100%;

    height:100%;

}


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

.ic33-marque-logo img{

    display:block;

    width:auto;

    max-width:80%;

    max-height:95px;

    transition:
        transform .35s ease,
        filter .35s ease;

}

.ic33-marque-card:hover img{

    transform:scale(1.06);

}


/* =============================================================================
   REFLET
=============================================================================*/

.ic33-marque-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        135deg,
        rgba(0,95,214,.02),
        rgba(245,130,32,.03)
    );

    opacity:0;

    transition:opacity .35s ease;

}

.ic33-marque-card:hover::before{

    opacity:1;

}


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

.ic33-marque-card::after{

    content:"";

    position:absolute;

    top:-120%;

    left:-30%;

    width:45%;

    height:350%;

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

    transform:rotate(22deg);

    transition:left .8s ease;

}

.ic33-marque-card:hover::after{

    left:140%;

}


/* =============================================================================
   FOCUS
=============================================================================*/

.ic33-marque-link:focus-visible{

    outline:none;

}

.ic33-marque-link:focus-visible .ic33-marque-card{

    border-color:#005FD6;

    box-shadow:
        0 0 0 4px rgba(0,95,214,.18),
        0 18px 40px rgba(8,26,47,.12);

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

.ic33-marques-footer{

    display:flex;

    justify-content:center;

    margin-top:90px;

}

.ic33-marques-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    min-height:58px;

    padding:0 38px;

    border:2px solid #005FD6;

    border-radius:999px;

    background:transparent;

    color:#005FD6;

    font-size:16px;

    font-weight:700;

    text-decoration:none;

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

}

.ic33-marques-button:hover{

    background:#005FD6;

    color:#FFFFFF;

    border-color:#005FD6;

    transform:translateY(-3px);

    box-shadow:0 26px 60px rgba(8,26,47,.14);

}

.ic33-marques-button .ic33-arrow{

    transition:transform .30s ease;

}

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

    transform:translateX(6px);

}


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

@media (max-width:1600px){

    .ic33-marques-grid{

        gap:28px;

    }

}

@media (max-width:1200px){

    .ic33-marques-grid{

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

        gap:28px;

    }

}

@media (max-width:768px){

    .ic33-marques{

        padding:90px 0;

    }

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

        width:92%;

    }

    .ic33-marques-header{

        margin-bottom:70px;

    }

    .ic33-marques-category{

        margin-bottom:55px;

    }

    .ic33-marques-grid{

        grid-template-columns:1fr;

        gap:24px;

    }

    .ic33-marque-card{

        min-height:170px;

        padding:30px;

    }

    .ic33-marque-logo img{

        max-width:75%;

        max-height:75px;

    }

    .ic33-marques-button{

        width:100%;

    }

}

@media (max-width:480px){

    .ic33-marques-title{

        font-size:36px;

    }

    .ic33-marques-category-title{

        font-size:24px;

    }

    .ic33-marques-intro{

        font-size:16px;

    }

}


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

.ic33-marque-card{

    will-change:transform;

}

.ic33-marque-logo img{

    display:block;

    image-rendering:auto;

    backface-visibility:hidden;

    -webkit-backface-visibility:hidden;

}