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

/* ==========================================================
   Présentation de la Chaire — V18
   CSS consolidé : aucune ancienne version en cascade
   ========================================================== */

.presentation-page--v18 {
    --p-navy: #0F172A;
    --p-body: #475569;
    --p-dim: #94A3B8;
    --p-primary: #156C88;
    --p-primary-700: #0D4152;
    --p-soft: #F0F7F9;
    --p-bg: #F8FAFC;
    --p-border: #E2E8F0;
}

.presentation-page--v18 p {
    color: var(--p-body);
    line-height: 1.75;
}

.presentation-page--v18 .presentation-section-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;
}


/* ==========================================================
   01 — INTRODUCTION
   ========================================================== */

.presentation-page--v18 .presentation-intro-section {
    padding: clamp(68px, 7vw, 108px) 0 54px;
}

.presentation-page--v18 .presentation-intro-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(280px, .58fr);
    gap: clamp(48px, 6vw, 90px);
    align-items: start;
}

.presentation-page--v18 .presentation-intro-lead {
    max-width: 980px;
    padding-bottom: 30px;
    margin-bottom: 32px;
    border-bottom: 1px solid var(--p-border);
}

.presentation-page--v18 .presentation-intro-lead p {
    margin: 0;
    color: var(--p-navy);
    font-size: clamp(1rem, 1.15vw, 1.08rem);
    line-height: 1.68;
    font-weight: 400;
}

.presentation-page--v18 .presentation-intro-lead strong {
    font-weight: 600;
}

.presentation-page--v18 .presentation-intro-columns {
    display: grid;
    grid-template-columns: .78fr 1.22fr;
    gap: clamp(30px, 4vw, 58px);
    font-size: .94rem;
}

.presentation-page--v18 .presentation-intro-columns p {
    margin: 0;
}

.presentation-page--v18 .presentation-keyfacts {
    display: grid;
    gap: 0;
    border-left: 1px solid var(--p-border);
    padding-left: clamp(24px, 2.6vw, 36px);
}

.presentation-page--v18 .presentation-keyfact {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "icon number"
        "icon label"
        "link link";
    column-gap: 14px;
    padding: 22px 0 24px;
    text-decoration: none;
    color: var(--p-navy);
    border-bottom: 1px solid var(--p-border);
}

.presentation-page--v18 .presentation-keyfact:first-child {
    padding-top: 0;
}

.presentation-page--v18 .presentation-keyfact:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.presentation-page--v18 .presentation-keyfact__icon {
    grid-area: icon;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--p-soft);
    color: var(--p-primary);
    font-size: 1.05rem;
}

.presentation-page--v18 .presentation-keyfact__number {
    grid-area: number;
    color: var(--p-primary);
    font-size: clamp(2.15rem, 3vw, 2.65rem);
    font-weight: 600;
    line-height: .95;
    letter-spacing: -.035em;
}

.presentation-page--v18 .presentation-keyfact__suffix {
    font-size: .62em;
    margin-left: .06em;
    vertical-align: .18em;
}

.presentation-page--v18 .presentation-keyfact__label {
    grid-area: label;
    margin-top: 6px;
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.presentation-page--v18 .presentation-keyfact__link {
    grid-area: link;
    margin-top: 14px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--p-primary);
    font-size: .82rem;
    font-weight: 600;
}


/* ==========================================================
   02 — CINQ VOLETS DE RECHERCHE
   ========================================================== */

.presentation-page--v18 .presentation-volets-section {
    position: relative;
    padding: clamp(4.5rem, 7vw, 7rem) 0;
    background: #fff;
    overflow: hidden;
}

.presentation-page--v18 .presentation-volets-section::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--p-border) 18%,
        var(--p-border) 82%,
        transparent
    );
}

.presentation-page--v18 .presentation-volets-v12 {
    width: 100%;
    max-width: none;
    margin: 0;
}

.presentation-page--v18 .presentation-volets-v12__header {
    margin-bottom: clamp(2rem, 3vw, 3rem);
}

.presentation-page--v18 .presentation-volets-v12__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;
}


/* ----- Grille : pleine largeur, hauteur fixe ----- */

.presentation-page--v18 .presentation-volets-v12__grid {
    --cards-height: clamp(190px, 18vw, 250px);

    display: flex;
    align-items: stretch;
    justify-content: stretch;

    width: 100%;
    height: var(--cards-height);
    margin: 0;

    overflow: hidden;
    border-radius: 14px;
}

.presentation-page--v18 .presentation-volet-square {
    --volet-bg: #156C88;
    --volet-fg: #fff;

    position: relative;
    flex: 1 1 20%;
    min-width: 0;
    height: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;

    padding: 1.25rem .75rem;
    overflow: hidden;

    background: var(--volet-bg);
    color: var(--volet-fg);
    text-decoration: none;

    transition: none;
}

.presentation-page--v18 .presentation-volet-square + .presentation-volet-square {
    box-shadow: inset 1px 0 rgba(255,255,255,.16);
}

.presentation-page--v18 .presentation-volet--education {
    --volet-bg: #00AEE7;
    --volet-fg: #fff;
}

.presentation-page--v18 .presentation-volet--sante {
    --volet-bg: #B2D235;
    --volet-fg: #475415;
}

.presentation-page--v18 .presentation-volet--emploi {
    --volet-bg: #B44A9C;
    --volet-fg: #fff;
}

.presentation-page--v18 .presentation-volet--autochtones {
    --volet-bg: #E54E26;
    --volet-fg: #fff;
}

.presentation-page--v18 .presentation-volet--citoyennete {
    --volet-bg: #FDB940;
    --volet-fg: #654A1A;
}


/* Icône parfaitement centrée H + V au repos */
.presentation-page--v18 .presentation-volet-square__icon {
    position: static;

    display: flex;
    align-items: center;
    justify-content: center;

    width: auto;
    height: auto;

    font-size: clamp(1.9rem, 2.6vw, 2.45rem);
    line-height: 1;

    transform: none;
    transition: none;
}

.presentation-page--v18 .presentation-volet-square__icon i {
    display: block;
    line-height: 1;
}

.presentation-page--v18 .presentation-volet-square__reveal {
    position: relative;
    z-index: 2;

    width: 100%;
    padding: 0 1rem;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .8rem;

    text-align: center;
    opacity: 1;
    transform: none;
    pointer-events: auto;

    transition: none;
}

.presentation-page--v18 .presentation-volet-square__name {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    white-space: normal;
    font-size: .96rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
}

.presentation-page--v18 .presentation-volet-square__name-line {
    display: block;
    white-space: nowrap;
}

.presentation-page--v18 .presentation-volet-square__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;

    padding: .58rem .9rem;

    border: 1px solid currentColor;
    border-radius: 6px;
    background: transparent;
    color: inherit;

    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.presentation-page--v18 .presentation-volet-square__cta i {
    font-size: .82rem;
    transition: transform .2s ease;
}


/* Interaction : seule la flèche du CTA bouge au survol / focus */
.presentation-page--v18 .presentation-volet-square:hover,
.presentation-page--v18 .presentation-volet-square:focus-visible {
    color: var(--volet-fg);
}

.presentation-page--v18 .presentation-volet-square:hover .presentation-volet-square__cta i,
.presentation-page--v18 .presentation-volet-square:focus-visible .presentation-volet-square__cta i {
    transform: translateX(3px);
}

.presentation-page--v18 .presentation-volet-square:focus-visible {
    outline: 3px solid rgba(15,23,42,.28);
    outline-offset: -3px;
}


/* ----- 22 axes : conclusion en 2 colonnes ----- */

.presentation-page--v18 .presentation-volets-v12__axes {
    width: 100%;
    margin: clamp(2.25rem, 4vw, 3.5rem) 0 0;

    display: grid;
    grid-template-columns: minmax(240px, .45fr) minmax(0, 1.55fr);
    gap: clamp(2.5rem, 5vw, 5rem);
    align-items: stretch;

    padding-top: 0;/*clamp(1.5rem, 3vw, 2.2rem);*/
}

/* MODIFIABLE : taille du chiffre 22 */
.presentation-page--v18 .presentation-volets-v12__axes-number {
    color: #DCEEF3;
    font-size: clamp(5.2rem, 7.2vw, 6.8rem);
    font-weight: 500;
    line-height: .78;
    letter-spacing: -.06em;
}

.presentation-page--v18 .presentation-volets-v12__axes-stat {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 150px;
}

/* MODIFIABLE : taille du libellé AXES THÉMATIQUES */
.presentation-page--v18 .presentation-volets-v12__axes-label {
    max-width: 125px;
    color: var(--p-primary);
    font-size: .96rem;
    font-weight: 700;
    line-height: 1.28;
    letter-spacing: .085em;
    text-transform: uppercase;
}

.presentation-page--v18 .presentation-volets-v12__axes-copy {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 150px;
    padding-left: clamp(2.25rem, 4vw, 3.75rem);
}

/* MODIFIABLE : hauteur du séparateur vertical */
.presentation-page--v18 .presentation-volets-v12__axes-copy::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);

    width: 1px;
    height: 94%;

    background: #D9E2E8;
}

/* MODIFIABLE : taille du texte à droite */
.presentation-page--v18 .presentation-volets-v12__axes-copy p {
    max-width: 900px;
    margin: 0;

    color: var(--p-body);
    font-size: 1.18rem;
    line-height: 1.68;
}


/* ==========================================================
   03 — ENJEUX + CE QUE LA CRJ PERMET
   ========================================================== */

.presentation-page--v18 .presentation-mission-section {
    padding: clamp(72px, 7vw, 100px) 0;
    background: #fff;
}

.presentation-page--v18 .presentation-mission-grid {
    display: grid;
    grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr);
    gap: clamp(56px,7vw,110px);
    align-items: start;
}

.presentation-page--v18 .presentation-mission-copy .presentation-section-title {
    margin: 0 0 22px;
    color: var(--p-navy);
    font-size: clamp(1.5rem, 1.9vw, 1.72rem);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.018em;
}

.presentation-page--v18 .presentation-mission-copy p:last-child {
    margin-bottom: 0;
    font-size: .94rem;
    line-height: 1.68;
}

.presentation-page--v18 .presentation-impact-panel__intro {
    margin: 0 0 22px;
    color: var(--p-navy) !important;
    font-size: .94rem;
    font-weight: 600;
    line-height: 1.55 !important;
}

.presentation-page--v18 .presentation-impact-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.presentation-page--v18 .presentation-impact-list__item {
    display: grid;
    grid-template-columns: 42px minmax(0,1fr);
    gap: 14px;
    align-items: center;

    padding: 16px 0;
    border-top: 1px solid var(--p-border);
}

.presentation-page--v18 .presentation-impact-list__item:last-child {
    border-bottom: 1px solid var(--p-border);
}

.presentation-page--v18 .presentation-impact-list__number {
    color: var(--p-primary);
    font-size: .92rem;
    font-weight: 700;
    line-height: 1.4;
}

.presentation-page--v18 .presentation-impact-list__text {
    color: var(--p-body);
    font-size: .92rem;
    line-height: 1.5;
}


/* ==========================================================
   04 — ALLER PLUS LOIN
   L'intérieur est volontairement laissé aux styles partagés
   déjà utilisés sur le site. On conserve seulement l'espacement.
   ========================================================== */

.presentation-page--v18 .presentation-explore-section {
    padding: 0 0 clamp(72px, 7vw, 96px);
}


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

@media (max-width: 991.98px) {
    .presentation-page--v18 .presentation-intro-shell,
    .presentation-page--v18 .presentation-mission-grid {
        grid-template-columns: 1fr;
    }

    .presentation-page--v18 .presentation-keyfacts {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
        border-left: 0;
        border-top: 1px solid var(--p-border);
        padding: 24px 0 0;
    }

    .presentation-page--v18 .presentation-keyfact {
        border-bottom: 0;
    }

    .presentation-page--v18 .presentation-intro-columns {
        grid-template-columns: 1fr;
    }
}

/* Appareils tactiles : informations toujours visibles */
@media (hover: none), (pointer: coarse) {
    .presentation-page--v18 .presentation-volets-v12__grid {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        height: auto;
    }

    .presentation-page--v18 .presentation-volet-square {
        min-height: 145px;
        height: auto;
        flex: none;
        flex-direction: column;
        gap: .75rem;
        padding: 1rem .5rem;
    }

    .presentation-page--v18 .presentation-volet-square__icon {
        position: static;
        width: auto;
        height: auto;
        margin-bottom: .65rem;
        font-size: 1.45rem;
        transform: none !important;
    }

    .presentation-page--v18 .presentation-volet-square__reveal {
        opacity: 1;
        transform: none !important;
        pointer-events: auto;
        padding: 0 .4rem;
    }

    .presentation-page--v18 .presentation-volet-square__name {
        white-space: normal;
        font-size: .78rem;
    }

    .presentation-page--v18 .presentation-volet-square__cta {
        padding: .42rem .55rem;
        font-size: .6rem;
    }
}

@media (max-width: 680px) {
    .presentation-page--v18 .presentation-keyfacts {
        grid-template-columns: 1fr;
    }

    .presentation-page--v18 .presentation-volets-v12__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        border-radius: 10px;
    }

    .presentation-page--v18 .presentation-volet-square:last-child {
        grid-column: 1 / -1;
    }

    .presentation-page--v18 .presentation-volets-v12__axes {
        grid-template-columns: 1fr;
        gap: 1.4rem;
    }

    .presentation-page--v18 .presentation-volets-v12__axes-stat,
    .presentation-page--v18 .presentation-volets-v12__axes-copy {
        min-height: 0;
    }

    .presentation-page--v18 .presentation-volets-v12__axes-copy {
        padding-left: 0;
    }

    .presentation-page--v18 .presentation-volets-v12__axes-copy::before {
        display: none;
    }

    .presentation-page--v18 .presentation-impact-list__item {
        grid-template-columns: 42px 1fr;
    }
}