/* =========================================================
   MHPSS ProCare Firm
   Anciennes pages en bloc HTML (.mhpss-page)

   Services et A propos etaient des blocs HTML. Elles utilisent
   maintenant les blocs HZ Services, HZ Integrative CTA et
   HZ About. Ce fichier ne sert plus qu aux pages encore en
   HTML : A SUPPRIMER (fichier et ligne dans
   horizons-extension.php) une fois le contenu du site en ligne
   migre vers les blocs HZ.
   ========================================================= */

/* Air entre le bas du bandeau et le premier titre. */
.wp-site-blocks .mhpss-page {
    padding-top: calc(var(--hz-bandeau) + 2rem) !important;
}

/* ---------------------------------------------------------
   Services : les trois cartes s alignent

   Chaque carte prend la hauteur de son propre contenu, donc
   survoler une carte ne dilate jamais ses voisines.
   Au repos les trois sont identiques parce que les deux blocs
   de hauteur variable, le titre et le paragraphe, se voient
   imposer un plancher commun.
   --------------------------------------------------------- */

.wp-site-blocks .mhpss-page .grid:has(> .pillar-card) {
    align-items: start;
}

.wp-site-blocks .mhpss-page .pillar-card {
    height: auto;
    justify-content: flex-start;
}

/* Deux lignes reservees pour chaque titre.
   1.5rem de corps x 1.375 d interlignage x 2 lignes */
.wp-site-blocks .mhpss-page .pillar-card h3 {
    min-height: 4.125rem;
}

/* Trois lignes reservees pour chaque paragraphe.
   0.875rem de corps x 1.625 d interlignage x 3 lignes */
.wp-site-blocks .mhpss-page .pillar-card>div:first-child p {
    min-height: 4.3rem;
}

/* La ligne de bas de carte se cale au meme niveau dans les trois */
.wp-site-blocks .mhpss-page .pillar-card>div:last-child {
    margin-top: auto;
}

/* ---------------------------------------------------------
   A propos : cartes de la grille

   La regle vise le conteneur de la grille, jamais les cartes.
   Les cartes de valeurs vivent dans des colonnes flex ou un
   align-self ecraserait leur alignement a droite.
   --------------------------------------------------------- */

.wp-site-blocks .mhpss-page .grid:has(> .reveal-box) {
    align-items: start;
}

/* ---------------------------------------------------------
   Services : signaler que les cartes sont cliquables
   --------------------------------------------------------- */

.mhpss-page .service-dropdown>div[onclick] {
    position: relative;
    padding-right: 4.25rem !important;
}

.mhpss-page .service-dropdown>div[onclick]::after {
    content: 'Plus';
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    background: rgba(23, 64, 94, 0.09);
    color: #17405e;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition:
        background 0.35s ease,
        color 0.35s ease;
}

.mhpss-page .service-dropdown>div[onclick]:hover::after {
    background: #17405e;
    color: #ffffff;
}

/* Teinte accordee a la couleur de chaque axe */
.mhpss-page .pillar-card-1 .service-dropdown>div[onclick]:hover::after {
    background: #fa7268;
}

.mhpss-page .pillar-card-2 .service-dropdown>div[onclick]:hover::after {
    background: #17405e;
}

.mhpss-page .pillar-card-3 .service-dropdown>div[onclick]:hover::after {
    background: #0e8388;
}

/* Ecrans tactiles : sans survol, le panneau des prestations ne
   s ouvrait jamais. */

@media (hover: none) {
    .wp-site-blocks .mhpss-page .pillar-card .service-dropdown {
        opacity: 1;
        max-height: none;
        margin-top: 1.5rem;
    }
}

/* Telephone : pastille sous le titre, faute de place a droite */

@media (max-width: 640px) {
    .mhpss-page .service-dropdown>div[onclick] {
        padding-right: 1rem !important;
        padding-bottom: 2.6rem !important;
    }

    .mhpss-page .service-dropdown>div[onclick]::after {
        top: auto;
        bottom: 0.9rem;
        right: auto;
        left: 1rem;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mhpss-page .service-dropdown>div[onclick]::after {
        transition: none;
    }
}

/* A propos : espacement propre sous le bandeau. */

.wp-site-blocks .mhpss-page.mhpss-apropos {
    padding-top: calc(var(--hz-bandeau) + 0rem) !important;
}

/* Ligne des titres */

.wp-site-blocks .mhpss-page.mhpss-services {
    padding-top: calc(var(--hz-titre) - 22px) !important;
}

.wp-site-blocks .mhpss-page.mhpss-apropos {
    padding-top: calc(var(--hz-titre) - 54px) !important;
}