/* Extracted from template-page-gouvernance-CRJ.php in CRJ Refactor V4.8. */

/* ==========================================================
   Gouvernance — V4
   CSS consolidé pour cette page uniquement
   ========================================================== */

.governance-page--v3 {
    --p-navy: #0F172A;
    --p-body: #475569;
    --p-primary: #156C88;
    --p-primary-dark: #0D4152;
    --p-border: #E2E8F0;
}

/*
 * Les sections sous le HERO restent transparentes pour laisser voir
 * la continuation du logo couleur unique défini sur le <main>.
 */
.governance-page--v3 > section:not(.page-hero),
.governance-page--v3 > dialog {
    position: relative;
    z-index: 1;
}

.governance-page--v3 p {
    color: var(--p-body);
    line-height: 1.72;
}


/* ==========================================================
   TITRES
   ========================================================== */

.governance-page--v3 .governance-kicker {
    margin: 0 0 7px;
    color: var(--p-primary) !important;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: .09em;
}

.governance-page--v3 .governance-title {
    margin: 0;
    color: var(--p-navy);
    font-size: clamp(1.55rem, 2.2vw, 1.9rem);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.015em;
}


/* ==========================================================
   MODÈLE DE GOUVERNANCE
   ========================================================== */

.governance-page--v3 .governance-model-section {
    padding:
        clamp(72px, 7vw, 104px)
        0
        clamp(54px, 5vw, 72px);

    background: transparent;
}

.governance-page--v3 .governance-section-header {
    margin-bottom: clamp(32px, 4vw, 50px);
}


/* Schéma un peu plus présent que dans la V2 */
.governance-page--v3 .governance-model {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(340px, .8fr);
    gap: clamp(46px, 5.5vw, 82px);
    align-items: center;
}


/* ==========================================================
   SCHÉMA
   ========================================================== */

.governance-page--v3 .governance-model__visual {
    min-width: 0;
}

.governance-page--v3 .governance-visual-button {
    position: relative;
    display: block;
    width: 100%;

    margin: 0;
    padding: 0;

    border: 0;
    background: transparent;

    cursor: zoom-in;
}

.governance-page--v3 .governance-model__image {
    display: block;

    width: 100%;
    height: auto;
    max-height: 820px;

    object-fit: contain;
}


/* Bouton d'agrandissement plus clairement interactif */
.governance-page--v3 .governance-visual-button__hint {
    position: absolute;
    right: 16px;
    bottom: 16px;

    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 9px 12px;

    border: 1px solid rgba(21, 108, 136, .24);
    border-radius: 8px;

    background: rgba(255, 255, 255, .96);
    box-shadow: 0 6px 20px rgba(15, 23, 42, .08);

    color: var(--p-primary-dark);

    font-size: .73rem;
    font-weight: 650;
    line-height: 1;

    transition:
        border-color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

.governance-page--v3 .governance-visual-button:hover .governance-visual-button__hint,
.governance-page--v3 .governance-visual-button:focus-visible .governance-visual-button__hint {
    border-color: var(--p-primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(15, 23, 42, .11);
}


/* ==========================================================
   COLONNE DE TEXTE
   ========================================================== */

.governance-page--v3 .governance-model__content {
    min-width: 0;
}

.governance-page--v3 .governance-model__intro,
.governance-page--v3 .governance-model__outro {
    margin: 0;

    color: var(--p-body);

    font-size: .98rem;
    line-height: 1.7;
}


/* Liste sobre sans puces ni numéros */
.governance-page--v3 .governance-instance-list--simple {
    list-style: none;

    margin: 26px 0 28px;
    padding: 0;

    border-top: 1px solid rgba(21, 108, 136, .32);
}

.governance-page--v3 .governance-instance-list--simple li {
    margin: 0;
    padding: 14px 0;

    color: var(--p-navy);

    font-size: .85rem;
    font-weight: 600;
    line-height: 1.45;

    border-bottom: 1px solid rgba(21, 108, 136, .22);
}


/* Petite hiérarchie éditoriale avant le dernier paragraphe */
.governance-page--v3 .governance-model__objective {
    margin-top: 4px;
}

.governance-page--v3 .governance-kicker--objective {
    margin-bottom: 9px;
}


/* ==========================================================
   ALLER PLUS LOIN
   Le composant interne utilise les styles partagés du thème
   ========================================================== */

.governance-page--v3 .governance-explore-section {
    padding: 0 0 clamp(72px, 7vw, 96px);
    background: transparent;
}


/* ==========================================================
   DIALOG
   ========================================================== */

.governance-page--v3 .governance-dialog {
    width: min(94vw, 1100px);
    max-height: 92vh;

    padding: 0;

    border: 0;
    border-radius: 16px;

    background: #fff;
}

.governance-page--v3 .governance-dialog::backdrop {
    background: rgba(15, 23, 42, .78);
}

.governance-page--v3 .governance-dialog__inner {
    position: relative;
    padding: 24px;
}

.governance-page--v3 .governance-dialog__close {
    position: sticky;
    top: 0;

    margin-left: auto;

    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border: 1px solid var(--p-border);
    border-radius: 50%;

    background: #fff;
    color: var(--p-navy);

    cursor: pointer;
}

.governance-page--v3 .governance-dialog__image {
    display: block;

    max-width: 100%;
    max-height: calc(92vh - 90px);

    margin: 0 auto;

    object-fit: contain;
}


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

@media (max-width: 991.98px) {

    .governance-page--v3 .governance-model {
        grid-template-columns: 1fr;
    }

    .governance-page--v3 .governance-model__image {
        max-height: 700px;
    }

}


@media (max-width: 767.98px) {

    .governance-page--v3 {
        --immersive-logo-size: 1450px;
        --immersive-logo-left: 60%;
        --immersive-logo-top: -520px;
    }

}


@media (max-width: 620px) {

    .governance-page--v3 .governance-model-section {
        padding-top: 58px;
        padding-bottom: 46px;
    }

    .governance-page--v3 .governance-visual-button__hint {
        right: 10px;
        bottom: 10px;
    }

}