/*
 * CB Territory Home Architecture
 * Lille pilote v1
 */

.cb-territory-homearch {
    background: #fff;
    color: #171717;
}

.cb-tha-container {
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;
}

.cb-tha-section {
    padding: clamp(78px, 8vw, 130px) 0;
}

.cb-tha-section--soft {
    background: #f5f2ec;
}

.cb-tha-section--dark {
    background: #151515;
    color: #fff;
}

.cb-tha-kicker {
    margin: 0 0 16px;
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: .16em;
    text-transform: uppercase;
    opacity: .58;
}

.cb-tha-kicker--light {
    color: #fff;
    opacity: .58;
}

.cb-tha-title {
    max-width: 780px;
    margin: 0;
    font-size: clamp(34px, 4.5vw, 68px);
    line-height: .98;
    font-weight: 400;
    letter-spacing: -.035em;
}

.cb-tha-copy {
    max-width: 650px;
    font-size: clamp(16px, 1.35vw, 19px);
    line-height: 1.75;
    color: #454545;
}

.cb-tha-copy p:first-child {
    margin-top: 0;
}

.cb-tha-copy p:last-child {
    margin-bottom: 0;
}


/* HERO */

.cb-territory-homearch .cb-tha-hero {
    position: relative;
    min-height: 88svh;
    display: flex;
    align-items: flex-end;
    padding:
        clamp(150px, 19vh, 220px)
        clamp(24px, 6vw, 88px)
        clamp(90px, 11vh, 130px);

    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.cb-tha-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.72) 0%,
            rgba(0,0,0,.38) 48%,
            rgba(0,0,0,.08) 100%
        ),
        linear-gradient(
            0deg,
            rgba(0,0,0,.48) 0%,
            transparent 42%
        );
}

.cb-tha-hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    color: #fff;
}

.cb-territory-homearch .cb-tha-hero h1 {
    max-width: 850px;
    margin: 12px 0 22px;

    font-size: clamp(44px, 6.5vw, 94px);
    line-height: .92;
    font-weight: 400;
    letter-spacing: -.045em;
}

.cb-territory-homearch .cb-tha-hero .cb-territory__lead {
    max-width: 680px;
    font-size: clamp(17px, 1.5vw, 21px);
    line-height: 1.55;
}

.cb-tha-hero-proof {
    position: absolute;
    z-index: 2;
    right: clamp(24px, 6vw, 88px);
    bottom: 34px;

    display: flex;
    gap: 18px;

    color: rgba(255,255,255,.72);
    font-size: 10px;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.cb-tha-hero-proof span + span::before {
    content: "·";
    margin-right: 18px;
}


/* APPROCHE */

.cb-tha-two-cols {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: clamp(48px, 8vw, 130px);
    align-items: start;
}


/* PREUVE */

.cb-tha-proof {
    padding: clamp(80px, 9vw, 140px) 0;
    background: #171717;
    color: #fff;
}

.cb-tha-proof h2 {
    max-width: 930px;
    margin: 0;

    font-size: clamp(38px, 5vw, 72px);
    line-height: .98;
    font-weight: 400;
    letter-spacing: -.04em;
}

.cb-tha-proof-lead {
    max-width: 700px;
    margin: 30px 0 0;

    font-size: 17px;
    line-height: 1.7;
    color: rgba(255,255,255,.7);
}

.cb-tha-proof-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;

    margin-top: clamp(55px, 7vw, 90px);

    background: rgba(255,255,255,.18);
}

.cb-tha-proof-grid article {
    min-height: 155px;
    padding: 28px;
    background: #171717;
}

.cb-tha-proof-grid strong {
    display: block;
    margin-bottom: 8px;

    font-size: clamp(28px, 3.5vw, 48px);
    font-weight: 400;
}

.cb-tha-proof-grid span {
    color: rgba(255,255,255,.62);
}


/* HEADINGS */

.cb-tha-section-heading {
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    gap: clamp(40px, 7vw, 100px);
    align-items: end;

    margin-bottom: clamp(42px, 6vw, 80px);
}

.cb-tha-section-heading > p {
    max-width: 530px;
    margin: 0;

    color: #5b5b5b;
    font-size: 16px;
    line-height: 1.7;
}

.cb-tha-section-heading--dark > p {
    color: rgba(255,255,255,.65);
}


/* GALERIE */

.cb-tha-gallery {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 12px;
}

.cb-tha-gallery figure {
    margin: 0;
    overflow: hidden;
    min-height: 320px;
    background: #eee;
}

.cb-tha-gallery figure:nth-child(1),
.cb-tha-gallery figure:nth-child(4) {
    grid-column: span 7;
}

.cb-tha-gallery figure:nth-child(2),
.cb-tha-gallery figure:nth-child(3) {
    grid-column: span 5;
}

.cb-tha-gallery figure:nth-child(n+5) {
    grid-column: span 4;
}

.cb-tha-gallery img {
    width: 100%;
    height: 100%;
    min-height: inherit;
    object-fit: cover;
    display: block;
    transition: transform .65s ease;
}

.cb-tha-gallery figure:hover img {
    transform: scale(1.025);
}


/* ACCOMPAGNEMENT */

.cb-tha-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: rgba(0,0,0,.13);
}

.cb-tha-steps article {
    padding: 34px 26px;
    background: #f5f2ec;
}

.cb-tha-steps article > span {
    display: block;
    margin-bottom: 45px;

    font-size: 11px;
    letter-spacing: .14em;
    opacity: .42;
}

.cb-tha-steps h3 {
    margin: 0 0 12px;
    font-size: 22px;
    font-weight: 500;
}

.cb-tha-steps p {
    margin: 0;
    line-height: 1.65;
    color: #575757;
}


/* CARDS */

.cb-tha-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.cb-tha-card {
    position: relative;
    display: block;
    min-height: 460px;
    overflow: hidden;

    background: #222;
    color: #fff;
    text-decoration: none;
}

.cb-tha-card img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;
    object-fit: cover;

    transition: transform .7s ease;
}

.cb-tha-card:hover img {
    transform: scale(1.035);
}

.cb-tha-card-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.78) 0%,
            rgba(0,0,0,.08) 65%
        );
}

.cb-tha-card-content {
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    bottom: 0;

    padding: 28px;
}

.cb-tha-card-content small {
    display: block;
    margin-bottom: 7px;

    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .13em;
    opacity: .7;
}

.cb-tha-card-content strong {
    display: block;
    font-size: clamp(21px, 2vw, 30px);
    line-height: 1.08;
    font-weight: 400;
}

.cb-tha-reportage-card .cb-tha-card-content > span {
    display: block;
    margin-top: 18px;

    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .7;
}

.cb-tha-center-action {
    margin-top: 40px;
    text-align: center;
}

.cb-tha-outline-button,
.cb-tha-dark-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 48px;
    padding: 12px 22px;

    border: 1px solid #1b1b1b;
    border-radius: 999px;

    color: #171717;
    text-decoration: none;

    font-size: 12px;
    font-weight: 600;
    letter-spacing: .035em;
}

.cb-tha-dark-button {
    color: #fff;
    background: #171717;
}


/* CONSEILS */

.cb-tha-tips {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;

    background: rgba(255,255,255,.15);
}

.cb-tha-tips article {
    padding: 32px 25px;
    background: #151515;
}

.cb-tha-tips h3 {
    margin: 0 0 12px;
    font-size: 20px;
    font-weight: 500;
}

.cb-tha-tips p {
    margin: 0;
    line-height: 1.65;
    color: rgba(255,255,255,.62);
}


/* COLLECTIONS */

.cb-tha-collections {
    padding: clamp(70px, 8vw, 115px) 0;
    background: #eee8df;
}

.cb-tha-collections-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 50px;
}

.cb-tha-collections h2 {
    max-width: 780px;
    margin: 0;

    font-size: clamp(34px, 4vw, 60px);
    line-height: 1;
    font-weight: 400;
    letter-spacing: -.035em;
}

.cb-tha-collections p:not(.cb-tha-kicker) {
    max-width: 700px;
    margin: 24px 0 0;

    line-height: 1.7;
    color: #575757;
}


/* FAQ */

.cb-tha-faq-inner {
    display: grid;
    grid-template-columns: .75fr 1.25fr;
    gap: clamp(50px, 8vw, 120px);
}

.cb-tha-faq-list details {
    border-top: 1px solid rgba(0,0,0,.14);
}

.cb-tha-faq-list details:last-child {
    border-bottom: 1px solid rgba(0,0,0,.14);
}

.cb-tha-faq-list summary {
    padding: 22px 36px 22px 0;
    cursor: pointer;

    font-size: 17px;
    font-weight: 500;
}

.cb-tha-faq-list details > div {
    max-width: 680px;
    padding: 0 35px 24px 0;

    line-height: 1.7;
    color: #555;
}


/* CTA FINAL */

.cb-tha-final-cta {
    padding: clamp(90px, 11vw, 160px) 0;
    text-align: center;

    color: #fff;
    background: #141414;
}

.cb-tha-final-cta h2 {
    max-width: 850px;
    margin: 0 auto;

    font-size: clamp(46px, 7vw, 92px);
    line-height: .94;
    font-weight: 400;
    letter-spacing: -.045em;
}

.cb-tha-final-cta > .cb-tha-container > p:not(.cb-tha-kicker) {
    max-width: 630px;
    margin: 28px auto 35px;

    color: rgba(255,255,255,.67);
    font-size: 17px;
    line-height: 1.7;
}

.cb-tha-final-cta .cb-territory__actions {
    justify-content: center;
}


/* RESPONSIVE */

@media (max-width: 900px) {

    .cb-tha-container {
        width: min(100% - 34px, 1180px);
    }

    .cb-tha-two-cols,
    .cb-tha-section-heading,
    .cb-tha-faq-inner,
    .cb-tha-collections-inner {
        grid-template-columns: 1fr;
    }

    .cb-tha-steps,
    .cb-tha-tips {
        grid-template-columns: 1fr 1fr;
    }

    .cb-tha-cards {
        grid-template-columns: 1fr;
    }

    .cb-tha-card {
        min-height: 420px;
    }

    .cb-tha-hero-proof {
        left: 20px;
        right: 20px;
        bottom: 20px;
        justify-content: flex-start;
        gap: 8px;
        flex-wrap: wrap;
    }

    .cb-tha-hero-proof span + span::before {
        margin-right: 8px;
    }
}


@media (max-width: 620px) {

    .cb-tha-section {
        padding: 72px 0;
    }

    .cb-territory-homearch .cb-tha-hero {
        min-height: 100svh;

        padding:
            125px
            20px
            105px;

        background-position: center;
    }

    .cb-territory-homearch .cb-tha-hero h1 {
        font-size: clamp(43px, 13vw, 68px);
    }

    .cb-tha-gallery {
        grid-template-columns: 1fr 1fr;
        gap: 7px;
    }

    .cb-tha-gallery figure,
    .cb-tha-gallery figure:nth-child(1),
    .cb-tha-gallery figure:nth-child(2),
    .cb-tha-gallery figure:nth-child(3),
    .cb-tha-gallery figure:nth-child(4),
    .cb-tha-gallery figure:nth-child(n+5) {
        grid-column: auto;
        min-height: 255px;
    }

    .cb-tha-gallery figure:first-child {
        grid-column: 1 / -1;
        min-height: 420px;
    }

    .cb-tha-steps,
    .cb-tha-tips {
        grid-template-columns: 1fr;
    }

    .cb-tha-card {
        min-height: 390px;
    }

    .cb-tha-proof-grid {
        grid-template-columns: 1fr;
    }

    .cb-tha-proof-grid article {
        min-height: auto;
    }

    .cb-tha-collections-inner {
        align-items: start;
    }
}

/* ============================================================
   CB LILLE — HERO HOME LANGUAGE V2
   ============================================================ */

body.cb-territory-page .cb-territory-homearch .cb-tha-hero{
    position:relative!important;

    width:100%!important;

    min-height:100svh!important;
    height:100svh!important;

    display:flex!important;
    align-items:center!important;

    padding:
        120px
        clamp(50px,5.2vw,92px)
        70px!important;

    overflow:hidden!important;
    isolation:isolate!important;

    background-size:cover!important;
    background-position:center!important;

    background-color:#050403!important;
}


/* Photo plus vivante */

body.cb-territory-page
.cb-territory-homearch
.cb-tha-hero::before{
    content:"";

    position:absolute;
    inset:0;

    z-index:1;

    pointer-events:none;

    background:
        radial-gradient(
            circle at 60% 42%,
            rgba(240,184,96,.11),
            transparent 25%
        ),
        linear-gradient(
            90deg,
            rgba(0,0,0,.58) 0%,
            rgba(0,0,0,.32) 28%,
            rgba(0,0,0,.04) 58%,
            rgba(0,0,0,.18) 100%
        ),
        linear-gradient(
            180deg,
            rgba(0,0,0,.14) 0%,
            rgba(0,0,0,0) 46%,
            rgba(0,0,0,.38) 100%
        );
}


/* Léger grain cinéma */

body.cb-territory-page
.cb-territory-homearch
.cb-tha-hero::after{
    content:"";

    position:absolute;
    inset:0;

    z-index:2;

    pointer-events:none;

    opacity:.045;

    background-image:
        radial-gradient(
            circle at 20% 30%,
            rgba(255,255,255,.09) 0 1px,
            transparent 1px
        ),
        radial-gradient(
            circle at 70% 60%,
            rgba(255,255,255,.07) 0 1px,
            transparent 1px
        );

    background-size:
        44px 44px,
        62px 62px;

    mix-blend-mode:soft-light;
}


/* Ancien overlay pilote désactivé */

body.cb-territory-page
.cb-territory-homearch
.cb-tha-hero-overlay{
    display:none!important;
}


/* Contenu gauche */

body.cb-territory-page
.cb-territory-homearch
.cb-tha-hero-content{
    position:relative!important;

    z-index:4!important;

    width:min(680px,47vw)!important;
    max-width:680px!important;

    color:#fff!important;
}


/* Kicker */

body.cb-territory-page
.cb-territory-homearch
.cb-tha-hero
.cb-territory__eyebrow{
    margin:0 0 18px!important;

    max-width:650px!important;

    color:#dcb469!important;

    font-family:
        Manrope,
        system-ui,
        sans-serif!important;

    font-size:
        clamp(10px,.70vw,13px)!important;

    line-height:1.25!important;

    font-weight:800!important;

    letter-spacing:.23em!important;

    text-transform:uppercase!important;

    text-shadow:
        0 3px 20px rgba(0,0,0,.72)!important;
}


/* H1 */

body.cb-territory-page
.cb-territory-homearch
.cb-tha-hero h1{
    max-width:680px!important;

    margin:0 0 22px!important;

    color:#fff9ef!important;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif!important;

    font-size:
        clamp(66px,5.25vw,102px)!important;

    line-height:.92!important;

    font-weight:500!important;

    letter-spacing:-.055em!important;

    text-wrap:balance!important;

    text-shadow:
        0 5px 28px rgba(0,0,0,.76)!important;
}


/* Lead */

body.cb-territory-page
.cb-territory-homearch
.cb-tha-hero
.cb-territory__lead{
    max-width:610px!important;

    margin:0!important;

    color:
        rgba(255,248,238,.88)!important;

    font-family:
        Manrope,
        system-ui,
        sans-serif!important;

    font-size:
        clamp(14.5px,.9vw,17px)!important;

    line-height:1.58!important;

    text-shadow:
        0 2px 18px rgba(0,0,0,.72)!important;
}


/* CTA desktop */

body.cb-territory-page
.cb-territory-homearch
.cb-tha-hero
.cb-territory__actions{
    display:flex!important;

    align-items:center!important;

    gap:15px!important;

    margin-top:30px!important;
}


body.cb-territory-page
.cb-territory-homearch
.cb-tha-hero
.cb-territory__button{
    min-height:48px!important;

    display:inline-flex!important;

    align-items:center!important;
    justify-content:center!important;

    padding:0 24px!important;

    border-radius:13px!important;

    border:
        1px solid rgba(244,225,186,.95)!important;

    background:#e0b85f!important;

    color:#15100d!important;

    font-family:
        Manrope,
        system-ui,
        sans-serif!important;

    font-size:11px!important;

    font-weight:800!important;

    letter-spacing:.145em!important;

    text-transform:uppercase!important;

    text-decoration:none!important;

    box-shadow:
        0 16px 40px rgba(0,0,0,.28)!important;
}


body.cb-territory-page
.cb-territory-homearch
.cb-tha-hero
.cb-territory__button:first-child::after{
    content:"→";

    margin-left:14px;

    font-size:16px;
}


body.cb-territory-page
.cb-territory-homearch
.cb-tha-hero
.cb-territory__button--light{
    background:
        rgba(0,0,0,.16)!important;

    color:#dcb469!important;

    border:
        1px solid rgba(224,185,111,.70)!important;

    box-shadow:none!important;
}


/* Preuve bas du hero desktop */

body.cb-territory-page
.cb-territory-homearch
.cb-tha-hero-proof{
    position:absolute!important;

    z-index:4!important;

    right:clamp(40px,5vw,80px)!important;
    bottom:30px!important;

    display:flex!important;

    gap:16px!important;

    color:
        rgba(255,248,238,.70)!important;

    font-family:
        Manrope,
        system-ui,
        sans-serif!important;

    font-size:9px!important;

    font-weight:700!important;

    letter-spacing:.12em!important;

    text-transform:uppercase!important;
}


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

@media(max-width:760px){

    body.cb-territory-page
    .cb-territory-homearch
    .cb-tha-hero{
        min-height:100svh!important;
        height:100svh!important;

        align-items:flex-end!important;

        padding:
            100px
            22px
            112px!important;

        background-position:center center!important;
    }


    body.cb-territory-page
    .cb-territory-homearch
    .cb-tha-hero::before{
        background:
            linear-gradient(
                180deg,
                rgba(0,0,0,.20) 0%,
                rgba(0,0,0,.06) 30%,
                rgba(0,0,0,.18) 55%,
                rgba(0,0,0,.76) 100%
            ),
            linear-gradient(
                90deg,
                rgba(0,0,0,.18),
                rgba(0,0,0,.08)
            );
    }


    body.cb-territory-page
    .cb-territory-homearch
    .cb-tha-hero-content{
        width:100%!important;
        max-width:none!important;

        text-align:left!important;
    }


    body.cb-territory-page
    .cb-territory-homearch
    .cb-tha-hero
    .cb-territory__eyebrow{
        margin-bottom:11px!important;

        font-size:9px!important;

        letter-spacing:.19em!important;
    }


    body.cb-territory-page
    .cb-territory-homearch
    .cb-tha-hero h1{
        max-width:530px!important;

        margin-bottom:16px!important;

        font-size:
            clamp(50px,15vw,72px)!important;

        line-height:.88!important;
    }


    body.cb-territory-page
    .cb-territory-homearch
    .cb-tha-hero
    .cb-territory__lead{
        max-width:530px!important;

        font-size:14px!important;

        line-height:1.5!important;
    }


    /*
     * Sur mobile, on garde le CTA du menu Reportages,
     * donc pas de boutons hero en doublon.
     */

    body.cb-territory-page
    .cb-territory-homearch
    .cb-tha-hero
    .cb-territory__actions{
        display:none!important;
    }


    body.cb-territory-page
    .cb-territory-homearch
    .cb-tha-hero-proof{
        display:none!important;
    }
}