/*
 * CSS partagée entre plusieurs blocs Excellium RH.
 * Boutons, animations et helpers non spécifiques à un bloc.
 */

/* ==========================================================================
 * PREVENTION WP CORE : reset margin-block-start:24px sur tout enfant direct
 * d'un container Excellium (.exrh-*-grid, .exrh-etape, etc).
 * WP core injecte ce margin via :where(.is-layout-flow) > * et
 * :where(.is-layout-constrained) > * — casse tous nos layouts grid/flex
 * customs. Cette regle globale evite d'avoir a le corriger sur chaque bloc.
 * ==========================================================================*/
[class*="exrh-"][class*="-grid"] > *,
[class*="exrh-etape"] > *,
[class*="exrh-carte"] > *,
[class*="exrh-stats"] > *,
[class*="exrh-signature"] > *,
[class*="exrh-charte-navy"] > * {
    margin-block-start: 0 !important;
    margin-top: 0 !important;
}

.exrh-btn {
    display: inline-block;
    box-sizing: border-box;
    padding: 15px 28px;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: 15.5px;
    letter-spacing: 0.01em;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background .2s, border-color .2s, color .2s;
    line-height: 1;
}
.exrh-btn--gold  { background: #C1922E; color: #0A2138; }
.exrh-btn--gold:hover { background: #D7A640; color: #0A2138; }

.exrh-btn--navy  { background: #0F2C4D; color: #fff; }
.exrh-btn--navy:hover { background: #0A2138; color: #fff; }

.exrh-btn--ghost { background: transparent; border-color: rgba(255,255,255,0.35); color: #fff; }
.exrh-btn--ghost:hover { border-color: #C1922E; color: #C1922E; }

.exrh-btn--ghost-navy { background: transparent; border-color: #E4E0D7; color: #0F2C4D; }
.exrh-btn--ghost-navy:hover { border-color: #C1922E; color: #C1922E; }

/* Bouton wp:button is-style-outline pose sur un groupe navy (sidebar secteur
 * ou bandeau CTA marine) : style aligne sur la maquette (bordure blanche 35%,
 * fond transparent, texte blanc). Le scope via .has-navy-background-color
 * evite d'ecraser is-style-outline dans d'autres contextes. */
.has-navy-background-color .wp-block-button.is-style-outline > .wp-block-button__link,
.has-navy-deep-background-color .wp-block-button.is-style-outline > .wp-block-button__link {
    background: transparent !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(255,255,255,0.35) !important;
    padding: 14px 26px;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: 15px;
    border-radius: 0;
    text-decoration: none;
    transition: border-color .15s, color .15s;
}
.has-navy-background-color .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.has-navy-deep-background-color .wp-block-button.is-style-outline > .wp-block-button__link:hover {
    border-color: #C1922E !important;
    color: #C1922E !important;
}

.exrh-btn[disabled],
.exrh-btn--disabled {
    background: #DFDBD2 !important;
    color: #9AA4AE !important;
    border-color: transparent !important;
    cursor: not-allowed;
}

@keyframes exrhFadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0);    }
}
.exrh-fade-in { animation: exrhFadeUp .4s ease both; }

/* Carte parcours (accueil : 2 parcours) — wp:group avec classe exrh-parcours-card */
.exrh-parcours-card {
    background: #FFFFFF;
    border: 1px solid #E4E0D7;
    padding: 40px !important;
    transition: transform .2s, box-shadow .2s;
}
.exrh-parcours-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px -22px rgba(15,44,77,0.4);
}
.exrh-parcours-num {
    width: 52px;
    height: 52px;
    display: grid !important;
    place-items: center;
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 700 !important;
    font-size: 22px !important;
    margin: 0 0 22px !important;
    color: #C1922E !important;
}
.exrh-parcours-num--navy { background: #0F2C4D; color: #C1922E !important; }
.exrh-parcours-num--gold { background: #C1922E; color: #0A2138 !important; }
.exrh-parcours-link {
    color: #A9791D !important;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    text-decoration: none;
}
.exrh-parcours-link:hover { color: #C1922E !important; }

/* Section méthode : numérotation "01 — Titre" en gold */
.exrh-method-num {
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 700 !important;
    color: #C1922E !important;
    font-size: 15px !important;
    margin: 0 0 12px !important;
}

/* Chapô centré des sections (accueil, méthode) */
.exrh-lead-center {
    color: #5C6B7A !important;
    font-size: 16.5px !important;
    max-width: 620px;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Grille des profils recrutes (wp:list stylee en 2 colonnes de tuiles) */
.exrh-roles-grid,
ul.exrh-roles-grid,
.wp-block-list.exrh-roles-grid {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 4px 0 0 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
}
.exrh-roles-grid li {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #FFFFFF;
    border: 1px solid #E4E0D7;
    padding: 14px 16px;
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 14.5px;
    color: #131A22;
    line-height: 1.35;
    list-style: none;
}
.exrh-roles-grid li::before {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    background: #C1922E;
    flex: none;
}
@media (max-width: 767px) {
    .exrh-roles-grid,
    ul.exrh-roles-grid { grid-template-columns: 1fr !important; }
}

/* Citation avec filet or à gauche (utilisée dans les fiches secteur) */
.exrh-quote-gold {
    border-left: 3px solid #C1922E;
    padding: 10px 0 10px 20px;
    margin: 26px 0 34px;
    color: #131A22;
    font-size: 16.5px;
    line-height: 1.55;
}

/* Etapes numerotees (recruter, ma-carriere) — wp:group.exrh-etape avec numero + titre + texte
 * Layout : grand chiffre or a gauche, contenu a droite. Rendu 100% blocs natifs. */
.exrh-etape {
    display: grid !important;
    grid-template-columns: 96px 1fr !important;
    gap: 28px !important;
    align-items: start;
    padding: 26px 0 !important;
    border-bottom: 1px solid #E4E0D7;
    /* WP core injecte margin-block-start:24px sur les enfants de
     * .is-layout-flow (le wp:group parent qui contient les etapes).
     * Sans reset, les etapes sont espacees de 24px en plus du padding. */
    margin-block-start: 0 !important;
    margin-top: 0 !important;
}
/* Meme protection sur les enfants directs (num + body) : sinon le body
 * .wp-block-group.is-layout-flow recoit margin-block-start:24px et pousse
 * le h3 titre en dessous du num. */
.exrh-etape > * {
    margin-block-start: 0 !important;
    margin-top: 0 !important;
}
.exrh-etape__num,
.exrh-etape > p.exrh-etape__num {
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 700 !important;
    font-size: 44px !important;
    color: #C1922E !important;
    line-height: 1 !important;
    margin: 0 !important;
}
.exrh-etape__body h3,
.exrh-etape > h3 {
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 700 !important;
    font-size: 21px !important;
    color: #0F2C4D !important;
    margin: 0 0 8px !important;
    line-height: 1.25;
}
.exrh-etape p:not(.exrh-etape__num) {
    color: #5C6B7A !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
    margin: 0 !important;
    max-width: 720px;
}
@media (max-width: 767px) {
    .exrh-etape { grid-template-columns: 1fr !important; gap: 12px !important; padding: 24px 0 !important; }
    .exrh-etape__num { font-size: 32px !important; }
}

/* Wrap-around : le texte principal (col 1) prend 100% de la largeur et la
 * sidebar (col 2) flotte sur le cote. Des que le texte depasse la hauteur
 * de la sidebar, il reprend la pleine largeur naturellement.
 * Utilise sur /le-cabinet/ pour "Notre difference" et "Historique". */
.wp-block-columns.exrh-wrap-right,
.wp-block-columns.exrh-wrap-left {
    display: block !important;
}
.wp-block-columns.exrh-wrap-right > .wp-block-column,
.wp-block-columns.exrh-wrap-left  > .wp-block-column {
    flex-basis: auto !important;
    width: auto !important;
}
/* Sidebar a droite : la col 1 = sidebar (flotte a droite pour venir en haut a
 * droite), la col 2 = texte plein qui s'enroule. NB : on inverse l'ordre DOM
 * dans le post_content (sidebar avant texte) sinon le float:right vient se
 * caler EN BAS a droite (le texte est fini avant que le float s'installe). */
.wp-block-columns.exrh-wrap-right > .wp-block-column:nth-child(1) {
    float: right;
    width: 42%;
    max-width: 380px;
    margin: 0 0 20px 34px;
}
/* Sidebar a gauche (photo Philippe par ex.) : la col 1 flotte a gauche,
 * col 2 = texte plein. */
.wp-block-columns.exrh-wrap-left > .wp-block-column:nth-child(1) {
    float: left;
    width: 40%;
    max-width: 380px;
    margin: 0 34px 20px 0;
}
/* Clearfix pour que le container englobe bien les colonnes flottantes. */
.wp-block-columns.exrh-wrap-right::after,
.wp-block-columns.exrh-wrap-left::after {
    content: "";
    display: table;
    clear: both;
}
/* Mobile < 768px : retour a un flow vertical simple, sidebar sous le texte */
@media (max-width: 767px) {
    .wp-block-columns.exrh-wrap-right > .wp-block-column,
    .wp-block-columns.exrh-wrap-left  > .wp-block-column {
        float: none !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 0 20px 0 !important;
    }
}

/* Cartes à filet or (recruter, ma-carriere) — wp:group.exrh-carte-filet
 * Border-top or 3px, fond blanc, ombre douce. Rendu 100% blocs natifs. */
.exrh-cartes-filet-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
    align-items: stretch !important;
}
.exrh-cartes-filet-grid > .exrh-carte-filet {
    height: 100% !important;
    align-self: stretch !important;
    /* WP core injecte margin-block-start:24px sur :where(.is-layout-flow) > *
     * ce qui decale les cartes 2 et 3 vers le bas. Reset pour alignement grid. */
    margin-block-start: 0 !important;
    margin-top: 0 !important;
}
.exrh-carte-filet {
    background: #FFFFFF !important;
    border: 1px solid #E4E0D7 !important;
    border-top: 3px solid #C1922E !important;
    padding: 30px !important;
    box-shadow: none !important;
}
.exrh-carte-filet h3,
.exrh-carte-filet > h3 {
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 700 !important;
    font-size: 19px !important;
    color: #0F2C4D !important;
    margin: 0 0 10px !important;
    line-height: 1.3;
}
.exrh-carte-filet p {
    color: #5C6B7A !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}
@media (max-width: 1023px) {
    .exrh-cartes-filet-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 767px) {
    .exrh-cartes-filet-grid { grid-template-columns: 1fr !important; }
}

/* Grille des 3 cartes parcours avec photo (recruter : Trois expertises metier).
 * Reprend la structure maquette : 3 cols gap 24px, cartes de meme hauteur. */
.exrh-parcours-cards-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
    align-items: stretch !important;
}
.exrh-parcours-cards-grid > .exrh-parcours-card {
    height: 100% !important;
}
@media (max-width: 1023px) {
    .exrh-parcours-cards-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 767px) {
    .exrh-parcours-cards-grid { grid-template-columns: 1fr !important; }
}

/* Carte parcours "large" (recruter : 3 expertises metier) — variante avec image en tete.
 * Utilise .exrh-parcours-card comme base + .exrh-parcours-card--photo. */
.exrh-parcours-card--photo {
    padding: 0 !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: none !important;
}
.exrh-parcours-card--photo:hover {
    transform: none !important;
    box-shadow: none !important;
}
.exrh-parcours-card--photo .wp-block-image {
    margin: 0 !important;
}
.exrh-parcours-card--photo .wp-block-image img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}
.exrh-parcours-card--photo .exrh-parcours-card__body {
    padding: 28px 26px 30px !important;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.exrh-parcours-card--photo .exrh-parcours-card__body p.exrh-parcours-num,
.exrh-parcours-card--photo p.exrh-parcours-num {
    margin: 0 0 4px !important;
    width: auto !important;
    height: auto !important;
    display: block !important;
    padding: 0 !important;
    background: transparent !important;
    color: #A9791D !important;
    font-size: 13px !important;
    letter-spacing: 0.05em !important;
    text-transform: none !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}
.exrh-parcours-card--photo .exrh-parcours-card__body h3 {
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 700 !important;
    font-size: 21px !important;
    color: #0F2C4D !important;
    margin: 0 !important;
    line-height: 1.25;
}
.exrh-parcours-card--photo .exrh-parcours-card__body p {
    color: #5C6B7A !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
    margin: 0 !important;
}

/* Citation gold avec filet or a gauche apres la grille des 3 expertises.
 * Pas de margin-left:0 override : la citation vit dans un wrapper .exrh-quote-wrap
 * du pattern qui la contraint a max-width:1200px justifyContent:left, donc elle
 * s'aligne naturellement sur les cards au-dessus. */
.exrh-quote-recruter {
    border-left: 3px solid #C1922E !important;
    padding: 12px 0 12px 22px !important;
    max-width: 820px;
    font-size: 18px !important;
    color: #0F2C4D !important;
    font-style: italic !important;
    line-height: 1.5;
    margin: 0 !important;
}

/* Signature auteur (cabinet : Philippe Freitag) — filet or a gauche,
 * nom en Space Grotesk semibold, titre muted. */
.exrh-signature {
    border-left: 3px solid #C1922E;
    padding: 6px 0 6px 18px;
    margin-top: 22px !important;
}
.exrh-signature__name {
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 600 !important;
    font-size: 17px !important;
    color: #0F2C4D !important;
    margin: 0 !important;
    line-height: 1.3;
}
.exrh-signature__role {
    font-size: 14px !important;
    color: #5C6B7A !important;
    margin: 4px 0 0 !important;
}

/* Bandeau navy "Charte de qualite" avec titre + chapo a gauche et gros nombre or a droite */
.exrh-charte-navy {
    background: #0F2C4D !important;
    color: #fff !important;
    padding: 30px 34px !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    flex-wrap: wrap;
}
.exrh-charte-navy__body { max-width: 620px; flex: 1 1 auto; }
.exrh-charte-navy__body h3 {
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 600 !important;
    font-size: 19px !important;
    color: #fff !important;
    margin: 0 0 8px !important;
}
.exrh-charte-navy__body p {
    color: #b9c6d4 !important;
    font-size: 15px !important;
    margin: 0 !important;
}
.exrh-charte-navy__figure {
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 700 !important;
    font-size: 34px !important;
    color: #C1922E !important;
    white-space: nowrap;
    margin: 0 !important;
}

/* Cartes chiffres blanches (cabinet, fin de page) — 4 cartes fond blanc bordees */
.exrh-stats-cards {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
    align-items: stretch !important;
}
.exrh-stats-cards > .exrh-stats-card {
    height: 100% !important;
    align-self: stretch !important;
    /* WP core injecte margin-block-start:24px sur :where(.is-layout-flow) > *
     * qui decale les cartes 2/3/4 vers le bas. Reset pour alignement grid. */
    margin-block-start: 0 !important;
    margin-top: 0 !important;
}
.exrh-stats-card {
    background: #fff !important;
    border: 1px solid #E4E0D7 !important;
    padding: 26px !important;
}
.exrh-stats-card__value {
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 700 !important;
    font-size: 30px !important;
    color: #C1922E !important;
    margin: 0 !important;
    line-height: 1;
}
.exrh-stats-card__label {
    font-size: 14px !important;
    color: #5C6B7A !important;
    margin: 4px 0 0 !important;
}
@media (max-width: 1023px) {
    .exrh-stats-cards { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 767px) {
    .exrh-stats-cards { grid-template-columns: 1fr !important; }
    .exrh-charte-navy { flex-direction: column; align-items: flex-start; }
}

/* Numeros or dans les cartes filet (variante avec "01" en tete) */
.exrh-carte-filet .exrh-carte-filet__num,
p.exrh-carte-filet__num {
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 700 !important;
    color: #C1922E !important;
    font-size: 14px !important;
    margin: 0 0 10px !important;
    line-height: 1.2 !important;
}

/* ==========================================================================
 * BLOG - grille articles home + card
 * ==========================================================================*/
.exrh-blog-grid.wp-block-post-template {
    gap: 24px !important;
}
.exrh-blog-grid.wp-block-post-template.is-layout-grid {
    grid-template-columns: repeat(3, 1fr) !important;
}
@media (max-width: 1023px) {
    .exrh-blog-grid.wp-block-post-template.is-layout-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 767px) {
    .exrh-blog-grid.wp-block-post-template.is-layout-grid { grid-template-columns: 1fr !important; }
}

.exrh-blog-card {
    background: #FFFFFF !important;
    border: 1px solid #E4E0D7 !important;
    overflow: hidden;
    transition: transform .2s, box-shadow .2s;
    height: 100%;
    display: flex !important;
    flex-direction: column;
    padding: 0 !important;
    margin: 0 !important;
}
.exrh-blog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px -22px rgba(15, 44, 77, 0.4);
}
.exrh-blog-card .exrh-blog-card__thumb {
    margin: 0 !important;
}
.exrh-blog-card .exrh-blog-card__thumb img {
    width: 100%;
    height: 168px;
    object-fit: cover;
    display: block;
    background: #DCD8D0;
}
.exrh-blog-card .exrh-blog-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: 0 !important;
}
.exrh-blog-card__meta {
    align-items: center !important;
    gap: 10px !important;
    margin: 0 0 12px !important;
}
.exrh-blog-card__meta > * {
    margin: 0 !important;
}
.exrh-blog-tag {
    display: inline-block !important;
    font-size: 11px !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    color: #A9791D !important;
    background: rgba(193, 146, 46, 0.12) !important;
    padding: 4px 9px !important;
    line-height: 1.5;
}
.exrh-blog-tag a {
    color: inherit !important;
    text-decoration: none !important;
    padding: 0 !important;
    background: transparent !important;
    pointer-events: none !important;
    cursor: default !important;
}
.exrh-blog-date {
    font-size: 12.5px !important;
    color: #5C6B7A !important;
    line-height: 1.5;
}
.exrh-blog-card__title,
.exrh-blog-card__title a,
h3.wp-block-post-title.exrh-blog-card__title,
h3.wp-block-post-title.exrh-blog-card__title a {
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    color: #0F2C4D !important;
    line-height: 1.25 !important;
    margin: 0 0 10px !important;
    text-decoration: none !important;
}
.exrh-blog-card__title a:hover { color: #A9791D !important; }
.exrh-blog-card__excerpt,
.exrh-blog-card__excerpt p {
    color: #5C6B7A !important;
    font-size: 14.5px !important;
    line-height: 1.55 !important;
    margin: 0 0 16px !important;
}
.exrh-blog-card__link {
    color: #A9791D !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    margin: auto 0 0 !important;
}
.exrh-blog-card__link a {
    color: #A9791D !important;
    text-decoration: none !important;
}

.exrh-blog-empty {
    color: #5C6B7A !important;
    font-size: 16px;
    padding: 40px 0;
}

/* Pagination centrée */
.exrh-blog-query .wp-block-query-pagination {
    justify-content: center !important;
    margin-top: 48px !important;
}
.exrh-blog-query .wp-block-query-pagination a,
.exrh-blog-query .wp-block-query-pagination span {
    font-family: 'Space Grotesk', sans-serif !important;
    color: #0F2C4D !important;
    padding: 8px 14px !important;
    text-decoration: none !important;
}
.exrh-blog-query .wp-block-query-pagination .current {
    background: #0F2C4D !important;
    color: #FFFFFF !important;
}

/* ==========================================================================
 * SINGLE ARTICLE - hero + featured image + body
 * Le hero est full-width fond navy-deep, mais le contenu (back, meta, h1)
 * est contraint a 820px via le contentSize du wp:group. On NE surcharge PAS
 * max-width ici sinon le WP layout constrained ne s'applique plus.
 * ==========================================================================*/
.exrh-article-back {
    font-size: 13.5px !important;
    color: #9FB0C0 !important;
    margin-top: 0 !important;
    margin-bottom: 22px !important;
}
.exrh-article-back a {
    color: #9FB0C0 !important;
    text-decoration: none !important;
}
.exrh-article-back a:hover { color: #C1922E !important; }
.exrh-article-meta {
    align-items: center !important;
    gap: 12px !important;
    margin-top: 0 !important;
    margin-bottom: 16px !important;
}
.exrh-article-meta > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
/* Bordure/padding uniquement sur le container .exrh-article-tag (wp-block-post-terms).
 * Le <a> a l'interieur herite color et perd son underline, mais pas de border
 * ni padding — sinon on a un cadre double (container + link). */
.exrh-article-tag {
    display: inline-block !important;
    font-size: 11px !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    color: #C1922E !important;
    border: 1px solid rgba(193, 146, 46, 0.5) !important;
    padding: 4px 10px !important;
    background: transparent !important;
    line-height: 1.4;
}
.exrh-article-tag a {
    color: inherit !important;
    text-decoration: none !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    pointer-events: none !important;
    cursor: default !important;
}
.exrh-article-date {
    font-size: 13px !important;
    color: #9FB0C0 !important;
}
.exrh-article-title,
h1.wp-block-post-title.exrh-article-title {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 38px !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    line-height: 1.15 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    text-wrap: balance;
}
.exrh-article-featured .wp-block-post-featured-image,
.exrh-article-featured .exrh-article-featured__img {
    /* Sans width, le figure prend la largeur intrinseque de l'<img>
     * (souvent 600px) et n'est plus centre dans le container 900px. */
    width: 100% !important;
    max-width: 900px;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
.exrh-article-featured img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border: 1px solid #E4E0D7;
    box-shadow: 0 24px 60px -34px rgba(15, 44, 77, 0.55);
    background: #DCD8D0;
    display: block;
}
.exrh-article-body p {
    color: #5C6B7A !important;
    font-size: 16.5px !important;
    line-height: 1.65 !important;
    margin: 0 0 18px !important;
}
.exrh-article-body p:first-of-type {
    color: #0F2C4D !important;
    font-size: 19px !important;
    font-weight: 500;
    margin-bottom: 26px !important;
}
.exrh-article-body h2 {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 24px !important;
    color: #0F2C4D !important;
    margin: 34px 0 14px !important;
}
.exrh-article-body h3 {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 19px !important;
    color: #0F2C4D !important;
    margin: 28px 0 12px !important;
}
.exrh-article-body blockquote {
    border-left: 3px solid #C1922E !important;
    padding: 6px 0 6px 22px !important;
    margin: 30px 0 !important;
    font-size: 18px !important;
    color: #0F2C4D !important;
    font-style: italic !important;
}
.exrh-article-body img { max-width: 100%; height: auto; }

/* Variante eyebrow flat sur fond navy (hero-marine background none, home blog, etc.).
 * Dupliquee ici depuis hero-marine/style.css car le CSS du bloc hero-marine ne
 * charge que sur les pages qui utilisent ce bloc. Cette classe est aussi
 * appliquee sur /blog (template home.html) qui n'utilise pas hero-marine.
 * Pas de margin left/right override : WP layout constrained applique margin
 * auto pour centrer le paragraphe dans le 1200px et respecter le padding. */
.exrh-hero__eyebrow--flat {
    border: 0 !important;
    padding: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 16px !important;
    background: transparent !important;
    color: #C1922E !important;
    font-size: 12px !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
}

/* ==========================================================================
 * ARCHIVE FAQ (template archive-faq.html) : liste + compteur + pagination
 * ==========================================================================*/
.exrh-faq-counter {
    font-size: 13.5px;
    color: #5C6B7A;
    margin-bottom: 22px;
}
.exrh-faq-items.wp-block-post-template {
    counter-reset: faq-num;
    border-top: 1px solid #E4E0D7;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}
.exrh-faq-items.wp-block-post-template > li,
.exrh-faq-items.wp-block-post-template > * {
    counter-increment: faq-num;
    list-style: none;
}
.exrh-faq-item {
    position: relative;
    display: grid !important;
    grid-template-columns: 52px 1fr auto !important;
    align-items: center;
    gap: 18px !important;
    padding: 20px 8px !important;
    border-bottom: 1px solid #E4E0D7;
    margin: 0 !important;
    background: transparent;
    transition: background .15s;
}
.exrh-faq-item:hover { background: #ffffff; }
.exrh-faq-item::before {
    content: counter(faq-num, decimal-leading-zero);
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: #C1922E;
    grid-column: 1;
}
.exrh-faq-item::after {
    content: "→";
    font-family: 'Space Grotesk', sans-serif;
    font-size: 20px;
    color: #A9791D;
    grid-column: 3;
    justify-self: end;
}
.exrh-faq-item__title,
.exrh-faq-item h3.exrh-faq-item__title,
.exrh-faq-item h3.exrh-faq-item__title a {
    grid-column: 2 !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 600 !important;
    font-size: 17px !important;
    color: #0F2C4D !important;
    text-decoration: none !important;
    margin: 0 !important;
    line-height: 1.35 !important;
}
.exrh-faq-item h3.exrh-faq-item__title a:hover { color: #A9791D !important; }
/* Rend toute la ligne cliquable via l'anchor du titre qui recouvre la row */
.exrh-faq-item h3.exrh-faq-item__title a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Pagination FAQ : boutons carres numerotes + prev/next */
.exrh-faq-pagination.wp-block-query-pagination {
    justify-content: center !important;
    gap: 8px !important;
    margin-top: 34px !important;
    flex-wrap: wrap;
}
.exrh-faq-pagination a,
.exrh-faq-pagination .page-numbers {
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #E4E0D7 !important;
    background: #fff !important;
    color: #0F2C4D !important;
    text-decoration: none !important;
    padding: 0 !important;
    transition: border-color .15s, color .15s;
}
.exrh-faq-pagination a:hover { border-color: #C1922E !important; color: #C1922E !important; }
.exrh-faq-pagination .current {
    background: #0F2C4D !important;
    color: #fff !important;
    border-color: #0F2C4D !important;
}
.exrh-faq-pagination .wp-block-query-pagination-previous,
.exrh-faq-pagination .wp-block-query-pagination-next {
    width: auto !important;
    padding: 0 16px !important;
}

/* ==========================================================================
 * SINGLE FAQ (template single-faq.html)
 * ==========================================================================*/
.exrh-faq-back {
    font-size: 13.5px !important;
    color: #9FB0C0 !important;
    margin-top: 0 !important;
    margin-bottom: 22px !important;
}
.exrh-faq-back a { color: #9FB0C0 !important; text-decoration: none !important; }
.exrh-faq-back a:hover { color: #C1922E !important; }
.exrh-faq-meta {
    align-items: center !important;
    gap: 12px !important;
    margin-top: 0 !important;
    margin-bottom: 16px !important;
}
.exrh-faq-meta > * { margin-top: 0 !important; margin-bottom: 0 !important; }
.exrh-faq-tag {
    display: inline-block !important;
    font-size: 11px !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    color: #C1922E !important;
    border: 1px solid rgba(193, 146, 46, 0.5) !important;
    padding: 4px 10px !important;
    line-height: 1.4 !important;
    margin: 0 !important;
}
.exrh-faq-title,
h1.wp-block-post-title.exrh-faq-title {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 36px !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    line-height: 1.15 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    text-wrap: balance;
}
.exrh-faq-body p {
    color: #131A22 !important;
    font-size: 18px !important;
    line-height: 1.6 !important;
    margin-top: 0 !important;
    margin-bottom: 26px !important;
    text-wrap: pretty;
}
.exrh-faq-note {
    border-left: 3px solid #C1922E !important;
    padding: 14px 0 14px 22px !important;
    color: #5C6B7A !important;
    font-size: 15.5px !important;
    line-height: 1.5 !important;
    margin-bottom: 0 !important;
}
.exrh-faq-actions.wp-block-buttons {
    gap: 14px !important;
    flex-wrap: wrap;
}
.exrh-faq-actions .wp-block-button__link {
    padding: 14px 26px !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 600 !important;
    font-size: 15px !important;
}
.exrh-faq-btn-ghost .wp-block-button__link {
    background: transparent !important;
    color: #0F2C4D !important;
    border: 1px solid #E4E0D7 !important;
}
.exrh-faq-btn-ghost .wp-block-button__link:hover {
    border-color: #C1922E !important;
    color: #C1922E !important;
}

/* Navigation prev / next */
.exrh-faq-nav__eyebrow {
    font-size: 12px !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    color: #A9791D !important;
    margin-top: 0 !important;
    margin-bottom: 22px !important;
}
.exrh-faq-nav__card {
    background: #F6F5F1 !important;
    border: 1px solid #E4E0D7 !important;
    padding: 18px 20px !important;
    transition: border-color .2s;
    margin: 0 !important;
    height: 100%;
}
.exrh-faq-nav__card:hover { border-color: #C1922E !important; }
.exrh-faq-nav__label {
    font-size: 11.5px !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: #5C6B7A !important;
    margin-top: 0 !important;
    margin-bottom: 7px !important;
}
.exrh-faq-nav__link,
.wp-block-post-navigation-link.exrh-faq-nav__link a {
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    color: #0F2C4D !important;
    text-decoration: none !important;
    display: block;
    margin: 0 !important;
}
.exrh-faq-nav__link a:hover { color: #C1922E !important; }

/* Surtitre or, réutilisé par plusieurs blocs sur fond clair */
.exrh-eyebrow {
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #A9791D;
    font-weight: 600;
}
@media (max-width: 767px) {
    .exrh-btn { padding: 13px 22px; font-size: 15px; }
    .exrh-eyebrow { font-size: 11px; }
}