/* =========================================================
   MHPSS ProCare Firm
   Page Nos ressources (.hzr-page)

   Groupe de blocs du coeur (titre, requetes d articles) mis en
   forme par les classes hzr-*. L apparition au defilement est
   dans horizons-extension.js.
   ========================================================= */

/* ---------------------------------------------------------
   Mise en page

   Disposition en deux colonnes. Les publications occupent la
   colonne de lecture, en cartes avec vignette. Les actualites
   et les documents passent dans un rail etroit, en listes
   sans image : leur poids n est pas le meme.

   Deux precautions liees aux sections 2 et 4 :
   aucun fond n est peint ici, le degrade du corps doit rester
   visible ; et la hauteur du bandeau etant deja reservee par
   la zone principale, seul un peu d air est ajoute.
   --------------------------------------------------------- */

/* Le important est indispensable : WordPress impose ses
   marges aux blocs en pleine largeur, avec une specificite
   superieure a une simple classe. */
.wp-site-blocks .hzr-page {
    max-width: 72rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.hzr-page {
    /* Air sous le bandeau, en plus de la marge de la zone
     principale. Seule valeur a toucher si le titre est trop
     haut ou trop bas. */
    padding-top: 2rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-bottom: 5rem;
    font-family:
        'Inter',
        system-ui,
        -apple-system,
        sans-serif;
    color: #334155;
}

/* --- Titre et chapeau --- */

.hzr-page .hzr-titre {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #17405e;
    text-align: center;
    margin: 0 0 0.75rem;
}

.hzr-page .hzr-sous {
    font-size: 1.125rem;
    font-weight: 300;
    line-height: 1.65;
    color: #64748b;
    text-align: center;
    max-width: 44rem;
    margin: 0 auto 3.5rem;
}

/* --- Les deux colonnes --- */

.hzr-page .hzr-corps {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 3.5rem;
    align-items: start;
}

/* Le theme ajoute des marges entre blocs frere ; la grille
   gere deja l espacement. */
.hzr-page .hzr-corps>*,
.hzr-page .hzr-principal>*,
.hzr-page .hzr-rail>* {
    margin-block: 0;
}

/* --- Intertitres --- */

.hzr-page .hzr-section {
    font-size: 1.5rem;
    font-weight: 700;
    color: #17405e;
    margin: 0 0 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #dbe3ea;
}

.hzr-page .hzr-rubrique {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #94a3b8;
    margin: 0 0 1rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid #dbe3ea;
}

.hzr-page .hzr-rail .hzr-rubrique:not(:first-child) {
    margin-top: 3rem;
}

/* --- Colonne principale : cartes avec vignette --- */

.hzr-page .hzr-grille .wp-block-post-template {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* La section 2 rend transparents les blocs Groupe. Les cartes
   sont des elements d article, pas des groupes : leur fond
   blanc tient. */
.hzr-page .hzr-grille .wp-block-post {
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border: 1px solid #e6ecf1;
    border-radius: 1.1rem;
    overflow: hidden;
    box-shadow: 0 10px 26px rgba(7, 71, 107, 0.06);
    transition:
        transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.5s ease,
        border-color 0.5s ease;
}

.hzr-page .hzr-grille .wp-block-post:hover {
    transform: translateY(-4px);
    border-color: #a8cf38;
    box-shadow: 0 18px 36px rgba(7, 71, 107, 0.1);
}

.hzr-page .hzr-grille .wp-block-post-featured-image {
    margin: 0;
}

.hzr-page .hzr-grille .wp-block-post-featured-image img {
    display: block;
    width: 100%;
    height: 170px;
    object-fit: cover;
}

.hzr-page .hzr-carte-txt {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1 1 auto;
    padding: 1.4rem 1.5rem 1.6rem;
}

.hzr-page .hzr-carte-txt .wp-block-post-date {
    margin: 0;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #94a3b8;
}

.hzr-page .hzr-carte-txt .wp-block-post-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.35;
    color: #17405e;
}

.hzr-page .hzr-carte-txt .wp-block-post-excerpt p {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 300;
    line-height: 1.6;
    color: #64748b;
}

/* --- Rail : listes sans vignette --- */

.hzr-page .hzr-liste .wp-block-post-template {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hzr-page .hzr-liste .wp-block-post {
    padding: 0.9rem 0;
    border-bottom: 1px solid #e8edf2;
}

.hzr-page .hzr-liste .wp-block-post:last-child {
    border-bottom: 0;
}

.hzr-page .hzr-liste .wp-block-post-date {
    margin: 0 0 0.2rem;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #a3aebc;
}

.hzr-page .hzr-liste .wp-block-post-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.4;
    color: #17405e;
    transition: color 0.3s ease;
}

.hzr-page .hzr-liste .wp-block-post:hover .wp-block-post-title {
    color: #0e8388;
}

.hzr-page .hzr-liste .wp-block-post-excerpt p {
    margin: 0.3rem 0 0;
    font-size: 0.82rem;
    font-weight: 300;
    line-height: 1.55;
    color: #7d8a99;
}

/* Les documents portent une fleche de telechargement */
.hzr-page .hzr-docs .wp-block-post-title a::after {
    content: '\2193';
    margin-left: 0.4rem;
    color: #a8cf38;
    font-weight: 700;
}

.hzr-page .hzr-docs .wp-block-post-date {
    margin: 0.25rem 0 0;
}

/* --- Liens et message d attente --- */

.hzr-page .wp-block-post-title a {
    color: inherit;
    text-decoration: none;
}

.hzr-page .wp-block-query-no-results p {
    margin: 0;
    font-size: 0.9rem;
    color: #94a3b8;
    font-weight: 300;
}

/* --- Tablette : le rail repasse dessous --- */

@media (max-width: 980px) {
    .hzr-page .hzr-corps {
        grid-template-columns: minmax(0, 1fr);
        gap: 3rem;
    }
}

/* --- Mobile --- */

@media (max-width: 640px) {
    .hzr-page .hzr-grille .wp-block-post-template {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {

    .hzr-page .hzr-grille .wp-block-post,
    .hzr-page .hzr-liste .wp-block-post-title {
        transition: none;
    }

    .hzr-page .hzr-grille .wp-block-post:hover {
        transform: none;
    }
}

/* Ligne des titres */

.wp-site-blocks .hzr-page {
    padding-top: var(--hz-titre) !important;
}

/* ---------------------------------------------------------
   Apparition au defilement (horizons-extension.js)
   --------------------------------------------------------- */

.hzr-page .hzr-anim {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 600ms, transform 600ms;
}

.hzr-page .hzr-anim.hzr-vu {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .hzr-page .hzr-anim {
        opacity: 1;
        transform: none;
        transition: none;
    }
}