/* ============================================================
   DXG TEMPLATE
   ============================================================ */

:root {
    --doing-beige: rgba(236, 235, 224, 1);
    --doing-bleu-globules: rgba(0, 64, 92, 1);
}

/* Boutons outline sur le template DXG : texte + bordure en bleu globules */
body.page-template-template-dxg .btn.btn--outline {
    color: var(--doing-bleu-globules);
    border-color: var(--doing-bleu-globules);
}

body.page-template-template-dxg .btn.btn--outline:hover {
    box-shadow: inset 800px 0 0 0 var(--doing-bleu-globules);
    color: #fff;
}

/* ------------------------------------------------------------
   NAV scroll-hide (mobile uniquement, template DXG uniquement)
   ------------------------------------------------------------ */

@media (max-width: 991px) {
    body.page-template-template-dxg header:not(.entry-header) {
        transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
        will-change: transform;
    }

    body.page-template-template-dxg.is-nav-hidden header:not(.entry-header) {
        transform: translateY(-100%);
    }
}

body:not(.home):not(.single-post).page-template-template-dxg .site-content {
    padding: 0 !important;
    width: 100%;
}

/* Sticky enablement — aucun ancêtre ne doit avoir overflow: hidden */
body.page-template-template-dxg .site-content,
body.page-template-template-dxg .content-area,
body.page-template-template-dxg .site-main,
body.page-template-template-dxg article.dxg-page,
body.page-template-template-dxg .inside-article,
body.page-template-template-dxg .entry-content {
    overflow: visible !important;
}

/* Override GP containers — pas de bg pour laisser passer le body */
body.page-template-template-dxg .site-content,
body.page-template-template-dxg .content-area,
body.page-template-template-dxg .site-main,
body.page-template-template-dxg article.page,
body.page-template-template-dxg .inside-article,
body.page-template-template-dxg .entry-content,
body.page-template-template-dxg .separate-containers .inside-article,
body.page-template-template-dxg .separate-containers .comments-area,
body.page-template-template-dxg .separate-containers .page-header,
body.page-template-template-dxg .one-container .container,
body.page-template-template-dxg .separate-containers .paging-navigation,
body.page-template-template-dxg .inside-page-header,
body.page-template-template-dxg .one-container .container {
    background: transparent !important;
}

.separate-containers .inside-article, .separate-containers .comments-area, .separate-containers .page-header, .one-container .container, .separate-containers .paging-navigation, .inside-page-header {
    background-color: transparent !important;
}

/* Body background fade (scoped au template DXG) */
body.page-template-template-dxg {
    background-color: #ffffff;
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

body.page-template-template-dxg.is-raison-active {
    background-color: var(--doing-beige);
}

body.page-template-template-dxg.is-spoiler-active {
    background-color: var(--doing-beige);
}

.grid-container {
    margin: 0 !important;
    max-width: none !important;
}

/* ------------------------------------------------------------
   HERO (mobile-first)
   ------------------------------------------------------------ */

.dxg-hero {
    min-height: 100svh;
    padding: clamp(40px, 10vh, 80px) 0;
    display: flex;
    align-items: center;
    overflow: hidden;
    position: relative;
}

.dxg-hero__container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 60px);
}

.dxg-hero__row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

/* ---- Hero visual ---- */

.dxg-hero__col--shapes {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dxg-hero__shape {
    display: block;
    height: auto;
    max-width: 100%;
    width: 220px;
}

/* ---- Contenu : brands / title / tagline ---- */

.dxg-hero__col--content {
    flex: 1 1 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 4vw, 32px);
}

.dxg-hero__content-row {
    display: flex;
}

.dxg-hero__content-row--brands {
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.dxg-hero__brand {
    display: block;
    height: auto;
    width: auto;
}

.dxg-hero__brand--doing {
    max-height: 34px;
    max-width: 110px;
    object-fit: contain;
}

.dxg-hero__brand--globules {
    height: 40px;
    width: auto;
}

.dxg-hero__brand-sep {
    font-family: 'Panchang', sans-serif;
    font-weight: 500;
    font-size: 22px;
    line-height: 1;
    color: var(--doing-bleu-globules);
}

.dxg-hero__title {
    font-family: 'Panchang', sans-serif;
    font-weight: 400;
    font-size: clamp(32px, 8vw, 44px);
    line-height: 1;
    letter-spacing: 0.02em;
    color: var(--doing-bleu-globules);
    text-align: center;
    margin: 0;
}

.dxg-hero__title-tail {
    display: block;
    font-family: 'Panchang', sans-serif;
    font-weight: inherit;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
}

.dxg-hero__content-row--tagline {
    justify-content: center;
}

.dxg-hero__tagline {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.4;
    color: var(--doing-bleu-globules);
    margin: 0;
    text-align: center;
}

/* ------------------------------------------------------------
   HERO — desktop (≥ 992px)
   ------------------------------------------------------------ */

@media (min-width: 992px) {
    .dxg-hero {
        align-items: stretch;
        padding-top: 0;
        padding-bottom: 0;
    }

    .dxg-hero__container {
        padding-left: 0;
    }

    .dxg-hero__row {
        flex-direction: row-reverse;
        align-items: center;
        justify-content: space-between;
        gap: 0;
        height: 100%;
    }

    .dxg-hero__col--shapes {
        flex: 0 0 auto;
        height: 100%;
        align-items: end;
    }

    .dxg-hero__shape {
        width: clamp(327px, 42vw, 700px);
    }

    .dxg-hero__col--content {
        flex: 1 1 auto;
        width: auto;
        gap: clamp(24px, 4vh, 56px);
    }

    .dxg-hero__content-row--brands {
        justify-content: flex-start;
    }

    .dxg-hero__title {
        font-size: 44px;
        line-height: 1;
        text-align: left;
    }

    .dxg-hero__content-row--tagline {
        justify-content: flex-end;
    }

    .dxg-hero__tagline {
        max-width: 340px;
        text-align: left;
    }
}

/* ------------------------------------------------------------
   HERO — very small screens (< 600px)
   ------------------------------------------------------------ */

@media (max-width: 599px) {
    .dxg-hero__content-row--brands {
        gap: 14px;
    }

    .dxg-hero__brand--doing {
        max-height: 28px;
        max-width: 90px;
    }

    .dxg-hero__brand--globules {
        height: 32px;
    }
}

/* ------------------------------------------------------------
   RAISON D'ÊTRE (mobile-first)
   ------------------------------------------------------------ */

.dxg-raison {
    padding: 180px 0;
    background: transparent;
}

.dxg-raison__container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 60px);
}

.dxg-raison__content {
    max-width: 700px;
    margin: 0 auto;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1100ms cubic-bezier(0.16, 1, 0.3, 1), transform 1100ms cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.dxg-raison__content.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

.dxg-raison__eyebrow {
    font-family: 'Panchang', sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--doing-bleu-globules);
    margin: 0 0 24px;
}

.dxg-raison__body {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: clamp(22px, 2.5vw, 36px);
    line-height: 1.7;
    letter-spacing: 0;
    color: var(--doing-bleu-globules);
    margin: 0;
}

.dxg-raison__body strong {
    font-weight: 500;
}

/* Surlignage animé : gradient qui se peint left→right */
.dxg-mark {
    --mark-color: transparent;
    background-color: transparent;
    background-image: linear-gradient(var(--mark-color), var(--mark-color));
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 0% 100%;
    color: inherit;
    padding: 2px 6px;
    margin: 0 -6px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    transition: background-size 600ms cubic-bezier(0.65, 0, 0.35, 1);
}

.dxg-mark--green { --mark-color: var(--doing-green, #ADBE96); }
.dxg-mark--cyan  { --mark-color: var(--doing-cyan, rgba(152, 210, 210, 1)); }
.dxg-mark--yellow { --mark-color: var(--doing-gold, #F4D967); }

.dxg-raison__content.is-revealed .dxg-mark {
    background-size: 100% 100%;
}

.dxg-raison__content.is-revealed .dxg-mark--green { transition-delay: 600ms; }
.dxg-raison__content.is-revealed .dxg-mark--cyan { transition-delay: 900ms; }
.dxg-raison__content.is-revealed .dxg-mark--yellow { transition-delay: 1200ms; }

/* ------------------------------------------------------------
   RAISON — tablette (≥ 600px)
   ------------------------------------------------------------ */

@media (min-width: 600px) {
    .dxg-raison {
        padding: 300px 0;
    }

    .dxg-raison__eyebrow {
        font-size: 16px;
        margin-bottom: 32px;
    }
}

/* ------------------------------------------------------------
   RAISON — desktop (≥ 992px)
   ------------------------------------------------------------ */

@media (min-width: 992px) {
    .dxg-raison {
        padding: 500px 0 200px;
    }
}

/* Accessibilité : reduced motion */
@media (prefers-reduced-motion: reduce) {
    body.page-template-template-dxg {
        transition: none;
    }

    .dxg-raison__content,
    .dxg-raison__content.is-revealed,
    .dxg-mark {
        transition: none;
        opacity: 1;
        transform: none;
    }

    .dxg-mark {
        background-size: 100% 100%;
    }
}

/* ------------------------------------------------------------
   IMMERSION (image sticky fullwidth + scroll-driven overlay & texte cascade)
   ------------------------------------------------------------ */

.dxg-immersion {
    --center-offset: 0px;
    --overlay-opacity: 0;
    position: relative;
    height: 200svh;
}

.dxg-immersion__sticky {
    position: sticky;
    top: 0;
    height: 100svh;
    width: 100%;
    overflow: hidden;
}

.dxg-immersion__image,
.dxg-immersion__overlay,
.dxg-immersion__content {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translateY(var(--center-offset, 0px));
}

.dxg-immersion__image {
    z-index: 1;
}

.dxg-immersion__image picture {
    display: block;
    width: 100%;
    height: 100%;
}

.dxg-immersion__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
}

.dxg-immersion__overlay {
    background-color: rgba(20, 24, 22, 0.72);
    opacity: var(--overlay-opacity, 0);
    pointer-events: none;
    will-change: opacity;
    z-index: 2;
}

.dxg-immersion__content {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: #fff;
    z-index: 3;
}

.dxg-immersion__wrap {
    width: 100%;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.dxg-immersion__title {
    font-family: 'Panchang', sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
    text-align: left;
    color: #fff;
    margin: 0;
    opacity: 0;
    transform: translateY(24px);
    will-change: opacity, transform;
}

.dxg-immersion__rows {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.dxg-immersion__row {
    display: flex;
    flex-direction: column;
    gap: 12px;
    opacity: 0;
    transform: translateY(24px);
    will-change: opacity, transform;
}

.dxg-immersion__text {
    flex: 1 1 auto;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: 0;
    margin: 0;
}

.dxg-immersion__name {
    flex: 0 0 auto;
    align-self: flex-end;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 17px;
    line-height: 1.5;
    letter-spacing: 0;
    white-space: nowrap;
    opacity: 0.75;
}

/* ------------------------------------------------------------
   IMMERSION — desktop (≥ 992px)
   ------------------------------------------------------------ */

@media (min-width: 992px) {
    .dxg-immersion {
        --center-offset: 50px;
        height: 260svh;
    }

    .dxg-immersion__content {
        padding: 24px;
    }

    .dxg-immersion__wrap {
        gap: 38px;
    }

    .dxg-immersion__title {
        font-size: 28px;
    }

    .dxg-immersion__rows {
        gap: 38px;
    }

    .dxg-immersion__row {
        flex-direction: row;
        align-items: flex-start;
        gap: 40px;
    }

    .dxg-immersion__row--reverse {
        flex-direction: row-reverse;
        align-items: flex-end;
    }

    .dxg-immersion__text {
        font-size: 20px;
    }

    .dxg-immersion__name {
        align-self: auto;
        font-size: 23px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dxg-immersion {
        --center-offset: 0px;
        height: 100svh;
    }

    .dxg-immersion__overlay {
        opacity: 1;
    }

    .dxg-immersion__title,
    .dxg-immersion__row {
        opacity: 1;
        transform: none;
    }
}

/* ------------------------------------------------------------
   EXPERTISES (sticky + cards scroll-driven + magnet/spread)
   ------------------------------------------------------------ */

@property --magnet-x {
    syntax: '<length>';
    inherits: false;
    initial-value: 0px;
}

@property --magnet-y {
    syntax: '<length>';
    inherits: false;
    initial-value: 0px;
}

@property --shape-mx {
    syntax: '<length>';
    inherits: true;
    initial-value: 0px;
}

@property --shape-my {
    syntax: '<length>';
    inherits: true;
    initial-value: 0px;
}

@property --img-mx {
    syntax: '<length>';
    inherits: true;
    initial-value: 0px;
}

@property --img-my {
    syntax: '<length>';
    inherits: true;
    initial-value: 0px;
}

@property --img-scale {
    syntax: '<number>';
    inherits: true;
    initial-value: 1.18;
}

.dxg-expertises {
    position: relative;
    padding: 60px 20px 80px;
    min-height: 120vh;
}

.dxg-expertises__sticky {
    position: relative;
    width: 100%;
    height: auto;
    overflow: visible;
}

.dxg-expertises__inner {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.dxg-expertises__title {
    font-family: 'Panchang', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-align: center;
    color: var(--doing-bleu-globules);
    margin: 0;
    position: relative;
    z-index: 1;
}

.dxg-expertises__cards {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 160px);
    column-gap: 12px;
    row-gap: 20px;
    justify-content: center;
    pointer-events: auto;
    z-index: 2;
}

.dxg-expertises__card {
    position: relative;
    width: 160px;
    height: 216px;
    background: var(--doing-gold, #F4D967);
    border-radius: 18px;
    padding: 16px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
    pointer-events: auto;

    --p-window: 0.25;
    --p-swing: 1.3;
    --p: min(1, max(0, calc((var(--cards-progress, 0) - var(--p-start, 0)) / var(--p-window))));
    transform: rotate(calc(var(--final-rot, 0deg) * (1 - var(--p-swing) * var(--p))));
    will-change: transform;
}

.dxg-expertises__card-title {
    font-family: 'Panchang', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.1;
    color: var(--doing-noir, #141816);
    margin: 0;
}

.dxg-expertises__pills {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.dxg-expertises__pill {
    display: inline-block;
    padding: 5px 10px;
    border: 1.25px solid var(--doing-noir, #141816);
    border-radius: 999px;
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--doing-noir, #141816);
    background: transparent;
}

.dxg-expertises__pill--highlight {
    background: var(--doing-cyan, rgba(152, 210, 210, 1));
    border-color: var(--doing-cyan, rgba(152, 210, 210, 1));
    color: var(--doing-noir, #141816);
}

.dxg-expertises__card--1 .dxg-expertises__pill--highlight {
    background: var(--doing-green, #ADBE96);
    border-color: var(--doing-green, #ADBE96);
}

.dxg-expertises__card--2 .dxg-expertises__pill--highlight {
    background: var(--doing-bleu-globules, rgba(0, 64, 92, 1));
    border-color: var(--doing-bleu-globules, rgba(0, 64, 92, 1));
    color: var(--doing-white, #ffffff);
}

.dxg-expertises__card--3 .dxg-expertises__pill--highlight {
    background: var(--doing-cyan, rgba(152, 210, 210, 1));
    border-color: var(--doing-cyan, rgba(152, 210, 210, 1));
}

.dxg-expertises__card--4 .dxg-expertises__pill--highlight {
    background: var(--doing-green, #ADBE96);
    border-color: var(--doing-green, #ADBE96);
}

.dxg-expertises__card--5 .dxg-expertises__pill--highlight {
    background: var(--doing-bleu-globules, rgba(0, 64, 92, 1));
    border-color: var(--doing-bleu-globules, rgba(0, 64, 92, 1));
    color: var(--doing-white, #ffffff);
}

.dxg-expertises__card--6 .dxg-expertises__pill--highlight {
    background: var(--doing-cyan, rgba(152, 210, 210, 1));
    border-color: var(--doing-cyan, rgba(152, 210, 210, 1));
}

/* Base rotation at rest — partagée mobile (rest) et desktop (final).
   --p-start : offset de déclenchement mobile (stagger par card, lu visuellement haut→bas). */
.dxg-expertises__card--1 { --final-rot: -6deg; --p-start: 0; }
.dxg-expertises__card--2 { --final-rot: 4deg; --p-start: 0.15; }
.dxg-expertises__card--3 { --final-rot: 6deg; order: 4; --p-start: 0.45; --p-swing: 2.2; }
.dxg-expertises__card--4 { --final-rot: -4deg; order: 3; --p-start: 0.30; --p-swing: 3; }
.dxg-expertises__card--5 { --final-rot: 3deg; --p-start: 0.60; }
.dxg-expertises__card--6 { --final-rot: 5deg; --p-start: 0.75; }

/* ------------------------------------------------------------
   EXPERTISES — desktop (≥ 992px)
   ------------------------------------------------------------ */

@media (min-width: 992px) {
    .dxg-expertises {
        --nav-clearance: 140px;
        --rot-buffer: 34px;
        --bottom-safety: 24px;
        --row-gap: clamp(16px, 2vh, 24px);
        --available-h: calc(100svh - var(--nav-clearance) - var(--rot-buffer) * 2 - var(--bottom-safety) * 2);
        --card-h: min(
            440px,
            calc((var(--available-h) - var(--row-gap)) / 2)
        );
        --card-w: calc(var(--card-h) * 312 / 408);
        --col-gap: clamp(16px, 1.8vh, 24px);
        --center-offset: calc(var(--nav-clearance) / 2);
        padding: 0;
        min-height: 0;
        height: 200svh;
        margin-top: 40vh;
    }

    .dxg-expertises__sticky {
        position: sticky;
        top: 0;
        height: 100svh;
        overflow: hidden;
    }

    .dxg-expertises__inner {
        flex-direction: row;
        justify-content: center;
        gap: 0;
        height: 100%;
        transform: translateY(var(--center-offset, 0px));
    }

    .dxg-expertises__title {
        font-size: clamp(48px, 8vw, 96px);
    }

    .dxg-expertises__cards {
        position: absolute;
        inset: 0;
        max-width: none;
        display: block;
        column-gap: 0;
        row-gap: 0;
        pointer-events: none;
    }

    .dxg-expertises__card {
        position: absolute;
        width: var(--card-w);
        height: var(--card-h);
        border-radius: 20px;
        padding: 28px;
        gap: 16px;
        --p: var(--cards-progress, 0);
        transform:
            translate(
                calc(var(--start-x, 0vw) * (1 - var(--p)) + var(--magnet-x, 0px)),
                calc(var(--start-y, 0vh) * (1 - var(--p)) + var(--magnet-y, 0px))
            )
            rotate(calc(var(--start-rot, 0deg) * (1 - var(--p)) + var(--final-rot, 0deg) * var(--p)));
        transition: --magnet-x 260ms cubic-bezier(0.22, 1, 0.36, 1),
                    --magnet-y 260ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    .dxg-expertises__card-title {
        font-size: 22px;
    }

    .dxg-expertises__pills {
        gap: 8px;
    }

    .dxg-expertises__pill {
        padding: 5px 12px;
        border-width: 1.5px;
        font-size: 12px;
    }

    .dxg-expertises__card--1 {
        top: calc(50% - var(--card-h) - var(--row-gap) / 2);
        left: calc(50% - var(--card-w) * 1.5 - var(--col-gap));
        --start-x: -80vw;
        --start-y: -30vh;
        --start-rot: -20deg;
    }

    .dxg-expertises__card--2 {
        top: calc(50% - var(--card-h) - var(--row-gap) / 2 - 12px);
        left: calc(50% - var(--card-w) / 2);
        --start-x: 0vw;
        --start-y: -60vh;
        --start-rot: 15deg;
    }

    .dxg-expertises__card--3 {
        top: calc(50% - var(--card-h) - var(--row-gap) / 2);
        left: calc(50% + var(--card-w) / 2 + var(--col-gap));
        --start-x: 80vw;
        --start-y: -30vh;
        --start-rot: 20deg;
        order: initial;
    }

    .dxg-expertises__card--4 {
        top: calc(50% + var(--row-gap) / 2);
        left: calc(50% - var(--card-w) * 1.5 - var(--col-gap));
        --start-x: -80vw;
        --start-y: 30vh;
        --start-rot: 18deg;
        order: initial;
    }

    .dxg-expertises__card--5 {
        top: calc(50% + var(--row-gap) / 2 + 12px);
        left: calc(50% - var(--card-w) / 2);
        --start-x: 0vw;
        --start-y: 60vh;
        --start-rot: -15deg;
    }

    .dxg-expertises__card--6 {
        top: calc(50% + var(--row-gap) / 2);
        left: calc(50% + var(--card-w) / 2 + var(--col-gap));
        --start-x: 80vw;
        --start-y: 30vh;
        --start-rot: -18deg;
    }
}

@media (prefers-reduced-motion: reduce) and (min-width: 992px) {
    .dxg-expertises {
        height: 100svh;
    }

    .dxg-expertises__card {
        --p: 1;
        --magnet-x: 0px;
        --magnet-y: 0px;
        transition: none;
    }
}

/* ------------------------------------------------------------
   ÉQUIPE (body noir → textes → cards stack → cards grid)
   ------------------------------------------------------------ */

body.page-template-template-dxg.is-equipe-active {
    background-color: var(--doing-noir, #141816);
}

.dxg-equipe {
    position: relative;
    padding: 60px 20px 80px;
    min-height: 120vh;
}

.dxg-equipe__sticky {
    position: relative;
    width: 100%;
    height: auto;
    overflow: visible;
}

.dxg-equipe__inner {
    position: relative;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.dxg-equipe__title {
    font-family: 'Panchang', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-align: center;
    color: #fff;
    margin: 0 0 10px;
}

.dxg-equipe__text {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    max-width: 340px;
    margin: 0;
    padding: 0;
    z-index: 2;
    pointer-events: auto;
    opacity: 1;
    transform: none;
}

.dxg-equipe__text--1,
.dxg-equipe__text--2 {
    opacity: 1;
    transform: none;
}

.dxg-equipe__body {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: 0;
    color: #fff;
    margin: 0;
    text-align: center;
}

.dxg-equipe__body--desktop { display: none; }
.dxg-equipe__body--mobile { display: block; }

.dxg-equipe__sup {
    color: var(--doing-gold, #F4D967);
    font-size: 0.45em;
    font-weight: 500;
    vertical-align: super;
    line-height: 1;
}

.dxg-equipe__text .dxg-mark {
    background-size: 100% 100%;
    color: var(--doing-noir, #141816);
}

.dxg-equipe__cards {
    position: relative;
    inset: auto;
    z-index: 1;
    opacity: 1;
    display: grid;
    grid-template-columns: repeat(2, 160px);
    column-gap: 10px;
    row-gap: 10px;
    justify-content: center;
    margin-top: 4px;
}

.dxg-equipe__card {
    position: relative;
    top: auto;
    left: auto;
    width: 160px;
    height: 216px;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    --p-window: 0.25;
    --p-swing: 1.3;
    --p: clamp(0, calc((var(--cards-progress, 0) - var(--p-start, 0)) / var(--p-window)), 1);
    transform: rotate(calc(var(--rot-rest, 0deg) * (1 - var(--p-swing) * var(--p))));
    will-change: transform;
}

.dxg-equipe__photo {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #d9d4c5 0%, #ecebe0 100%);
    overflow: hidden;
    z-index: 0;
}

.dxg-equipe__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(var(--img-scale, 1.18)) translate(var(--img-mx, 0px), var(--img-my, 0px));
    transition: --img-mx 320ms cubic-bezier(0.22, 1, 0.36, 1),
                --img-my 320ms cubic-bezier(0.22, 1, 0.36, 1),
                --img-scale 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.dxg-equipe__card:hover {
    --img-scale: 1.3;
}

.dxg-equipe__shape {
    position: absolute;
    top: var(--sy, 75%);
    left: var(--sx, 50%);
    width: calc(var(--ss, 100px) * var(--shape-scale, 0.85));
    height: calc(var(--ss, 100px) * var(--shape-scale, 0.85));
    transform:
        translate(-50%, -50%)
        translate(var(--shape-mx, 0px), var(--shape-my, 0px))
        rotate(var(--sr, 0deg));
    z-index: 1;
    pointer-events: none;
    transition: --shape-mx 260ms cubic-bezier(0.22, 1, 0.36, 1),
                --shape-my 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.dxg-equipe__shape--globule {
    background: var(--doing-gold, #F4D967);
    border-radius: 50%;
}

.dxg-equipe__shape--doing {
    background: url('/wp-content/uploads/2026/04/doing-icon-b0ec84.svg') no-repeat center / contain;
}

.dxg-equipe__label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    background: transparent;
    padding: 14px 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dxg-equipe__name {
    font-family: 'Panchang', sans-serif;
    font-weight: 700;
    font-size: 10px;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--doing-noir, #141816);
    margin: 0;
}

.dxg-equipe__role {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 1.3;
    color: var(--doing-noir, #141816);
    margin: 0;
}

.dxg-equipe__card--collectif {
    padding: 18px;
    justify-content: space-between;
    gap: 14px;
}

.dxg-equipe__collectif-top {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dxg-equipe__collectif-title {
    font-family: 'Panchang', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.2;
    color: var(--doing-noir, #141816);
    margin: 0;
}

.dxg-equipe__collectif-link {
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: var(--doing-noir, #141816);
    text-decoration: underline;
}

.dxg-equipe__collectif-pills {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
}

.dxg-equipe__pill {
    display: inline-flex;
    align-items: center;
    height: 44px;
    padding: 0 22px;
    border: 1.2px solid var(--doing-noir, #141816);
    border-radius: 999px;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: var(--doing-noir, #141816) !important;
    background-color: transparent;
    text-decoration: none;
    box-shadow: inset 0 0 0 0 transparent;
    transition: box-shadow 0.4s ease-out, color 0.4s ease-out, border-color 0.4s ease-out;
}

.dxg-equipe__pill--doing:hover {
    box-shadow: inset 200px 0 0 0 var(--doing-green, #ADBE96);
    border-color: var(--doing-green, #ADBE96);
    color: var(--doing-noir, #141816) !important;
}

.dxg-equipe__pill--globules:hover {
    box-shadow: inset 200px 0 0 0 var(--doing-bleu-globules, rgba(0, 64, 92, 1));
    border-color: var(--doing-bleu-globules, rgba(0, 64, 92, 1));
    color: var(--doing-white, #ffffff) !important;
}

/* Décalage vertical des shapes sur mobile pour les cards où le shape remonte trop
   (override les --sy définis en inline par PHP) */
@media (max-width: 991px) {
    .dxg-equipe__card--2  .dxg-equipe__shape { --sy: 102% !important; --sx: -15% !important; }
    .dxg-equipe__card--3  .dxg-equipe__shape { --sy: 127% !important; }
    .dxg-equipe__card--7  .dxg-equipe__shape { --sy: 126% !important; }
    .dxg-equipe__card--8  .dxg-equipe__shape { --sy: 120% !important; }
    .dxg-equipe__card--9  .dxg-equipe__shape { --sy: 125% !important; }
    .dxg-equipe__card--10 .dxg-equipe__shape { --sy: 113% !important; }
    .dxg-equipe__card--11 .dxg-equipe__shape { --sy: 119% !important; }
}

/* --stack-rot : rotation de repos (utilisée aussi sur desktop en stack pré-grid).
   --p-start   : offset de déclenchement mobile (stagger haut→bas, gauche→droite). */
.dxg-equipe__card--1  { --stack-rot: -3deg; --rot-rest: -6deg; --p-start: 0;    order: 1;  }
.dxg-equipe__card--2  { --stack-rot:  2deg; --rot-rest:  5deg; --p-start: 0.05; order: 2;  }
.dxg-equipe__card--3  { --stack-rot: -1deg; --rot-rest: -4deg; --p-start: 0.15; order: 4;  }
.dxg-equipe__card--4  { --stack-rot:  4deg; --rot-rest:  7deg; --p-start: 0.10; order: 3;  }
.dxg-equipe__card--5  { --stack-rot: -2deg; --rot-rest: -5deg; --p-start: 0.20; order: 5;  }
.dxg-equipe__card--6  { --stack-rot:  1deg; --rot-rest:  4deg; --p-start: 0.25; order: 6;  }
.dxg-equipe__card--7  { --stack-rot: -4deg; --rot-rest: -7deg; --p-start: 0.30; order: 7;  }
.dxg-equipe__card--8  { --stack-rot:  3deg; --rot-rest:  6deg; --p-start: 0.35; order: 8;  }
.dxg-equipe__card--9  { --stack-rot:  2deg; --rot-rest:  5deg; --p-start: 0.45; order: 10; }
.dxg-equipe__card--10 { --stack-rot: -5deg; --rot-rest: -8deg; --p-start: 0.40; order: 9;  }
.dxg-equipe__card--11 { --stack-rot:  1deg; --rot-rest:  4deg; --p-start: 0.50; order: 11; }
.dxg-equipe__card--12 { --stack-rot: -2deg; --rot-rest: -5deg; --p-start: 0.55; order: 12; }

/* ------------------------------------------------------------
   ÉQUIPE — desktop (≥ 992px) : timeline sticky, stack→grid explode, magnet
   ------------------------------------------------------------ */

@media (min-width: 992px) {
    .dxg-equipe {
        --center-offset: 50px;
        --grid-breathing: 40px;
        --available-h: calc(100svh - var(--center-offset) * 2 - var(--grid-breathing));
        --card-h: min(313px, calc(var(--available-h) / 3));
        --card-w: calc(var(--card-h) * 235 / 313);
        --col-pitch: calc(var(--card-w) * 231 / 235);
        --row-pitch: calc(var(--card-h) * 304 / 313);
        --shape-scale: calc(var(--card-h) / 313px);
        padding: 0;
        min-height: 0;
        height: 500svh;
    }

    .dxg-equipe__title {
        display: none;
    }

    .dxg-equipe__sticky {
        position: sticky;
        top: 0;
        height: 100svh;
        overflow: hidden;
    }

    .dxg-equipe__inner {
        display: block;
        height: 100%;
        gap: 0;
        transform: translateY(var(--center-offset, 0px));
    }

    .dxg-equipe__text {
        position: absolute;
        top: 50%;
        left: 50%;
        width: min(90%, 900px);
        max-width: none;
        z-index: 2;
        pointer-events: none;
        opacity: 0;
        transform: translate(-50%, -50%);
        will-change: opacity, transform;
    }

    .dxg-equipe__text--1 {
        opacity: var(--text1-opacity, 0);
        transform: translate(-50%, calc(-50% + 20px * (1 - var(--text1-opacity, 0))));
    }

    .dxg-equipe__text--2 {
        display: block;
        opacity: var(--text2-opacity, 0);
        transform: translate(-50%, calc(-50% + 20px * (1 - var(--text2-opacity, 0))));
    }

    .dxg-equipe__body {
        font-size: clamp(22px, 2.5vw, 36px);
        line-height: 1.7;
    }

    .dxg-equipe__body--desktop { display: block; }
    .dxg-equipe__body--mobile { display: none; }

    .dxg-equipe__name {
        font-size: 13px;
    }

    .dxg-equipe__text .dxg-mark {
        background-size: 0% 100%;
        color: #fff;
        transition: background-size 600ms cubic-bezier(0.65, 0, 0.35, 1),
                    color 600ms cubic-bezier(0.65, 0, 0.35, 1);
    }

    .dxg-equipe__text.is-revealed .dxg-mark {
        background-size: 100% 100%;
        color: var(--doing-noir, #141816);
    }

    .dxg-equipe__text.is-revealed .dxg-mark:nth-of-type(1) { transition-delay: 0ms; }
    .dxg-equipe__text.is-revealed .dxg-mark:nth-of-type(2) { transition-delay: 300ms; }
    .dxg-equipe__text.is-revealed .dxg-mark:nth-of-type(3) { transition-delay: 600ms; }

    .dxg-equipe__cards {
        position: absolute;
        inset: 0;
        display: block;
        column-gap: 0;
        row-gap: 0;
        margin-top: 0;
        opacity: var(--cards-opacity, 0);
        will-change: opacity;
    }

    .dxg-equipe__card {
        position: absolute;
        top: 50%;
        left: 50%;
        width: var(--card-w);
        height: var(--card-h);
        transform:
            translate(-50%, -50%)
            translate(
                calc(var(--grid-x, 0px) * var(--explode, 0)),
                calc(var(--grid-y, 0px) * var(--explode, 0))
            )
            rotate(calc(var(--stack-rot, 0deg) * (1 - var(--explode, 0))))
            scale(calc((0.88 + 0.12 * var(--cards-scale, 1)) * (1.22 - 0.30 * var(--explode, 0))));
    }

    /* Grid 4 × 3 centered on sticky middle */
    .dxg-equipe__card--1  { --grid-x: calc(var(--col-pitch) * -1.5); --grid-y: calc(var(--row-pitch) * -1); }
    .dxg-equipe__card--2  { --grid-x: calc(var(--col-pitch) * -0.5); --grid-y: calc(var(--row-pitch) * -1); }
    .dxg-equipe__card--3  { --grid-x: calc(var(--col-pitch) *  0.5); --grid-y: calc(var(--row-pitch) * -1); }
    .dxg-equipe__card--4  { --grid-x: calc(var(--col-pitch) *  1.5); --grid-y: calc(var(--row-pitch) * -1); }
    .dxg-equipe__card--5  { --grid-x: calc(var(--col-pitch) * -1.5); --grid-y: 0px; }
    .dxg-equipe__card--6  { --grid-x: calc(var(--col-pitch) * -0.5); --grid-y: 0px; }
    .dxg-equipe__card--7  { --grid-x: calc(var(--col-pitch) *  0.5); --grid-y: 0px; }
    .dxg-equipe__card--8  { --grid-x: calc(var(--col-pitch) *  1.5); --grid-y: 0px; }
    .dxg-equipe__card--9  { --grid-x: calc(var(--col-pitch) * -1.5); --grid-y: var(--row-pitch); }
    .dxg-equipe__card--10 { --grid-x: calc(var(--col-pitch) * -0.5); --grid-y: var(--row-pitch); }
    .dxg-equipe__card--11 { --grid-x: calc(var(--col-pitch) *  0.5); --grid-y: var(--row-pitch); }
    .dxg-equipe__card--12 { --grid-x: calc(var(--col-pitch) *  1.5); --grid-y: var(--row-pitch); }
}

@media (prefers-reduced-motion: reduce) and (min-width: 992px) {
    .dxg-equipe {
        height: 100svh;
    }

    .dxg-equipe__text--1 { opacity: 0; }
    .dxg-equipe__text--2 { opacity: 0; }

    .dxg-equipe__cards { opacity: 1; }

    .dxg-equipe__card {
        --explode: 1;
        --stack-rot: 0deg;
        --cards-scale: 1;
    }
}

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

.dxg-valeurs {
    position: relative;
    padding: 80px 20px 180px;
    min-height: 120vh;
}

.dxg-valeurs__sticky {
    position: relative;
    width: 100%;
    height: auto;
    overflow: visible;
}

.dxg-valeurs__inner {
    position: relative;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

/* --- Title --- */

.dxg-valeurs__title {
    position: relative;
    z-index: 1;
    margin: 0;
    font-family: 'Panchang', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 18px;
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--doing-bleu-globules);
    text-align: center;
    pointer-events: none;
    user-select: none;
}

/* --- Cards container --- */

.dxg-valeurs__cards {
    position: relative;
    inset: auto;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding-top: 24px;
    pointer-events: auto;
}

/* --- Individual card --- */

.dxg-valeurs__card {
    position: relative;
    top: auto;
    left: auto;
    width: 288px;
    height: 288px;
    border-radius: 12px;
    padding: 28px 28px 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;

    --p-window: 0.25;
    --p-swing: 1.3;
    --p: clamp(0, calc((var(--cards-progress, 0) - var(--p-start, 0)) / var(--p-window)), 1);
    transform: rotate(calc(var(--rot-rest, 0deg) * (1 - var(--p-swing) * var(--p))));
    will-change: transform;
}

.dxg-valeurs__card + .dxg-valeurs__card {
    margin-top: -32px;
}

.dxg-valeurs__card-title {
    margin: 0 0 10px;
    font-family: 'Panchang', sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 1.2;
    color: var(--doing-noir, #141816) !important;
}

.dxg-valeurs__card-text {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
}

/* Card 1 — jaune */
.dxg-valeurs__card--1 {
    --stack-rot: 9deg;
    --exit-rot: 30deg;
    --rot-rest: 4deg;
    --p-start: 0;
    order: 1;
    background: var(--doing-gold, #F4D967);
    color: var(--doing-noir, #141816);
}

/* Card 2 — sage green */
.dxg-valeurs__card--2 {
    --stack-rot: 18deg;
    --exit-rot: 25deg;
    --rot-rest: 5deg;
    --p-start: 0.10;
    order: 2;
    background: #B8C1A7;
    color: var(--doing-noir, #141816);
}

/* Card 3 — blanc */
.dxg-valeurs__card--3 {
    --stack-rot: 27deg;
    --exit-rot: 28deg;
    --rot-rest: 3deg;
    --p-start: 0.20;
    order: 3;
    background: #ffffff;
    color: var(--doing-noir, #141816);
    box-shadow: 0 4px 40px rgba(0, 0, 0, 0.08);
}

/* Card 4 — sur desktop : bleu globules (navy) ; sur mobile : cyan (via override plus bas) */
.dxg-valeurs__card--4 {
    --stack-rot: 36deg;
    --exit-rot: 32deg;
    --rot-rest: 6deg;
    --p-start: 0.30;
    order: 4;
    background: var(--doing-cyan, #2DCEB1);
    color: var(--doing-noir, #141816);
}

.dxg-valeurs__card--4 .dxg-valeurs__card-title {
    color: var(--doing-noir, #141816) !important;
}

/* Card 5 — sur desktop : cyan ; sur mobile : bleu globules navy (via override plus bas) */
.dxg-valeurs__card--5 {
    --stack-rot: 45deg;
    --exit-rot: 26deg;
    --rot-rest: 5deg;
    --p-start: 0.40;
    order: 5;
    background: var(--doing-bleu-globules, rgba(0, 64, 92, 1));
    color: #ffffff;
}

.dxg-valeurs__card--5 .dxg-valeurs__card-title {
    color: #ffffff !important;
}

/* --- Shapes décoratives (masquées mobile) --- */

.dxg-valeurs__shapes {
    display: none;
}

.dxg-valeurs__shapes-stack {
    position: absolute;
    bottom: 6%;
    left: 6%;
    display: flex;
    flex-direction: column;
    gap: 0;
    transform: rotate(20deg);
}

.dxg-valeurs__shape {
    display: block;
    width: 192px;
    height: 192px;
}

.dxg-valeurs__shape--yellow-lg {
    transform: translateY(60px) translateX(5px);
}

.dxg-valeurs__shape--green-lg {
    transform: rotate(47deg);
}

/* ------------------------------------------------------------
   VALEURS — desktop (≥ 992px) : sticky 500dvh, stack cards + exit
   ------------------------------------------------------------ */

@media (min-width: 992px) {
    .dxg-valeurs {
        --nav-clearance: 140px;
        --safety: 24px;
        --available-h: calc(100svh - var(--nav-clearance) - var(--safety) * 2);
        /* Les cards tournent jusqu'à 45° : bbox rotated = side * √2.
           Pour tenir dans --available-h : side = available-h / √2 ≈ available-h * 0.707 */
        --card-h: min(500px, calc(var(--available-h) * 0.707));
        --card-w: var(--card-h);
        --center-offset: calc(var(--nav-clearance) / 2);
        padding: 0;
        min-height: 0;
        height: 500svh;
        margin-top: 70vh;
    }

    .dxg-valeurs__sticky {
        position: sticky;
        top: 0;
        height: 100svh;
        overflow: hidden;
    }

    .dxg-valeurs__inner {
        height: 100%;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 0;
        transform: translateY(var(--center-offset, 0px));
    }

    .dxg-valeurs__title {
        font-size: 96px;
        line-height: 120%;
    }

    .dxg-valeurs__cards {
        position: absolute;
        inset: 0;
        max-width: none;
        display: block;
        gap: 0;
        padding-top: 0;
        pointer-events: none;
    }

    .dxg-valeurs__card + .dxg-valeurs__card {
        margin-top: 0;
    }

    .dxg-valeurs__card {
        position: absolute;
        top: 50%;
        left: 50%;
        width: var(--card-w);
        height: var(--card-h);
        border-radius: 24px;
        padding: 48px 40px;
        --unstack: clamp(0, calc(var(--exit, 0) / 0.35), 1);
        --fly: clamp(0, calc((var(--exit, 0) - 0.35) / 0.65), 1);
        transform:
            translate(-50%, -50%)
            translate(calc(140vw * var(--fly)), calc(-10vh * var(--fly)))
            rotate(calc(
                var(--stack-rot, 0deg) * (1 - var(--unstack))
                + var(--exit-rot, 0deg) * var(--fly)
                + 360deg * var(--fly)
            ));
    }

    .dxg-valeurs__card--1 { order: initial; }
    .dxg-valeurs__card--2 { order: initial; }
    .dxg-valeurs__card--3 { order: initial; }

    /* Desktop : cards 4 et 5 conservent leurs couleurs d'origine */
    .dxg-valeurs__card--4 {
        order: initial;
        background: var(--doing-bleu-globules, rgba(0, 64, 92, 1));
        color: #ffffff;
    }

    .dxg-valeurs__card--4 .dxg-valeurs__card-title {
        color: #ffffff !important;
    }

    .dxg-valeurs__card--5 {
        order: initial;
        background: var(--doing-cyan, #2DCEB1);
        color: var(--doing-noir, #141816);
    }

    .dxg-valeurs__card--5 .dxg-valeurs__card-title {
        color: var(--doing-noir, #141816) !important;
    }

    .dxg-valeurs__card-title {
        margin: 0 0 20px;
        font-size: clamp(1.25rem, 2.5vw, 1.75rem);
        font-weight: 700;
    }

    .dxg-valeurs__card-text {
        font-size: clamp(0.875rem, 1.5vw, 1.125rem);
        line-height: 1.6;
    }

    .dxg-valeurs__shapes {
        position: absolute;
        inset: 0;
        z-index: 0;
        display: block;
        pointer-events: none;
    }
}

@media (prefers-reduced-motion: reduce) and (min-width: 992px) {
    .dxg-valeurs {
        height: 100svh;
    }

    .dxg-valeurs__card {
        --exit: 0;
    }
}

/* ============================================================
   SPOILER
   ============================================================ */

.dxg-spoiler {
    position: relative;
    height: auto;
    padding: 60px 0 80px;
}

.dxg-spoiler__sticky {
    position: relative;
    top: auto;
    height: auto;
    width: 100%;
    overflow: visible;
}

.dxg-spoiler__inner {
    position: relative;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0 24px;
    gap: 0;
    opacity: 1;
}

.dxg-spoiler__col {
    display: contents;
}

.dxg-spoiler__reel {
    display: contents;
    transform: none;
}

.dxg-spoiler__slide {
    height: auto;
    display: block;
    margin: 0;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 320ms ease-out,
                transform 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
    will-change: opacity, transform;
}

.dxg-spoiler__slide.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Pair ordering: small (left) puis big (right) pour chaque couple */
.dxg-spoiler__left  .dxg-spoiler__slide:nth-child(1) { order: 1; }
.dxg-spoiler__right .dxg-spoiler__slide:nth-child(1) { order: 2; }
.dxg-spoiler__left  .dxg-spoiler__slide:nth-child(2) { order: 3; }
.dxg-spoiler__right .dxg-spoiler__slide:nth-child(2) { order: 4; }
.dxg-spoiler__left  .dxg-spoiler__slide:nth-child(3) { order: 5; }
.dxg-spoiler__right .dxg-spoiler__slide:nth-child(3) { order: 6; }

/* Espacements : petit rapprochement small→big, grand écart entre pairs */
.dxg-spoiler__left .dxg-spoiler__slide {
    margin: 0 0 12px;
}

.dxg-spoiler__right .dxg-spoiler__slide {
    margin: 0 0 72px;
}

.dxg-spoiler__right .dxg-spoiler__slide:last-child {
    margin-bottom: 0;
}

/* --- Typography --- */

.dxg-spoiler__slide-left {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: 0;
    color: var(--doing-bleu-globules);
}

.dxg-spoiler__slide-right {
    font-family: 'Panchang', sans-serif;
    font-weight: 700;
    font-size: 28px;
    line-height: 1.1;
    letter-spacing: 0;
    text-transform: uppercase;
    text-align: left;
    color: var(--doing-bleu-globules);
    padding-left: 0;
}

@media (max-width: 991px) {
    .dxg-spoiler__left  .dxg-spoiler__slide:nth-child(2),
    .dxg-spoiler__left  .dxg-spoiler__slide:nth-child(3),
    .dxg-spoiler__right .dxg-spoiler__slide:nth-child(2),
    .dxg-spoiler__right .dxg-spoiler__slide:nth-child(3) {
        text-align: end;
    }
}

/* ------------------------------------------------------------
   SPOILER — desktop (≥ 992px) : sticky 500dvh + slot machine scroll-driven
   ------------------------------------------------------------ */

@media (min-width: 992px) {
    .dxg-spoiler {
        --slide-h: 200px;
        height: 300svh;
        padding: 0;
        margin-bottom: 70vh;
    }

    .dxg-spoiler__sticky {
        position: sticky;
        top: 0;
        height: 100svh;
        overflow: hidden;
    }

    .dxg-spoiler__inner {
        height: 100%;
        flex-direction: row;
        align-items: center;
        padding: 0 clamp(40px, 6vw, 100px);
        gap: clamp(40px, 6vw, 100px);
    }

    .dxg-spoiler__col {
        display: block;
        overflow: hidden;
        height: var(--slide-h);
        flex-shrink: 0;
        will-change: opacity;
    }

    .dxg-spoiler__left {
        width: 240px;
        opacity: var(--spoiler-left-opacity, 0);
    }

    .dxg-spoiler__right {
        flex: 1;
        opacity: var(--spoiler-right-opacity, 0);
    }

    .dxg-spoiler__reel {
        display: flex;
        flex-direction: column;
        transform: translateY(calc(var(--slot, 0) * var(--slide-h) * -1));
        will-change: transform;
    }

    .dxg-spoiler__slide {
        height: var(--slide-h);
        flex-shrink: 0;
        display: flex;
        align-items: center;
        margin: 0;
        opacity: 1;
        transform: none;
        transition: none;
        order: initial;
        will-change: auto;
    }

    .dxg-spoiler__left  .dxg-spoiler__slide,
    .dxg-spoiler__right .dxg-spoiler__slide {
        margin: 0;
    }

    .dxg-spoiler__slide-left {
        font-size: 18px;
        line-height: 100%;
    }

    .dxg-spoiler__slide-right {
        font-size: 48px;
        line-height: 100%;
        text-align: left;
        padding-left: 0;
    }
}

/* --- Reduced motion --- */

@media (prefers-reduced-motion: reduce) {
    .dxg-spoiler__slide {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

@media (prefers-reduced-motion: reduce) and (min-width: 992px) {
    .dxg-spoiler {
        height: auto;
    }

    .dxg-spoiler__sticky {
        position: relative;
        height: auto;
        padding: 80px 0;
    }

    .dxg-spoiler__inner {
        opacity: 1;
    }

    .dxg-spoiler__col {
        height: auto;
        overflow: visible;
    }

    .dxg-spoiler__reel {
        transform: none;
    }

    .dxg-spoiler__slide {
        height: auto;
        padding: 16px 0;
    }
}

/* ------------------------------------------------------------
   COEUR DE VALEUR (éditorial 2 cols + shapes + reveal cascade)
   ------------------------------------------------------------ */

.dxg-coeur {
    position: relative;
    padding: clamp(120px, 18vh, 240px) 0 clamp(180px, 25vh, 320px);
    overflow: hidden;
}

.dxg-coeur__container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 60px);
    display: flex;
    flex-direction: column;
    gap: clamp(32px, 4vw, 64px);
}

.dxg-coeur__heading {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.dxg-coeur__top {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: clamp(40px, 6vw, 120px);
}

.dxg-coeur__top .dxg-coeur__headline {
    flex: 1 1 50%;
}

.dxg-coeur__top .dxg-coeur__eyebrow {
    flex: 0 0 auto;
}

.dxg-coeur__details {
    display: flex;
    flex-direction: column;
    gap: 120px;
    width: 50%;
    margin-left: auto;
}

.dxg-coeur__block {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.dxg-coeur__eyebrow {
    font-family: 'Panchang', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--doing-bleu-globules);
    margin: 0;
}

.dxg-coeur__headline {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 45px;
    line-height: 1;
    letter-spacing: 0;
    color: var(--doing-bleu-globules);
    margin: 0;
    text-align: end;
}

.dxg-coeur__subheadline {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 32px;
    line-height: 1;
    letter-spacing: 0;
    color: var(--doing-bleu-globules);
    margin: 0;
}

.dxg-coeur__lead {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 1;
    letter-spacing: 0;
    color: var(--doing-bleu-globules);
    margin: 0;
}

.dxg-coeur__body {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 0;
    color: var(--doing-bleu-globules);
    margin: 0;
}

.dxg-coeur__sup {
    color: var(--doing-gold, #F4D967);
    font-size: 0.45em;
    font-weight: 500;
    vertical-align: super;
    line-height: 1;
}

.dxg-coeur__shapes {
    position: absolute;
    left: -25px;
    bottom: 0;
    width: clamp(240px, 32vw, 420px);
    height: clamp(240px, 32vw, 420px);
    z-index: 1;
    pointer-events: none;
}

.dxg-coeur__shape {
    display: block;
    position: absolute;
    height: 192px;
    width: 192px !important;
}

.dxg-coeur__shape--yellow {
    width: 55%;
    left: 6%;
    bottom: 42%;
}

.dxg-coeur__shape--green {
    width: 78%;
    left: 14%;
    bottom: 0;
    rotate: 17deg;
    transform: translateY(-27px) translateX(2px);
}

.dxg-coeur__eyebrow,
.dxg-coeur__headline,
.dxg-coeur__subheadline,
.dxg-coeur__lead,
.dxg-coeur__body {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1100ms cubic-bezier(0.16, 1, 0.3, 1), transform 1100ms cubic-bezier(0.16, 1, 0.3, 1);
}

.dxg-coeur.is-revealed .dxg-coeur__eyebrow { opacity: 1; transform: translateY(0); transition-delay: 0ms; }
.dxg-coeur.is-revealed .dxg-coeur__top .dxg-coeur__headline { opacity: 1; transform: translateY(0); transition-delay: 100ms; }
.dxg-coeur.is-revealed .dxg-coeur__headline--wide { opacity: 1; transform: translateY(0); transition-delay: 200ms; text-align: start; line-height: 1.5 }
.dxg-coeur__block.is-revealed .dxg-coeur__lead { opacity: 1; transform: translateY(0); transition-delay: 0ms; }
.dxg-coeur__block.is-revealed .dxg-coeur__body { opacity: 1; transform: translateY(0); transition-delay: 150ms; }
.dxg-coeur__block.is-revealed .dxg-coeur__subheadline { opacity: 1; transform: translateY(0); transition-delay: 0ms; }

@media (max-width: 991px) {
    .dxg-coeur__top {
        flex-direction: column;
        gap: 32px;
    }

    .dxg-coeur__top .dxg-coeur__eyebrow {
        padding-top: 0;
    }

    .dxg-coeur__details {
        width: 100%;
        gap: 80px;
    }

    .dxg-coeur__headline {
        font-size: 36px;
    }

    .dxg-coeur__subheadline {
        font-size: 28px;
    }

    .dxg-coeur__lead {
        font-size: 20px;
    }

    .dxg-coeur__shapes {
        width: clamp(180px, 40vw, 280px);
        height: clamp(180px, 40vw, 280px);
    }
}

@media (max-width: 599px) {
    .dxg-coeur {
        padding: 80px 0 100px;
    }

    .dxg-coeur__container {
        gap: 0;
    }

    .dxg-coeur__top {
        gap: 16px;
    }

    .dxg-coeur__eyebrow {
        font-size: 13px;
    }

    .dxg-coeur__headline,
    .dxg-coeur__headline--wide,
    .dxg-coeur.is-revealed .dxg-coeur__headline--wide {
        font-size: 24px;
        line-height: 1.8;
        text-align: start;
    }

    .dxg-coeur__subheadline {
        font-size: 18px;
        line-height: 1.25;
    }

    .dxg-coeur__lead {
        font-size: 15px;
        line-height: 1.4;
    }

    .dxg-coeur__body {
        font-size: 13px;
        line-height: 1.45;
        padding-left: 40px;
    }

    .dxg-coeur__details {
        margin-top: 48px;
        gap: 56px;
    }

    .dxg-coeur__block {
        gap: 12px;
    }

    .dxg-coeur__shapes {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dxg-coeur__eyebrow,
    .dxg-coeur__headline,
    .dxg-coeur__subheadline,
    .dxg-coeur__lead,
    .dxg-coeur__body {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ------------------------------------------------------------
   METHODE (Notre méthode — 2 rows éditoriales + CTA)
   ------------------------------------------------------------ */

.dxg-methode {
    position: relative;
    padding: clamp(120px, 18vh, 240px) 0;
}

.dxg-methode__container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 60px);
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: clamp(40px, 6vw, 120px);
}

.dxg-methode__col {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
}

.dxg-methode__col--left {
    min-height: 100%;
    justify-content: space-between;
    padding: 0 0 8rem;
}

.dxg-methode__col--right {
    gap: 100px;
}

.dxg-methode__block {
    display: flex;
    flex-direction: column;
}

.dxg-methode__block--intro {
    gap: 24px;
}

.dxg-methode__block--levers {
    gap: 50px;
}

.dxg-methode__block--outcome {
    gap: 32px;
}

/* ---- Typographie ---- */

.dxg-methode__eyebrow {
    font-family: 'Panchang', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--doing-bleu-globules);
    margin: 0;
}

.dxg-methode__headline {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 45px;
    line-height: 1.1;
    letter-spacing: 0;
    color: var(--doing-bleu-globules);
    margin: 0;
}

.dxg-methode__lever {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dxg-methode__lever-title {
    font-family: 'Panchang', sans-serif;
    font-weight: 400;
    font-size: clamp(48px, 5.5vw, 72px);
    line-height: 1;
    letter-spacing: 0;
    color: var(--doing-bleu-globules);
    margin: 0;
}

.dxg-methode__lever-caption {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.4;
    color: var(--doing-bleu-globules);
    margin: 0;
}

.dxg-methode__intro {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.5;
    color: var(--doing-bleu-globules);
    margin: 0;
    max-width: 460px;
}

.dxg-methode__outcome {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 28px;
    line-height: 1.35;
    color: var(--doing-bleu-globules);
    margin: 0;
}

.dxg-methode__outcome strong {
    font-weight: 700;
}

.dxg-methode__cta {
    align-self: flex-start;
    margin-top: 24px;
}

/* ---- Reveal cascade ----
   Note : on anime le block--outcome en entier (outcome + CTA) plutôt que chaque enfant
   séparément, sinon le transition-delay posé sur .dxg-methode__cta interfère avec
   la transition hover de .btn.btn--outline (délai appliqué au box-shadow au hover).
*/

.dxg-methode__lever,
.dxg-methode__intro,
.dxg-methode__block--outcome {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1100ms cubic-bezier(0.16, 1, 0.3, 1), transform 1100ms cubic-bezier(0.16, 1, 0.3, 1);
}

.dxg-methode.is-revealed .dxg-methode__lever:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0ms; }
.dxg-methode.is-revealed .dxg-methode__lever:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 150ms; }
.dxg-methode.is-revealed .dxg-methode__lever:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 300ms; }
.dxg-methode.is-revealed .dxg-methode__intro            { opacity: 1; transform: translateY(0); transition-delay: 200ms; }
.dxg-methode.is-revealed .dxg-methode__block--outcome   { opacity: 1; transform: translateY(0); transition-delay: 300ms; }

/* ---- Responsive ---- */

@media (max-width: 991px) {
    .dxg-methode__container {
        flex-direction: column;
        gap: 64px;
    }

    .dxg-methode__col--left,
    .dxg-methode__col--right {
        gap: 64px;
    }

    .dxg-methode__headline {
        font-size: 36px;
    }

    .dxg-methode__outcome {
        font-size: 22px;
    }

    .dxg-methode__intro {
        max-width: none;
    }
}

@media (max-width: 599px) {
    .dxg-methode {
        padding: 80px 0;
    }

    .dxg-methode__container {
        gap: 50px;
    }

    /* Aplatit les cols pour pouvoir réordonner les blocks dans le flow mobile */
    .dxg-methode__col {
        display: contents;
    }

    .dxg-methode__block--intro   { order: 1; gap: 16px; }
    .dxg-methode__block--levers  { order: 2; gap: 28px; padding-left: 28px; margin-bottom: 50px; }
    .dxg-methode__block--context { order: 3; }
    .dxg-methode__block--outcome { order: 4; gap: 20px; }

    .dxg-methode__eyebrow {
        font-size: 13px;
    }

    .dxg-methode__headline {
        font-size: 22px;
        line-height: 1.2;
    }

    .dxg-methode__lever {
        gap: 4px;
    }

    .dxg-methode__lever-title {
        font-size: 32px;
    }

    .dxg-methode__lever-caption {
        font-size: 14px;
    }

    .dxg-methode__intro {
        font-size: 15px;
        line-height: 1.5;
    }

    .dxg-methode__outcome {
        font-size: 24px;
        line-height: 1.4;
    }

    .dxg-methode__cta.btn.btn--outline {
        margin-top: 8px;
        align-self: center;
        justify-content: center;
        text-align: center;
        padding: 0 28px;
        white-space: normal;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dxg-methode__lever,
    .dxg-methode__intro,
    .dxg-methode__block--outcome {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ------------------------------------------------------------
   TÉMOIGNAGES (3 cards parallax + pills + CTA + 2 shapes)
   ------------------------------------------------------------ */

.dxg-temoignages {
    position: relative;
    padding: clamp(120px, 18vh, 240px) 0 clamp(140px, 20vh, 260px);
    overflow: hidden;
}

.dxg-temoignages__container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 60px);
    display: flex;
    flex-direction: column;
    gap: clamp(64px, 10vh, 140px);
}

.dxg-temoignages__intro {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.dxg-temoignages__eyebrow {
    font-family: 'Panchang', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--doing-bleu-globules);
    margin: 0;
}

.dxg-temoignages__title {
    position: relative;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: clamp(32px, 3.6vw, 45px);
    line-height: 1.15;
    color: var(--doing-bleu-globules);
    margin: 0;
    max-width: 640px;
}

.dxg-temoignages__cards {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: clamp(20px, 2.5vw, 40px);
}

.dxg-temoignages__card {
    --base-y: 0px;
    --parallax-y: 0px;
    flex: 1 1 0;
    position: relative;
    padding: 32px;
    border: 1px solid var(--doing-noir, #141816);
    border-radius: 24px;
    background-color: #fff;
    transform: translate3d(0, calc(var(--base-y) + var(--parallax-y)), 0);
    will-change: transform;
    isolation: isolate;
    contain: layout paint;
}

.dxg-temoignages__card--left   { --base-y: 0px;    }
.dxg-temoignages__card--middle { --base-y: 160px;  }
.dxg-temoignages__card--right  { --base-y: -40px;  }

.dxg-temoignages__card-body {
    display: flex;
    flex-direction: column;
    gap: 18px;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--doing-bleu-globules);
}

.dxg-temoignages__card-body p { margin: 0; }

.dxg-temoignages__card-author { margin-top: 28px; }

.dxg-temoignages__card-name {
    font-family: 'Panchang', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: capitalize;
    color: var(--doing-bleu-globules);
    margin: 0;
}

.dxg-temoignages__card-company {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.4;
    color: rgba(0, 64, 92, 0.55);
    margin: 4px 0 0;
}

.dxg-temoignages__conclusion {
    padding: 5rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.dxg-temoignages__pills {
    --pill-progress: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.dxg-temoignages__pill {
    --rot-base: 0deg;
    padding: 10px 24px;
    border-radius: 999px;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1;
    color: var(--doing-noir, #141816);
    rotate: calc(var(--rot-base) * (1 - 2 * var(--pill-progress)));
    will-change: rotate;
}

.dxg-temoignages__pill--cyan   { --rot-base: -6deg; background-color: var(--doing-cyan, #98D2D2); }
.dxg-temoignages__pill--cream  { --rot-base:  4deg; background-color: var(--doing-beige, #ECEBE0); }
.dxg-temoignages__pill--yellow { --rot-base: -5deg; background-color: var(--doing-gold, #F4D967); }

.dxg-temoignages__cta {
    align-self: center;
    text-align: center;
    max-width: 100%;
}

.dxg-temoignages__card,
.dxg-temoignages__conclusion {
    opacity: 0;
    transition: opacity 1100ms cubic-bezier(0.16, 1, 0.3, 1);
}

.dxg-temoignages.is-revealed .dxg-temoignages__card       { opacity: 1; transition-delay: 0ms;   }
.dxg-temoignages.is-revealed .dxg-temoignages__conclusion { opacity: 1; transition-delay: 200ms; }

@media (max-width: 991px) {
    .dxg-temoignages__cards {
        flex-direction: column;
        gap: 32px;
    }
    .dxg-temoignages__card--left,
    .dxg-temoignages__card--middle,
    .dxg-temoignages__card--right {
        --base-y: 0px;
        --parallax-y: 0px;
    }
    .dxg-temoignages__title {
        font-size: 30px;
        max-width: 100%;
    }
    .dxg-temoignages__title::after {
        position: static;
        display: inline-block;
        margin-top: 16px;
    }
}

/* Dots indicator — présent dans le DOM (ajouté par JS) mais visible uniquement sur mobile */
.dxg-temoignages__dots {
    display: none;
}

/* Tagline avant CTA — mobile uniquement */
.dxg-temoignages__tagline {
    display: none;
}

@media (max-width: 599px) {
    .dxg-temoignages { padding: 100px 0; }
    .dxg-temoignages__eyebrow { font-size: 14px; }
    .dxg-temoignages__title   { font-size: 26px; }
    .dxg-temoignages__card    { padding: 20px; }

    .dxg-temoignages__card-body {
        font-size: 13px;
        line-height: 1.45;
        gap: 12px;
    }

    /* Carousel horizontal scroll-snap */
    .dxg-temoignages__cards {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 10px;
        overflow-x: auto;
        overflow-y: visible;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 18vw;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        padding: 20px 18vw;
        margin: 0 calc(-1 * clamp(20px, 4vw, 60px));
    }

    .dxg-temoignages__cards::-webkit-scrollbar {
        display: none;
    }

    .dxg-temoignages__card,
    .dxg-temoignages__card--left,
    .dxg-temoignages__card--middle,
    .dxg-temoignages__card--right {
        --base-y: 0px;
        --parallax-y: 0px;
        --card-scale: 0.94;
        flex: 0 0 64vw;
        width: 64vw;
        max-width: 320px;
        scroll-snap-align: center;
        scroll-snap-stop: always;
        transform: scale(var(--card-scale, 0.94));
        transform-origin: center center;
        transition: transform 90ms linear;
        contain: none;
        isolation: auto;
    }

    /* Card body : transition fluide de max-height peek↔active */
    .dxg-temoignages__card .dxg-temoignages__card-body {
        max-height: 120px;
        overflow: hidden;
        transition: max-height 340ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    .dxg-temoignages__card.is-active .dxg-temoignages__card-body {
        max-height: var(--body-full-h, 520px);
    }

    /* Peek : ellipsis "..." sur le 1er paragraphe */
    .dxg-temoignages__card:not(.is-active) .dxg-temoignages__card-body p:first-child {
        display: -webkit-box;
        -webkit-line-clamp: 5;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Dots indicator (placé au-dessus du carousel) */
    .dxg-temoignages__dots {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin: 0 0 -16px;
    }

    .dxg-temoignages__conclusion {
        padding: 0 0 40px;
        gap: 28px;
    }

    .dxg-temoignages__tagline {
        display: flex;
        flex-direction: column;
        gap: 20px;
        width: 100%;
        max-width: 340px;
        font-family: 'Poppins', sans-serif;
        font-weight: 400;
        font-size: 14px;
        line-height: 1.5;
        color: var(--doing-bleu-globules);
        text-align: left;
    }

    .dxg-temoignages__tagline p {
        margin: 0;
    }

    .dxg-temoignages__tagline p:first-child {
        font-size: 18px;
        line-height: 1.45;
    }

    .dxg-temoignages__tagline-indent {
        padding-left: 40px;
    }

    .dxg-temoignages__dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: rgba(20, 24, 22, 0.25);
        transition: background-color 260ms ease, transform 260ms ease;
    }

    .dxg-temoignages__dot.is-active {
        background-color: var(--doing-noir, #141816);
        transform: scale(1.25);
    }

    /* Pills */
    .dxg-temoignages__pill {
        padding: 15px 25px;
        font-size: 16px;
        font-weight: 600;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dxg-temoignages__card,
    .dxg-temoignages__pill,
    .dxg-temoignages__conclusion {
        opacity: 1;
        transform: none;
        transition: none;
        rotate: 0deg;
    }
}

/* ------------------------------------------------------------
   MÉDIAS (eyebrow + CTA presse + 3 mentions)
   ------------------------------------------------------------ */

.dxg-medias {
    padding: clamp(80px, 12vh, 160px) 0;
}

.dxg-medias__container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 60px);
    display: flex;
    flex-direction: column;
    gap: clamp(48px, 7vh, 96px);
}

.dxg-medias__header {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: clamp(32px, 5vw, 96px);
    row-gap: 24px;
    align-items: center;
}

.dxg-medias__eyebrow {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
}

.dxg-medias__intro {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
}

.dxg-medias__cta {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
}

.dxg-medias__eyebrow {
    font-family: 'Panchang', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--doing-bleu-globules);
    margin: 0;
}

.dxg-medias__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dxg-medias__item {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    padding: 8px 0;
}

.dxg-medias__text {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.4;
    color: var(--doing-bleu-globules);
}

.dxg-medias__name {
    font-family: 'Panchang', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-right: 6px;
}

.dxg-medias__desc {
    color: rgba(0, 64, 92, 0.6);
}

.dxg-medias__link {
    flex: 0 0 auto;
    font-family: 'Panchang', sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--doing-bleu-globules) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: opacity 200ms ease;
}

.dxg-medias__link:hover { opacity: 0.6; }

/* Intro — affichée à la fois desktop (dans le header row) et mobile */
.dxg-medias__intro {
    flex: 1 1 auto;
    max-width: 540px;
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    color: var(--doing-bleu-globules);
}

/* ------------------------------------------------------------
   CONTACT (brands + texte à gauche, 2 CTA à droite)
   ------------------------------------------------------------ */

.dxg-contact {
    padding: clamp(80px, 12vh, 160px) 0 clamp(60px, 9vh, 120px);
}

.dxg-contact__container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 clamp(40px, 6vw, 100px);
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: clamp(32px, 4vw, 96px);
}

.dxg-contact__col {
    display: flex;
    flex-direction: column;
}

.dxg-contact__col--left {
    flex: 1 1 auto;
    gap: 28px;
}

.dxg-contact__col--right {
    flex: 0 0 auto;
    gap: 12px;
    align-items: flex-start;
}

.dxg-contact__brands {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.dxg-contact__brand {
    display: block;
    height: auto;
    width: auto;
}

.dxg-contact__brand--doing    { max-height: 38px; max-width: 130px; object-fit: contain; }
.dxg-contact__brand--globules { height: 44px; }

.dxg-contact__brand-sep {
    font-family: 'Panchang', sans-serif;
    font-weight: 500;
    font-size: 22px;
    line-height: 1;
    color: var(--doing-bleu-globules);
}

.dxg-contact__text {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: clamp(26px, 3vw, 36px);
    line-height: 1.25;
    color: var(--doing-bleu-globules);
    margin: 0;
    max-width: 560px;
}

.dxg-contact__cta {
    gap: 12px;
    justify-content: flex-start;
}

.dxg-contact__cta-icon {
    width: 22px;
    height: 22px;
    display: inline-block;
    flex: 0 0 auto;
    transition: filter 0.4s ease-out;
}

.dxg-contact__cta:hover .dxg-contact__cta-icon {
    filter: brightness(0) invert(1);
}

/* ------------------------------------------------------------
   BOTTOM IMAGE (full-bleed, collée au footer)
   ------------------------------------------------------------ */

.dxg-bottom {
    display: block;
    margin: 0 calc(50% - 50vw);
    padding: 0;
    line-height: 0;
    font-size: 0;
    width: 100vw;
    aspect-ratio: 1440 / 434;
    overflow: hidden;
}

.dxg-bottom__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0;
}

@media (max-width: 991px) {
    .dxg-bottom {
        aspect-ratio: auto;
    }

    .dxg-bottom__image {
        height: auto;
    }
}

/* ---- Responsive ---- */

@media (max-width: 991px) {
    .dxg-medias__header {
        grid-template-columns: 1fr;
        row-gap: 20px;
    }

    .dxg-medias__eyebrow,
    .dxg-medias__intro,
    .dxg-medias__cta {
        grid-column: 1;
        align-self: start;
        justify-self: start;
    }

    .dxg-medias__eyebrow { grid-row: 1; }
    .dxg-medias__intro   { grid-row: 2; }
    .dxg-medias__cta     { grid-row: 3; }

    .dxg-medias__item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .dxg-contact__container {
        flex-direction: column;
        align-items: stretch;
    }

    .dxg-contact__col--right {
        align-items: stretch;
    }

    .dxg-contact__cta { justify-content: center; }
}

@media (max-width: 599px) {
    .dxg-medias__eyebrow,
    .dxg-medias__link { font-size: 14px; }
    .dxg-medias__text { font-size: 16px; }
    .dxg-contact__text { font-size: 22px; }

    /* Contact : brands sur une seule ligne, logos plus petits, CTAs compacts */
    .dxg-contact__brands {
        gap: 14px;
        flex-wrap: nowrap;
    }

    .dxg-contact__brand--doing {
        max-height: 26px;
        max-width: 86px;
    }

    .dxg-contact__brand--globules {
        height: 30px;
    }

    .dxg-contact__brand-sep {
        font-size: 16px;
    }

    .dxg-contact__cta.btn.btn--outline {
        font-size: 16px;
        padding: 12px 16px;
        white-space: nowrap;
    }

    .dxg-contact__cta-icon {
        width: 18px;
        height: 18px;
    }

    /* Affichage mobile : titre + intro + CTA, liste masquée */
    .dxg-medias__container {
        gap: 32px;
    }

    .dxg-medias__header {
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
    }

    .dxg-medias__intro {
        display: block;
        margin: 0;
        font-family: 'Poppins', sans-serif;
        font-weight: 400;
        font-size: 15px;
        line-height: 1.55;
        color: var(--doing-noir, #141816);
    }

    .dxg-medias__cta.btn.btn--outline {
        align-self: stretch;
        justify-content: center;
        text-align: center;
        padding: 0 24px;
        font-size: 14px;
        white-space: nowrap;
        width: 100%;
    }

    .dxg-medias__list {
        display: none;
    }
}