/**
 * Création de site — CSS dédié
 * Chargé uniquement sur la page Création de site
 */


/* ============================================
   Hero 100vh — image + fondu + contenu
   ============================================ */
.cds-hero {
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
    background: var(--color-bg);
}

.cds-hero__image-wrap {
    flex: 1;
    position: relative;
    overflow: hidden;
    min-height: 0;
    border: none;
    outline: none;
}

.cds-hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cds-hero__fade {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(to bottom, transparent 0%, var(--color-bg) 100%);
    pointer-events: none;
}


/* ============================================
   Content — titre + bordure + grille
   ============================================ */
.cds-hero__content {
    flex-shrink: 0;
    background: var(--color-bg);
}

.cds-hero__title {
    font-weight: 500;
    color: var(--color-heading);
    margin-bottom: 0;
    padding-top: var(--space-10);
    padding-bottom: var(--space-4);
}

.cds-hero__info {
    position: relative;
    padding-top: var(--space-8);
    padding-bottom: var(--space-10);
}

.cds-hero__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1.5em;
    align-items: start;
}

.cds-hero__text {
    grid-column: span 5;
}

.cds-hero__text p {
    font-size: var(--16px-size);
    color: var(--color-body-light);
    line-height: 1.7;
}

.cds-hero__btn-col {
    grid-column: 10 / -1;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
}


/* ============================================
   Vision — section texte + parallax Osmo
   ============================================ */
.cds-round-wrap {
    position: relative;
    overflow: hidden;
}

.cds-round-overlay {
    opacity: 0;
    pointer-events: none;
    background-color: var(--color-bg);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.cds-vision {
    background-color: var(--color-heading);
    color: var(--color-bg);
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    padding-block: var(--space-20);
    position: relative;
}

.cds-vision__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1.5em;
    position: relative;
    z-index: 2;
}


/* --- Row 1 : Eyebrow + metadata --- */

.cds-vision__deco--cross-r1 {
    grid-row: 1;
    grid-column: 1;
    align-self: center;
}

.cds-vision__eyebrow {
    grid-row: 1;
    grid-column: 2 / span 3;
    font-size: var(--14px-size);
    font-weight: 500;
    color: var(--white);
    margin-bottom: 0;
    align-self: center;
}

.cds-vision__label--grid {
    grid-row: 1;
    grid-column: 10;
}

.cds-vision__coordinates {
    grid-row: 1;
    grid-column: 11 / -1;
    justify-self: end;
    align-self: center;
    display: flex;
    flex-flow: column;
    gap: 0;
}

.cds-vision__coordinates-p {
    font-family: monospace;
    font-size: var(--11px-size);
    line-height: 1.25;
    text-transform: uppercase;
    color: var(--white);
    opacity: 0.5;
    margin-bottom: 0;
}


/* --- Row 2 : Separator --- */

.cds-vision__line--top {
    grid-row: 2;
    grid-column: 1 / -1;
}


/* --- Row 3 : Title --- */

.cds-vision__title {
    grid-row: 3;
    grid-column: 1 / span 9;
    font-weight: 500;
    line-height: 0.95;
    letter-spacing: -0.03em;
    margin-bottom: 0;
    padding-top: var(--space-8);
    color: var(--white);
}

.cds-vision__label--pp {
    grid-row: 3;
    grid-column: 11 / -1;
    align-self: end;
}


/* --- Row 4 : Body + annotations --- */

.cds-vision__meta--res {
    grid-row: 4;
    grid-column: 1 / span 2;
}

.cds-vision__deco--circle {
    grid-row: 4;
    grid-column: 4;
    align-self: start;
}

.cds-vision__deco--cross-r4 {
    grid-row: 4;
    grid-column: 6;
    align-self: start;
    padding-top: var(--space-2);
}

.cds-vision__body {
    grid-row: 4;
    grid-column: 7 / -1;
    padding-top: var(--space-12);
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.cds-vision__body p {
    font-size: var(--16px-size);
    line-height: 1.7;
    color: var(--white);
    margin-bottom: 0;
}


/* --- Row 5 : Separator --- */

.cds-vision__line--bottom {
    grid-row: 5;
    grid-column: 1 / -1;
}


/* --- Row 6 : Bottom annotations --- */

.cds-vision__deco--cross-r6 {
    grid-row: 6;
    grid-column: 1;
    align-self: center;
}

.cds-vision__label--gc {
    grid-row: 6;
    grid-column: 3 / span 2;
}

.cds-vision__deco--dot-r6 {
    grid-row: 6;
    grid-column: 9;
    width: 0.5em;
    height: 0.5em;
    justify-self: center;
    align-self: center;
}

.cds-vision__label--resp {
    grid-row: 6;
    grid-column: 11 / -1;
    justify-self: end;
}


/* --- Shared : numbers, labels, deco, lines --- */

.cds-vision__label {
    font-size: var(--11px-size);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--white);
    align-self: center;
    margin-bottom: 0;
    line-height: 1;
}

.cds-vision__meta {
    font-size: var(--11px-size);
    font-weight: 400;
    letter-spacing: 0.05em;
    color: var(--white);
    align-self: start;
    margin-bottom: 0;
    line-height: 1;
    padding-top: var(--space-2);
}

.cds-vision__deco {
    width: 1em;
    height: 1em;
    color: var(--white);
    opacity: 0.4;
    align-self: center;
}

.cds-vision__line {
    height: 1px;
    background-color: currentColor;
    opacity: 0.12;
}


/* --- Grid overlay (pixel perfect reveal) --- */

.cds-vision__grid-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.cds-vision__grid-overlay .container {
    height: 100%;
}

.cds-vision__grid-row {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1.5em;
    width: 100%;
    height: 100%;
}

.cds-vision__grid-col {
    width: 100%;
    height: 100%;
    background-color: color-mix(in srgb, var(--white) 5%, transparent);
}


/* --- Van de Graaf Canon overlay (inline) --- */

.cds-vision__vdg-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    visibility: hidden;
}

.cds-vision__vdg-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Quadrillage golden-ratio (fond) */
.cds-vision__vdg-grid line {
    stroke: var(--white);
    stroke-opacity: 0.06;
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.cds-vision__vdg-diagonals line {
    stroke: var(--white);
    stroke-opacity: 0.12;
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.cds-vision__vdg-main line {
    stroke: var(--color-primary);
    stroke-opacity: 0.4;
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
}

.cds-vision__vdg-margins rect {
    fill: var(--color-primary);
    fill-opacity: 0.04;
    stroke: none;
}

.cds-vision__vdg-power line {
    stroke: var(--white);
    stroke-opacity: 0.08;
    stroke-width: 1;
    stroke-dasharray: 4 4;
    vector-effect: non-scaling-stroke;
}

.cds-vision__vdg-content {
    fill: none;
    stroke: var(--white);
    stroke-opacity: 0.12;
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.cds-vision__vdg-annotations {
    position: absolute;
    inset: 0;
    z-index: 2;
}

.cds-vision__vdg-anno {
    position: absolute;
    font-size: var(--11px-size);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--white);
}

/* Positions alignées sur la grille VdG (margins 80px = 4.17% H / 7.4% V) */
.cds-vision__vdg-anno--title {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--20px-size);
    letter-spacing: 0.15em;
}

.cds-vision__vdg-anno--title.cds-vdg-vf-title {
    font-family: 'Inter', Arial, sans-serif;
    font-variation-settings: "wght" 400;
    font-size: var(--48px-size);
    letter-spacing: -0.02em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.cds-vdg-vf-title .vf-char {
    display: inline-block;
    will-change: font-variation-settings;
}

.cds-vision__vdg-anno--res {
    top: 7.4%;
    right: 4.2%;
    font-weight: 400;
    opacity: 0.6;
}

.cds-vision__vdg-anno--margins {
    top: 50%;
    left: 2.1%;
    transform: translateY(-50%);
    writing-mode: vertical-lr;
    text-orientation: mixed;
    color: var(--color-primary);
}

.cds-vision__vdg-anno--power {
    top: 50%;
    right: 2.1%;
    transform: translateY(-50%);
    writing-mode: vertical-lr;
    text-orientation: mixed;
    opacity: 0.6;
}

.cds-vision__vdg-anno--exclaim {
    left: 72.9%;
    top: 72.9%;
    transform: rotate(29.36deg);
    transform-origin: left center;
    font-size: var(--11px-size);
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--white);
    opacity: 0.3;
}

.cds-vision__vdg-anno--above-title {
    top: 43%;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: var(--11px-size);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.6;
}

.cds-vision__vdg-anno--below-title {
    top: 57%;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: var(--11px-size);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.6;
}


/* --- Decorative elements (VdG overlay) --- */

.cds-vision__vdg-deco {
    position: absolute;
    width: 1em;
    height: 1em;
    color: var(--white);
    opacity: 0.3;
}

.cds-vision__vdg-deco--tl {
    top: 12%;
    left: 6%;
}

.cds-vision__vdg-deco--tr {
    top: 12%;
    right: 6%;
}

.cds-vision__vdg-deco--bl {
    bottom: 12%;
    left: 6%;
}

.cds-vision__vdg-deco--cr {
    top: 50%;
    right: 12%;
    transform: translateY(-50%);
    width: 0.5em;
    height: 0.5em;
}


/* --- Matter.js canvas (VdG content rectangle) --- */

.cds-vision__vdg-matter {
    position: absolute;
    left: 4.167%;
    top: 7.407%;
    width: 91.667%;
    height: 85.185%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.cds-vision__vdg-matter-target {
    width: 100%;
    height: 100%;
    position: relative;
}

.cds-vision__vdg-matter-target canvas {
    display: block;
    pointer-events: all;
}



/* --- Sentences overlay (inside pin) --- */

.cds-vision__sentences-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
    pointer-events: none;
    visibility: hidden;
    overflow: hidden;
}

.cds-vision__sentence {
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    font-size: clamp(3rem, 8vw, 10vw);
    font-weight: 500;
    line-height: 0.95;
    letter-spacing: -0.04em;
    color: var(--white);
}

.cds-vision__sentence span {
    display: inline-block;
}

.cds-vision__sentence:not(:first-child) {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* ============================================
   Round images section (projets)
   ============================================ */
.c2s-page-creation .mwg_effect007 {
    background-color: var(--color-heading);
    color: var(--color-bg);
    padding-block: 0;
    position: relative;
    z-index: 2;
}


/* ============================================
   Our Approach + Design Services — accordion
   ============================================ */
.cds-approach,
.cds-services {
    background-color: var(--color-bg);
    color: var(--color-heading);
}

.cds-services {
    padding-top: 0;
    padding-bottom: calc(var(--col) * 3);
}

/* --- Peel wrap (approach + services → grisé/dézoom avant testimonials) --- */

.cds-peel-wrap {
    position: relative;
    z-index: 1;
    background-color: var(--color-bg);
    will-change: transform;
}

.cds-peel-wrap__overlay {
    position: absolute;
    inset: 0;
    background-color: var(--color-heading);
    opacity: 0;
    pointer-events: none;
    z-index: 10;
}

.cds-approach__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1.5em;
    align-items: start;
}

.cds-approach__title {
    grid-column: 1 / span 4;
    font-size: var(--72px-size);
    font-weight: 500;
    line-height: 1.1;
    color: var(--color-heading);
}

.cds-accordion {
    grid-column: 6 / -1;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* --- Item (directional hover compatible) --- */
.cds-accordion__item {
    position: relative;
    overflow: hidden;
    clip-path: inset(0);
    margin-top: -1px;
}

/* Orange hover tile (piloté par direction-list-hover.js) */
.cds-accordion__tile {
    background-color: var(--color-primary);
    position: absolute;
    inset: -1px;
    z-index: 0;
}

[data-directional-hover-tile].cds-accordion__tile {
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    transform: translateY(-100%);
}

/* Border top per-item */
.cds-accordion__border {
    background-color: var(--color-border);
    width: 100%;
    height: 1px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

/* Border bottom de l'accordéon entier */
.cds-accordion__border-last {
    background-color: var(--color-border);
    width: 100%;
    height: 1px;
    position: relative;
    z-index: 2;
}

/* --- Header (bouton) --- */
.cds-accordion__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 2.25em 0;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    text-align: left;
    gap: var(--space-4);
    position: relative;
    z-index: 1;
}

.cds-accordion__h3 {
    font-size: var(--20px-size);
    font-weight: 500;
    line-height: 1.3;
    margin: 0;
}

/* --- Icon +/- (2 barres en croix) --- */
.cds-accordion__icon {
    position: relative;
    flex-shrink: 0;
    width: 0.9em;
    height: 0.9em;
}

.cds-accordion__icon span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 1.5px;
    background-color: currentColor;
    transform: translate(-50%, -50%);
    transition: transform var(--duration-base) var(--ease-out-expo);
}

.cds-accordion__icon span:last-child {
    transform: translate(-50%, -50%) rotate(90deg);
}

.cds-accordion__item.is-open .cds-accordion__icon span:last-child {
    transform: translate(-50%, -50%) rotate(180deg);
}

.cds-accordion__item.is-open .cds-accordion__header {
    padding-bottom: var(--space-3);
}

/* --- Body collapse --- */
.cds-accordion__body {
    overflow: hidden;
    max-height: 0;
    transition: max-height var(--duration-slow) var(--ease-out-expo);
    position: relative;
    z-index: 1;
}

.cds-accordion__body p {
    padding: 0 0 2.25em;
    margin: 0;
    font-size: var(--16px-size);
    font-weight: 400;
    line-height: 1.6;
    color: var(--color-body-light);
    max-width: 40em;
}


/* ============================================
   Design Services — video + cards 2×2 staggered
   ============================================ */

.cds-services__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto auto;
    column-gap: 1.5em;
    row-gap: 0;
    align-items: start;
}

.cds-services__title {
    grid-column: 1 / span 3;
    grid-row: 1;
    font-size: var(--72px-size);
    font-weight: 500;
    line-height: 1.1;
    color: var(--color-heading);
    padding-bottom: var(--space-10);
}

/* Colonnes indépendantes (chacune flow flex) — ouvrir une card d'un côté
   n'impacte plus l'autre colonne */
.cds-services__col {
    display: flex;
    flex-direction: column;
    grid-row: 2;
    position: relative;
    z-index: 1;
}

.cds-services__col--left {
    grid-column: 2 / span 3;
}

.cds-services__col--right {
    grid-column: 5 / span 3;
    transform: translateY(-4.5em);
}

.cds-services__card {
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-top: 1px solid var(--color-border);
    background-color: var(--color-bg);
}

.cds-services__card.is-open {
    z-index: 2;
}

/* Border-bottom sur la dernière card de chaque colonne */
.cds-services__col > .cds-services__card:last-child {
    border-bottom: 1px solid var(--color-border);
}

/* Video — col 9-12, hauteur des 2 rows + dépasse de 2.25em haut/bas */
.cds-services__video-wrap {
    grid-column: 9 / -1;
    grid-row: 1 / 3;
    align-self: stretch;
    margin-block: -2.25em -4.5em;
    border-radius: 1em;
    overflow: hidden;
}

.cds-services__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* ============================================
   Testimonials
   ============================================ */

.cds-testimonials {
    background-color: var(--color-bg);
    color: var(--color-heading);
    position: relative;
    z-index: 2;
}

.cds-testimonials > .container:first-child + .container {
    padding-top: calc(var(--col) * 0.5);
}

.cds-testimonials__title {
    font-size: var(--72px-size);
    font-weight: 500;
    line-height: 1.1;
    color: var(--color-heading);
    text-align: center;
}

/* Overlapping slider — grid alignment */
.cds-testimonials .overlapping-slider__wrap {
    overflow: visible;
}

.cds-testimonials .overlapping-slider__collection {
    padding-left: calc(var(--col) + 1.5em);
}

.cds-testimonials .demo-card {
    width: calc(3 * var(--col) + 2 * 1.5em);
}


/* ============================================
   RESPONSIVE — Mobile + Tablet (≤ 991px)
   ============================================
   Toutes les valeurs proviennent de global.css §8 (variables --col-mob,
   --gap-mob, --section-py-mob, --display-md, --display-lg, etc.).
   Aucune nouvelle "valeur magique" — tout est cohérent avec le design system.
   On ne touche QUE aux propriétés structurelles (grid, padding, font-size).
   AUCUN transform, opacity, transition ne change → animations préservées.
   ============================================ */

@media screen and (max-width: 991px) {

    /* ---- HERO : grille 12 cols → 1 col ---- */
    .cds-hero__grid {
        grid-template-columns: 1fr;
        gap: var(--gap-mob);
    }

    .cds-hero__text,
    .cds-hero__btn-col {
        grid-column: 1 / -1;
    }

    .cds-hero__btn-col {
        justify-content: flex-start;
    }

    /* Hero H1 : on utilise la variable globale `--display-hero`
       (clamp 55→72px, cf global.css §1 :root). C'est UN H1, il doit
       être plus gros que les H2 de la page (Vision, Approach, Services
       qui sont à --display-lg = 3.5em ≈ 45px). Avant on était à
       --display-md qui rendait le H1 plus petit que les H2 → mauvaise
       hiérarchie. */
    .cds-hero__title {
        font-size: var(--display-hero);
    }

    .cds-hero__info {
        padding-top: var(--space-6);
        padding-bottom: var(--space-8);
    }


    /* ---- VISION : layout dense desktop → simple stack mobile ----
       On garde eyebrow + title + body, on cache les décorations 12-col
       (cross / labels / coordinates) qui n'ont aucun sens en 1 col.

       IMPORTANT : on force `min-height: 100vh` sur mobile aussi (et non
       `auto`). Le ScrollTrigger du JS fait `pin: true; end: '+=800%'`
       sur le wrapper `.cds-round-wrap`. Si le wrapper fait moins de
       100vh, le contenu noir pinné laisse apparaître un GROS RECTANGLE
       BLANC en dessous (le body) pendant les 800% de scroll virtuel.
       Avec `min-height: 100vh`, le bg noir couvre tout le viewport
       pendant la séquence pinned → ZÉRO rectangle blanc visible. */
    .cds-vision {
        min-height: 100vh;
        min-height: 100svh;
        padding-block: var(--section-py-mob-lg);
    }

    .cds-vision__grid {
        grid-template-columns: 1fr;
        gap: var(--gap-mob);
    }

    .cds-vision__eyebrow,
    .cds-vision__title,
    .cds-vision__body {
        grid-column: 1 / -1;
        grid-row: auto;
        justify-self: start;
    }

    .cds-vision__title {
        padding-top: var(--space-4);
        font-size: var(--display-lg);
        line-height: 1.05;
    }

    .cds-vision__body {
        padding-top: 0;
    }

    /* Décorations 12-cols → masquées (visibility, pas display, pour préserver
       les éventuels refs JS). visibility:collapse retire de la grille proprement. */
    .cds-vision__deco--cross-r1,
    .cds-vision__deco--cross-r4,
    .cds-vision__deco--cross-r6,
    .cds-vision__deco--circle,
    .cds-vision__deco--dot-r6,
    .cds-vision__label--grid,
    .cds-vision__label--pp,
    .cds-vision__label--gc,
    .cds-vision__label--resp,
    .cds-vision__coordinates,
    .cds-vision__line--top,
    .cds-vision__line--bottom,
    .cds-vision__meta--res {
        display: none;
    }

    /* Grid overlay 12-col et Matter.js canvas : cachés en mobile
       (illisibles à 375px + perf gain Matter.js). Le VdG overlay et
       les sentences SONT visibles sur mobile maintenant — le user veut
       voir la Golden Canon Grid, juste BIEN ADAPTÉE. Le JS continue
       de gérer `visibility: visible` au moment du scroll. */
    .cds-vision__grid-overlay,
    .cds-vision__vdg-matter {
        visibility: hidden;
        pointer-events: none;
    }

    /* ---- VdG annotations : adaptations mobile spécifiques ---- */

    /* Title "GOLDEN CANON GRID" : était `white-space: nowrap` + 48px,
       tronqué sur 390px viewport → on autorise le wrap sur 2 lignes
       en centrant, font-size réduit à --display-md → tient sur 2 lignes
       max. */
    .cds-vision__vdg-anno--title.cds-vdg-vf-title {
        font-size: var(--display-md);
        white-space: normal;
        text-align: center;
        max-width: 82vw;
        line-height: 1;
    }

    /* "Ce sont ces fondations invisibles qui font un site d'exception" :
       même traitement, wrap autorisé sur 3 lignes max. Décalé en bas
       du title pour pas chevaucher. */
    .cds-vision__vdg-anno--below-title {
        white-space: normal;
        max-width: 82vw;
        text-align: center;
        line-height: 1.4;
        top: 63%;
    }

    /* "Pixel perfect" au-dessus du title — décalé vers le haut. */
    .cds-vision__vdg-anno--above-title {
        top: 37%;
    }

    /* "Trop bien !" : repositionné à l'intérieur du content rectangle VdG.
       Le `left: 72.9%` du desktop correspond à la diagonale Van de Graaf
       en 16:9. En mobile portrait l'aspect ratio est inversé → on remet
       l'annotation dans la zone visible. */
    .cds-vision__vdg-anno--exclaim {
        left: 60%;
        top: 78%;
        font-size: var(--11px-size);
    }

    /* Annotations latérales (verticales) : font plus petite + plus
       proches du bord pour éviter de chevaucher le contenu central. */
    .cds-vision__vdg-anno--margins,
    .cds-vision__vdg-anno--power {
        font-size: 0.65em;
    }

    .cds-vision__vdg-anno--res {
        font-size: 0.7em;
    }

    /* Décorations + (croix aux coins) : repositionnées plus proches
       des bords du content rectangle VdG visible mobile. */
    .cds-vision__vdg-deco--tl { top: 9%; left: 5%; }
    .cds-vision__vdg-deco--tr { top: 9%; right: 5%; }
    .cds-vision__vdg-deco--bl { bottom: 9%; left: 5%; }
    .cds-vision__vdg-deco--cr { top: 50%; right: 8%; }

    /* Sentences "Et beaucoup d'autres grilles." / "Voyez par vous-même."
       desktop = clamp(3rem, 8vw, 10vw) → planché 48px, trop large sur
       390 viewport, on est tronqué. Mobile : planché ~28px (1.75rem) +
       8vw qui kick à 350px+ + flex-wrap autorisé en sécurité si la
       phrase reste plus large que le viewport (cas de la phrase EN
       avec 35 chars). */
    .cds-vision__sentence {
        font-size: clamp(1.75rem, 6.5vw, 8vw);
        flex-wrap: wrap;
        padding-inline: var(--space-4);
    }


    /* ---- APPROACH : title + accordion en stack ---- */
    .cds-approach__grid {
        grid-template-columns: 1fr;
        gap: var(--gap-mob-loose);
    }

    .cds-approach__title,
    .cds-accordion {
        grid-column: 1 / -1;
    }

    .cds-approach__title {
        font-size: var(--display-lg);
        line-height: 1.05;
    }

    .cds-accordion__h3 {
        font-size: var(--18px-size);
    }

    .cds-accordion__header {
        padding: 1.5em 0;
    }


    /* ---- SERVICES : 2 cols staggered → 1 col plate ---- */
    .cds-services__grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        column-gap: 0;
        row-gap: var(--gap-mob);
    }

    .cds-services__title {
        grid-column: 1 / -1;
        grid-row: auto;
        font-size: var(--display-lg);
        line-height: 1.05;
        padding-bottom: var(--space-6);
    }

    .cds-services__col--left,
    .cds-services__col--right {
        grid-column: 1 / -1;
        grid-row: auto;
        /* Annule le translateY(-4.5em) du stagger desktop, sinon overlap visible. */
        transform: none;
    }

    .cds-services__video-wrap {
        grid-column: 1 / -1;
        grid-row: auto;
        /* Annule margin-block négatif du desktop (qui dépend du grid 2 rows). */
        margin-block: 0;
        margin-top: var(--space-6);
        max-height: 60vh;
    }


    /* ---- TESTIMONIALS : title plus petit + slider plus serré ---- */
    .cds-testimonials__title {
        font-size: var(--display-md);
        line-height: 1.05;
    }

    .cds-testimonials .overlapping-slider__collection {
        padding-left: var(--space-4);
    }

    .cds-testimonials .demo-card {
        /* Plus de var(--col) en mobile (trop étroit) — on bascule sur vw. */
        width: 78vw;
    }
}


/* ============================================
   Mobile portrait (≤ 479px) — overrides très petits écrans
   ============================================ */
@media screen and (max-width: 479px) {

    /* `.cds-hero__title` reste sur `--display-hero` (clamp 55-72px) :
       le min du clamp (55px) garantit que le H1 reste imposant même
       sur smartphone très étroit. Pas besoin d'override ici. */

    .cds-vision__title,
    .cds-approach__title,
    .cds-services__title {
        font-size: var(--display-md);
    }

    .cds-testimonials__title {
        font-size: var(--display-sm);
    }
}