/* ==========================================================
   VALORESSENCE — RECOMMANDATIONS
========================================================== */


/* ==========================================================
   HERO
========================================================== */

.reco-hero {
    min-height: 360px;

    display: flex;
    align-items: center;

    background:
        linear-gradient(
            90deg,
            rgba(28,18,13,.95),
            rgba(28,18,13,.82)
        ),
        url(
            "https://honeydew-sheep-776998.hostingersite.com/wp-content/uploads/2026/04/Business-club-a-Bordeaux.jpg"
        )
        center 42% / cover no-repeat;

    color: #fff;
}


.reco-hero__inner {
    width: min(1180px, 100%);

    margin: 0 auto;
}


.reco-hero__content {
    max-width: 620px;

    padding: 65px 0;
}


.reco-hero__eyebrow {
    margin-bottom: 20px;

    color: #efc98d;

    font-size: 10px;
    font-weight: 600;

    text-transform: uppercase;
}


.reco-hero h1 {
    margin: 0;

    color: #fff;

    font-size: clamp(55px, 5vw, 78px);
    line-height: 1;

    font-weight: 300;

    letter-spacing: -3px;
}


.reco-hero h1 span {
    color: var(--orange-light);

    font-style: italic;
    font-weight: 300;
}


.reco-hero p {
    max-width: 570px;

    margin: 20px 0 0;

    color: #fff;

    font-size: 13px;
    line-height: 1.7;
}


/* ==========================================================
   LAYOUT
========================================================== */

.reco-list {
    padding: 45px 0 105px;

    background: #fff;
}


.reco-layout {
    width: min(1180px, 100%);

    display: grid;

    grid-template-columns:
        250px
        minmax(0, 1fr);

    gap: 32px;

    align-items: start;

    margin: 0 auto;
}


/* ==========================================================
   FILTRES
========================================================== */

.reco-filters {
    position: sticky;

    top: 115px;

    overflow: hidden;

    border:
        1px solid
        #ded2c8;

    border-radius: 10px;

    background: #fff;
}


.reco-filters__title {
    padding: 17px 18px;

    background: #b39c87;

    color: #fff;

    font-size: 10px;
    font-weight: 700;

    text-transform: uppercase;
}


.reco-filters__form {
    padding: 17px;
}


.reco-filter-group + .reco-filter-group {
    margin-top: 25px;

    padding-top: 22px;

    border-top:
        1px solid
        #eee4dc;
}


.reco-filter-group strong {
    display: block;

    margin-bottom: 12px;

    color: var(--brown);

    font-size: 10px;
    font-weight: 700;

    text-transform: uppercase;
}


.reco-filter-group label {
    display: flex;
    align-items: center;

    gap: 8px;

    margin: 9px 0;

    color: #665c56;

    font-size: 12px;

    cursor: pointer;
}
/* ==========================================================
   RADIO BUTTONS
========================================================== */

.reco-filter-group input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;

    width: 15px;
    height: 15px;

    flex: 0 0 15px;

    margin: 0;

    border: 1px solid #a9978b;
    border-radius: 50%;

    background: #fff;

    cursor: pointer;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}


.reco-filter-group input[type="radio"]:checked {
    border: 4px solid var(--orange);

    background: #fff;
}


.reco-filter-group input[type="radio"]:hover {
    border-color: var(--orange);
}


.reco-filter-group input[type="radio"]:focus-visible {
    outline: none;

    box-shadow:
        0 0 0 3px rgba(216, 125, 33, .18);
}

.reco-filter-group select {
    width: 100%;

    padding: 10px;

    border:
        1px solid
        #d9cdc3;

    background: #fff;

    color: var(--brown);

    font-size: 11px;
}


.reco-reset {
    display: inline-block;

    margin-top: 20px;

    color: var(--orange);

    font-size: 9px;
    font-weight: 700;

    text-transform: uppercase;
}


/* ==========================================================
   RESULTS
========================================================== */

.reco-grid {
    display: grid;

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

    gap: 20px;
}


/* ==========================================================
   CARD
========================================================== */

.reco-card {
    position: relative;

    min-height: 290px;

    display: grid;

    grid-template-columns:
        68px
        minmax(0, 1fr);

    overflow: hidden;

    border-top:
        3px solid
        var(--orange);

    border-radius: 10px;

    background: #28170f;

    color: #fff;
}


.reco-card--recherche {
    background: #21140e;
}


.reco-card__date {
    display: flex;
    align-items: center;
    flex-direction: column;

    padding-top: 30px;

    border-right:
        1px solid
        rgba(255,255,255,.08);
}


.reco-card__date strong {
    color: var(--orange);

    font-size: 28px;
    line-height: 1;

    font-weight: 300;
}


.reco-card__date span {
    margin-top: 6px;

    color: #c8b4a8;

    font-size: 8px;

    font-weight: 600;
}


.reco-card__body {
    display: flex;
    flex-direction: column;

    padding: 27px;
}


.reco-card__meta {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;

    margin-bottom: 20px;
}


.reco-card__type,
.reco-card__domain,
.reco-card__urgency {
    min-height: 27px;

    display: inline-flex;
    align-items: center;

    padding: 0 11px;

    border-radius: 30px;

    font-size: 8px;
    font-weight: 700;

    text-transform: uppercase;
}


.reco-card__type {
    background: var(--orange);

    color: #27150d;
}


.reco-card__domain {
    border:
        1px solid
        rgba(216,125,33,.38);

    background:
        rgba(216,125,33,.10);

    color: #ec9843;
}


.reco-card__urgency {
    border:
        1px solid
        rgba(255,255,255,.14);

    color: #d7c4b8;
}


.reco-card h2 {
    margin: 0;

    color: #fff;

    font-size: 20px;
    line-height: 1.35;

    font-weight: 600;
}


.reco-card__company {
    margin-top: 7px;

    color: var(--orange);

    font-size: 11px;

    font-weight: 600;
}


.reco-card p {
    margin: 18px 0 25px;

    color: #c8b6aa;

    font-size: 12px;
    line-height: 1.7;
}


.reco-card__footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;

    margin-top: auto;

    padding-top: 18px;

    border-top:
        1px solid
        rgba(255,255,255,.09);
}


.reco-card__footer small {
    display: block;

    margin-bottom: 4px;

    color: #9f8c82;

    font-size: 8px;

    text-transform: uppercase;
}


.reco-card__footer strong {
    color: #fff;

    font-size: 11px;

    font-weight: 600;
}


.reco-card__footer > span {
    color: #b9a59b;

    font-size: 10px;
}


/* ==========================================================
   EMPTY
========================================================== */

.reco-empty {
    padding: 80px 30px;

    background: var(--cream);

    text-align: center;
}


.reco-empty strong {
    display: block;

    margin-bottom: 10px;

    font-size: 18px;
}


.reco-empty p {
    margin: 0;

    color: var(--muted);

    font-size: 13px;
}


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

@media (max-width: 950px) {

    .reco-layout {
        grid-template-columns:
            220px
            1fr;
    }


    .reco-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 700px) {

    .reco-hero {
        min-height: 330px;
    }


    .reco-hero h1 {
        font-size: 48px;
    }


    .reco-list {
        padding: 35px 0 75px;
    }


    .reco-layout {
        grid-template-columns: 1fr;
    }


    .reco-filters {
        position: static;
    }


    .reco-results__top {
        justify-content: flex-start;
    }


    .reco-card {
        grid-template-columns:
            58px
            1fr;
    }

}

/* ==========================================================
   DOMAINES — CHECKBOX
========================================================== */

.reco-domain-list {
    display: flex;
    flex-direction: column;

    gap: 3px;
}


.reco-domain-option {
    min-height: 30px;

    display: flex;
    align-items: center;

    gap: 9px;

    margin: 0 !important;

    cursor: pointer;
}


.reco-domain-option input {
    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;

    pointer-events: none;
}


.reco-domain-option__box {
    position: relative;

    width: 15px;
    height: 15px;

    flex: 0 0 15px;

    border: 1px solid #a9978b;
    border-radius: 2px;

    background: #fff;

    transition: .2s ease;
}


.reco-domain-option:hover
.reco-domain-option__box {
    border-color: var(--orange);
}


.reco-domain-option input:checked
+ .reco-domain-option__box {
    border-color: var(--orange);

    background: var(--orange);
}


.reco-domain-option input:checked
+ .reco-domain-option__box::after {
    content: "";

    position: absolute;

    left: 4px;
    top: 1px;

    width: 4px;
    height: 8px;

    border: solid #fff;

    border-width: 0 2px 2px 0;

    transform: rotate(45deg);
}


.reco-domain-option__label {
    flex: 1;

    color: #665c56;

    font-size: 11px;
    line-height: 1.3;
}


.reco-domain-option__count {
    min-width: 20px;

    color: #a28f83;

    font-size: 9px;

    text-align: right;
}


/* DOMAINE VIDE */

.reco-domain-option.is-disabled {
    cursor: default;

    opacity: .35;
}


.reco-domain-option.is-disabled
.reco-domain-option__box {
    background: #eeeae7;

    border-color: #cfc5bf;
}


.reco-domain-option.is-disabled:hover
.reco-domain-option__box {
    border-color: #cfc5bf;
}

/* ==========================================================
   ACTIONS — JE RECOMMANDE / JE RECHERCHE
========================================================== */

.reco-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;

    margin-bottom: 28px;
    padding-bottom: 28px;

    border-bottom: 1px solid #eadbd0;
}


.reco-actions__intro span {
    display: block;

    margin-bottom: 4px;

    color: #20120d;

    font-size: 14px;
    font-weight: 700;
}


.reco-actions__intro p {
    max-width: 460px;

    margin: 0;

    color: #82746b;

    font-size: 11px;
    line-height: 1.6;
}


.reco-actions__buttons {
    display: flex;

    gap: 10px;
}


.reco-action-btn {
    min-width: 190px;
    min-height: 62px;

    display: flex;
    align-items: center;

    gap: 12px;

    padding: 10px 18px;

    border: 1px solid #df792a;
    border-radius: 5px;

    font-family: "Montserrat", sans-serif;

    text-align: left;

    cursor: pointer;

    transition:
        transform .2s ease,
        background-color .2s ease,
        border-color .2s ease;
}


.reco-action-btn:hover {
    transform: translateY(-2px);
}


.reco-action-btn--primary {
    background: #df792a;

    color: #21130e;
}


.reco-action-btn--secondary {
    background: #21130e;

    color: #fff;
}


.reco-action-btn__icon {
    width: 31px;
    height: 31px;

    flex: 0 0 31px;

    display: grid;
    place-items: center;

    border-radius: 50%;

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

    font-size: 18px;
    line-height: 1;
}


.reco-action-btn small,
.reco-action-btn strong {
    display: block;
}


.reco-action-btn small {
    margin-bottom: 2px;

    opacity: .65;

    font-size: 8px;
    font-weight: 500;

    text-transform: uppercase;

    letter-spacing: .04em;
}


.reco-action-btn strong {
    font-size: 12px;
    font-weight: 700;
}


/* ==========================================================
   MODALES
========================================================== */

.reco-modal {
    position: fixed;

    inset: 0;

    z-index: 9999;

    display: none;

    align-items: flex-start;
    justify-content: center;

    padding: 40px 20px;

    overflow-y: auto;
}


.reco-modal.is-open {
    display: flex;
}


.reco-modal__backdrop {
    position: fixed;

    inset: 0;

    background: rgba(24,14,10,.82);

    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}


.reco-modal__dialog {
    position: relative;

    z-index: 1;

    width: min(920px, 100%);

    overflow: hidden;

    border-radius: 8px;

    background: #f8f4f0;

    box-shadow:
        0 30px 90px
        rgba(0,0,0,.30);
}


.reco-modal__close {
    position: absolute;

    top: 19px;
    right: 22px;

    z-index: 2;

    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border:
        1px solid
        rgba(255,255,255,.20);

    border-radius: 50%;

    background: transparent;

    color: #fff;

    font-family: "Montserrat", sans-serif;

    font-size: 23px;
    line-height: 1;

    cursor: pointer;
}


/* ==========================================================
   HEADER MODALE
========================================================== */

.reco-modal__header {
    padding: 40px 54px 36px;

    background: #21130e;

    color: #fff;
}


.reco-modal__eyebrow {
    display: block;

    margin-bottom: 12px;

    color: #df792a;

    font-size: 9px;
    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .06em;
}


.reco-modal__header h2 {
    margin: 0 0 13px;

    color: #fff;

    font-size: clamp(34px, 4vw, 51px);
    line-height: 1;

    font-weight: 300;

    letter-spacing: -1.5px;
}


.reco-modal__header h2 em {
    color: #df792a;

    font-weight: 300;
    font-style: italic;
}


.reco-modal__header p {
    max-width: 590px;

    margin: 0;

    color: #c6b8af;

    font-size: 12px;
    line-height: 1.65;
}


/* ==========================================================
   FORMULAIRE
========================================================== */

.reco-create-form {
    padding: 0 54px;

    background: #f8f4f0;
}


.reco-form-section {
    display: grid;

    grid-template-columns:
        42px
        minmax(0, 1fr);

    gap: 22px;

    padding: 32px 0;

    border-bottom: 1px solid #e4d7cd;
}


.reco-form-section__number {
    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    border: 1px solid #e4c1a5;
    border-radius: 50%;

    color: #df792a;

    font-size: 9px;
    font-weight: 700;
}


.reco-form-section__content {
    min-width: 0;
}


.reco-form-section__heading {
    margin-bottom: 22px;
}


.reco-form-section__heading strong,
.reco-form-section__heading span {
    display: block;
}


.reco-form-section__heading strong {
    margin-bottom: 3px;

    color: #21130e;

    font-size: 14px;
    font-weight: 700;
}


.reco-form-section__heading span {
    color: #8c7d74;

    font-size: 10px;
    line-height: 1.5;
}


/* ==========================================================
   GRILLES DE CHAMPS
========================================================== */

.reco-form-grid {
    display: grid;

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

    gap: 19px;
}


.reco-form-grid--three {
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
}


.reco-field {
    display: block;

    min-width: 0;
}


.reco-field--full {
    grid-column: 1 / -1;
}


/* ==========================================================
   LABELS
========================================================== */

.reco-field > span {
    display: block;

    margin-bottom: 7px;

    color: #38251d;

    font-size: 10px;
    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .025em;
}


.reco-field > span b {
    color: #df792a;
}


/* ==========================================================
   INPUTS
========================================================== */

.reco-field input,
.reco-field select,
.reco-field textarea {
    width: 100%;

    border: 1px solid #d9cbc1;
    border-radius: 4px;

    outline: none;

    background: #fff;

    color: #21130e;

    font-family: "Montserrat", sans-serif;
    font-size: 12px;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}


.reco-field input,
.reco-field select {
    height: 46px;

    padding: 0 14px;
}


.reco-field textarea {
    min-height: 105px;

    padding: 13px 14px;

    resize: vertical;

    line-height: 1.55;
}


.reco-field input:focus,
.reco-field select:focus,
.reco-field textarea:focus {
    border-color: #df792a;

    box-shadow:
        0 0 0 3px
        rgba(223,121,42,.09);
}


.reco-field input::placeholder,
.reco-field textarea::placeholder {
    color: #b4a69d;
}


.reco-field small {
    display: block;

    margin-top: 6px;

    color: #a1938a;

    font-size: 9px;
    line-height: 1.4;
}


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

.reco-form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 25px;

    padding: 27px 0 34px;
}


.reco-form-footer p {
    max-width: 330px;

    margin: 0;

    color: #8b7c73;

    font-size: 9px;
    line-height: 1.5;
}


.reco-form-submit {
    min-width: 230px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 0 18px;

    border: 0;
    border-radius: 4px;

    background: #df792a;

    color: #21130e;

    font-family: "Montserrat", sans-serif;

    font-size: 10px;
    font-weight: 700;

    text-transform: uppercase;

    cursor: pointer;

    transition:
        background .2s ease,
        transform .2s ease;
}


.reco-form-submit:hover {
    background: #e58939;

    transform: translateY(-1px);
}


.reco-form-submit span {
    font-size: 17px;
}


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

@media (max-width: 900px) {

    .reco-actions {
        align-items: stretch;
        flex-direction: column;
    }


    .reco-actions__buttons {
        width: 100%;
    }


    .reco-action-btn {
        min-width: 0;

        flex: 1;
    }

}


@media (max-width: 800px) {

    .reco-modal {
        padding: 15px;
    }


    .reco-modal__header {
        padding: 34px 25px 29px;
    }


    .reco-create-form {
        padding: 0 25px;
    }


    .reco-form-section {
        grid-template-columns: 1fr;

        gap: 12px;
    }


    .reco-form-grid,
    .reco-form-grid--three {
        grid-template-columns: 1fr;
    }


    .reco-field--full {
        grid-column: auto;
    }


    .reco-form-footer {
        align-items: stretch;
        flex-direction: column;
    }


    .reco-form-submit {
        width: 100%;
    }

}


@media (max-width: 520px) {

    .reco-actions__buttons {
        flex-direction: column;
    }


    .reco-action-btn {
        width: 100%;
    }


    .reco-modal__dialog {
        border-radius: 5px;
    }

}

/* ==========================================================
   INTL TEL INPUT — RECHERCHE PAYS
========================================================== */

.reco-field--phone .iti {
    width: 100%;
}


/* Liste déroulante */

.reco-field--phone .iti__dropdown-content {
    min-width: 310px;

    border: 1px solid #d9cbc1;
    border-radius: 5px;

    background: #fff;

    box-shadow:
        0 14px 35px
        rgba(33,19,14,.14);
}


/* Zone de recherche */

.reco-field--phone .iti__search-input {
    width: calc(100% - 20px) !important;
    height: 40px !important;

    display: block;

    margin: 10px !important;
    padding: 0 12px !important;

    border: 1px solid #d9cbc1 !important;
    border-radius: 4px !important;

    background: #fff !important;

    color: #21130e !important;

    font-family: "Montserrat", sans-serif !important;
    font-size: 11px !important;

    line-height: 40px !important;

    box-sizing: border-box !important;

    outline: none !important;
}


.reco-field--phone .iti__search-input:focus {
    border-color: #df792a !important;

    box-shadow:
        0 0 0 3px
        rgba(223,121,42,.09) !important;
}


/* Pays */

.reco-field--phone .iti__country {
    min-height: 38px;

    padding: 7px 11px;

    font-family: "Montserrat", sans-serif;
    font-size: 11px;
}


.reco-field--phone .iti__country:hover,
.reco-field--phone .iti__country.iti__highlight {
    background:
        rgba(223,121,42,.08);
}


/* Nom du pays */

.reco-field--phone .iti__country-name {
    color: #38251d;
}


/* Indicatif */

.reco-field--phone .iti__dial-code {
    color: #a17f6b;
}

/* ==========================================================
   RECHERCHE INDICATIF — ESPACEMENT ICÔNE / TEXTE
========================================================== */

.reco-field--phone .iti__search-input {
    padding-left: 30px !important;
}

.reco-field--phone .iti__search-icon {
    left: 15px !important;
}