@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

/* Icônes Material Symbols : s'alignent sur la taille et la couleur du texte/lien environnant.
   Sans ça, la classe Google impose font-size: 24px et n'hérite pas de la couleur.
   Cette feuille est chargée après celle de Google, donc cette règle (même spécificité) l'emporte. */
.material-symbols-outlined {
    font-size: 21px;
    color: rgb(251, 165, 0);
    line-height: 1;
    vertical-align: middle;
    /* Épaisseur du trait : axe variable wght (100 fin → 700 gras). FILL 0 = contour, opsz fixé pour un rendu net à 21px. */
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

.bonjour-padding-inline-5 {
    padding-inline-start: 5px;
}

.bonjour-agences-grid {
    display: grid;
    gap: 16px;
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
}

.bonjour-agences-grid--cols-1 { grid-template-columns: 1fr; }
.bonjour-agences-grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bonjour-agences-grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bonjour-agences-grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1024px) {
    .bonjour-agences-grid--cols-3,
    .bonjour-agences-grid--cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .bonjour-agences-grid {
        grid-template-columns: 1fr !important;
    }
}

.bonjour-agence-card {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 16px;
    background: #FFFFFF;
    border: 1px solid #F5F5F4;
    border-radius: 24px;
    box-shadow: 0 0 46.9px rgba(0, 0, 0, 0.03);
    overflow: hidden;
}

.bonjour-agence-card__media {
    position: relative;
    width: 100%;
    aspect-ratio: 398 / 317;
    border-radius: 16px;
    overflow: hidden;
}

.bonjour-agence-card__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bonjour-agence-card__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: center;
    word-break: break-word;
}

.bonjour-agence-card__heading {
    display: flex;
    flex-direction: column;
}

.bonjour-agence-card__eyebrow {
    margin: 0;
    font-family: inherit;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #FBA500;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.bonjour-agence-card__title,
.bonjour-agence-card__heading .bonjour-agence-card__title.elementor-heading-title {
    margin: 0;
    font-family: inherit;
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
    color: #443C3C;
}

.bonjour-agence-card__address {
    margin: 0;
    font-family: inherit;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #443C3C;
    height: 52px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bonjour-agence-card__cta,
.bonjour-agence-card__cta:link,
.bonjour-agence-card__cta:visited,
.bonjour-agence-card__cta:hover,
.bonjour-agence-card__cta:focus,
.bonjour-agence-card__cta:active {
    color: #FFFFFF !important;
    text-decoration: none !important;
}

.bonjour-agence-card__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 12px 24px;
    background: #FBA500;
    font-family: inherit;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    border-radius: 8px;
    transition: background-color 0.2s ease;
    margin-top: auto;
}

.bonjour-agence-card__cta:hover,
.bonjour-agence-card__cta:focus {
    background: #F09E00;
}

.bonjour-agences-empty {
    padding: 32px;
    text-align: center;
    color: #443C3C;
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    font-style: italic;
}

/* Schedules — Figma node 268:3365 */
.bonjour-agence-schedules {
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #443C3C;
    word-break: break-word;
}

.bonjour-agence-schedules__item {
    margin: 0;
    padding: 0;
}

/* Members grid — Figma node 268:2946 + 268:2951 */
.bonjour-agence-members-grid {
    display: grid;
    gap: 80px;
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    justify-items: center;
}

.bonjour-agence-members-grid--cols-1 { grid-template-columns: 1fr; }
.bonjour-agence-members-grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bonjour-agence-members-grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bonjour-agence-members-grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bonjour-agence-members-grid--cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

@media (max-width: 1024px) {
    .bonjour-agence-members-grid {
        gap: 32px;
    }
    .bonjour-agence-members-grid--cols-3,
    .bonjour-agence-members-grid--cols-4,
    .bonjour-agence-members-grid--cols-5 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .bonjour-agence-members-grid {
        display: flex;
        flex-wrap: nowrap;
        justify-items: initial;
        grid-template-columns: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 16px;
        gap: 16px;
        padding: 0 16px 8px;
        margin: 0 -16px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .bonjour-agence-members-grid::-webkit-scrollbar {
        display: none;
    }
    .bonjour-agence-members-grid > .bonjour-agence-member-card {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }
}

.bonjour-agence-member-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 200px;
    max-width: 100%;
}

.bonjour-agence-member-card__media {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 24px;
    overflow: hidden;
}

.bonjour-agence-member-card__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bonjour-agence-member-card__body {
    display: flex;
    flex-direction: column;
    color: #443C3C;
    line-height: 24px;
}

.bonjour-agence-member-card__name {
    margin: 0;
    font-family: inherit;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: inherit;
}

.bonjour-agence-member-card__role {
    margin: 0;
    font-family: inherit;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: inherit;
}

.bonjour-agence-members-empty {
    padding: 24px;
    text-align: center;
    color: #443C3C;
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    font-style: italic;
}

/* Reviews — Figma 268:3104 (grid) + 268:3115 (review card) + 268:3135 (CTA card) */
.bonjour-agence-reviews-grid {
    display: grid;
    gap: 24px;
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    align-items: stretch;
}

.bonjour-agence-reviews-grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bonjour-agence-reviews-grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bonjour-agence-reviews-grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bonjour-agence-reviews-grid--cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

@media (max-width: 1024px) {
    .bonjour-agence-reviews-grid--cols-3,
    .bonjour-agence-reviews-grid--cols-4,
    .bonjour-agence-reviews-grid--cols-5 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .bonjour-agence-reviews-grid {
        display: flex !important;
        flex-wrap: nowrap;
        grid-template-columns: none !important;
        align-items: stretch;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 16px;
        padding-bottom: 8px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .bonjour-agence-reviews-grid::-webkit-scrollbar {
        display: none;
    }
    .bonjour-agence-reviews-grid > .bonjour-agence-review-card,
    .bonjour-agence-reviews-grid > .bonjour-agence-reviews-cta {
        flex: 0 0 100%;
        scroll-snap-align: start;
    }
}

.bonjour-agence-review-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    background: #FFFFFF;
    border: 1px solid #F5F5F4;
    border-radius: 24px;
    box-shadow: 0 0 23.45px rgba(0, 0, 0, 0.03);
    max-height: 402px;
}

.bonjour-agence-review-card__stars {
    display: flex;
    gap: 4px;
    color: var(--bonjour-theme-accent, #00B9CB);
}

.bonjour-agence-review-card__star {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.bonjour-agence-review-card__description {
    margin: 0;
    font-family: inherit;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #443C3C;
    word-break: break-word;
    min-height: 0;
    overflow-y: auto;
}

.bonjour-agence-review-card__name {
    margin: 0;
    margin-top: auto;
    font-family: inherit;
    font-weight: 600;
    font-size: 18px;
    line-height: 28px;
    color: #443C3C;
    word-break: break-word;
}

/* CTA "Voir tous les avis" card */
.bonjour-agence-reviews-cta {
    position: relative;
    display: block;
    background: #FFFFFF;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid #F5F5F4;
    box-shadow: 0 0 23.45px rgba(0, 0, 0, 0.03);
    text-decoration: none !important;
    color: #443C3C;
    min-height: 360px;
}

.bonjour-agence-reviews-cta:hover,
.bonjour-agence-reviews-cta:focus {
    color: #443C3C;
    text-decoration: none !important;
}

.bonjour-agence-reviews-cta__image {
    position: absolute;
    inset: 0 0 71px 0;
    width: 100%;
    height: calc(100% - 71px);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Fallback quand secondaryImageUri est null : bloc de la couleur accent du thème */
.bonjour-agence-reviews-cta__image--placeholder {
    background-color: var(--bonjour-theme-accent, #00B9CB);
}

.bonjour-agence-reviews-cta__label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 71px;
    padding: 0 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #FFFFFF;
    border-top: 1px solid #F5F5F4;
}

.bonjour-agence-reviews-cta__label-text {
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 28px;
    color: #443C3C;
}

.bonjour-agence-reviews-cta__arrow {
    width: 28.8px;
    height: 28.8px;
    color: var(--bonjour-theme-accent, #00B9CB);
    flex-shrink: 0;
}

.bonjour-agence-reviews-empty {
    padding: 24px;
    text-align: center;
    color: #443C3C;
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    font-style: italic;
}

/* News — Figma 268:3274 (grid) + 268:3275 (card) */
.bonjour-agence-news-grid {
    display: grid;
    gap: 24px;
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    align-items: stretch;
}

.bonjour-agence-news-grid--cols-1 { grid-template-columns: 1fr; }
.bonjour-agence-news-grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bonjour-agence-news-grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bonjour-agence-news-grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1024px) {
    .bonjour-agence-news-grid--cols-3,
    .bonjour-agence-news-grid--cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .bonjour-agence-news-grid {
        grid-template-columns: 1fr !important;
    }
}

.bonjour-agence-news-card {
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    border: 1px solid #F5F5F4;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 0 46.9px rgba(0, 0, 0, 0.03);
}

.bonjour-agence-news-card__media {
    width: 100%;
    height: 220px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    flex-shrink: 0;
}

.bonjour-agence-news-card__body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    padding: 32px;
    gap: 8px;
}

.bonjour-agence-news-card__heading {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.bonjour-agence-news-card__date {
    margin: 0;
    font-family: inherit;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #00B9CB;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bonjour-agence-news-card__title {
    margin: 0;
    font-family: inherit;
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
    color: #443C3C;
    word-break: break-word;
}

.bonjour-agence-news-card__content {
    margin: 0;
    font-family: inherit;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #443C3C;
    height: 52px;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.bonjour-agence-news-card__cta,
.bonjour-agence-news-card__cta:link,
.bonjour-agence-news-card__cta:visited,
.bonjour-agence-news-card__cta:hover,
.bonjour-agence-news-card__cta:focus,
.bonjour-agence-news-card__cta:active {
    color: #FFFFFF !important;
    text-decoration: none !important;
}

.bonjour-agence-news-card__cta {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    background: #00B9CB;
    font-family: inherit;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    border-radius: 8px;
    margin-top: 16px;
    transition: background-color 0.2s ease;
}

.bonjour-agence-news-card__cta:hover,
.bonjour-agence-news-card__cta:focus {
    background: #00A5B5;
}

.bonjour-agence-news-empty {
    padding: 24px;
    text-align: center;
    color: #443C3C;
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    font-style: italic;
}

/* Price grid CTA — bouton orange par défaut, override via attribut class */
.bonjour-agence-price-grid,
.bonjour-agence-price-grid:link,
.bonjour-agence-price-grid:visited,
.bonjour-agence-price-grid:hover,
.bonjour-agence-price-grid:focus,
.bonjour-agence-price-grid:active {
    color: #FFFFFF !important;
    text-decoration: none !important;
}

.bonjour-agence-price-grid {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    background: #FBA500;
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    border-radius: 8px;
    transition: background-color 0.2s ease;
}

.bonjour-agence-price-grid:hover,
.bonjour-agence-price-grid:focus {
    background: #F09E00;
}

/* Testimonials par agence — Figma 335:1651/1694/1738/1781/1824/1910
   Theming par section via CSS variables : --bonjour-theme-accent / --bonjour-theme-bg
   La variable --bonjour-theme-accent cascade naturellement aux étoiles + flèche CTA
   à l'intérieur de la section (via les règles var(...) ci-dessus). */
.bonjour-testimonials {
    display: block;
}

.bonjour-testimonials-section {
    background: var(--bonjour-theme-bg, #FFFBEA);
    padding: 104px 120px 120px;
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
}

/* 6 thèmes : orange, red, cyan, violet, cerise, lime */
.bonjour-testimonials-section--theme-orange { --bonjour-theme-accent: #FBA500; --bonjour-theme-bg: #FFFBEA; }
.bonjour-testimonials-section--theme-red    { --bonjour-theme-accent: #FF233B; --bonjour-theme-bg: #FFF0F2; }
.bonjour-testimonials-section--theme-cyan   { --bonjour-theme-accent: #00B9CB; --bonjour-theme-bg: #EBFFFF; }
.bonjour-testimonials-section--theme-violet { --bonjour-theme-accent: #B875C0; --bonjour-theme-bg: #FBF7FC; }
.bonjour-testimonials-section--theme-cerise { --bonjour-theme-accent: #FF27A7; --bonjour-theme-bg: #FFF0FA; }
.bonjour-testimonials-section--theme-lime   { --bonjour-theme-accent: #71C120; --bonjour-theme-bg: #F4FDE8; }

.bonjour-testimonials-section__inner {
    display: flex;
    flex-direction: column;
    gap: 32px;
    max-width: 1280px;
    margin: 0 auto;
}

.bonjour-testimonials-section__header {
    display: flex;
    flex-direction: column;
}

.bonjour-testimonials-section__eyebrow {
    margin: 0;
    font-family: inherit;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: var(--bonjour-theme-accent, #FBA500);
}

.bonjour-testimonials-section__title {
    margin: 0;
    font-family: inherit;
    font-weight: 500;
    font-size: 48px;
    line-height: 54px;
    color: #000000;
    word-break: break-word;
}

.bonjour-testimonials-section__title-highlight {
    color: var(--bonjour-theme-accent, #FBA500);
}

.bonjour-testimonials-empty {
    padding: 64px 24px;
    text-align: center;
    color: #443C3C;
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    font-style: italic;
    background: #FFFBEA;
}

@media (max-width: 1024px) {
    .bonjour-testimonials-section {
        padding: 64px 60px;
    }
    .bonjour-testimonials-section__title {
        font-size: 36px;
        line-height: 42px;
    }
}

@media (max-width: 600px) {
    .bonjour-testimonials-section {
        padding: 40px 24px;
    }
    .bonjour-testimonials-section__title {
        font-size: 28px;
        line-height: 34px;
    }
}

/* Backward compat : ancien override forcé orange via classe sur le grid (utilisé
   par les itérations antérieures du widget reviews) — gardé pour ne pas casser
   les pages où le widget seul aurait reçu $theme="orange" en attribut. */
.bonjour-agence-reviews-grid--theme-orange .bonjour-agence-review-card__stars,
.bonjour-agence-reviews-grid--theme-orange .bonjour-agence-reviews-cta__arrow {
    color: #FBA500;
}

/* Hauteur fixe 700px par section (desktop) + ellipse description.
   Tablette/mobile : on laisse la hauteur s'adapter au contenu (les cards stackent). */
@media (min-width: 1025px) {
    .bonjour-testimonials-section {
        height: 700px;
        overflow: hidden;
        box-sizing: border-box;
    }
    .bonjour-testimonials-section__inner {
        height: 100%;
    }
    .bonjour-testimonials-section .bonjour-agence-reviews-grid {
        flex: 1;
        min-height: 0;
    }
    .bonjour-testimonials-section .bonjour-agence-review-card,
    .bonjour-testimonials-section .bonjour-agence-reviews-cta {
        height: 100%;
        min-height: 0;
    }
}

/* Ellipse multi-lignes sur la description (scope multi-agence uniquement) */
.bonjour-testimonials-section .bonjour-agence-review-card__description {
    display: -webkit-box;
    -webkit-line-clamp: 9;
    line-clamp: 9;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Barre de filtre par agence (testimonials) — Figma 335:2145 */
.bonjour-testimonials-filter-wrap {
    box-sizing: border-box;
    max-width: 1280px; /* aligné sur __inner des sections */
    margin: 0 auto 32px;
    padding: 0 24px;
}

/* Le header du site est en overlay (~112px desktop) : le contenu de page démarre
   derrière lui. Le widget étant en premier élément de page, on dégage la barre
   sous le menu. Sans objet en mobile (header non superposé). */
@media (min-width: 1025px) {
    .bonjour-testimonials-filter-wrap {
        padding-top: 100px;
    }
}

.bonjour-testimonials-filter {
    display: flex;
    align-items: center;
    gap: 16px;
    width: fit-content; /* hug content comme la maquette… */
    max-width: 100%;    /* …sans jamais déborder du wrap */
    margin: 0 auto;     /* centre la barre horizontalement dans le wrap */
    box-sizing: border-box;
    padding: 4px 24px 4px 4px;
    background: #FAFAF9;
    border: 1px solid #E7E4E4;
    border-radius: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
}

/* Sélecteurs doublés (.filter .filter__item) : il faut battre les styles
   globaux de <button> du kit Elementor et du reset du thème (fond orange,
   hover rose, padding 12/24) qui ont une spécificité (0,1,1). */
.bonjour-testimonials-filter .bonjour-testimonials-filter__item {
    flex-shrink: 0;
    margin: 0;
    padding: 8px 16px;
    background: transparent;
    border: 1px solid transparent; /* réserve 1px : pas de shift à l'activation */
    border-radius: 8px;
    box-shadow: none;
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: normal;
    text-transform: none;
    color: #786C6C;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease;
}

/* Le thème impose un fond orange + border:0 à tout <button> au survol/focus.
   On l'annule pour garder les pills inertes : fond transparent et bordure 1px
   transparente conservée (la couleur #D6D1D1 de l'état actif reprend le dessus). */
.bonjour-testimonials-filter .bonjour-testimonials-filter__item:hover,
.bonjour-testimonials-filter .bonjour-testimonials-filter__item:focus {
    background: transparent;
    border: 1px solid transparent;
    box-shadow: none;
}

.bonjour-testimonials-filter .bonjour-testimonials-filter__item:focus-visible {
    outline: 2px solid #FBA500;
    outline-offset: 2px;
}

.bonjour-testimonials-filter .bonjour-testimonials-filter__item--active,
.bonjour-testimonials-filter .bonjour-testimonials-filter__item--active:hover,
.bonjour-testimonials-filter .bonjour-testimonials-filter__item--active:focus {
    background: #FFFFFF;
    border-color: #D6D1D1;
    font-weight: 600;
    color: #000000;
}

/* Sections masquées par le filtre (restent dans le DOM pour le SEO) */
.bonjour-testimonials-section--hidden {
    display: none;
}

/* Sélecteur d'agence (devis) — Figma 268:3248 */
.bonjour-agence-selector {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 8px 8px 16px;
    background: #FFFFFF;
    border: 1px solid #FFD946;
    border-radius: 50px;
    box-shadow: 0 0 30px rgba(251, 165, 0, 0.2);
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
}

.bonjour-agence-selector__field {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
}

.bonjour-agence-selector__pin {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: #FBA500;
}

.bonjour-agence-selector__select-wrap {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
}

.bonjour-agence-selector__select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    margin: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    outline: none;
    font-family: inherit;
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
    color: #443C3C;
    padding: 0 32px 0 0;
    cursor: pointer;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

/* Placeholder (option vide encore sélectionnée) affiché en gris */
.bonjour-agence-selector__select:invalid {
    color: #A89E9F;
}

.bonjour-agence-selector__select option {
    color: #443C3C;
}

.bonjour-agence-selector__chevron {
    position: absolute;
    right: 4px;
    width: 24px;
    height: 24px;
    color: #443C3C;
    pointer-events: none;
}

.bonjour-agence-selector__cta,
.bonjour-agence-selector__cta:link,
.bonjour-agence-selector__cta:visited,
.bonjour-agence-selector__cta:hover,
.bonjour-agence-selector__cta:focus,
.bonjour-agence-selector__cta:active {
    color: #FFFFFF !important;
    text-decoration: none !important;
}

.bonjour-agence-selector__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-shrink: 0;
    padding: 12px 24px;
    background: #FBA500;
    border: 0;
    border-radius: 41px;
    font-family: inherit;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    cursor: pointer;
    transition: background-color 0.2s ease, opacity 0.2s ease;
}

.bonjour-agence-selector__cta:hover,
.bonjour-agence-selector__cta:focus {
    background: #F09E00;
}

.bonjour-agence-selector__cta[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
}

.bonjour-agence-selector__arrow {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

/* Variante translucide (sur fond foncé) — Figma 129:1506 */
.bonjour-agence-selector--glass {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: none;
    -webkit-backdrop-filter: blur(56.6px);
    backdrop-filter: blur(56.6px);
}

.bonjour-agence-selector--glass .bonjour-agence-selector__pin,
.bonjour-agence-selector--glass .bonjour-agence-selector__chevron {
    color: #E7E4E4;
}

/* Valeur sélectionnée en blanc ; le placeholder (:invalid) reste gris clair */
.bonjour-agence-selector--glass .bonjour-agence-selector__select {
    color: #FFFFFF;
}

.bonjour-agence-selector--glass .bonjour-agence-selector__select:invalid {
    color: #E7E4E4;
}

.bonjour-agence-selector-empty {
    padding: 16px 24px;
    text-align: center;
    color: #443C3C;
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    font-style: italic;
}

@media (max-width: 600px) {
    .bonjour-agence-selector {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 16px;
        border-radius: 24px;
    }
    .bonjour-agence-selector__cta {
        width: 100%;
    }
}

/* Offres d'emploi groupées par région — Figma 404:6780 (colonne) + 397:6238 (card) */
.bonjour-job-offers {
    display: flex;
    flex-direction: column;
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
}

.bonjour-job-offers__region {
    display: flex;
    align-items: flex-start;
    gap: 40px;
}

.bonjour-job-offers__region + .bonjour-job-offers__region {
    margin-top: 48px;
    padding-top: 48px;
    border-top: 1px solid #E7F9CE;
}

.bonjour-job-offers .bonjour-job-offers__region-title {
    margin: 0;
    flex: 0 0 25%;
    font-family: inherit;
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
    color: #443C3C;
    word-break: break-word;
}

.bonjour-job-offers__cards {
    flex: 0 0 calc(75% - 40px);
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bonjour-job-offer-card {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px 32px 32px;
    background: #FFFFFF;
    border: 1px solid #F5F5F4;
    border-radius: 24px;
    box-shadow: 0 0 23.45px rgba(0, 0, 0, 0.03);
}

.bonjour-job-offer-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.bonjour-job-offers .bonjour-job-offer-card__title {
    margin: 0;
    font-family: inherit;
    font-weight: 600;
    font-size: 18px;
    line-height: 28px;
    color: #443C3C;
    word-break: break-word;
}

.bonjour-job-offers .bonjour-job-offer-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 4px 12px;
    background: #E7F9CE;
    border-radius: 77px;
    font-family: inherit;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: #71C120;
    white-space: nowrap;
}

.bonjour-job-offer-card__badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #71C120;
}

.bonjour-job-offer-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.bonjour-job-offers .bonjour-job-offer-card__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #574F4E;
}

.bonjour-job-offer-card__meta-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: #71C120;
}

/* Bas de card : méta à gauche, bouton candidature aligné en bas à droite. */
.bonjour-job-offer-card__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 24px;
}

.bonjour-job-offer-card__footer {
    margin-left: auto;
}

/*
 * Reprend le style du bouton Elementor « Déposer ma candidature » (widget be6d32c).
 * Le fond vert est défini au niveau du widget dans Elementor (donc non hérité ici) :
 * on le rejoue via les variables globales du kit (fallbacks en dur si absentes).
 */
.bonjour-job-offers .bonjour-job-offer-card__footer .elementor-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    border: none;
    border-radius: 8px;
    background-color: var(--e-global-color-f1fc538, #71C120);
    color: var(--e-global-color-01479dd, #FFFFFF);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 0.875rem;
    text-decoration: none;
    transition: background-color 0.3s;
}

.bonjour-job-offers .bonjour-job-offer-card__footer .elementor-button:hover,
.bonjour-job-offers .bonjour-job-offer-card__footer .elementor-button:focus {
    background-color: var(--e-global-color-767b40c, #569B15);
    color: var(--e-global-color-01479dd, #FFFFFF);
}

.bonjour-job-offers-empty {
    padding: 24px;
    text-align: center;
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    font-style: italic;
    color: #443C3C;
}

@media (max-width: 1024px) {
    .bonjour-job-offers__region {
        gap: 32px;
    }
}

@media (max-width: 600px) {
    .bonjour-job-offers__region {
        flex-direction: column;
        gap: 16px;
    }
    .bonjour-job-offers__region-title {
        flex: 0 0 auto;
    }
    .bonjour-job-offers__region + .bonjour-job-offers__region {
        margin-top: 32px;
        padding-top: 32px;
    }
    .bonjour-job-offer-card {
        padding: 20px 24px 24px;
    }
}

/*
 * Icon List avec lien : le CSS perso du widget « a[href^="tel"] { display: inline !important }
 * » écrase le flex par défaut d'Elementor sur le <a>, ce qui fait passer icône et texte à la
 * ligne. On restaure le flex avec une spécificité supérieure (0,2,1 > 0,1,1) + !important.
 */
.elementor-widget .elementor-icon-list-item a {
    display: flex !important;
    align-items: center;
}

/*
 * Lien téléphone (classe posée dans l'éditeur Elementor) : texte noir, pas de retour à la
 * ligne, rendu inline. Le second sélecteur (0,3,1) l'emporte sur la restauration flex
 * ci-dessus (0,2,1) quand le lien est imbriqué dans une Icon List.
 */
a.bonjour-tel,
.elementor-widget .elementor-icon-list-item a.bonjour-tel {
    display: inline !important;
    color: var(--e-global-color-856c204, #443C3C);
    white-space: nowrap;
}