/* ==========================================================
   VALORESSENCE — HOME
   Styles spécifiques à la page d'accueil
========================================================== */


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

.hero {
    position: relative;

    height: 100vh;
    min-height: 575px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    color: #fff;

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


.hero__container {
    flex: 1;

    display: flex;
    align-items: center;

    padding-top: 60px;
    padding-bottom: 90px;
}


.hero__content {
    flex: 0 1 820px;
    max-width: 820px;
}


/* LOGO HERO */

.hero__brand {
    flex: 1;

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

    padding-left: 70px;
}


.hero__brand img {
    width: clamp(220px, 20vw, 340px);
    height: auto;

    display: block;

    opacity: .95;

    filter: drop-shadow(0 20px 45px rgba(0, 0, 0, .25));
}


.eyebrow {
    margin-bottom: 28px;

    font-size: 11px;
    line-height: 1.2;
    font-weight: 500;

    text-transform: uppercase;
}


.eyebrow--light {
    color: #f0ce91;
}


.hero h1 {
    margin: 0;

    color: #fff;

    font-size: clamp(54px, 4.4vw, 80px);
    line-height: 1.02;

    font-weight: 300;

    letter-spacing: -3px;
}


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

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


.hero__intro {
    max-width: 700px;

    margin: 23px 0 0;

    color: #fff;

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


.hero__actions {
    display: flex;
    align-items: center;

    gap: 34px;

    margin-top: 28px;
}


.hero__discover {
    color: #fff;

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

    text-transform: uppercase;

    transition: color .2s ease;
}


.hero__discover:hover {
    color: var(--orange);
}


/* HERO STATS */

.hero__stats {
    width: 100%;

    display: grid;
    grid-template-columns: repeat(4, minmax(150px, 1fr));

    padding:
        13px
        max(
            40px,
            calc((100% - var(--container)) / 2)
        );

    border-top: 1px solid var(--line);

    background: rgba(28,18,13,.35);
}


.hero__stats > div {
    display: flex;
    flex-direction: column;
}


.hero__stats strong {
    color: var(--orange-light);

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

    font-weight: 400;
}


.hero__stats span {
    margin-top: 4px;

    color: #ecd892;

    font-size: 9px;
    line-height: 1.3;

    text-transform: uppercase;
}


/* ==========================================================
   NOTRE ÉCRIN
========================================================== */

.ecrin {
    padding: 110px 0 125px;

    background: var(--cream);

    overflow: hidden;
}


.ecrin__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, .96fr);

    gap: clamp(70px, 7vw, 125px);

    align-items: center;
}


/* IMAGE */

.ecrin__visual {
    position: relative;

    height: 475px;
}


.ecrin__visual img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.ecrin__shade {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to bottom,
            transparent 35%,
            rgba(28,18,13,.08) 55%,
            rgba(28,18,13,.80) 100%
        );
}


/* CITATION */

.ecrin blockquote {
    position: absolute;
    z-index: 2;

    right: 160px;
    bottom: 48px;
    left: 45px;

    margin: 0;

    color: #fff;

    font-size: 13px;
    line-height: 1.6;

    font-style: italic;
}


/* 360 */

.ecrin__stat {
    position: absolute;
    z-index: 3;

    right: -16px;
    bottom: -17px;

    width: 175px;
    height: 100px;

    padding: 18px 25px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    background: var(--orange);

    color: #fff;
}


.ecrin__stat strong {
    color: #fff;

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

    font-weight: 700;

    letter-spacing: -2px;
}


.ecrin__stat span {
    margin-top: 6px;

    color: #fff;

    font-size: 8px;
    line-height: 1.2;

    text-transform: uppercase;
}


/* TEXTE */

.ecrin__content {
    max-width: 680px;
}


.ecrin h2 {
    margin: 0 0 28px;

    color: var(--brown);

    font-size: clamp(40px, 3.1vw, 57px);
    line-height: 1.06;

    font-weight: 300;

    letter-spacing: -2.3px;
}


.ecrin h2 em {
    color: var(--orange);

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


.ecrin__content p {
    margin: 0 0 17px;

    color: var(--brown);

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


/* ==========================================================
   VALEURS
========================================================== */

.values {
    padding: 75px 0 65px;

    background: var(--brown);

    color: #fff;
}


.values h2 {
    margin: 0;

    color: #fff;

    font-size: clamp(39px, 3vw, 55px);
    line-height: 1;

    font-weight: 300;

    letter-spacing: -2px;
}


.values h2 em {
    color: var(--orange);

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


.values__line {
    height: 1px;

    margin-top: 28px;

    background: var(--line);
}


.values__grid {
    display: grid;

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

    padding-top: 45px;
}


.values__grid article {
    min-height: 210px;

    padding: 30px 35px;

    border-right:
        1px solid
        var(--line);
}


.values__grid article:last-child {
    border-right: 0;
}


.value-number {
    display: block;

    margin-bottom: 34px;

    color: var(--orange);

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


.values h3 {
    margin: 0 0 17px;

    color: #fff;

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

    font-weight: 400;
}


.values article p {
    max-width: 310px;

    margin: 0;

    color: #e1c884;

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


/* ==========================================================
   VISION
========================================================== */

.vision {
    position: relative;
    padding: 112px 0 120px;
    overflow: hidden;
    background: var(--cream);
}

.vision::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: min(1120px, 72vw);
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, var(--line), transparent);
}

.vision__heading {
    text-align: center;
}

.vision__heading .section-label {
    justify-content: center;
}

.vision h2 {
    margin: 0;
    color: var(--brown);
    font-size: clamp(44px, 3.45vw, 64px);
    line-height: 1.02;
    font-weight: 300;
    letter-spacing: -2.6px;
}

.vision h2 em {
    color: var(--orange);
    font-weight: 300;
    font-style: italic;
}

.vision__grid {
    width: min(1320px, 100%);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 70px auto 0;
}

.vision-card {
    position: relative;
    min-height: 330px;
    padding: 30px 28px 32px;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(216, 125, 33, .24);
    background: rgba(255, 255, 255, .36);
    overflow: hidden;
    transition: transform .24s ease, background-color .24s ease, border-color .24s ease, box-shadow .24s ease;
}

.vision-card::before {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    right: -100px;
    top: -105px;
    border: 1px solid rgba(216, 125, 33, .16);
    border-radius: 50%;
    transition: transform .35s ease, border-color .25s ease;
}

.vision-card:hover {
    transform: translateY(-7px);
    border-color: rgba(216, 125, 33, .58);
    background: #fff;
    box-shadow: 0 22px 50px rgba(42, 27, 20, .08);
}

.vision-card:hover::before {
    transform: scale(1.25);
    border-color: rgba(216, 125, 33, .35);
}

.vision-card--featured {
    background: var(--brown);
    border-color: var(--brown);
}

.vision-card--featured:hover {
    background: #2f2019;
    border-color: #2f2019;
}

.vision-card__number {
    position: absolute;
    right: 25px;
    top: 25px;
    color: rgba(28, 18, 13, .24);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
}

.vision__icon {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 54px;
    border: 1px solid rgba(216, 125, 33, .34);
    color: var(--orange);
    font-size: 18px;
    font-weight: 300;
}

.vision h3 {
    margin: auto 0 14px;
    color: var(--brown);
    font-size: 18px;
    line-height: 1.3;
    font-weight: 500;
    letter-spacing: -.02em;
}

.vision article p {
    max-width: 300px;
    margin: 0;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.7;
}

.vision-card__line {
    width: 38px;
    height: 2px;
    margin-top: 25px;
    background: var(--orange);
    transition: width .25s ease;
}

.vision-card:hover .vision-card__line {
    width: 78px;
}

.vision-card--featured .vision-card__number,
.vision-card--featured h3,
.vision-card--featured p {
    color: #fff;
}

.vision-card--featured .vision-card__number {
    opacity: .6;
}

.vision-card--featured .vision__icon {
    border-color: rgba(255, 255, 255, .52);
    color: #fff;
}

.vision-card--featured .vision-card__line {
    background: #fff;
}

/* ==========================================================
   CONCEPT
========================================================== */

.concept {
    padding: 115px 0;

    background: var(--cream);
}


.concept__grid {
    width: min(1320px, calc(100% - 40px));

    display: grid;

    grid-template-columns:
        .95fr
        1.05fr;

    gap: 90px;

    align-items: center;
}


.concept__content {
    max-width: 650px;
}


.concept h2 {
    margin: 0 0 28px;

    color: var(--brown);

    font-size: clamp(40px, 3.1vw, 57px);
    line-height: 1.06;

    font-weight: 300;

    letter-spacing: -2.3px;
}


.concept h2 em {
    color: var(--orange);

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


.concept__content > p {
    max-width: 620px;

    margin-bottom: 18px;

    color: var(--brown);

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


/* LISTE */

.concept ul {
    margin: 0;
    padding: 0;

    list-style: none;
}


.concept li {
    position: relative;

    margin: 9px 0;

    padding-left: 15px;

    color: var(--brown);

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


.concept li::before {
    content: "";

    position: absolute;

    top: .55em;
    left: 0;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: var(--orange);
}


/* VISUEL */

.concept__visual {
    min-height: 420px;

    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 10px;
}


.concept__photo {
    position: relative;

    overflow: hidden;
}


.concept__photo::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to bottom,
            transparent 40%,
            rgba(28,18,13,.68)
        );
}


.concept__photo img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.concept__photo span {
    position: absolute;
    z-index: 2;

    bottom: 35px;
    left: 25px;

    color: var(--orange-light);

    font-size: 11px;
    line-height: 1.5;

    text-transform: uppercase;
}


.concept__cards {
    display: grid;

    grid-template-rows:
        1fr
        1fr;

    gap: 10px;
}


.concept-card {
    padding: 30px;

    display: flex;
    align-items: center;

    font-size: 11px;
    line-height: 1.5;

    text-transform: uppercase;
}


.concept-card--orange {
    background: var(--orange);

    color: #fff;
}


.concept-card--grey {
    background: var(--grey);

    color: var(--brown);
}


/* ==========================================================
   ÉVÉNEMENTS
========================================================== */

.events {
    padding: 90px 0 100px;

    background: var(--brown);

    color: #fff;
}


.events > .container {
    width: min(1320px, calc(100% - 120px));
}

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

    margin-bottom: 45px;
}


.events h2 {
    margin: 0;

    color: #fff;

    font-size: clamp(39px, 3vw, 55px);
    line-height: 1;

    font-weight: 300;

    letter-spacing: -2px;
}


.events h2 em {
    color: var(--orange);

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


.text-link {
    padding-bottom: 5px;

    color: var(--orange);

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

    font-weight: 600;

    text-transform: uppercase;
}


.events__list {
    border-top:
        1px solid
        var(--line);
}


.event-row {
    min-height: 125px;

    color: inherit;
    text-decoration: none;
    cursor: pointer;

    transition: background-color .2s ease;

    display: grid;

    grid-template-columns:
        110px
        180px
        1fr
        190px
        40px;

    gap: 25px;

    align-items: center;

    border-bottom:
        1px solid
        var(--line);
}

.event-row:hover {
    background: rgba(255, 255, 255, .035);
}

.event-row:hover .event-arrow {
    transform: translateX(4px);
}

.event-arrow {
    transition: transform .2s ease;
}

.event-date {
    display: flex;
    align-items: baseline;

    gap: 8px;
}


.event-date strong {
    color: var(--orange);

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

    font-weight: 300;
}


.event-date span {
    color: var(--orange);

    font-size: 11px;

    text-transform: uppercase;
}


.event-type {
    color: #d7c689;

    font-size: 9px;

    text-transform: uppercase;
}


.event-main h3 {
    margin: 0 0 7px;

    color: #fff;

    font-size: 17px;
    line-height: 1.3;

    font-weight: 400;
}


.event-main span {
    color: #d7c689;

    font-size: 10px;

    text-transform: uppercase;
}


.event-access {
    color: var(--orange);

    font-size: 9px;

    text-transform: uppercase;
}


.event-arrow {
    color: var(--orange);

    font-size: 18px;
}


/* BOUTON ÉVÉNEMENTS */

.events__footer {
    display: flex;
    justify-content: center;

    margin-top: 45px;
}


.events__footer .btn {
    min-width: 175px;
}


/* ==========================================================
   CTA FINAL HOME
========================================================== */

.home-cta {
    padding: 110px 0;

    background: var(--orange);

    color: #fff;

    text-align: center;
}


.home-cta__small {
    display: block;

    margin-bottom: 20px;

    color: #fff;

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

    font-weight: 600;

    text-transform: uppercase;
}


.home-cta h2 {
    margin: 0;

    color: #fff;

    font-size: clamp(40px, 3.3vw, 60px);
    line-height: 1.06;

    font-weight: 300;

    letter-spacing: -2.3px;
}


.home-cta h2 em {
    color: #fff;

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


.home-cta p {
    max-width: 600px;

    margin: 28px auto;

    color: #fff;

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


.home-cta .btn {
    background: var(--brown);

    color: #fff;
}


.home-cta .btn:hover {
    background: #2c1d16;
}


/* ==========================================================
   TABLETTE
========================================================== */

@media (max-width: 1050px) {

    /* ÉCRIN */

    .ecrin__grid {
        gap: 55px;
    }

    .ecrin__visual {
        height: 430px;
    }


    /* VALEURS */

    .values__grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .values__grid article:nth-child(2) {
        border-right: 0;
    }

    .values__grid article:nth-child(-n+2) {
        border-bottom:
            1px solid
            var(--line);
    }


    /* CONCEPT */

    .concept__grid {
        gap: 50px;
    }


    /* EVENTS */

    .event-row {
        grid-template-columns:
            90px
            140px
            1fr
            150px
            30px;
    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 700px) {

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

    .hero {
        height: 100svh;
        min-height: 620px;
    }

    .hero__container {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .hero h1 {
        font-size:
            clamp(41px, 12vw, 55px);

        letter-spacing: -2px;
    }

    .hero__intro {
        font-size: 13px;
    }

    .hero__actions {
        align-items: flex-start;
        flex-direction: column;

        gap: 20px;
    }

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

        gap: 20px;

        padding: 22px 19px;
    }

    .hero__stats strong {
        font-size: 19px;
    }


    /* ======================================================
       ÉCRIN
    ====================================================== */

    .ecrin {
        padding: 70px 0 90px;
    }

    .ecrin__grid {
        grid-template-columns: 1fr;

        gap: 70px;
    }

    .ecrin__visual {
        height: 390px;
    }

    .ecrin blockquote {
        right: 25px;
        bottom: 45px;
        left: 25px;

        font-size: 12px;
    }

    .ecrin__stat {
        right: 0;
        bottom: -35px;

        width: 145px;
        height: 90px;
    }

    .ecrin__stat strong {
        font-size: 31px;
    }

    .ecrin h2 {
        font-size: 37px;

        letter-spacing: -1.5px;
    }


    /* ======================================================
       VALEURS
    ====================================================== */

    .values {
        padding: 65px 0 45px;
    }

    .values__grid {
        grid-template-columns: 1fr;

        padding-top: 20px;
    }

    .values__grid article,
    .values__grid article:nth-child(-n+2) {
        min-height: auto;

        padding: 30px 0;

        border-right: 0;

        border-bottom:
            1px solid
            var(--line);
    }

    .values__grid article:last-child {
        border-bottom: 0;
    }


    /* ======================================================
       VISION
    ====================================================== */

    .vision {
        padding: 70px 0 80px;
    }

    .vision__heading {
        text-align: left;
    }

    .vision__heading .section-label {
        justify-content: flex-start;
    }

    .vision h2 {
        font-size: 37px;

        letter-spacing: -1.5px;
    }

    .vision__grid {
        grid-template-columns: 1fr;

        gap: 45px;

        margin-top: 50px;
    }


    /* ======================================================
       CONCEPT
    ====================================================== */

    .concept {
        padding: 75px 0;
    }

    .concept__grid {
        grid-template-columns: 1fr;

        gap: 50px;
    }

    .concept h2 {
        font-size: 37px;

        letter-spacing: -1.5px;
    }

    .concept__visual {
        min-height: 400px;
    }


    /* ======================================================
       ÉVÉNEMENTS
    ====================================================== */

    .events {
        padding: 70px 0;
    }

    .events__heading {
        align-items: flex-start;
        flex-direction: column;

        gap: 25px;
    }

    .event-row {
        position: relative;

        grid-template-columns:
            70px
            1fr;

        gap: 15px;

        padding: 25px 30px 25px 0;
    }

    .event-type,
    .event-access {
        display: none;
    }

    .event-arrow {
        position: absolute;

        top: 50%;
        right: 0;

        transform:
            translateY(-50%);
    }

    .events__footer {
        justify-content: flex-start;

        margin-top: 35px;
    }


    /* ======================================================
       CTA
    ====================================================== */

    .home-cta {
        padding: 80px 0;
    }

    .home-cta h2 {
        font-size: 38px;

        letter-spacing: -1.5px;
    }

}


/* ==========================================================
   PETIT MOBILE
========================================================== */

@media (max-width: 480px) {

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

    .concept__photo {
        min-height: 330px;
    }

    .concept__cards {
        grid-template-columns:
            1fr
            1fr;

        grid-template-rows: none;
    }

    .concept-card {
        min-height: 140px;

        padding: 20px;
    }

}

/* Ajustements de largeur — sections concept et événements */
@media (max-width: 1050px) {
    .concept__grid,
    .events > .container {
        width: min(var(--container), calc(100% - 80px));
    }

    .vision__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 850px;
    }
}

@media (max-width: 680px) {
    .concept__grid,
    .events > .container {
        width: calc(100% - 40px);
    }

    .vision {
        padding: 80px 0 86px;
    }

    .vision__grid {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 46px;
    }

    .vision-card {
        min-height: 280px;
    }
}

/* ==========================================================
   LOGO HERO — RESPONSIVE
========================================================== */

@media (max-width: 1050px) {

    .hero__brand {
        padding-left: 35px;
    }

    .hero__brand img {
        width: clamp(170px, 21vw, 240px);
    }

}

@media (max-width: 800px) {

    .hero__brand {
        display: none;
    }

    .hero__content {
        flex: 1;
    }

}