/* Proposition isolée : seule la section Expertises de la page test est modifiée. */
.pillar-refined-page .refined-expertises-test {
    --ref-blue: #2d3a60;
    --ref-light: #edf2f7;
    --ref-red: #eb5b6a;
}

/* Hero des pages piliers : véritable respiration entre visuel et texte. */
.pillar-refined-page .project-page-header.style_3 .project-meta.project-other {
    padding-right: clamp(34px, 3.6vw, 68px) !important;
    box-sizing: border-box;
}

.pillar-refined-page .project-page-header.style_3 .project-meta.meta-summary {
    padding-left: clamp(12px, 1.25vw, 24px) !important;
    box-sizing: border-box;
}

.pillar-refined-page .refined-expertises-test .wrapper-small:first-child .text-wrapper > div:nth-of-type(1) {
    display: block !important;
    padding-top: 0;
    border-top: 0;
}

.pillar-refined-page .refined-expertises-test > .wrapper-small:first-child {
    margin-bottom: 0 !important;
}

.pillar-refined-page .refined-expertises-test .wrapper-small:first-child .text-wrapper > div:nth-of-type(1) > div {
    display: none !important;
}

.pillar-refined-page .refined-expertises-test .wrapper-small:first-child .text-wrapper > div:nth-of-type(1) h2 {
    margin: 0 !important;
    color: var(--ref-blue) !important;
    font-size: clamp(38px, 11vw, 60px) !important;
    font-weight: 800 !important;
    line-height: .95 !important;
    letter-spacing: -.05em !important;
}

/* Le kicker était généré en CSS (content: "SAVOIR-FAIRE") : invisible pour les
   moteurs de recherche et les lecteurs d'écran, et introuvable à la lecture du
   HTML. Il est désormais du vrai texte dans la page (.pillar-section-kicker),
   stylé avec les autres kickers du site dans style.css. */

/* Trait sous le titre : il était masqué. Comme le pictogramme rond est lui
   aussi masqué sur ces pages (règle plus haut), le décalage de 66px prévu pour
   lui n'a plus lieu d'être — le trait part du bord gauche. */
.pillar-refined-page .refined-expertises-test .wrapper-small:first-child .text-wrapper > hr {
    display: block !important;
    width: 100% !important;
    margin: 26px 0 0 !important;
}

.pillar-refined-page .refined-expertises-test .presta-grid {
    gap: 0 !important;
    grid-auto-rows: 1fr;
    margin-top: 46px !important;
    overflow: hidden;
    border: 1px solid rgba(45, 58, 96, .18);
    border-radius: 5px;
}

.pillar-refined-page .refined-expertises-test .presta-grid > div {
    position: relative;
    min-height: 240px;
    padding: clamp(24px, 2.35vw, 34px) !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(45, 58, 96, .18) !important;
    border-radius: 0 !important;
    background: rgba(146, 168, 197, .035) !important;
    transition: background-color 350ms ease;
}

.pillar-refined-page .refined-expertises-test .presta-grid > div::after {
    position: absolute;
    right: clamp(24px, 2.35vw, 34px);
    bottom: 20px;
    width: 34px;
    height: 2px;
    border-radius: 2px;
    background: #eb5b6a;
    content: "";
}

.pillar-refined-page .refined-expertises-test .presta-grid > div:nth-child(odd) {
    border-right: 1px solid rgba(45, 58, 96, .18) !important;
}

.pillar-refined-page .refined-expertises-test .presta-grid > div:nth-last-child(-n + 2) {
    border-bottom: 0 !important;
}

/* Design éditorial compte cinq expertises : on conserve la dernière carte à
   gauche, au même format, sans dessiner une sixième cellule vide à droite. */
:is(.design-editorial-page, .digital-page) .refined-expertises-test .presta-grid {
    overflow: visible;
    border: 0;
}

:is(.design-editorial-page, .digital-page) .refined-expertises-test .presta-grid > div {
    box-sizing: border-box;
    border: 0 !important;
    border-top: 1px solid rgba(45, 58, 96, .18) !important;
    border-left: 1px solid rgba(45, 58, 96, .18) !important;
}

:is(.design-editorial-page, .digital-page) .refined-expertises-test .presta-grid > div:nth-child(even),
:is(.design-editorial-page, .digital-page) .refined-expertises-test .presta-grid > div:last-child {
    border-right: 1px solid rgba(45, 58, 96, .18) !important;
}

/* La bordure centrale du dernier encadré doit suivre exactement la bordure
   gauche de l'encadré situé au-dessus, sans décalage d'un pixel. */
:is(.design-editorial-page, .digital-page) .refined-expertises-test .presta-grid > div:last-child {
    width: calc(100% + 1px);
    border-right: 1px solid rgba(45, 58, 96, .18) !important;
}

:is(.design-editorial-page, .digital-page) .refined-expertises-test .presta-grid > div:nth-child(odd):not(:last-child) {
    border-right: 0 !important;
}

:is(.design-editorial-page, .digital-page) .refined-expertises-test .presta-grid > div:nth-child(-n + 3) {
    border-bottom: 0 !important;
}

:is(.design-editorial-page, .digital-page) .refined-expertises-test .presta-grid > div:nth-child(4),
:is(.design-editorial-page, .digital-page) .refined-expertises-test .presta-grid > div:last-child {
    border-bottom: 1px solid rgba(45, 58, 96, .18) !important;
}

@media (min-width: 768px) {
    :is(.design-editorial-page, .digital-page) .refined-expertises-test .presta-grid > div:first-child {
        border-top-left-radius: 5px !important;
    }

    :is(.design-editorial-page, .digital-page) .refined-expertises-test .presta-grid > div:nth-child(2) {
        border-top-right-radius: 5px !important;
    }

    :is(.design-editorial-page, .digital-page) .refined-expertises-test .presta-grid > div:nth-child(4) {
        border-bottom-right-radius: 5px !important;
    }

    :is(.design-editorial-page, .digital-page) .refined-expertises-test .presta-grid > div:last-child {
        transform: translateY(-1px);
        border-bottom-right-radius: 5px !important;
        border-bottom-left-radius: 5px !important;
    }
}

.pillar-refined-page .refined-expertises-test .presta-grid > div > div:first-child {
    align-items: center !important;
    margin-bottom: 14px !important;
}

.pillar-refined-page .refined-expertises-test .presta-grid > div > div:first-child > div {
    width: 50px !important;
    height: 50px !important;
}

.pillar-refined-page .refined-expertises-test .presta-grid > div > div:first-child h4 {
    margin: 0 !important;
    font-size: 30px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
}

.pillar-refined-page .refined-expertises-test .presta-grid > div > h4 {
    font-size: var(--site-type-body, 18px) !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
}

.pillar-refined-page .refined-expertises-test > .wrapper-small:nth-child(2) > .c-col-10 {
    width: min(100%, 820px) !important;
    margin-top: 24px !important;
}

.pillar-refined-page .refined-expertises-test > .wrapper-small:nth-child(2) > .c-col-10 h4 {
    margin-bottom: 0 !important;
    font-size: clamp(19px, 1.35vw, 22px) !important;
    font-weight: 600 !important;
    line-height: 1.38 !important;
}

/* Le titre des projets reprend le même vocabulaire éditorial. */
.pillar-refined-page .refined-projects-test .wrapper-small:first-child .text-wrapper > div:nth-of-type(1) {
    display: block !important;
}

.pillar-refined-page .refined-projects-test > .wrapper-small:first-child {
    margin-bottom: 46px !important;
}

.pillar-refined-page .refined-projects-test .wrapper-small:first-child .text-wrapper > div:nth-of-type(1) > div {
    display: none !important;
}

.pillar-refined-page .refined-projects-test .wrapper-small:first-child .text-wrapper > div:nth-of-type(1) h2 {
    margin: 0 !important;
    color: var(--ref-blue, #2d3a60) !important;
    font-size: clamp(38px, 11vw, 60px) !important;
    font-weight: 800 !important;
    line-height: .95 !important;
    letter-spacing: -.05em !important;
}

/* Vignettes elargies : la largeur reste a 31.3333% (la gouttiere de 3% fait
   partie du calcul de la grille masonry — a 32.6667% la troisieme vignette
   passait a la ligne), le gain vient du conteneur elargi et du visuel plus
   haut. */
.pillar-refined-page .refined-projects-test .alioth-works.column_3 .aw-project {
    width: 31.3333% !important;
    margin-bottom: 58px !important;
}

.pillar-refined-page .refined-projects-test .alioth-works.column_3 .aw-works-sizer {
    width: 31.3333% !important;
}

.pillar-refined-page .refined-projects-test .alioth-works.column_3 .aw-project-image {
    height: clamp(300px, 29vw, 390px) !important;
}

.pillar-refined-page .refined-projects-test .alioth-works.column_3 .aw-project-meta {
    margin-top: 12px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

/* Kicker "Réalisations" : voir la note du bloc Expertises ci-dessus — il est
   maintenant du vrai texte dans la page. */

.pillar-refined-page .refined-projects-test .wrapper-small:first-child .text-wrapper > hr {
    display: block !important;
    width: 100% !important;
    margin: 26px 0 0 !important;
}

/* Exemples de projets : même mouvement que les cartes de projets.html. */
.pillar-refined-page .refined-projects-test .alioth-works .aw-project > a {
    display: block;
    transform: translateY(0) scale(1) !important;
    transform-origin: center center;
    transition: transform 700ms cubic-bezier(.22, 1, .36, 1) !important;
    will-change: transform;
}

.pillar-refined-page .refined-projects-test .alioth-works .aw-project-image,
.pillar-refined-page .refined-projects-test .alioth-works .aw-project-meta {
    transform: translateY(0) scale(1) !important;
    transform-origin: center center;
    transition: transform 700ms cubic-bezier(.22, 1, .36, 1),
                opacity 700ms cubic-bezier(.22, 1, .36, 1) !important;
    will-change: transform;
}

.pillar-refined-page .refined-projects-test .alioth-works .aw-project-meta {
    opacity: 1;
    transform: none !important;
    transition: opacity 700ms cubic-bezier(.22, 1, .36, 1),
                color 400ms ease !important;
}

/* Digital : sur un écran Retina (dpr 2), ce bloc tombe à une position
   verticale qui atterrit exactement à une demi-pixel physique (mesuré :
   1068.25px -> 2136.5px physiques), la pire position possible pour un trait
   fin de 1px (anti-aliasing étalé sur 3 pixels au lieu de 2 -> quasi
   invisible). Un micro-décalage recale sur un pixel physique entier, sans
   toucher à l'épaisseur ni à l'apparence des autres pages piliers.
   Utilise margin (position réelle en flux) plutôt que transform : le survol
   applique son propre transform (translateY(-8px) scale(1.004)) qui
   remplace entièrement le nôtre au lieu de s'y ajouter — le margin, lui,
   reste actif même pendant le survol. */
.digital-page .refined-projects-test .alioth-works.column_3 .aw-project-meta {
    margin-top: 12.25px !important;
}

.pillar-refined-page .refined-projects-test .alioth-works .aw-project-title,
.pillar-refined-page .refined-projects-test .alioth-works .aw-project-title u {
    /* background-size ajouté : cette feuille étant chargée après style.css,
       sa transition y écrasait celle du surlignage, qui apparaissait alors
       d'un bloc au lieu de se remplir de gauche à droite. */
    transition: color 400ms ease,
                background-size 420ms cubic-bezier(.22, 1, .36, 1) !important;
}

@media (hover: hover) and (pointer: fine) {
    .pillar-refined-page .refined-expertises-test .presta-grid > div:hover {
        background-color: var(--ref-light) !important;
    }

    .pillar-refined-page .refined-projects-test .alioth-works .aw-project > a:hover,
    .pillar-refined-page .refined-projects-test .alioth-works .aw-project > a:focus-visible {
        transform: translateY(-8px) scale(1.004) !important;
    }

    .pillar-refined-page .refined-projects-test .alioth-works .aw-project:hover .aw-project-image,
    .pillar-refined-page .refined-projects-test .alioth-works .aw-project:focus-within .aw-project-image,
    .pillar-refined-page .refined-projects-test .alioth-works .aw-project:hover .aw-project-meta,
    .pillar-refined-page .refined-projects-test .alioth-works .aw-project:focus-within .aw-project-meta {
        transform: translateY(-8px) scale(1.004) !important;
    }

    .pillar-refined-page .refined-projects-test .alioth-works .aw-project > a:hover .aw-project-meta,
    .pillar-refined-page .refined-projects-test .alioth-works .aw-project > a:focus-visible .aw-project-meta {
        opacity: .82 !important;
        transform: translateY(-8px) scale(1.004) !important;
        background: transparent !important;
    }

    .pillar-refined-page .refined-projects-test .alioth-works .aw-project:hover .aw-project-title,
    .pillar-refined-page .refined-projects-test .alioth-works .aw-project:focus-within .aw-project-title,
    .pillar-refined-page .refined-projects-test .alioth-works .aw-project:hover .aw-project-title u,
    .pillar-refined-page .refined-projects-test .alioth-works .aw-project:focus-within .aw-project-title u {
        color: #2d3a60 !important;
        transform: none !important;
    }
}

@media (max-width: 767px) {
    .pillar-refined-page .project-page-header.style_3 .project-meta.project-other,
    .pillar-refined-page .project-page-header.style_3 .project-meta.meta-summary {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    .pillar-refined-page .refined-expertises-test .wrapper-small:first-child .text-wrapper > div:nth-of-type(1) h2::before,
    .pillar-refined-page .refined-projects-test .wrapper-small:first-child .text-wrapper > div:nth-of-type(1) h2::before {
        margin-bottom: 16px;
    }

    .pillar-refined-page .refined-projects-test {
        padding-top: 24px !important;
    }

    /* Même logique que .refined-expertises-test ci-dessous : le padding-bottom
       générique (var(--mobile-space-section), ~66px) et le margin-bottom
       générique (var(--site-section-gap), 60px) des sections standard
       s'appliquent aussi ici et créent, cumulés, un vide de ~150px avant la
       grande phrase rouge qui suit — bien plus que ce que .avant-cta-grid
       (ci-dessus) peut compenser à lui seul en tirant la section suivante. */
    html body.pillar-page .page-content > .section.refined-projects-test:not(.no-margin):not(.fullscreen):not(.has-bg) {
        padding-bottom: 0 !important;
        margin-bottom: 40px !important;
    }

    /* La réduction ci-dessus ne suffit pas seule : les marges verticales entre
       .refined-expertises-test (margin-bottom) et .refined-projects-test se
       fusionnent (collapse) — c'est la PLUS GRANDE des deux qui s'applique.
       var(--site-section-gap) valait 60px ici et masquait la réduction. */
    html body.pillar-page .page-content > .section.refined-expertises-test:not(.no-margin):not(.fullscreen):not(.has-bg) {
        margin-bottom: 8px !important;
    }

    .pillar-refined-page .refined-expertises-test .presta-grid {
        margin-top: 34px !important;
    }

    .pillar-refined-page .refined-projects-test > .wrapper-small:first-child {
        margin-bottom: 34px !important;
    }

    .pillar-refined-page .refined-expertises-test > .wrapper-small:nth-child(2) > .c-col-10 {
        margin-top: 18px !important;
    }

    .pillar-refined-page .refined-expertises-test > .wrapper-small:nth-child(2) > .c-col-10 h4 {
        font-size: 18px !important;
        line-height: 1.4 !important;
    }

    .pillar-refined-page .refined-projects-test .alioth-works.column_3 .aw-project {
        width: 100% !important;
        margin-bottom: 38px !important;
    }

    .pillar-refined-page .refined-projects-test .alioth-works.column_3 .aw-project-image {
        height: 240px !important;
    }

    .pillar-refined-page .refined-expertises-test .presta-grid > div {
        min-height: 0;
        border-right: 0 !important;
    }

    .pillar-refined-page .refined-expertises-test .presta-grid > div:nth-last-child(2) {
        border-bottom: 1px solid rgba(45, 58, 96, .18) !important;
    }

    :is(.design-editorial-page, .digital-page) .refined-expertises-test .presta-grid > div {
        border-right: 1px solid rgba(45, 58, 96, .18) !important;
        border-bottom: 0 !important;
    }

    :is(.design-editorial-page, .digital-page) .refined-expertises-test .presta-grid > div:last-child {
        width: 100%;
        border-bottom: 1px solid rgba(45, 58, 96, .18) !important;
        border-bottom-right-radius: 5px !important;
        border-bottom-left-radius: 5px !important;
    }

    :is(.design-editorial-page, .digital-page) .refined-expertises-test .presta-grid > div:first-child {
        border-top-right-radius: 5px !important;
        border-top-left-radius: 5px !important;
    }

    .pillar-refined-page .refined-expertises-test .presta-grid > div > div:first-child h4 {
        font-size: 23px !important;
    }

    .pillar-refined-page .refined-expertises-test .presta-grid > div > h4 {
        font-size: var(--mobile-type-body, 17px) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pillar-refined-page .refined-expertises-test .presta-grid > div {
        transition: none !important;
    }

    .pillar-refined-page .refined-projects-test .alioth-works .aw-project > a,
    .pillar-refined-page .refined-projects-test .alioth-works .aw-project-image,
    .pillar-refined-page .refined-projects-test .alioth-works .aw-project-meta {
        transform: none !important;
        transition: none !important;
    }
}

/* Respiration avant le bandeau CTA final. */
.pillar-refined-page .refined-bottom-cta-test {
    clear: both;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.pillar-refined-page .refined-bottom-cta-test .alioth-page-nav {
    border-top: 0 !important;
}

.pillar-refined-page .pillar-related-section {
    padding-bottom: clamp(125px, 10vw, 165px) !important;
    margin-bottom: 0 !important;
}

/* Le cadre du bloc "expertises" (presta-grid) sur les pages Digital et Design
   éditorial est dessiné avec une logique de bordures pensée pour une grille à
   deux colonnes (nth-child odd/even, "-n+3", "4"...). Sur mobile, la grille
   passe en une seule colonne : cette logique laisse des séparations
   manquantes entre certaines cartes et des traits de bordure droite isolés
   sans raison d'être. On simplifie en un cadre de liste classique. La règle
   ":nth-child(odd):not(:last-child)" plus haut dans ce fichier (hors media
   query, donc active aussi sur mobile) est plus spécifique que la règle
   mobile existante et remettait border-right à 0 sur les cartes impaires :
   il faut la neutraliser avec un sélecteur au moins aussi spécifique. */
@media (max-width: 767px) {
    :is(.design-editorial-page, .digital-page) .refined-expertises-test .presta-grid > div {
        border: 0 !important;
        border-top: 1px solid rgba(45, 58, 96, .18) !important;
        border-left: 1px solid rgba(45, 58, 96, .18) !important;
        border-right: 1px solid rgba(45, 58, 96, .18) !important;
    }

    :is(.design-editorial-page, .digital-page) .refined-expertises-test .presta-grid > div:nth-child(odd):not(:last-child) {
        border-right: 1px solid rgba(45, 58, 96, .18) !important;
    }

    :is(.design-editorial-page, .digital-page) .refined-expertises-test .presta-grid > div:last-child {
        border-bottom: 1px solid rgba(45, 58, 96, .18) !important;
    }
}

/* Harmonisation des tailles de titres sur mobile (voir style.css, fin de
   fichier) : ce fichier est chargé après style.css dans le <head> des pages
   piliers, donc à spécificité égale ses règles gagnent toujours sur celles de
   style.css, y compris les tentatives d'harmonisation ajoutées là-bas. Les
   titres de section "Expertises" / "Exemples de projets" doivent être
   surchargés ici directement. */
@media only screen and (max-width: 767px) {
    .pillar-refined-page .refined-expertises-test .wrapper-small:first-child .text-wrapper > div:nth-of-type(1) h2,
    .pillar-refined-page .refined-projects-test .wrapper-small:first-child .text-wrapper > div:nth-of-type(1) h2 {
        font-size: 42px !important;
    }
}

/* Mobile : renvois vers les autres piliers calés sur la liste de l’index. */
@media only screen and (max-width: 767px) {
    body.pillar-refined-page .pillar-related-section .related-expertise-grid > a {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 36px !important;
        grid-template-rows: auto auto !important;
        column-gap: 10px !important;
        row-gap: 2px !important;
        align-items: center !important;
        padding: 24px 0 !important;
        text-align: left !important;
    }

    body.pillar-refined-page .pillar-related-section .related-expertise-grid > a .pillar-title {
        display: flex !important;
        min-width: 0 !important;
        grid-column: 1 !important;
        grid-row: 1 !important;
        align-items: baseline !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: clamp(25px, 7.4vw, 34px) !important;
        line-height: 1.05 !important;
        text-align: left !important;
        white-space: normal !important;
    }

    body.pillar-refined-page .pillar-related-section .related-expertise-grid > a .pillar-title::before {
        flex: 0 0 auto !important;
        margin-right: 10px !important;
    }

    body.pillar-refined-page .pillar-related-section .related-expertise-grid > a h4 {
        grid-column: 1 / 3 !important;
        grid-row: 2 !important;
        margin: -2px 0 0 !important;
        padding: 0 46px 0 23px !important;
        color: #92a8c5 !important;
        font-size: 14px !important;
        line-height: 1.35 !important;
        text-align: left !important;
    }

    body.pillar-refined-page .pillar-related-section .related-expertise-grid > a::after {
        width: 36px !important;
        height: 36px !important;
        grid-column: 2 !important;
        grid-row: 1 !important;
        align-self: center !important;
        justify-self: end !important;
        font-size: 21px !important;
    }
}

/* Kickers "Savoir-faire" / "Réalisations" des pages piliers : la typographie et
   le point viennent des règles partagées de style.css (comme sur l'index) ; il
   reste à poser la couleur d'accent et l'espace avant le titre, que ces règles
   partagées ne fixent pas. */
.pillar-refined-page .pillar-section-kicker {
    margin: 0 0 20px;
    color: #eb5b6a;
}

/* Pages piliers — bouton "Voir tous les projets" sous les vignettes.
   Il respire largement au-dessus et en dessous : la section suivante démarre
   sur un fond différent, un bouton trop serré y paraîtrait collé. */
.pillar-refined-page .pillar-projects-cta {
    margin-top: clamp(48px, 5vw, 76px);
    margin-bottom: clamp(56px, 6vw, 88px);
}

.pillar-refined-page .pillar-projects-cta .c-col-12 {
    display: flex;
    justify-content: center;
}

.pillar-refined-page .pillar-projects-cta .a-button {
    margin: 0;
}