/* =============================================================================
   INSTALL COMMUNICATION 33
   AVIS CLIENTS
=============================================================================*/


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

.ic33-avis{

    position:relative;

    padding:140px 0;

    background:#F7F9FC;

}


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

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

    width:min(2200px,96vw);

    margin:0 auto;

    padding:0;

}


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

.ic33-avis-header{

    max-width:960px;

    margin:0 auto 90px;

    text-align:center;

}

.ic33-avis-subtitle{

    display:inline-block;

    margin-bottom:18px;

    color:#005FD6;

    font-size:14px;

    font-weight:700;

    letter-spacing:3px;

    text-transform:uppercase;

}

.ic33-avis-title{

    margin:0;

    color:#081A2F;

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

    font-weight:900;

    line-height:1.1;

    text-transform:uppercase;

    letter-spacing:1px;

}

.ic33-avis-intro{

    max-width:760px;

    margin:30px auto 0;

    color:#5D6778;

    font-size:19px;

    line-height:1.9;

}


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

.ic33-avis-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:50px;

    align-items:stretch;

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

.ic33-avis-card{

    position:relative;

    display:flex;

    flex-direction:column;

    height:100%;

    padding:50px;

    background:#FFFFFF;

    border-radius:24px;

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

    overflow:hidden;

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

}

.ic33-avis-card:hover{

    transform:translateY(-8px);

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

}


/* =============================================================================
   ICÔNE
=============================================================================*/

.ic33-avis-icon{

    display:flex;

    align-items:center;

    justify-content:center;

    width:82px;

    height:82px;

    margin-bottom:30px;

    border-radius:50%;

    background:#F4F8FC;

    color:#005FD6;

    font-size:34px;

}


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

.ic33-avis-card-title{

    margin:0 0 20px;

    color:#081A2F;

    font-size:34px;

    font-weight:900;

    line-height:1.2;

}


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

.ic33-avis-card-text{

    flex:1;

    margin:0;

    color:#5D6778;

    font-size:18px;

    line-height:1.9;

}


/* =============================================================================
   SÉPARATEUR
=============================================================================*/

.ic33-avis-card::before{

    content:"";

    display:block;

    width:90px;

    height:4px;

    margin-bottom:34px;

    border-radius:999px;

    background:#F58220;

}


/* =============================================================================
   ÉTOILES
=============================================================================*/

.ic33-avis-stars{

    display:flex;

    gap:8px;

    margin-top:34px;

    color:#FFC107;

    font-size:28px;

}


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

.ic33-avis-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    align-self:flex-start;

    margin-top:28px;

    padding:12px 20px;

    border-radius:999px;

    background:#EAF7EE;

    color:#168A45;

    font-size:14px;

    font-weight:700;

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

.ic33-avis-footer{

    display:flex;

    justify-content:center;

    margin-top:90px;

}

.ic33-avis-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-avis-button:hover{

    background:#005FD6;

    color:#FFFFFF;

    border-color:#005FD6;

    transform:translateY(-3px);

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

}

.ic33-avis-button .ic33-arrow{

    transition:transform .30s ease;

}

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

    transform:translateX(6px);

}


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

@media (max-width:1200px){

    .ic33-avis-grid{

        grid-template-columns:1fr;

        gap:36px;

    }

}

@media (max-width:768px){

    .ic33-avis{

        padding:90px 0;

    }

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

        width:92%;

    }

    .ic33-avis-header{

        margin-bottom:70px;

    }

    .ic33-avis-card{

        padding:36px;

    }

    .ic33-avis-card-title{

        font-size:28px;

    }

    .ic33-avis-card-text{

        font-size:16px;

    }

    .ic33-avis-button{

        width:100%;

    }

}

@media (max-width:480px){

    .ic33-avis-title{

        font-size:36px;

    }

    .ic33-avis-intro{

        font-size:16px;

    }

    .ic33-avis-icon{

        width:70px;

        height:70px;

        font-size:28px;

    }

}


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

.ic33-avis-card{

    will-change:transform;

}