/* ============================================================
   PAGE ACTIONNARIAT SALARIÉ — chez Capgemini
   Frame Figma : ACTIONNARIAT (198:1376).
   Sections : titre tab + intro teal (2 col + bloc jaune) +
   description avec photo + section "En chiffres" (titre dégradé
   + 4 cartes ESOPs précédents).
   ============================================================ */

body.actionnariat_capgemini {
    background: var(--color-primary-light-grey);
}

.actionnariatPage {
    background: var(--color-primary-light-grey);
    padding: 0 var(--content-gutter) var(--space-10);
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
}

/* ----- Titre tab "L'actionnariat salarié / chez Capgemini" ----------- */
.actionnariatPage__title {
    align-self: flex-start;
    background: var(--color-primary-white);
    padding: var(--space-10);
    /* Chevauchement onglet (Figma : TITRE mb -30px). Le conteneur a gap:40px
       → on retranche 40+30=70 pour un recouvrement de 30px. z-index BAS :
       l'étiquette passe DERRIÈRE le bloc teal (qui est en z-index 2), comme
       sur la page offre. */
    margin-bottom: -70px;
    z-index: 1;
    position: relative;
}

.actionnariatPage__titleMain,
.actionnariatPage__titleSub {
    font-family: var(--font-family-base);
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    white-space: nowrap;
}

.actionnariatPage__titleMain {
    color: var(--color-primary-dark-blue);
}

/* Sous-ligne "chez Capgemini" (<em>) en TEAL, cohérent avec les autres
   titres ("ESOP / en bref", "Comment régler / …"). Le <em> héritait du
   navy de titleMain → on force le teal. */
.actionnariatPage__titleMain em {
    color: var(--color-secondary-teal);
    font-style: italic;
    font-weight: var(--font-weight-regular);
}

/* Sub : Italic Regular (pas Bold Italic) — Figma utilise Ubuntu:Italic */
.actionnariatPage__titleSub {
    color: var(--color-secondary-teal);
    font-style: italic;
    font-weight: var(--font-weight-regular);
}

.actionnariatPage__titleMain p,
.actionnariatPage__titleSub p {
    margin: 0;
    font: inherit;
    color: inherit;
}

/* ----- Conteneur des sections (avec gutter intérieur 100px) ---------- */
.actionnariatPage__content {
    padding: 0 var(--content-gutter);
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
    z-index: 2;
    position: relative;
}

/* ============================================================
   Intro teal — 2 colonnes (descriptif + bloc jaune "12ème plan")
   ============================================================ */
.actionnariatIntro {
    background: var(--color-secondary-teal);
    color: var(--color-primary-white);
    padding: var(--space-10);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
    align-items: start;
}

.actionnariatIntro__left {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.actionnariatIntro__leftTitle {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary-white);
    line-height: var(--line-height-tight);
}

.actionnariatIntro__leftTitle p {
    margin: 0;
    font: inherit;
    color: inherit;
}

.actionnariatIntro__leftBody {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    color: var(--color-primary-white);
    line-height: 1.4;
}

.actionnariatIntro__leftBody p { margin: 0; }
.actionnariatIntro__leftBody p + p { margin-top: var(--space-2); }
.actionnariatIntro__leftBody strong { font-weight: var(--font-weight-bold); }

/* Le titre "Qu'est-ce qu'un plan…" hérite d'un cyan 2025 (data-csp-s=2)
   réinjecté en !important. Figma 2026 : titre blanc sur fond teal. */
.actionnariatIntro__leftBody span[data-csp-s] {
    color: var(--color-primary-white) !important;
}

/* Figma aligne le texte à GAUCHE ; le BDD 2025 force text-align:justify
   (réécrit par la CSP en data-csp-s) → on neutralise pour coller au design. */
.actionnariatIntro__leftBody [data-csp-s],
.actionnariatDesc__body [data-csp-s] {
    text-align: left !important;
}

.actionnariatIntro__right {
    font-family: var(--font-family-base);
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-bold);
    color: var(--color-secondary-yellow);
    line-height: var(--line-height-tight);
    text-align: right;
}

.actionnariatIntro__right p {
    margin: 0;
    font: inherit;
    color: inherit;
}

.actionnariatIntro__right sup {
    font-size: 0.65em;
    vertical-align: super;
}

/* ============================================================
   Description Capgemini — bloc blanc avec photo droite
   ============================================================ */
.actionnariatDesc {
    display: flex;
    align-items: stretch;
    background: var(--color-primary-white);
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.10);
}

.actionnariatDesc__text {
    flex: 1 1 0;
    min-width: 0;
    padding: var(--space-10);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.actionnariatDesc__title {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-secondary-teal);
    line-height: var(--line-height-tight);
}

.actionnariatDesc__title p {
    margin: 0;
    font: inherit;
    color: inherit;
}

.actionnariatDesc__body {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    color: var(--color-primary-dark-blue);
    line-height: 1.4;
}

.actionnariatDesc__body p { margin: 0; }
.actionnariatDesc__body p + p { margin-top: var(--space-2); }
.actionnariatDesc__body strong { font-weight: var(--font-weight-bold); }

/* Le titre "L'actionnariat salarié chez Capgemini" hérite d'un bleu 2025
   (data-csp-s=3) en !important. Figma 2026 : titre teal. */
.actionnariatDesc__body span[data-csp-s] {
    color: var(--color-secondary-teal) !important;
}

.actionnariatDesc__photo {
    width: 400px;
    flex-shrink: 0;
    overflow: hidden;
    background: var(--color-primary-light-grey);
    position: relative;
}

/* Reproduit le crop Figma : image rendue plus grande que le container,
   ancrée en haut-gauche → recadrage par la droite et le bas. */
.actionnariatDesc__photo img {
    position: absolute;
    top: 0;
    left: -0.71%;
    width: 118.82%;
    height: 155.25%;
    max-width: none;
    object-fit: cover;
    display: block;
}

/* ============================================================
   Section "En chiffres" — titre dégradé + bloc lilac + 4 cartes
   ============================================================ */
.actionnariatChiffres {
    padding: 0 var(--content-gutter);
    display: flex;
    flex-direction: column;
}

.actionnariatChiffres__title {
    padding: var(--space-5) var(--space-10);
    color: var(--color-primary-white);
    font-family: var(--font-family-base);
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    background: linear-gradient(
        90deg,
        var(--color-primary-dark-blue) 0%,
        var(--color-primary-blue)      30%,
        var(--color-primary-light-blue) 70%,
        var(--color-secondary-turquoise) 100%
    );
}

.actionnariatChiffres__title p {
    margin: 0;
    font: inherit;
    color: inherit;
}

.actionnariatChiffres__body {
    background: var(--color-secondary-lilac);
    padding: var(--space-5) var(--space-10);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.actionnariatChiffres__lead {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    color: var(--color-primary-dark-blue);
    line-height: var(--line-height-tight);
}

.actionnariatChiffres__lead p { margin: 0; }
.actionnariatChiffres__lead strong { font-weight: var(--font-weight-bold); }

.actionnariatChiffres__cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-10);
    align-items: stretch;
}

.actionnariatChiffres__legal {
    margin: 0;
    padding-left: 15px;
    list-style: disc;
    font-family: var(--font-family-base);
    font-size: var(--font-size-mention);
    color: var(--color-primary-dark-blue);
    line-height: 1.4;
}

/* ----- Carte chiffres ESOP ------------------------------------------- */
.chiffresEsop {
    background: var(--color-primary-white);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    align-items: center;
    text-align: center;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.10);
}

.chiffresEsop__year {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.chiffresEsop__yearMain,
.chiffresEsop__yearSub {
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary-dark-blue);
    line-height: var(--line-height-tight);
}

.chiffresEsop__yearMain { font-size: var(--font-size-h1); }    /* 32px */
.chiffresEsop__yearSub  { font-size: var(--font-size-h2); }    /* 20px */

.chiffresEsop__yearMain p,
.chiffresEsop__yearSub p {
    margin: 0;
    font: inherit;
    color: inherit;
}

.chiffresEsop__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: var(--space-2);
}

/* Groupe valeur (€) + label collés ensemble, sans gap interne */
.chiffresEsop__group {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.chiffresEsop__invest,
.chiffresEsop__value {
    font-family: var(--font-family-base);
    font-size: var(--font-size-h2);     /* 20px */
    font-weight: var(--font-weight-bold);
    color: var(--color-secondary-yellow);
    line-height: var(--line-height-tight);
}

.chiffresEsop__invest p,
.chiffresEsop__value p {
    margin: 0;
    font: inherit;
    color: inherit;
}

.chiffresEsop__investLabel,
.chiffresEsop__valueLabel {
    font-family: var(--font-family-base);
    font-size: var(--font-size-nav);    /* 12px */
    color: var(--color-primary-dark-blue);
    line-height: var(--line-height-tight);
}

.chiffresEsop__investLabel p,
.chiffresEsop__valueLabel p {
    margin: 0;
    font: inherit;
    color: inherit;
}

.chiffresEsop__middle {
    margin: 0;
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    color: var(--color-primary-dark-blue);
    line-height: var(--line-height-tight);
}

.chiffresEsop__middle p {
    margin: 0;
    font: inherit;
    color: inherit;
}

/* ----- Responsive ----------------------------------------------------- */
@media (max-width: 1280px) {
    .actionnariatChiffres__cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1024px) {
    .actionnariatPage,
    .actionnariatPage__content,
    .actionnariatChiffres {
        padding-left: var(--space-5);
        padding-right: var(--space-5);
    }

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

    .actionnariatIntro__right {
        text-align: left;
        font-size: 24px;
    }

    .actionnariatDesc {
        flex-direction: column;
    }

    .actionnariatDesc__photo {
        width: 100%;
        height: 280px;
    }

    .actionnariatPage__titleMain,
    .actionnariatPage__titleSub,
    .actionnariatChiffres__title {
        font-size: 24px;
        white-space: normal;
    }
}

@media (max-width: 700px) {
    .actionnariatChiffres__cards {
        grid-template-columns: 1fr;
    }
}