/* ===================================== */
/* SINGLE AGENCE SYNEX */
/* ===================================== */

/* Hero Section */
.synex-agence-hero {
    position: relative;
    width: 100%;
    height: 40vh;
    min-height: 400px;
    overflow: hidden;
    margin: 0;
    padding: 0;

    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    & -content {
        position: absolute;
        left: var(--spacing-xxl);
        bottom: var(--spacing-xxl);
        z-index: 2;
    }

    & -title {
        color: var(--synex-white);
        font-size: clamp(2rem, 5vw, 4rem);
        font-weight: 900;
        text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
        margin: 0;
        line-height: 1.2;

        span {
            font-weight: 700;
            font-style: italic;
        }
    }
}

/* Container principal */
.synex-agence-container {
    max-width: var(--bp-large);
    margin: 0 auto;
}

/* Sections */
.synex-agence-section {
    margin-bottom: var(--spacing-xxl);

    &.synex-description-image {
        display: flex;
        padding: var(--spacing-xxl) 0;
        align-items: center;
        @media screen and (max-width: 980px){
            flex-direction: column-reverse;
        }
    }

    &.synex-parallax-2 {
        background: var(--synex-blue);
        padding: var(--spacing-xxl) var(--spacing-lg);
        margin: 0 0 var(--spacing-xxl) 0;
        width: 100vw;
        position: relative;
        left: 50%;
        right: 50%;
        margin-left: -50vw;
        margin-right: -50vw;
        overflow: hidden;

        .synex-services-container {
            max-width: var(--bp-large);
            margin: 0 auto;
        }

        h2 {
            font-family: var(--gvid-hsah66uu5h) !important;
            font-weight: 600;
            text-transform: uppercase;
            color: #ffffff !important;
            font-size: var(--gvid-xemqocnda4);
            text-align: center;
        }
    }

    &.synex-contact-texte {
        display: grid;
        grid-template-columns: 35% 65%;
        gap: var(--spacing-xxl);
        padding: var(--spacing-xxl) var(--spacing-lg);
        align-items: start;
    }
}

/* Description et Image intérieur */
.synex-description {
    font-size: var(--font-base);
    line-height: 1.6;
    color: var(--synex-black);
    width: 75%;
    margin-right: 30px;
    @media screen and (max-width: 980px){
        margin-right: 0;
        width: 100%;
    }
    h3 {
        color: var(--synex-blue);
        font-size: var(--font-xl);
        margin-bottom: var(--spacing-lg);
    }
}

.synex-image-interieur {
    width: 50%;
    @media screen and (max-width: 980px){
        width: 100%;
    }
    img {
        width: 100%;
        height: auto;
        border-radius: var(--radius-small);
    }
}

/* Header des missions */
.synex-missions-header {
    h2 {
        color: var(--synex-white);
        font-size: var(--font-3xl);
        text-align: center;
        margin-bottom: var(--spacing-xxl);
        font-weight: bold;
    }
}

/* Services Container */
.synex-services-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
    max-width: var(--bp-large);
    margin: 0 auto;
}

.synex-service-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background: var(--synex-white);
    border-radius: var(--radius-medium);
    text-decoration: none;
    color: var(--synex-blue);
    transition: all var(--transition-fast);

    &:hover {
        background: var(--synex-brown);
        color: var(--synex-white);
        transform: translateY(-5px);
    }
}

.synex-service-icon {
    width: 40px;
    height: 40px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}

.synex-service-content {
    .synex-service-title {
        font-weight: bold;
        font-size: var(--font-lg);
        margin: 0 0 var(--spacing-xs) 0;
    }

    .synex-service-description {
        font-size: var(--font-sm);
        line-height: 1.4;
    }
}

/* Section Reassurance */
.synex-reassurance-section {
    margin: var(--spacing-xxl) 0;
}

/* Grid Horaires + Localisation */
.synex-horaires-localisation-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: var(--spacing-lg);
    padding: var(--spacing-xxl) var(--spacing-lg);
    min-height: 600px;
}

/* Bloc Statut temps réel */
.statut-temps-reel-bloc {
    grid-column: 1;
    grid-row: 1;
    background: var(--synex-logo-gold1);
    border-radius: var(--radius-small);
    padding: var(--spacing-xl);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;

    .statut-icon {
        color: var(--synex-brown-dark);
        margin-bottom: var(--spacing-lg);
    }

    .statut-content {
        .heure-actuelle {
            font-size: var(--font-lg);
            color: var(--synex-white)!important;
            margin-bottom: var(--spacing-sm);
            font-weight: bold;
        }

        .statut-actuel {
            font-size: var(--font-xl);
            font-weight: bold;
            margin-bottom: var(--spacing-xs);

            &.ouvert {
                color: var(--synex-success);
            }

            &.ferme {
                color: var(--synex-danger);
            }
        }

        .temps-restant {
            font-size: var(--font-base);
            color: var(--synex-blue);
            font-weight: bold;
        }
    }
}

/* Bloc Horaires */
.horaires-bloc {
    grid-column: span 3;
    grid-row: 1;
    background: var(--synex-brown);
    border-radius: var(--radius-small);
    padding: var(--spacing-xl);
    color: var(--synex-white);

    h3 {
        color: var(--synex-white) !important;
        font-size: var(--font-2xl);
        margin-bottom: var(--spacing-xl);
        text-align: center;
        border-bottom: 2px solid var(--synex-white);
        padding-bottom: var(--spacing-lg);
    }
}

.horaires-grid {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.jour-row {
    display: grid;
    grid-template-columns: 100px 1fr;
    align-items: center;
    gap: var(--spacing-lg);
}

.jour-nom {
    font-weight: bold;
    color: var(--synex-white);
    font-size: var(--font-base);
    text-transform: capitalize;

    &.aujourd-hui {
        background: var(--synex-brown-dark);
        padding: var(--spacing-sm);
        border-radius: var(--radius-small);
        text-align: center;
    }
}

.horaires-timeline {
    position: relative;
    height: 40px;
    background: var(--synex-brown-dark);
    border-radius: var(--radius-small);
    overflow: visible;

    &.ferme {
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--synex-white);
        font-style: italic;
        font-size: var(--font-sm);
    }
}

.timeline-bar {
    position: absolute;
    height: 100%;
    border-radius: var(--radius-small);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--spacing-sm);
    color: var(--synex-white);
    font-size: var(--font-sm);
    font-weight: bold;

    &.matin,
    &.aprem {
        background: var(--synex-white);
        color: var(--synex-brown);
    }
}

/* Indicateur heure actuelle */
.heure-actuelle-indicator {
    position: absolute;
    top: -5px;
    width: 3px;
    height: 50px;
    background: var(--synex-white);
    border-radius: 2px;
    z-index: 10;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);

    &::before,
    &::after {
        content: '';
        position: absolute;
        width: 9px;
        height: 9px;
        background: var(--synex-white);
        border-radius: 50%;
        border: 2px solid var(--synex-brown);
        left: -3px;
    }

    &::before {
        top: -3px;
    }

    &::after {
        bottom: -3px;
    }
}

/* Bloc Carte */
.carte-bloc {
    grid-column: span 3;
    grid-row: 2;
    background: var(--synex-white);
    border-radius: var(--radius-small);
    overflow: hidden;

    #synex-map {
        width: 100%;
        height: 100%;
        min-height: 300px;
    }
}

/* Bloc Localisation */
.localisation-bloc {
    grid-column: 4;
    grid-row: 2;
    background: var(--synex-logo-gold1);
    border-radius: var(--radius-small);
    padding: var(--spacing-xl);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;

    .localisation-icon {
        color: var(--synex-brown-dark);
        margin-bottom: var(--spacing-lg);
    }

    .localisation-content {
        h4 {
            color: var(--synex-white) !important;
            font-size: var(--font-lg);
            margin-bottom: var(--spacing-md);
            font-weight: bold;
        }

        .adresse-complete {
            color: var(--synex-black);
            font-size: var(--font-base);
            line-height: 1.6;
        }
    }
}

/*CODE CSS POUR SECTION CONTACT AGENCE - VERSION 6 COLONNES*/

.synex-contact-section {
    padding: var(--spacing-xxl) var(--spacing-lg);
    background: var(--synex-white);

    h2 {
        text-align: center;
        margin-bottom: var(--spacing-xxl);
        font-size: var(--font-3xl);
        font-weight: bold;
    }
}

/* Grid 6 colonnes */
.synex-contact-grid-6 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 1fr;
    gap: var(--spacing-xl);
    max-width: var(--bp-large);
    margin: 0 auto;
    align-items: center;
}

/* Colonnes spécifiques */
.synex-contact-picto-mail {
    grid-column: span 1;
    display: flex;
    align-items: center;
}

.synex-contact-buttons-mail {
    grid-column: span 2;
}

.synex-contact-picto-phone {
    grid-column: span 1;
    margin-left: 50px;
    display: flex;
    align-items: center;
}

.synex-contact-buttons-phone {
    grid-column: span 2;
}

/* Pictos grandes */
.synex-contact-icon-large {
    width: 150px;
    height: 150px;
    /*background: var(--synex-blue);*/
    color: var(--synex-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 15 auto var(--spacing-md);
    transition: all var(--transition-fast);


    svg {
        width: 110px;
        height: 110px;
    }
}

.synex-contact-label {
    text-align: center;
    font-weight: bold;
    font-size: var(--font-base);
    color: var(--synex-blue);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Conteneurs de boutons */
.synex-contact-buttons-mail,
.synex-contact-buttons-phone {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    height: 100%;
    justify-content: center;
}

/* Boutons */
.synex-contact-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-medium);
    text-decoration: none;
    font-weight: bold;
    font-size: var(--font-base);
    transition: all var(--transition-fast);
    text-align: center;

    &.synex-contact-btn-primary {
        background: var(--synex-blue);
        color: var(--synex-white) !important;
        border: 1px solid var(--synex-blue);

        &:hover {
            background: var(--synex-white);
            color: var(--synex-blue-dark) !important;
            border: 1px solid var(--synex-blue-dark);
        }
    }

    &.synex-contact-btn-secondary {
        background: var(--synex-brown);
        color: var(--synex-white) !important;
        border: 1px solid var(--synex-brown);

        &:hover {
            color: var(--synex-brown-dark) !important;
            background: var(--synex-white);
            border: 1px solid var(--synex-brown-dark);
        }
    }

    &.synex-contact-btn-phone {
        background: var(--synex-blue);
        color: var(--synex-white) !important;
        border: 1px solid var(--synex-blue);

        &:hover {
            background: var(--synex-white);
            color: var(--synex-blue-dark) !important;
            border: 1px solid var(--synex-blue-dark);
        }
    }

    &.synex-contact-btn-phone-secondary {
        background: var(--synex-brown);
        color: var(--synex-white);

        &:hover {
            background: var(--synex-brown-dark);
            transform: translateY(-2px);
            box-shadow: var(--synex-shadow-medium);
            color: var(--synex-white);
        }
    }
}

/* Infos complémentaires */
.synex-contact-info,
.synex-no-data {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;

    small {
        color: var(--synex-gray);
        font-style: italic;
    }
}

.synex-contact-email-info {
    text-align: center;
    margin-top: var(--spacing-lg);

    small {
        color: var(--synex-gray);
        font-size: var(--font-sm);
    }
}

/* Responsive Design */
@media (max-width: 1024px) {
    .synex-contact-grid-6 {
        gap: var(--spacing-md);
    }

    .synex-contact-icon-large {
        width: 70px;
        height: 70px;

        svg {
            width: 50px;
            height: 50px;
        }
    }

    .synex-contact-btn {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: var(--font-sm);
    }
}

@media (max-width: 768px) {
    .synex-contact-section {
        padding: var(--spacing-xl) var(--spacing-sm);

        h2 {
            font-size: var(--font-2xl);
            margin-bottom: var(--spacing-xl);
        }
    }

    /* Passage en 2 lignes sur mobile */
    .synex-contact-grid-6 {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 1fr);
        gap: var(--spacing-md);
    }

    .synex-contact-picto-mail {
        grid-column: span 1;
        grid-row: 1;
    }

    .synex-contact-buttons-mail {
        grid-column: span 2;
        grid-row: 1;
    }

    .synex-contact-picto-phone {
        grid-column: span 1;
        grid-row: 2;
        margin-left: 0;
    }

    .synex-contact-buttons-phone {
        grid-column: span 2;
        grid-row: 2;
    }

    .synex-contact-icon-large {
        width: 60px;
        height: 60px;

        svg {
            width: 40px;
            height: 40px;
        }
    }

    .synex-contact-label {
        font-size: var(--font-sm);
    }

    .synex-contact-btn {
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: var(--font-sm);
    }
}

@media (max-width: 480px) {
    .synex-contact-section {
        padding: var(--spacing-lg) var(--spacing-xs);
    }

    /* Passage en colonne sur très petit écran */
    .synex-contact-grid-6 {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: var(--spacing-lg);
        text-align: center;
    }

    .synex-contact-picto-mail,
    .synex-contact-buttons-mail,
    .synex-contact-picto-phone,
    .synex-contact-buttons-phone {
        grid-column: span 1;
        grid-row: auto;
        /*margin-left: 0;*/
    }

    .synex-contact-icon-large {
        width: 50px;
        height: 50px;

        svg {
            width: 35px;
            height: 35px;
        }
    }

    .synex-contact-label {
        font-size: var(--font-xs);
    }

    .synex-contact-btn {
        padding: var(--spacing-xs);
        font-size: var(--font-xs);
    }
}

/*FIN CODE CSS POUR SECTION CONTACT AGENCE*/

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

@media (max-width: 1200px) {
    .synex-horaires-localisation-grid {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 1fr);

        .statut-temps-reel-bloc {
            grid-column: 1;
            grid-row: 1;
        }

        .horaires-bloc {
            grid-column: span 2;
            grid-row: 1;
        }

        .carte-bloc {
            grid-column: span 3;
            grid-row: 2;
        }

        .localisation-bloc {
            grid-column: span 3;
            grid-row: 3;
            flex-direction: row;
            text-align: left;
            gap: var(--spacing-lg);

            .localisation-icon {
                margin-bottom: 0;
                flex-shrink: 0;
            }
        }
    }
}

@media (max-width: 1024px) {
    .synex-agence-section {
        &.synex-description-image,
        &.synex-contact-texte {
            grid-template-columns: 1fr;
            gap: var(--spacing-xl);
        }

        &.synex-description-image {
            padding: var(--spacing-xl) var(--spacing-md);
        }

        &.synex-contact-texte {
            padding: var(--spacing-xl) var(--spacing-md);
        }
    }
}

@media (max-width: 768px) {
    .synex-agence-hero {
        height: 20vh;
        min-height: 250px;

        & -content {
            left: var(--spacing-lg);
            bottom: var(--spacing-lg);
        }

        & -title {
            font-size: clamp(1.5rem, 6vw, 2.5rem);
        }
    }

    .synex-agence-section {
        &.synex-description-image,
        &.synex-contact-texte {
            padding: var(--spacing-lg) var(--spacing-sm);
        }

        &.synex-parallax-2 {
            padding: var(--spacing-xl) var(--spacing-sm);
        }
    }

    .synex-horaires-localisation-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: var(--spacing-md);
        padding: var(--spacing-lg) var(--spacing-sm);
        min-height: auto;

        .statut-temps-reel-bloc,
        .horaires-bloc,
        .carte-bloc,
        .localisation-bloc {
            grid-column: 1;
            grid-row: auto;
        }

        .statut-temps-reel-bloc {
            padding: var(--spacing-lg);
        }

        .horaires-bloc {
            padding: var(--spacing-lg);
        }

        .localisation-bloc {
            padding: var(--spacing-lg);
            flex-direction: column;
            text-align: center;

            .localisation-icon {
                margin-bottom: var(--spacing-md);
            }
        }
    }

    .jour-row {
        grid-template-columns: 80px 1fr;
        gap: var(--spacing-md);
    }

    .jour-nom {
        font-size: var(--font-sm);
    }

    .timeline-bar {
        font-size: 10px;
        padding: 0 var(--spacing-xs);
    }

    .synex-contact {
        padding: var(--spacing-lg);
    }

    .carte-bloc #synex-map {
        min-height: 250px;
    }

    .heure-actuelle-indicator {
        width: 2px;
        height: 45px;

        &::before,
        &::after {
            width: 6px;
            height: 6px;
            left: -2px;
        }
    }
}

@media (max-width: 480px) {
    .synex-agence-hero {
        height: 40vh;
        min-height: 250px;

        & -content {
            left: var(--spacing-md);
            bottom: var(--spacing-md);
        }
    }

    .jour-row {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
        text-align: center;
    }

    .horaires-timeline {
        height: 35px;
    }

    .statut-content {
        .heure-actuelle {
            font-size: var(--font-base);
        }

        .statut-actuel {
            font-size: var(--font-lg);
        }

        .temps-restant {
            font-size: var(--font-sm);
        }
    }

    .localisation-content {
        h4 {
            font-size: var(--font-base);
        }

        .adresse-complete {
            font-size: var(--font-sm);
        }
    }

    .statut-icon svg,
    .localisation-icon svg {
        width: 30px;
        height: 30px;
    }

    .carte-bloc #synex-map {
        min-height: 200px;
    }

    .heure-actuelle-indicator {
        width: 2px;
        height: 40px;

        &::before,
        &::after {
            width: 6px;
            height: 6px;
            left: -2px;
        }
    }
}


/*CODE CSS POUR SECTION ÉQUIPE AGENCE - VERSION SWIPER.JS*/

.synex-equipe-container {
    display: flex;
    gap: var(--spacing-xxl);
    max-width: var(--bp-large);
    margin: 0 auto;
    align-items: center;
    min-height: 400px;
    @media screen and (max-width: 980px){
        flex-direction: column-reverse;
    }
}

/* Slider d'équipe avec Swiper */
.synex-equipe-slider {
    position: relative;
    width: 50%;
    height: 100%;
    @media screen and (max-width: 980px){
        width: 100%;
    }
    .synex-team-swiper {
        width: 100%;
        height: 100%;
        padding-bottom: 50px;

        .swiper-wrapper {
            align-items: stretch;
        }

        .swiper-slide {
            display: flex;
            justify-content: center;
            align-items: center;
            height: auto;
        }
    }
}

/* Personnalisation des contrôles Swiper */
.synex-swiper-next,
.synex-swiper-prev {
    width: 44px !important;
    height: 44px !important;
    background: var(--synex-blue) !important;
    border: 2px solid var(--synex-white) !important;
    border-radius: 50% !important;
    color: var(--synex-white) !important;
    font-size: 18px !important;
    font-weight: bold !important;
    transition: all var(--transition-fast) !important;

    &:hover {
        background: var(--synex-brown) !important;
    }

    &.swiper-button-disabled {
        opacity: 0.3 !important;
        transform: none !important;
    }

    &::after {
        font-size: 16px !important;
        font-weight: 900 !important;
    }
}

.synex-swiper-next {
    right: 0px !important;
}

.synex-swiper-prev {
    left: 0px !important;
}

/* Pagination Swiper */
.synex-swiper-pagination {
    bottom: 0 !important;
    position: absolute !important;
    text-align: center !important;

    .swiper-pagination-bullet {
        width: 12px !important;
        height: 12px !important;
        background: var(--synex-border-gray) !important;
        opacity: 1 !important;
        margin: 0 6px !important;
        transition: all var(--transition-fast) !important;

        &:hover {
            background: var(--synex-brown) !important;
        }
    }

    .swiper-pagination-bullet-active {
        background: var(--synex-blue) !important;
        transform: scale(1.2) !important;
    }
}

/* Carte employé */
.synex-employe-card {
    padding: var(--spacing-lg);
    text-align: center;
    transition: all var(--transition-fast);
    width: 100%;
    max-width: 220px;
    margin: 0 auto;
    height: auto;

}

.synex-employe-photo {
    width: 150px;
    height: 150px;
    margin: 0 auto var(--spacing-md);
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--synex-white);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        transition: transform var(--transition-fast);
    }

    &.synex-employe-placeholder {
        background: var(--synex-brown-light);
        color: var(--synex-brown);

        svg {
            width: 50px;
            height: 50px;
        }
    }
}

.synex-employe-nom {
    color: var(--synex-blue);
    font-size: var(--font-lg);
    font-weight: bold;
    margin: 0 0 var(--spacing-xs) 0;
    line-height: 1.2;
}

.synex-employe-poste {
    color: var(--synex-white);
    font-size: var(--font-base);
    font-weight: 500;
    margin: 0;
    font-style: italic;
    line-height: 1.3;
}

/* Texte équipe */
.synex-equipe-texte {
    display: flex;
    align-items: center;
    height: 50%;
    padding: var(--spacing-lg);
}

.synex-equipe-content {
    font-size: var(--font-lg);
    line-height: 1.6;
    color: var(--synex-black);
    width: 100%;

    h2, h3 {
        color: var(--synex-blue);
        font-size: var(--font-2xl);
        margin-bottom: var(--spacing-lg);
        font-weight: bold;
    }

    p {
        margin-bottom: var(--spacing-md);

        &:last-child {
            margin-bottom: 0;
        }
    }

    strong {
        color: var(--synex-brown);
    }

    ul, ol {
        margin: var(--spacing-md) 0;
        padding-left: var(--spacing-xl);

        li {
            margin-bottom: var(--spacing-xs);
            color: var(--synex-dark-gray);
        }
    }
}

/* Responsive Design */
@media (max-width: 1024px) {
    .synex-equipe-container {
        gap: var(--spacing-xl);
        min-height: 350px;
    }

    .synex-swiper-next {
        right: -15px !important;
    }

    .synex-swiper-prev {
        left: -15px !important;
    }

    .synex-employe-card {
        max-width: 200px;
        padding: var(--spacing-md);
    }
}

@media (max-width: 768px) {
    .synex-equipe-section {
        padding: var(--spacing-xl) var(--spacing-sm);
    }

    .synex-equipe-container {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
        min-height: auto;
    }

    .synex-equipe-slider {
        order: 2;
    }

    .synex-equipe-texte {
        order: 1;
        padding: 0;
    }

    .synex-swiper-next,
    .synex-swiper-prev {
        width: 36px !important;
        height: 36px !important;

        &::after {
            font-size: 14px !important;
        }
    }

    .synex-swiper-next {
        right: -10px !important;
    }

    .synex-swiper-prev {
        left: -10px !important;
    }

    .synex-swiper-pagination {
        .swiper-pagination-bullet {
            width: 10px !important;
            height: 10px !important;
            margin: 0 4px !important;
        }
    }

    .synex-employe-card {
        max-width: 240px;
    }

    .synex-employe-photo {
        width: 120px;
        height: 120px;
    }

    .synex-employe-nom {
        font-size: var(--font-xl);
    }

    .synex-employe-poste {
        font-size: var(--font-lg);
    }

    .synex-equipe-content {
        font-size: var(--font-base);

        h2, h3 {
            font-size: var(--font-xl);
        }
    }
}

@media (max-width: 480px) {
    .synex-equipe-section {
        padding: var(--spacing-lg) var(--spacing-xs);
    }

    .synex-swiper-next {
        right: 0 !important;
    }

    .synex-swiper-prev {
        left: 0 !important;
    }

    .synex-employe-card {
        padding: var(--spacing-sm);
        max-width: 200px;
    }

    .synex-employe-photo {
        width: 90px;
        height: 90px;
        margin-bottom: var(--spacing-sm);
    }

    .synex-employe-nom {
        font-size: var(--font-lg);
    }

    .synex-employe-poste {
        font-size: var(--font-base);
    }
}

/*FIN CODE CSS POUR SECTION ÉQUIPE AGENCE*/

/*CODE CSS POUR SECTION AVIS GOOGLE*/

.synex-avis-google-section {
    padding: var(--spacing-xxl) var(--spacing-lg);
    background: var(--synex-white);
}

.synex-avis-container {
    max-width: var(--bp-large);
    margin: 0 auto;
}

/* Header avec note moyenne */
.synex-avis-header {
    text-align: center;
    margin-bottom: var(--spacing-xxl);

    h2 {
        color: var(--synex-blue);
        font-size: var(--font-3xl);
        margin-bottom: var(--spacing-lg);
        font-weight: bold;
    }
}

.synex-avis-resume {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
}

.synex-note-moyenne {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);

    .note-chiffre {
        font-size: var(--font-3xl);
        font-weight: bold;
        color: var(--synex-logo-gold2);
    }

    .note-etoiles {
        display: flex;
        gap: 2px;

        .etoile {
            font-size: 1.5rem;

            &.etoile-pleine {
                color: var(--synex-logo-gold2);
            }

            &.etoile-demi {
                color: var(--synex-blue);
                opacity: 0.6;
            }

            &.etoile-vide {
                color: var(--synex-gray);
            }
        }
    }
}

.synex-nombre-avis {
    color: var(--synex-dark-gray);
    font-size: var(--font-lg);

    strong {
        color: var(--synex-logo-gold2);
    }
}

/* Grille des avis - 4 colonnes à 25% */
.synex-avis-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xxl);
}

/* Carte d'avis individuelle */
.synex-avis-card {
    background: var(--synex-light-gray);
    border-radius: var(--radius-small);
    padding: var(--spacing-lg);
    transition: all var(--transition-fast);
    height: 100%;
    display: flex;
    flex-direction: column;

}

.synex-client-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
}

.synex-client-photo {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid var(--synex-brown);

    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    &.synex-client-placeholder {
        background: var(--synex-brown);
        color: var(--synex-white);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        font-size: var(--font-lg);
    }
}

.synex-client-details {
    flex: 1;
    min-width: 0;
}

.synex-client-nom {
    color: var(--synex-blue);
    font-size: var(--font-base);
    font-weight: bold;
    margin: 0 0 var(--spacing-xs) 0;
    line-height: 1.2;
}

.synex-avis-date {
    color: var(--synex-gray);
    font-size: var(--font-sm);
}

.synex-avis-note {
    display: flex;
    gap: 2px;
    justify-content: flex-start;

    .etoile {
        font-size: 1rem;

        &.etoile-pleine {
            color: #ffc107;
        }

        &.etoile-vide {
            color: #e0e0e0;
        }
    }
}

.synex-avis-commentaire {
    flex: 1;
    margin-top: var(--spacing-md);

    p {
        color: var(--synex-dark-gray);
        font-size: var(--font-sm);
        line-height: 1.5;
        margin: 0;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* Footer avec lien Google */
.synex-avis-footer {
    text-align: center;
    margin-top: var(--spacing-xl);
}

.synex-voir-tous-avis {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-xl);
    background: var(--synex-blue);
    color: var(--synex-white) !important;
    border: 1px solid var(--synex-blue);
    text-decoration: none;
    border-radius: var(--radius-small);
    font-weight: bold;
    transition: all var(--transition-fast);

    &:hover {
        background: var(--synex-white);
        color: var(--synex-blue) !important;
    }

    svg {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }
}

/* Responsive Design */
@media (max-width: 1024px) {
    .synex-avis-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
    }

    .synex-avis-card {
        padding: var(--spacing-md);
    }
}

@media (max-width: 768px) {
    .synex-avis-google-section {
        padding: var(--spacing-xl) var(--spacing-sm);
    }

    .synex-avis-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .synex-avis-header {
        margin-bottom: var(--spacing-xl);

        h2 {
            font-size: var(--font-2xl);
        }
    }

    .synex-note-moyenne {
        flex-direction: column;
        gap: var(--spacing-sm);

        .note-chiffre {
            font-size: var(--font-2xl);
        }

        .note-etoiles .etoile {
            font-size: 1.3rem;
        }
    }

    .synex-nombre-avis {
        font-size: var(--font-base);
    }

    .synex-client-photo {
        width: 40px;
        height: 40px;

        &.synex-client-placeholder {
            font-size: var(--font-base);
        }
    }

    .synex-voir-tous-avis {
        padding: var(--spacing-sm) var(--spacing-lg);
        font-size: var(--font-sm);

        svg {
            width: 18px;
            height: 18px;
        }
    }
}

@media (max-width: 480px) {
    .synex-avis-google-section {
        padding: var(--spacing-lg) var(--spacing-xs);
    }

    .synex-avis-card {
        padding: var(--spacing-sm);
    }

    .synex-client-info {
        gap: var(--spacing-sm);
    }

    .synex-client-photo {
        width: 35px;
        height: 35px;
    }

    .synex-client-nom {
        font-size: var(--font-sm);
    }

    .synex-avis-date {
        font-size: var(--font-xs);
    }

    .synex-avis-commentaire p {
        font-size: var(--font-xs);
        -webkit-line-clamp: 3;
    }
}

/*FIN CODE CSS POUR SECTION AVIS GOOGLE*/