/**
 * Summary Section Module - Styles
 *
 * Section 2 colonnes : titre/texte à gauche, panel/bouton à droite
 * Supporte : panel seul, bouton seul, ou les deux
 */

/* ================================================
   CONTAINER PRINCIPAL
   ================================================ */

.cj-summary {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
    column-gap: 44px;
    row-gap: 0;
    align-items: center;
    min-height: 0;
    margin-inline: calc(clamp(12px, 1.8vw, 28px) * -1);
    padding-inline: clamp(12px, 1.8vw, 28px);
    overflow: visible;
}

.module_column .module.cj-summary,
.sub_column .module.cj-summary {
    min-height: 0;
}

body.themify_builder_active .module.cj-summary {
    margin-inline: 0;
}

/* Variante bouton seul : layout simplifié */
.cj-summary--button-only {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 34px;
    row-gap: 0;
}

.cj-summary--button-only .cj-summary__title {
    max-width: none;
}

/* ================================================
   WATERMARK
   ================================================ */

.cj-summary--has-watermark::before {
    content: var(--summary-watermark, "");
    position: absolute;
    left: -1vw;
    bottom: -0.18em;
    z-index: 0;
    font-family: "Saira Condensed", sans-serif;
    font-size: clamp(86px, 18vw, 260px);
    font-weight: 900;
    line-height: 0.8;
    color: rgba(21, 19, 15, 0.055);
    pointer-events: none;
}

.cj-summary--text-light.cj-summary--has-watermark::before {
    color: rgba(245, 242, 236, 0.055);
}

/* ================================================
   PERSONNAGE
   ================================================ */

.cj-summary__character {
    position: absolute;
    bottom: 0;
    height: clamp(520px, 70vw, 760px);
    max-height: 100%;
    width: auto;
    object-fit: contain;
    object-position: bottom;
    opacity: 0.12;
    z-index: 0;
    pointer-events: none;
}

.cj-summary__character--right {
    right: 2%;
    -webkit-mask-image: linear-gradient(
        to right,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0) 30%,
        rgba(0, 0, 0, 1) 100%
    );
    mask-image: linear-gradient(
        to right,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0) 30%,
        rgba(0, 0, 0, 1) 100%
    );
}

.cj-summary__character--left {
    left: 2%;
    transform: scaleX(-1);
    -webkit-mask-image: linear-gradient(
        to right,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0) 30%,
        rgba(0, 0, 0, 1) 100%
    );
    mask-image: linear-gradient(
        to right,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0) 30%,
        rgba(0, 0, 0, 1) 100%
    );
}

/* ================================================
   CONTENU GAUCHE
   ================================================ */

.cj-summary__copy {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

/* Titre */
.cj-summary__title {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 6px;
    max-width: 880px;
    min-width: 0;
    margin: 0;
    font-family: "Saira Condensed", sans-serif;
    font-weight: 900;
    line-height: 0.88;
    text-transform: uppercase;
    color: #15130f;
}

/* Tailles de titre */
.cj-summary__title--large {
    font-size: clamp(48px, 6.7vw, 104px);
}

.cj-summary__title--medium {
    font-size: clamp(46px, 6vw, 88px);
}

.cj-summary__title--small {
    font-size: clamp(36px, 5vw, 68px);
}

.cj-summary__title-primary {
    color: #15130f;
}

.cj-summary__title-accent {
    color: #eb5d0f;
}

.cj-summary--text-light .cj-summary__title-primary {
    color: #f5f2ec;
}

.cj-summary__title-break {
    flex-basis: 100%;
    height: 0;
}

/* Texte */
.cj-summary__text {
    max-width: 760px;
    margin: 32px 0 0;
    font-family: "Saira", sans-serif;
    font-size: clamp(19px, 2vw, 27px);
    line-height: 1.4;
    color: #1d1a15;
}

.cj-summary--text-light .cj-summary__text {
    color: rgba(245, 242, 236, 0.84);
}

/* ================================================
   VARIANTE EDITORIALE / INTRO
   ================================================ */

.cj-summary--editorial {
    grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.1fr);
    column-gap: clamp(42px, 6vw, 96px);
    row-gap: 0;
    align-items: stretch;
}

.cj-summary--editorial .cj-summary__heading,
.cj-summary--editorial .cj-summary__body {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.cj-summary--editorial .cj-summary__title {
    max-width: 760px;
}

.cj-summary--editorial-align-start {
    align-items: start;
}

.cj-summary--editorial-align-center {
    align-items: center;
}

.cj-summary--editorial-align-end {
    align-items: end;
}

.cj-summary--editorial-align-start .cj-summary__body,
.cj-summary--editorial-align-center .cj-summary__body,
.cj-summary--editorial-align-end .cj-summary__body {
    min-height: 0;
}

.cj-summary__body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100%;
    padding-top: clamp(4px, 1.2vw, 18px);
}

.cj-summary__paragraphs {
    max-width: 760px;
}

.cj-summary__paragraph {
    max-width: 760px;
    margin: 0;
    font-family: "Saira", sans-serif;
    font-size: clamp(17px, 1.35vw, 21px);
    line-height: 1.58;
    color: #1d1a15;
}

.cj-summary--text-light .cj-summary__paragraph {
    color: rgba(245, 242, 236, 0.84);
}

.cj-summary__paragraph--normal {
    margin-bottom: 20px;
}

.cj-summary__paragraph--large {
    margin-bottom: 30px;
}

.cj-summary__paragraph--none {
    margin-bottom: 0;
}

.cj-summary__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: clamp(28px, 4vw, 48px);
    border-top: 1px solid rgba(21, 19, 15, 0.14);
}

.cj-summary--text-light .cj-summary__stats {
    border-top-color: rgba(245, 242, 236, 0.18);
}

.cj-summary__stat {
    min-width: 0;
    padding: 24px 22px 0;
    border-left: 1px solid rgba(21, 19, 15, 0.14);
}

.cj-summary--text-light .cj-summary__stat {
    border-left-color: rgba(245, 242, 236, 0.18);
}

.cj-summary__stat--first {
    padding-left: 0;
    border-left: 0;
}

.cj-summary__stat-number {
    font-family: "Saira Condensed", sans-serif;
    font-size: clamp(28px, 4.8vw, var(--summary-stat-number-size, 46px));
    font-weight: 900;
    line-height: 0.9;
    color: #15130f;
}

.cj-summary--text-light .cj-summary__stat-number {
    color: #f5f2ec;
}

.cj-summary__stat-number span {
    color: #eb5d0f;
}

.cj-summary__stat-label {
    margin-top: 8px;
    font-family: "Space Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.14em;
    line-height: 1.35;
    text-transform: uppercase;
    color: #6f685e;
}

.cj-summary--text-light .cj-summary__stat-label {
    color: rgba(245, 242, 236, 0.62);
}

/* ================================================
   PANEL DROIT
   ================================================ */

.cj-summary__panel {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-self: center;
    justify-self: end;
    width: min(100%, 460px);
    max-width: 460px;
    box-sizing: border-box;
    padding: 30px 30px 32px;
    background: rgba(11, 10, 9, 0.92);
    color: #f5f2ec;
    border-top: 5px solid #eb5d0f;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.2);
}

.cj-summary__amount {
    margin-bottom: 16px;
    font-family: "Saira Condensed", sans-serif;
    font-size: clamp(70px, 8vw, 112px);
    font-weight: 900;
    line-height: 0.8;
    color: #eb5d0f;
}

.cj-summary__panel-desc {
    margin: 0 0 24px;
    font-family: "Saira", sans-serif;
    font-size: 17px;
    line-height: 1.45;
    color: #eee8df;
}

.cj-summary__lines {
    display: grid;
    gap: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.cj-summary__lines span {
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    font-family: "Space Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #d8d0c5;
}

/* ================================================
   BOUTON (style split-button)
   ================================================ */

.cj-summary__button {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: stretch;
    align-self: center;
    justify-self: end;
    height: 52px;
    font-family: "Saira Condensed", sans-serif;
    font-weight: 800;
    font-size: 16px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: transform 200ms ease;
}

.cj-summary__button:hover {
    transform: translateY(-2px);
}

.cj-summary__button span:first-child {
    display: flex;
    align-items: center;
    padding: 0 26px;
    white-space: nowrap;
}

.cj-summary__button span:last-child {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    font-size: 20px;
}

/* Style sombre (fond noir + icône orange) */
.cj-summary__button--dark span:first-child {
    background: #0b0a09;
    color: #f5f2ec;
}

.cj-summary__button--dark span:last-child {
    background: #eb5d0f;
    color: #0b0a09;
}

/* Style orange (fond orange + icône blanche) */
.cj-summary__button--orange span:first-child {
    background: #eb5d0f;
    color: #0b0a09;
}

.cj-summary__button--orange span:last-child {
    background: #fff;
    color: #0b0a09;
}

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

@media (max-width: 1080px) {
    .cj-summary--button-only {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1024px) {
    .cj-summary {
        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap: 28px;
    }

    .cj-summary--editorial {
        column-gap: 0;
        row-gap: 24px;
        align-items: start;
    }

    .cj-summary__body {
        justify-content: flex-start;
        min-height: 0;
    }

    .cj-summary__panel {
        justify-self: center;
        width: 100%;
        max-width: 500px;
    }

    .cj-summary__button {
        justify-self: start;
    }
}

@media (max-width: 768px) {
    .cj-summary {
        row-gap: 24px;
    }

    .cj-summary__title--large {
        font-size: clamp(40px, 14vw, 62px);
    }

    .cj-summary__title--medium {
        font-size: clamp(36px, 12vw, 54px);
    }

    .cj-summary__title--small {
        font-size: clamp(30px, 10vw, 44px);
    }

    .cj-summary__text {
        margin-top: 24px;
        font-size: 18px;
    }

    .cj-summary__body {
        padding-top: 0;
    }

    .cj-summary__paragraph {
        font-size: 17px;
    }

    .cj-summary__stats {
        grid-template-columns: 1fr;
    }

    .cj-summary__stat,
    .cj-summary__stat--first {
        padding: 18px 0;
        border-top: 1px solid rgba(21, 19, 15, 0.14);
        border-left: 0;
    }

    .cj-summary--text-light .cj-summary__stat,
    .cj-summary--text-light .cj-summary__stat--first {
        border-top-color: rgba(245, 242, 236, 0.18);
    }

    .cj-summary__stat--first {
        border-top: 0;
    }

    .cj-summary__panel {
        padding: 28px 22px 30px;
    }

    .cj-summary__amount {
        font-size: clamp(76px, 24vw, 108px);
    }

    .cj-summary__button {
        height: 48px;
        font-size: 14px;
    }

    .cj-summary__button span:first-child {
        padding: 0 18px;
    }

    .cj-summary__button span:last-child {
        width: 48px;
    }

    .cj-summary__character {
        height: clamp(420px, 112vw, 620px);
    }
}