@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/Inter-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/Inter-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/Inter-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/Inter-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sansation';
    src: url('../fonts/sansation/Sansation_Light.woff2') format('woff2'),
         url('../fonts/sansation/Sansation_Light.woff') format('woff'),
         url('../fonts/sansation/Sansation_Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sansation';
    src: url('../fonts/sansation/Sansation_Regular.woff2') format('woff2'),
         url('../fonts/sansation/Sansation_Regular.woff') format('woff'),
         url('../fonts/sansation/Sansation_Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sansation';
    src: url('../fonts/sansation/Sansation_Bold.woff2') format('woff2'),
         url('../fonts/sansation/Sansation_Bold.woff') format('woff'),
         url('../fonts/sansation/Sansation_Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Couleurs principales */
    --primary-basalt: #3D3832;
    --primary-vanilla: #C9A961;
    --accent-turmeric: #ddab3a;
    --accent-terracotta: #C77856;

    /* Fonds */
    --bg-sand: #FAF5F0;
    --bg-white: #FAF8F6;
    --bg-dark: #1A1816;

    /* Textes */
    --text-black: #1A1816;
    --text-taupe: #5A5550;
    --text-light: #E8DDD0;

    /* Typographie — pile proche d’Inter pour limiter l’écart visuel si optional garde la repli sur un chargement lent */
    --font-heading: 'Sansation', sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    /* Réserve la gouttière scrollbar dès le 1er rendu → moins de variation de largeur utile et des tailles en vw/clamp */
    scrollbar-gutter: stable;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overflow-x: hidden;
    width: 100%;
    /* 100% évite le débordement horizontal dû à la barre de défilement verticale (100vw inclut souvent sa largeur). */
    max-width: 100%;
}

/* !important : les gabarits PHP peuvent redéfinir body { font-family: … } après cette feuille — sans ça, var(--font-body) (pile system-ui…) ne s’applique pas au corps. */
body {
    font-family: var(--font-body) !important;
    color: var(--text-black);
    background-color: var(--bg-white);
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
}

html,
body {
    font-size: 16px !important;
}

h2 {
    font-size: clamp(1.4rem, 2.2vw, 2rem) !important;
}

/* === RÈGLE DE COHÉRENCE TYPO HÔREST === */
/* Sansation pour signer, Inter pour lire */

/* Boutons CTA en Sansation (correction incohérence) */
.btn,
button.btn,
a.btn,
.button,
.wp-block-button__link,
[class*="btn-"],
input[type="submit"],
input[type="button"] {
    font-family: 'Sansation', sans-serif !important;
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* Tags et eyebrows en Sansation */
.tag,
.eyebrow,
.label,
.badge,
[class*="-tag"],
[class*="-eyebrow"],
[class*="-label"],
[class*="-badge"] {
    font-family: 'Sansation', sans-serif !important;
}

/* Confirmation que titres restent en Sansation */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Sansation', sans-serif;
}

/* Confirmation que corps de texte reste en Inter */
body,
p,
li,
.content,
.entry-content {
    font-family: var(--font-body);
}

/* === FIN RÈGLE COHÉRENCE TYPO === */

/* Aucun wrapper racine ne dépasse le viewport (scroll horizontal au zoom / petites largeurs) */
body > * {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* overflow-x : laisser visible pour ne pas couper les .submenu (position:absolute) sous le header ; containment horizontal sur html/body */
.page-shell {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: visible;
    box-sizing: border-box;
}

.site-footer-horest {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-x: hidden;
}

/* !important : surcharge des largeurs fixes dans footer.php (bloc inline après cette feuille) */
.site-footer-horest .footer-informative-inner {
    width: 100% !important;
    max-width: min(1200px, 100%) !important;
    box-sizing: border-box;
}

.site-footer-horest .footer-editorial-inner {
    width: 100% !important;
    max-width: min(720px, 100%) !important;
    box-sizing: border-box;
}

.site-footer-horest .footer-copy {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6,
.site-title,
.site-header .main-navigation a {
    font-family: var(--font-heading);
    color: var(--primary-basalt);
}

h1 { font-size: 64px; font-weight: 700; line-height: 1.1; }
h2 { font-size: 48px; font-weight: 700; line-height: 1.2; }
h3 { font-size: clamp(1.25rem, 2vw, 1.8rem) !important; font-weight: 700; line-height: 1.3; }

/* Titres : même disposition partout — une seule ligne (pas de retour à la ligne) */
h1,
h2,
h3,
h4,
h5,
h6 {
    white-space: nowrap;
}

/* Textes longs (contenu WP, FAQ, accordéons) : retours autorisés */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.intro-section h1,
.intro-section h2,
.intro-section h3,
.faq-question h3,
.faq-item h3,
.accordion-header h2 {
    white-space: normal;
}

/* Missions / showcases : grille 2 cols — min-width:0 pour que le texte puisse passer à la ligne */
.services-section .service-showcase > *,
.service-showcase > * {
    min-width: 0;
}

.services-section .service-showcase .service-showcase__content h3,
.service-showcase__content h3 {
    white-space: normal !important;
    overflow-wrap: break-word;
    word-wrap: break-word;
    max-width: 100%;
}

/* Navigation desktop uniquement : barre horizontale (évite conflit avec menu plein écran mobile) */
@media (min-width: 769px) {
    .site-header .main-nav {
        display: flex !important;
        flex: 1 1 auto;
        align-items: center;
        justify-content: space-evenly;
        flex-wrap: nowrap;
        min-width: 0;
        white-space: nowrap;
        gap: clamp(1rem, 2.5vw, 2.75rem);
    }
}

.site-header .main-nav > a,
.site-header .main-nav .nav-item > a {
    white-space: nowrap;
    font-size: 18px !important;
}

/* Menu barre : aucun soulignement (toutes les pages qui chargent ce fichier) */
.site-header .main-nav a,
.site-header .nav-item > a,
.site-header .submenu li a {
    text-decoration: none !important;
}

.site-header .main-nav a:hover,
.site-header .main-nav a:focus,
.site-header .main-nav a:active,
.site-header .main-nav a:visited,
.site-header .nav-item > a:hover,
.site-header .nav-item > a:focus,
.site-header .nav-item > a:active,
.site-header .nav-item > a:visited,
.site-header .submenu li a:hover,
.site-header .submenu li a:focus {
    text-decoration: none !important;
}

/* Header : départ transparent — opacité basalte pilotée par JS (scroll) */
/* Layout : une ligne — logo à gauche, nav à droite (surcharge Astra / display:block) */
.site-header.site-header--horest,
.site-header {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 82px !important;
    z-index: 1000;
    background-color: transparent;
    transition: none;
    padding: 0 !important;
    box-sizing: border-box;
}

.site-header .main-nav > a,
.site-header .main-nav .nav-item > a,
.site-header .main-navigation .menu-link {
    color: #C9A961;
}

.main-nav a,
.main-nav .nav-item > a {
    font-family: 'Sansation', sans-serif;
}

.site-header .main-nav > a:hover,
.site-header .main-nav .nav-item > a:hover,
.site-header .main-navigation .menu-link:hover {
    color: #ddab3a;
}

/* Barre intérieure : pleine largeur — pas de margin:auto (sinon logo décalé au centre du viewport) */
.site-header .header-container,
.site-header .header-container--horest {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0;
    min-width: 0;
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 30px;
    padding-right: 30px;
    box-sizing: border-box;
}

.site-header a.logo {
    flex-shrink: 0;
    margin-left: 0 !important;
    margin-right: clamp(40px, 5vw, 60px);
    align-self: center;
}

/* Accueil : logo masqué au premier paint ; horest-header-scroll.js révèle au scroll */
body.horest-front .site-header .logo {
    opacity: 0;
    transition: opacity 0.4s ease;
}

.site-header a.logo img,
.site-header a.logo .logo-header-img {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    display: block !important;
    visibility: visible !important;
    width: auto !important;
    max-width: 180px !important;
    height: auto !important;
    max-height: 56px !important;
    min-width: 0 !important;
    object-fit: contain !important;
}

.ast-button,
.button,
.wp-block-button__link {
    font-family: var(--font-heading);
    font-weight: 400;
    padding: 16px 32px;
    border-radius: 4px;
    transition: all 0.3s ease;
}

/* Bouton primaire */
.btn-primary {
    background-color: var(--primary-vanilla);
    color: var(--primary-basalt);
    border: none;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:visited {
    color: var(--primary-basalt);
}

.btn-primary:hover {
    background-color: var(--accent-turmeric);
    transform: translateY(-2px);
}

/* Bouton secondaire */
.btn-secondary {
    background-color: transparent;
    color: var(--bg-white);
    border: 2px solid var(--bg-white);
}

.btn-secondary:hover {
    background-color: var(--bg-white);
    color: var(--primary-basalt);
}

.section-hero {
    background-color: var(--primary-basalt);
    color: var(--bg-white);
    min-height: 100vh;
}

.section-sand {
    background-color: var(--bg-sand);
}

.section-white {
    background-color: var(--bg-white);
}

/* =============================================================================
   HÔREST — Responsive global (breakpoints + utilitaires)
   ============================================================================= */

img,
video,
iframe {
    max-width: 100%;
    height: auto;
}

/* Conteneurs centrés — ne pas forcer les sections pleine largeur (hero, bandeaux, footer) */
.container,
.wrapper {
    width: 100%;
    max-width: min(1200px, 100%);
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}

section:not(.hero-section) {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}

.ast-container,
#primary {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

#page {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: visible;
    box-sizing: border-box;
}

/* ---------------------------------------------------------------------------
   Breakpoints (hooks pour surcharge / maintenance)
--------------------------------------------------------------------------- */
@media (max-width: 480px) {
    /* Mobile portrait */
}

@media (max-width: 768px) {
    /* Mobile landscape / petite tablette — règles détaillées ci-dessous */
}

@media (max-width: 1024px) {
    /* Tablette */
}

@media (max-width: 1280px) {
    /* Desktop standard */
}

/* ---------------------------------------------------------------------------
   Navigation mobile — hamburger (max-width: 768px)
--------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Logo à gauche, hamburger à droite, nav masquée jusqu’à ouverture */
    .site-header.site-header--horest .header-container--horest,
    .site-header .header-container {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
    }

    .site-header .header-container > a.logo {
        margin-right: 0;
    }

    .horest-nav-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        margin-left: auto;
        width: 48px;
        height: 48px;
        padding: 0;
        border: none;
        background: transparent;
        color: var(--primary-vanilla);
        font-size: 1.75rem;
        line-height: 1;
        cursor: pointer;
        z-index: 3001;
        position: relative;
        flex-shrink: 0;
    }

    .horest-nav-close {
        display: none;
        position: fixed;
        top: 16px;
        right: 20px;
        z-index: 4002;
        width: 48px;
        height: 48px;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: none;
        background: transparent;
        color: #ffffff;
        font-size: 1.5rem;
        line-height: 1;
        cursor: pointer;
    }

    .site-header.is-menu-open .horest-nav-close {
        display: flex;
    }

    .site-header:not(.is-menu-open) .main-nav {
        display: none !important;
    }

    .site-header.is-menu-open .main-nav {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        white-space: normal !important;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 4.5rem 0 2rem;
        background: var(--primary-basalt);
        z-index: 4000;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        gap: 0 !important;
        align-items: stretch !important;
        align-content: flex-start !important;
        justify-content: flex-start !important;
        flex: none !important;
        animation: horest-mnav-slide 0.35s ease forwards;
    }

    .site-header.is-menu-open .main-nav > a,
    .site-header.is-menu-open .main-nav > .nav-item {
        flex: none !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .site-header.is-menu-open .nav-item {
        align-items: stretch !important;
    }

    @keyframes horest-mnav-slide {
        from {
            opacity: 0;
            transform: translateY(-12px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .site-header.is-menu-open .main-nav > a,
    .site-header.is-menu-open .main-nav .nav-item > a {
        color: #C9A961 !important;
        font-size: 1.1rem;
        padding: 15px 20px;
        white-space: normal;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .site-header.is-menu-open .main-nav > a {
        display: block;
    }

    .site-header.is-menu-open .nav-item {
        width: 100%;
        position: static;
        display: grid !important;
        grid-template-columns: 1fr minmax(44px, 52px);
        grid-template-areas:
            'pillar toggle'
            'submenu submenu';
        align-items: stretch;
        column-gap: 0;
    }

    .site-header.is-menu-open .nav-item > a {
        grid-area: pillar;
    }

    .site-header.is-menu-open .nav-item > .horest-submenu-toggle {
        grid-area: toggle;
        display: flex !important;
        align-items: center;
        justify-content: center;
        margin: 0;
        padding: 0;
        width: 100%;
        min-height: 100%;
        border: none;
        border-left: 1px solid rgba(255, 255, 255, 0.12);
        background: transparent;
        color: #C9A961;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .site-header.is-menu-open .nav-item > .horest-submenu-toggle:focus-visible {
        outline: 2px solid #ddab3a;
        outline-offset: -2px;
    }

    .site-header.is-menu-open .horest-submenu-toggle__icon {
        display: block;
        width: 0.45em;
        height: 0.45em;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg) translateY(-0.1em);
        transition: transform 0.25s ease;
    }

    .site-header.is-menu-open .nav-item.is-open .horest-submenu-toggle__icon {
        transform: rotate(-135deg) translateY(0.15em);
    }

    .site-header.is-menu-open .nav-item > .submenu {
        grid-area: submenu;
    }

    .site-header.is-menu-open .nav-item .submenu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        margin: 0;
        padding: 0;
        border-radius: 0;
        min-width: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.35s ease;
        background: rgba(0, 0, 0, 0.2);
        display: block !important;
    }

    .site-header.is-menu-open .nav-item.is-open .submenu {
        max-height: 800px;
    }

    .site-header.is-menu-open .submenu li a {
        padding: 12px 20px 12px 28px !important;
        font-size: 1rem !important;
        color: rgba(255, 255, 255, 0.95) !important;
        border-left: none !important;
    }

    body.horest-mnav-open .site-header {
        z-index: 3999;
    }
}

@media (min-width: 769px) {
    .horest-nav-toggle,
    .horest-nav-close {
        display: none !important;
    }

    .horest-submenu-toggle {
        display: none !important;
    }
}

/* ---------------------------------------------------------------------------
   Hero accueil + heros toutes pages (mobile) — pas de dépendance body.horest-front pour la typo
--------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Hero « classique » sous le stack #accueil : réservé à l’accueil (layout uniquement) */
    body.horest-front .hero-section:not(#accueil) {
        min-height: 60vh;
        padding: 100px 20px 60px;
        background-attachment: scroll !important;
    }

    /* H1 heros : toutes les pages (thème enfant → spécificité > surcharges Astra / Elementor) */
    body.wp-child-theme-horest-child .hero-section h1,
    body.wp-child-theme-horest-child .hero-section .hero-content h1,
    body.wp-child-theme-horest-child .hero h1,
    body.wp-child-theme-horest-child section.horest-service-hero h1,
    body.wp-child-theme-horest-child .horest-service-hero h1 {
        font-size: 28px !important;
        line-height: 1.2 !important;
        hyphens: none;
        overflow-wrap: normal;
    }

    .hero-section .hero-actions.hero-buttons,
    .hero-section .hero-buttons,
    .hero .hero-actions.hero-buttons,
    .hero .hero-buttons {
        flex-direction: column;
        gap: 15px;
        align-items: center;
    }

    .hero-section .hero-buttons a,
    .hero-section .hero-actions a,
    .hero .hero-buttons a,
    .hero .hero-actions a {
        width: 100%;
        max-width: 300px;
        text-align: center;
    }

    .ticker-wrapper {
        height: 38px;
        font-size: 0.75rem;
        letter-spacing: 2px;
    }

    .ticker-wrapper .ticker-wrapper__seg {
        font-size: 0.75rem;
        letter-spacing: 2px;
    }
}

/* Grids & layouts — colonne unique */
@media (max-width: 768px) {
    .services-grid,
    .cards-grid,
    .steps-grid,
    .two-columns,
    .three-columns,
    .service-showcase,
    .methode-steps,
    .why-grid,
    .contact-split-grid {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }

    .contact-columns {
        flex-direction: column;
    }

    .key-numbers {
        grid-template-columns: 1fr !important;
        gap: 30px;
    }

    .footer-columns,
    .footer-informative-inner,
    .site-footer-horest .footer-columns {
        grid-template-columns: 1fr !important;
        gap: 30px;
        text-align: center;
    }

    .contact-form input,
    .contact-form select,
    .contact-form textarea,
    .wpcf7 input,
    .wpcf7 select,
    .wpcf7 textarea {
        width: 100%;
        max-width: 100%;
        font-size: 16px;
    }

    .wpcf7-submit,
    .wpcf7 input[type='submit'] {
        width: 100%;
        padding: 15px;
    }

    .calendly-inline-widget {
        min-width: 100% !important;
        height: 550px !important;
    }

    body.wp-child-theme-horest-child h1,
    h1 {
        font-size: 28px !important;
        line-height: 1.2 !important;
        font-weight: 700;
        white-space: normal !important;
    }

    body.wp-child-theme-horest-child h2,
    h2 {
        font-size: 22px !important;
        line-height: 1.3 !important;
        font-weight: 700;
        white-space: normal !important;
    }

    body.wp-child-theme-horest-child h3,
    h3 {
        font-size: 18px !important;
        line-height: 1.4 !important;
        white-space: normal !important;
    }

    /*
     * Padding horizontal : sections / blocs avec padding inline type 40px (pages PHP autonomes).
     * Ne modifie que left/right ; top/bottom restent ceux du style inline.
     */
    body.wp-child-theme-horest-child section[style*='padding'] {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    body.wp-child-theme-horest-child div[style*='padding'][style*='40px'] {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

/* ========== HÔREST — harmonisation pages service (logo PNG, overflow, hero, grilles) ========== */
/* html / body / .page-shell : largeurs — règles globales en tête de fichier */

/* Logo header PNG — sans fond ni cadre (marge logo ↔ menu : .site-header a.logo) */
a.logo.logo--horest-png {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    display: block;
    line-height: 0;
    width: auto !important;
    height: auto !important;
}

a.logo.logo--horest-png .logo-header-img {
    display: block !important;
    visibility: visible !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    max-width: 180px !important;
    height: auto !important;
    max-height: 56px !important;
    min-width: 0 !important;
    object-fit: contain;
    background: transparent !important;
    box-shadow: none !important;
}

/* Grilles cards — min colonne borné au viewport (évite dépassement au dézoom / très étroit) */
.grid-3 {
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)) !important;
}

/* ---------------------------------------------------------------------------
   Hero service — 2 niveaux (+ accueil 85vh dans body.horest-front)
   Pages mères : .horest-hero--pillar  |  Pages filles : .horest-hero--child
--------------------------------------------------------------------------- */
.hero-section.horest-service-hero,
section.horest-service-hero {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative;
    box-sizing: border-box;
}

.hero-section.horest-service-hero > .container,
.hero-section.horest-service-hero > .section-inner,
section.horest-service-hero > .container,
section.horest-service-hero > .section-inner {
    flex: 1;
    width: 100%;
    max-width: min(1200px, 100%);
    margin-left: auto;
    margin-right: auto;
    padding-top: clamp(5rem, 12vh, 7rem);
    padding-bottom: 5rem; /* 80px — réf. audit-performance-chr : hero → section suivante */
    text-align: center;
}

/* ---------------------------------------------------------------------------
   Espacement sections adjacentes — référence audit-performance-chr
   Intro (avant-bloc) : 56px 40px  |  Section standard : 52px 40px
   Mobile : 40px vertical, max(16px, safe-area) horizontal
   Pas de séparateur doré entre hero ↔ avant-bloc ni avant-bloc ↔ section suivante
--------------------------------------------------------------------------- */
.horest-sep-gold {
    display: block;
    height: 1px;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: linear-gradient(90deg, transparent, #C9A961, transparent);
    flex-shrink: 0;
}

.horest-section-pad--intro,
section.horest-avant-bloc {
    padding: 56px 40px;
    box-sizing: border-box;
}

.horest-section-pad--std {
    padding: 52px 40px;
    box-sizing: border-box;
}

section.horest-avant-bloc {
    background: #FFFFFF;
}

@media (max-width: 767px) {
    .horest-section-pad--intro,
    .horest-section-pad--std,
    section.horest-avant-bloc {
        padding-top: 40px;
        padding-bottom: 40px;
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
    }
}

/* Avant-bloc Titre + lead — état initial slide scale (réf. accompagnement-performance-chr) */
[data-horest-avantbloc] .horest-avantbloc__title-part {
    display: inline-block;
    opacity: 0;
    transform: translateX(-120px) scale(0.82);
}

[data-horest-avantbloc] .horest-avantbloc__lead,
[data-horest-avantbloc] .horest-avantbloc__quote {
    opacity: 0;
    transform: translateX(-48px) scale(0.97);
}

[data-horest-avantbloc] .horest-avantbloc__stagger {
    opacity: 0;
    transform: translateY(20px);
}

@media (prefers-reduced-motion: reduce) {
    [data-horest-avantbloc] .horest-avantbloc__title-part,
    [data-horest-avantbloc] .horest-avantbloc__lead,
    [data-horest-avantbloc] .horest-avantbloc__quote,
    [data-horest-avantbloc] .horest-avantbloc__stagger {
        opacity: 1;
        transform: none;
    }
}

/* =============================================================
   HOREST CARD CASCADE — [data-horest-card-cascade]
   Timeline slide + scale + cascade cards (réf. ouverture op.)
   ============================================================= */

[data-horest-card-cascade] .horest-cascade__title-part,
[data-horest-card-cascade] .horest-cascade__title {
    opacity: 0;
    transform: translateX(-120px) scale(0.82);
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Fractions de titre dans un H2 (ex. « 4 points » + tiret cadratin) */
[data-horest-card-cascade] span.horest-cascade__title-part {
    display: inline-block;
}

/* Eyebrows et H2 empilés — bloc natif, pas côte à côte */
[data-horest-card-cascade] p.horest-cascade__title-part,
[data-horest-card-cascade] h1.horest-cascade__title-part,
[data-horest-card-cascade] h2.horest-cascade__title-part,
[data-horest-card-cascade] h3.horest-cascade__title-part,
[data-horest-card-cascade] .horest-cascade__title {
    display: block;
    width: 100%;
}

[data-horest-card-cascade] .horest-cascade__title-lead {
    display: inline-block;
    opacity: 0;
    transform: translateX(-120px) scale(0.82);
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-horest-card-cascade] .horest-cascade__intro,
[data-horest-card-cascade] .horest-cascade__lead {
    opacity: 0;
    transform: translateX(-48px) scale(0.97);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-horest-card-cascade] .horest-cascade__media {
    opacity: 0;
    transform: translateX(-120px) scale(0.92);
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Colonne contenu split droite (carte hôtellerie C5, etc.) */
[data-horest-card-cascade] .horest-cascade__panel {
    opacity: 0;
    transform: translateX(clamp(2rem, 8vw, 4.5rem)) scale(0.97);
    transition: opacity 0.95s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1.05s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-horest-card-cascade] .horest-cascade__panel.is-revealed {
    opacity: 1;
    transform: translateX(0) scale(1);
}

[data-horest-card-cascade] .horest-cascade__item {
    opacity: 0;
    transform: translateY(20px);
}

[data-horest-card-cascade] .horest-cascade__title-part.is-revealed,
[data-horest-card-cascade] .horest-cascade__title.is-revealed,
[data-horest-card-cascade] .horest-cascade__title-lead.is-revealed {
    opacity: 1;
    transform: translateX(0) scale(1);
}

[data-horest-card-cascade] .horest-cascade__intro.is-revealed,
[data-horest-card-cascade] .horest-cascade__lead.is-revealed {
    opacity: 1;
    transform: translateX(0) scale(1);
}

[data-horest-card-cascade] .horest-cascade__media.is-revealed {
    opacity: 1;
    transform: translateX(0) scale(1);
}

[data-horest-card-cascade] .horest-cascade__item.is-revealed {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

@media (prefers-reduced-motion: reduce) {
    [data-horest-card-cascade] .horest-cascade__title-part,
    [data-horest-card-cascade] .horest-cascade__title,
    [data-horest-card-cascade] .horest-cascade__title-lead,
    [data-horest-card-cascade] .horest-cascade__intro,
    [data-horest-card-cascade] .horest-cascade__lead,
    [data-horest-card-cascade] .horest-cascade__media,
    [data-horest-card-cascade] .horest-cascade__panel,
    [data-horest-card-cascade] .horest-cascade__item {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* Scroll reveal — défaut fade-up si pas de data-anim-direction */
[data-scroll-reveal-item]:not([data-anim-direction]) {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-scroll-reveal-item]:not([data-anim-direction]).is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger FAQ au scroll */
.faq-accordion [data-scroll-reveal-item]:nth-child(1) { transition-delay: 0ms; }
.faq-accordion [data-scroll-reveal-item]:nth-child(2) { transition-delay: 80ms; }
.faq-accordion [data-scroll-reveal-item]:nth-child(3) { transition-delay: 160ms; }
.faq-accordion [data-scroll-reveal-item]:nth-child(4) { transition-delay: 240ms; }
.faq-accordion [data-scroll-reveal-item]:nth-child(5) { transition-delay: 320ms; }
.faq-accordion [data-scroll-reveal-item]:nth-child(6) { transition-delay: 400ms; }
.faq-accordion [data-scroll-reveal-item]:nth-child(7) { transition-delay: 480ms; }
.faq-accordion [data-scroll-reveal-item]:nth-child(8) { transition-delay: 560ms; }

@media (prefers-reduced-motion: reduce) {
    [data-scroll-reveal-item]:not([data-anim-direction]) {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .faq-accordion [data-scroll-reveal-item] {
        transition-delay: 0ms !important;
    }
}

/* Contact — hero + split */
.contact-hero-cascade .horest-cascade__title,
.contact-hero-cascade .horest-cascade__lead {
    display: block;
    text-align: center;
}

.contact-split-section [data-scroll-reveal-item]:nth-child(1) { transition-delay: 0ms; }
.contact-split-section [data-scroll-reveal-item]:nth-child(2) { transition-delay: 120ms; }
.contact-split-section [data-scroll-reveal-item]:nth-child(3) { transition-delay: 240ms; }

.basalt-section [data-horest-card-cascade] .horest-cascade__title {
    color: #FFFFFF;
}

.basalt-section [data-horest-card-cascade] .horest-cascade__intro,
.basalt-section [data-horest-card-cascade] .horest-cascade__lead {
    color: rgba(255, 255, 255, 0.85);
}

.concept-chr-methode-5etapes [data-horest-card-cascade] .horest-cascade__title {
    color: #FFFFFF;
}

/* Pages mères (Créer, Optimiser, Former, À propos, Contact) */
.hero-section.horest-service-hero.horest-hero--pillar,
section.horest-service-hero.horest-hero--pillar {
    height: 65vh !important;
    display: flex;
    align-items: center;
}

.hero-section.horest-service-hero.horest-hero--pillar h1,
section.horest-service-hero.horest-hero--pillar h1,
.hero-section.horest-service-hero.horest-hero--pillar .hero-content h1 {
    font-size: clamp(1.8rem, 2.94vw, 2.8rem) !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    hyphens: none !important;
    -webkit-hyphens: none !important;
    overflow-wrap: normal !important;
    white-space: normal !important;
    text-align: center !important;
    max-width: 52rem;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Pages filles (sous-pages) */
.hero-section.horest-service-hero.horest-hero--child,
section.horest-service-hero.horest-hero--child {
    height: 65vh;
}

.hero-section.horest-service-hero.horest-hero--child h1,
section.horest-service-hero.horest-hero--child h1,
.hero-section.horest-service-hero.horest-hero--child .hero-content h1 {
    font-size: clamp(1.4rem, 2.31vw, 2.2rem) !important;
    line-height: 1.28 !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    hyphens: none !important;
    -webkit-hyphens: none !important;
    overflow-wrap: normal !important;
    white-space: normal !important;
    text-align: center !important;
    max-width: 52rem;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Surtitre vanille — toutes les pages service */
.hero-section.horest-service-hero .hero-label,
section.horest-service-hero .hero-label {
    color: var(--primary-vanilla) !important;
    font-family: var(--font-heading), 'Sansation', sans-serif;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.16em !important;
    margin-bottom: 1rem !important;
}

.hero-section.horest-service-hero .hero-lead,
.hero-section.horest-service-hero > .container > p:not(.hero-label),
.hero-section.horest-service-hero > .section-inner > p:not(.hero-label),
section.horest-service-hero .hero-lead,
section.horest-service-hero > .container > p:not(.hero-label),
section.horest-service-hero > .section-inner > p:not(.hero-label) {
    color: rgba(255, 254, 249, 0.92) !important;
    text-align: center !important;
    max-width: 46rem;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 1.5rem !important;
    font-size: clamp(1rem, 1.85vw, 1.15rem);
}

@media (max-width: 768px) {
    /*
     * Hero mobile : dégagement sous le header fixe (~82px) + marge lisible (évite H1 « collé » au logo).
     * Thème enfant : même logique sur toutes les pages (pas seulement l’accueil).
     */
    body.wp-child-theme-horest-child .hero-section:not(#accueil) > .container,
    body.wp-child-theme-horest-child .hero-section:not(#accueil) > .section-inner,
    body.wp-child-theme-horest-child .hero-section.horest-service-hero > .container,
    body.wp-child-theme-horest-child .hero-section.horest-service-hero > .section-inner,
    body.wp-child-theme-horest-child section.horest-service-hero > .container,
    body.wp-child-theme-horest-child section.horest-service-hero > .section-inner {
        padding-top: calc(82px + 1.75rem) !important;
    }

    /* Qui sommes-nous : la page réduisait .qsn-hero à 8px — on s’appuie sur le padding du conteneur */
    .hero-section .qsn-hero {
        padding-top: 0 !important;
        min-height: 0;
    }

    /* H1 heros (pillar / child / conteneur) — renfort vs Elementor */
    body.wp-child-theme-horest-child .hero-section.horest-service-hero.horest-hero--pillar h1,
    body.wp-child-theme-horest-child section.horest-service-hero.horest-hero--pillar h1,
    body.wp-child-theme-horest-child .hero-section.horest-service-hero.horest-hero--pillar .hero-content h1,
    body.wp-child-theme-horest-child .hero-section.horest-service-hero.horest-hero--child h1,
    body.wp-child-theme-horest-child section.horest-service-hero.horest-hero--child h1,
    body.wp-child-theme-horest-child .hero-section.horest-service-hero.horest-hero--child .hero-content h1 {
        font-size: 28px !important;
        line-height: 1.2 !important;
    }

    body.wp-child-theme-horest-child .hero-section.horest-service-hero .hero-lead,
    body.wp-child-theme-horest-child .hero-section.horest-service-hero > .container > p:not(.hero-label),
    body.wp-child-theme-horest-child .hero-section.horest-service-hero > .section-inner > p:not(.hero-label),
    body.wp-child-theme-horest-child section.horest-service-hero .hero-lead,
    body.wp-child-theme-horest-child section.horest-service-hero > .container > p:not(.hero-label),
    body.wp-child-theme-horest-child section.horest-service-hero > .section-inner > p:not(.hero-label),
    body.wp-child-theme-horest-child .hero-section .hero-lead {
        font-size: 17px !important;
        line-height: 1.5 !important;
    }

    body.wp-child-theme-horest-child .services-section > .concept-chr-interventions-wide.service-showcase.service-showcase--interventions .service-showcase__content > h2 {
        font-size: 22px !important;
        line-height: 1.3 !important;
    }

    body.wp-child-theme-horest-child .service-showcase:not(.service-showcase--interventions) .service-showcase__content h3 {
        font-size: 18px !important;
        line-height: 1.4 !important;
    }

    body.wp-child-theme-horest-child .qsn-hero h1 {
        font-size: 28px !important;
        line-height: 1.2 !important;
    }

    body.wp-child-theme-horest-child .qsn-hero__lead {
        font-size: 17px !important;
        line-height: 1.5 !important;
    }

    body.wp-child-theme-horest-child .opt-avantbloc-inner h2,
    body.wp-child-theme-horest-child .opt-edito-inner h2 {
        font-size: 22px !important;
        line-height: 1.3 !important;
    }

    body.wp-child-theme-horest-child .fb-direction-dual__head h3 {
        font-size: 18px !important;
        line-height: 1.4 !important;
    }
}

.hero-section.horest-service-hero .btn-primary,
section.horest-service-hero .btn-primary {
    display: inline-flex !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Accueil : hauteur pilotée par .horest-hero-stack (flex) dans front-page.php — pas de height fixe ici */
body.horest-front .hero-section#accueil {
    height: auto;
    min-height: 0;
}

body:not(.horest-front) .site-header {
    background-color: transparent;
}

/* =============================================================================
   HEADER HÔREST — layout définitif (toutes les pages, surcharge Astra / parent)
   Desktop : overflow visible pour ne pas clipper les .submenu (sous-menus absolus).
   ============================================================================= */
.site-header,
.site-header.site-header--horest {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 82px !important;
    min-width: 0 !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    left: 0 !important;
    right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
}

.site-header .header-container,
.site-header .header-container--horest {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 30px !important;
    padding-right: 30px !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
}

.site-header .header-container > a.logo,
.site-header a.logo.logo--horest-png {
    flex-shrink: 0 !important;
    margin-left: 0 !important;
    margin-right: clamp(40px, 5vw, 60px) !important;
    align-self: center !important;
}

@media (min-width: 769px) {
    .site-header .main-nav {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-evenly !important;
        align-content: center !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        gap: clamp(1rem, 2.5vw, 2.75rem) !important;
    }

    .site-header .main-nav > a,
    .site-header .main-nav > .nav-item {
        flex: 0 0 auto !important;
    }
}

/* Évite que la nav (libellés longs + space-evenly) dépasse la largeur et fasse apparaître un scroll horizontal */
@media (min-width: 769px) and (max-width: 1280px) {
    .site-header .main-nav {
        gap: clamp(0.5rem, 1.2vw, 1.25rem) !important;
    }

    .site-header .main-nav > a,
    .site-header .main-nav .nav-item > a {
        font-size: 15px !important;
    }
}

@media (min-width: 769px) and (max-width: 1040px) {
    .site-header .main-nav {
        gap: 0.4rem !important;
    }

    .site-header .main-nav > a,
    .site-header .main-nav .nav-item > a {
        font-size: 14px !important;
    }
}

.site-header .nav-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
}

.site-header .nav-item > a {
    white-space: nowrap !important;
}

/* Sous-menus desktop (toutes les pages avec horest-header-service) : masqués par défaut, visibles au survol / focus clavier — aligné sur front-page.php */
@media (min-width: 769px) {
    .site-header .nav-item {
        position: relative;
    }

    .site-header .nav-item .submenu,
    .site-header .nav-item .sub-menu,
    .site-header .nav-item ul.dropdown-menu {
        display: none !important;
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 260px;
        margin: 0;
        padding: 15px 0;
        list-style: none;
        background: #1A1816;
        border-radius: 0 0 8px 8px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
        z-index: 10050;
    }

    /* Pont invisible sous le lien : évite la zone morte entre lien et liste (hover perdu) */
    .site-header .nav-item .submenu::before,
    .site-header .nav-item .sub-menu::before,
    .site-header .nav-item ul.dropdown-menu::before {
        content: '';
        position: absolute;
        bottom: 100%;
        left: 0;
        right: 0;
        height: 14px;
    }

    .site-header .nav-item:hover .submenu,
    .site-header .nav-item:focus-within .submenu,
    .site-header .nav-item:hover .sub-menu,
    .site-header .nav-item:focus-within .sub-menu,
    .site-header .nav-item:hover ul.dropdown-menu,
    .site-header .nav-item:focus-within ul.dropdown-menu {
        display: block !important;
    }

    .site-header .submenu li a,
    .site-header .sub-menu li a,
    .site-header ul.dropdown-menu li a {
        display: block;
        padding: 12px 25px;
        color: #f5f5f5;
        text-decoration: none;
        font-size: 0.9rem;
        white-space: normal;
    }

    .site-header .submenu li a:hover,
    .site-header .sub-menu li a:hover,
    .site-header ul.dropdown-menu li a:hover {
        background: rgba(201, 169, 97, 0.1);
        color: var(--primary-vanilla);
    }

    .site-header:not(.is-menu-open) .main-nav {
        display: flex !important;
    }
}

@media (max-width: 768px) {
    .site-header,
    .site-header.site-header--horest {
        max-width: 100% !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
    }

    .site-header .header-container,
    .site-header .header-container--horest {
        justify-content: space-between !important;
        max-width: 100% !important;
    }

    /* Logo à gauche, marge annulée (le bouton hamburger est à droite) */
    .site-header .header-container > a.logo,
    .site-header a.logo.logo--horest-png {
        margin-right: 0 !important;
    }

    /* Nav masquée tant que le menu n’est pas ouvert (hamburger injecté par JS) */
    .site-header:not(.is-menu-open) .main-nav {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        pointer-events: none !important;
    }

    .horest-nav-toggle {
        margin-left: auto !important;
        flex-shrink: 0 !important;
    }

    /* Menu plein écran ouvert : règles existantes du fichier conservées */
    .site-header.is-menu-open .main-nav {
        visibility: visible !important;
        width: 100% !important;
        height: auto !important;
        pointer-events: auto !important;
    }
}

/* -----------------------------------------------------------------------------
   Page d'accueil : masquer la barre verticale (classe horest-front-root sur <html>
   ajoutée par front-page.php). Fallback :has() si la classe manque.
   ----------------------------------------------------------------------------- */
html.horest-front-root {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

html.horest-front-root::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

body.horest-front {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

body.horest-front::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.faq-cta-split__col p {
    font-size: 16px;
}

/* -----------------------------------------------------------------------------
   Cartes compactes redirection (concept-chr) — image + texte, toutes les pages
   ----------------------------------------------------------------------------- */
.concept-chr-compact-cards {
    display: grid;
    width: 100%;
    max-width: none;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 0;
    align-items: stretch;
}

@media (min-width: 640px) {
    .concept-chr-compact-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 900px) {
    .concept-chr-compact-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.service-showcase--interventions .concept-chr-compact-cards {
    gap: 12px;
}

.concept-chr-compact-card {
    display: grid;
    grid-template-columns: 8.5rem minmax(0, 1fr);
    align-items: stretch;
    height: 100%;
    min-height: 7.5rem;
    min-width: 0;
    width: 100%;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 4px 14px rgba(26, 24, 22, 0.08);
    border: 1px solid rgba(61, 56, 50, 0.08);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.service-showcase--interventions .concept-chr-compact-card:hover,
.concept-chr-compact-card:hover {
    border-color: var(--primary-vanilla);
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(26, 24, 22, 0.12);
}

.concept-chr-compact-card__media {
    background: var(--primary-basalt);
    min-height: 100%;
    min-width: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.concept-chr-compact-card__media--photo {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.concept-chr-compact-card__content {
    background: var(--bg-white);
    padding: 1rem 1.15rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-width: 0;
    min-height: 7.5rem;
    height: 100%;
    overflow-wrap: break-word;
}

.concept-chr-compact-card__tag {
    font-family: var(--font-heading, 'Sansation', sans-serif);
    font-size: 0.72rem;
    letter-spacing: 1.5px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--primary-vanilla);
    margin: 0 0 0.35rem;
    line-height: 1.2;
}

.concept-chr-compact-card__content h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary-basalt);
    margin: 0 0 0.4rem;
    line-height: 1.3;
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    min-height: calc(1rem * 1.3 * 2);
}

.concept-chr-compact-card__body p,
.concept-chr-compact-card__content > p:not(.concept-chr-compact-card__tag) {
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0 0 0.5rem;
    text-align: justify;
    max-width: none;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    min-height: calc(0.9rem * 1.5 * 3);
    flex: 1 1 auto;
}

/*
 * Renfort typo cartes redirection — bat les h2/h3/p globaux des templates standalone
 * (.service-showcase__content h3, section h3 !important, etc.)
 */
body.wp-child-theme-horest-child .concept-chr-compact-card__content h3 {
    font-size: 1rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: var(--primary-basalt) !important;
    margin: 0 0 0.4rem !important;
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
    min-height: calc(1rem * 1.3 * 2) !important;
}

body.wp-child-theme-horest-child .concept-chr-compact-card__body p,
body.wp-child-theme-horest-child .concept-chr-compact-card__content > p:not(.concept-chr-compact-card__tag) {
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
    margin: 0 0 0.5rem !important;
    text-align: justify !important;
    max-width: none !important;
    color: var(--text-taupe) !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    overflow: hidden !important;
    min-height: calc(0.9rem * 1.5 * 3) !important;
    flex: 1 1 auto !important;
}

body.wp-child-theme-horest-child .concept-chr-compact-card__tag {
    font-size: 0.72rem !important;
    margin: 0 0 0.35rem !important;
}

body.wp-child-theme-horest-child .concept-chr-compact-cards,
body.wp-child-theme-horest-child .service-showcase--interventions .concept-chr-compact-cards {
    align-items: stretch !important;
}

body.wp-child-theme-horest-child .concept-chr-compact-card {
    grid-template-columns: 8.5rem minmax(0, 1fr) !important;
    height: 100% !important;
    align-items: stretch !important;
}

body.wp-child-theme-horest-child .concept-chr-compact-card__content {
    justify-content: flex-start !important;
    min-height: 7.5rem !important;
    height: 100% !important;
}

body.wp-child-theme-horest-child .concept-chr-compact-card .btn-text-link {
    margin-top: auto !important;
    flex-shrink: 0 !important;
}

.concept-chr-compact-card .btn-text-link {
    display: inline-flex;
    align-items: center;
    color: var(--primary-vanilla);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.72rem;
    border-bottom: none;
    padding-bottom: 0;
    font-family: var(--font-heading);
    font-weight: 700;
    text-decoration: none;
}

.concept-chr-compact-card .btn-text-link::after {
    content: '\00a0›';
}

.service-showcase--interventions .concept-chr-compact-card:hover .btn-text-link,
.concept-chr-compact-card:hover .btn-text-link {
    color: var(--primary-vanilla);
}

.concept-chr-compact-card__content .btn-text-link {
    margin-top: auto;
    flex-shrink: 0;
}

/* -----------------------------------------------------------------------------
   Bloc redirection cartes (service-showcase--interventions) — même rendu partout
   ----------------------------------------------------------------------------- */
/* Pas de fond plein largeur : seul .service-showcase__content est blanc (pas de bande crème/blanc) */
.concept-chr-interventions-wide.service-showcase.service-showcase--interventions {
    background-color: transparent !important;
    position: relative;
}

/* Pages optimisation / accompagnement : wrapper minimal, même rendu que concept-chr (fond page) */
.services-section.services-section--redir-only {
    background: #FFFFFF !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box;
}

.services-section.services-section--redir-only::before,
.services-section.services-section--redir-only::after {
    content: none !important;
    display: none !important;
    background: transparent !important;
}

.services-section.services-section--redir-only > .concept-chr-interventions-wide.service-showcase.service-showcase--interventions {
    margin: 0 !important;
}

.services-section > .concept-chr-interventions-wide.service-showcase.service-showcase--interventions {
    padding: 0 !important;
    margin: 0 !important;
    margin-left: -20px !important;
    margin-right: -20px !important;
    width: calc(100% + 40px) !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
    min-width: 0 !important;
    overflow: visible !important;
    max-width: none !important;
}

.services-section > .concept-chr-interventions-wide.service-showcase.service-showcase--interventions .service-showcase__content,
.concept-chr-interventions-wide.service-showcase.service-showcase--interventions .service-showcase__content {
    min-width: 0 !important;
    width: 100% !important;
    max-width: calc(var(--container, 1200px) + 8rem) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 2.5rem 20px 3rem !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
}

body.wp-child-theme-horest-child .concept-chr-interventions-wide.service-showcase--interventions .service-showcase__content {
    padding: 2.5rem 20px 3rem !important;
    max-width: calc(var(--container, 1200px) + 8rem) !important;
    background: #ffffff !important;
}

.services-section > .concept-chr-interventions-wide.service-showcase.service-showcase--interventions .service-showcase__content > h2 {
    margin: 0 0 0.75rem !important;
    white-space: normal !important;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(1.6rem, 3.2vw, 3rem);
    line-height: 1.2;
    color: var(--primary-basalt);
}

.services-section > .concept-chr-interventions-wide.service-showcase.service-showcase--interventions .service-showcase__content > p {
    max-width: none !important;
    margin: 0 0 1.25rem !important;
    text-align: left !important;
    color: var(--text-taupe);
    font-size: 1rem;
    line-height: 1.6;
}

.services-section > .concept-chr-interventions-wide.service-showcase.service-showcase--interventions .concept-chr-compact-cards {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.services-section > .concept-chr-interventions-wide.service-showcase.service-showcase--interventions::before,
.services-section > .concept-chr-interventions-wide.service-showcase.service-showcase--interventions::after {
    content: none !important;
    display: none !important;
    background: transparent !important;
}

/*
 * Bloc redirection « autres missions » (cartes compactes) — mobile :
 * le duo margin négative + calc(100% + 40px) collait titre/lead/cards aux bords.
 * Ne cible pas les .hero-section (pas de .concept-chr-interventions-wide dedans).
 */
@media (max-width: 768px) {
    .services-section.services-section--redir-only {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .services-section > .concept-chr-interventions-wide.service-showcase.service-showcase--interventions {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .services-section > .concept-chr-interventions-wide.service-showcase.service-showcase--interventions .service-showcase__content,
    .concept-chr-interventions-wide.service-showcase.service-showcase--interventions .service-showcase__content {
        padding: 2.5rem 20px 3rem !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

@media (max-width: 479px) {
    .concept-chr-compact-card {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        min-height: 0;
    }

    .concept-chr-compact-card__media {
        min-height: 5.5rem;
    }
}

/*
 * Rentabilité offre restauration : le pied de page recharge custom.css après le
 * <style> des pages standalone — sans ces règles, .btn-primary reprend la main et
 * la grille mobile (.service-showcase { grid-template-columns: 1fr !important })
 * écrase le bloc 2 à deux colonnes.
 */
.btn.btn-primary.btn-intra-program {
    background-color: #faf5f0 !important;
    color: #3d3832 !important;
    border: 1px solid #c9a961 !important;
}

.btn.btn-primary.btn-intra-program:hover,
.btn.btn-primary.btn-intra-program:focus {
    background-color: #ddab3a !important;
    color: #3d3832 !important;
    border-color: #c9a961 !important;
}

/*
 * Blocs fond #3D3832 avec padding 52px (souvent en inline sur les pages filles) :
 * moins d'espace au-dessus du titre, plus d'air entre le H2 et le contenu suivant.
 * padding-bottom inchangé (shorthand inline : seul padding-top est surchargé).
 * Uniquement les H2 dont le style inline fixe margin-bottom à 8px.
 */
div[style*='3D3832'][style*='52px'] {
    padding-top: 32px !important;
}

div[style*='3D3832'][style*='52px'] h2[style*='margin-bottom:8px'],
div[style*='3D3832'][style*='52px'] h2[style*='margin-bottom: 8px'] {
    margin-bottom: 24px !important;
}

/* === MENTIONS LÉGALES — Template page-mentions-legales.php === */
.legal-page-main {
    background: #FFFFFF;
    padding: 80px 0;
}
.legal-page-container {
    max-width: 880px;
    margin: 0 auto;
    padding: 0 60px;
}
.legal-page-h1 {
    font-family: 'Sansation', sans-serif;
    font-size: 44px;
    font-weight: 600;
    line-height: 1.15;
    color: #3D3832;
    margin: 0 0 16px 0;
    letter-spacing: -0.5px;
}
.legal-page-header::after {
    content: '';
    display: block;
    width: 40px;
    height: 2px;
    background: #C9A961;
    margin: 16px 0 48px;
}
.legal-page-content h2 {
    font-family: 'Sansation', sans-serif;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.2;
    color: #3D3832;
    margin: 48px 0 16px;
    padding-bottom: 16px;
    position: relative;
}
.legal-page-content h2::after {
    content: '';
    display: block;
    width: 40px;
    height: 2px;
    background: #C9A961;
    position: absolute;
    bottom: 0;
    left: 0;
}
.legal-page-content p {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.7;
    color: #3D3832;
    margin: 0 0 16px;
}
.legal-page-content strong {
    font-weight: 600;
    color: #3D3832;
}
.legal-page-content a {
    color: #C9A961;
    text-decoration: none;
    transition: color 0.3s;
}
.legal-page-content a:hover {
    color: #ddab3a;
}
@media (max-width: 768px) {
    .legal-page-main { padding: 40px 0; }
    .legal-page-container { padding: 0 24px; }
    .legal-page-h1 { font-size: 28px; line-height: 1.2; }
    .legal-page-content h2 { font-size: 22px; margin-top: 32px; }
}

/* === HERO PAGES LÉGALES === */
.legal-page-hero {
    background: #3D3832;
    padding: 140px 60px 60px;
    text-align: center;
    color: #FAF5F0;
}
.legal-page-hero-inner {
    max-width: 880px;
    margin: 0 auto;
}
.legal-page-hero-h1 {
    font-family: 'Sansation', sans-serif;
    font-size: clamp(32px, 4vw, 44px);
    font-weight: 600;
    line-height: 1.15;
    color: #FAF5F0;
    margin: 0;
    letter-spacing: -0.5px;
}
.legal-page-hero-sep {
    width: 40px;
    height: 2px;
    background: #C9A961;
    margin: 16px auto;
}
.legal-page-hero-lead {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    color: rgba(250, 245, 240, 0.8);
    margin: 0;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Adaptation mobile */
@media (max-width: 768px) {
    .legal-page-hero {
        /* Même logique que les heros service : ~82px header + ~28px de respiration */
        padding: calc(82px + 1.75rem) 24px 40px;
    }
    .legal-page-hero-h1 {
        font-size: 28px;
        line-height: 1.2;
    }
    .legal-page-hero-lead {
        font-size: 17px;
    }
}

/* === BANDEAU COOKIES HÔREST === */
/* Bandeau cookies — masqué par défaut */
.horest-cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99999;
    background: #3D3832;
    color: #FAF8F6;
    padding: 24px;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
    display: none;
    font-family: var(--font-body);
}
.horest-cookie-banner--visible {
    display: block;
}
.horest-cookie-banner-inner {
    max-width: 1200px;
    margin: 0 auto;
}
.horest-cookie-title {
    font-family: 'Sansation', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #C9A961;
    margin: 0 0 12px 0;
}
.horest-cookie-desc {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 16px 0;
    color: #FAF8F6;
}
.horest-cookie-link {
    color: #C9A961;
    text-decoration: underline;
}
.horest-cookie-link:hover {
    color: #ddab3a;
}
.horest-cookie-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.horest-cookie-btn {
    font-family: 'Sansation', sans-serif;
    font-size: 14px;
    font-weight: 700;
    padding: 12px 24px;
    border: none;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    min-height: 44px;
}
.horest-cookie-btn--primary {
    background: #C9A961;
    color: #3D3832;
    border: 1px solid #C9A961;
}
.horest-cookie-btn--primary:hover {
    background: #ddab3a;
}
.horest-cookie-btn--secondary {
    background: transparent;
    color: #FAF8F6;
    border: 1px solid #FAF8F6;
}
.horest-cookie-btn--secondary:hover {
    background: #FAF8F6;
    color: #3D3832;
}

/* Panneau personnalisation */
.horest-cookie-customize {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 100000;
    background: rgba(0,0,0,0.7);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    font-family: var(--font-body);
}
.horest-cookie-customize--visible {
    display: flex;
}
.horest-cookie-customize-inner {
    background: #FAF8F6;
    color: #3D3832;
    border-radius: 4px;
    padding: 32px;
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
}
.horest-cookie-customize-inner {
    position: relative; /* Important pour positionner la croix en absolute */
}
.horest-cookie-customize-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: transparent;
    border: none;
    color: #3D3832;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    padding: 8px 12px;
    transition: color 0.2s;
}
.horest-cookie-customize-close:hover {
    color: #C9A961;
}
.horest-cookie-customize-title {
    font-family: 'Sansation', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #3D3832;
    margin: 0 0 24px 0;
}
.horest-cookie-category {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #ddd;
}
.horest-cookie-category:last-of-type {
    border-bottom: none;
}
.horest-cookie-category-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.horest-cookie-category-title {
    font-family: 'Sansation', sans-serif;
    font-size: 16px;
    font-weight: 700;
    margin: 0;
}
.horest-cookie-category-status {
    font-size: 12px;
    color: #888;
    font-style: italic;
}
.horest-cookie-category-desc {
    font-size: 13px;
    line-height: 1.6;
    color: #555;
    margin: 0;
}

/* Toggle switch */
.horest-cookie-toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}
.horest-cookie-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}
.horest-cookie-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #ccc;
    transition: 0.3s;
    border-radius: 24px;
}
.horest-cookie-toggle-slider::before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
}
.horest-cookie-toggle input:checked + .horest-cookie-toggle-slider {
    background-color: #C9A961;
}
.horest-cookie-toggle input:checked + .horest-cookie-toggle-slider::before {
    transform: translateX(20px);
}
.horest-cookie-customize-actions {
    text-align: right;
    margin-top: 24px;
}

/* Mobile */
@media (max-width: 768px) {
    .horest-cookie-actions {
        flex-direction: column;
    }
    .horest-cookie-btn {
        width: 100%;
    }
    .horest-cookie-customize-inner {
        padding: 20px;
    }
}

/* Zone d'intervention (contact, accueil, qui sommes-nous) */
.zones-intervention {
    position: relative;
    text-align: center;
    padding: 40px 20px;
    background: #FAF5F0;
}

.zones-intervention::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, #C9A961, transparent);
}

.zones-intervention h2 {
    font-family: 'Sansation', sans-serif;
    color: #3D3832;
    font-size: 2rem;
    margin-bottom: 40px;
}

.zones-map {
    max-width: 500px;
    width: 100%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/*
 * Dual / carte en pile (flex-direction: column) : flex: 1 1 0 + overflow: hidden
 * peut donner une hauteur minimale de contenu à 0 → cartes « vides » sur mobile.
 */
@media (max-width: 1023px) {
    .creer-intro-dual__col.concept-chr-dual-card {
        flex: 0 1 auto !important;
        overflow: visible !important;
        width: 100%;
        max-width: 100%;
    }

    .bp-dual-cards-row > .bp-dual-card {
        flex: 0 1 auto !important;
        overflow: visible !important;
    }
}

@media (max-width: 899px) {
    .creer-intro-dual__inner > .creer-intro-dual__col:not(.concept-chr-dual-card) {
        flex: 0 1 auto !important;
    }

    .fb-direction-dual__cards > .fb-direction-dual__card {
        flex: 0 1 auto !important;
        overflow: visible !important;
    }
}

/*
 * Grilles réutilisables : une colonne sous 768px, multi-colonnes au-delà.
 * Remplace les inline style="grid-template-columns:1fr 1fr" dans les pages filles.
 */
.horest-rgrid-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--horest-rg-gap, 16px);
}
@media (min-width: 768px) {
    .horest-rgrid-2 {
        grid-template-columns: 1fr 1fr;
    }
}
.horest-rgrid-2--gap-sm {
    --horest-rg-gap: 10px;
}
.horest-rgrid-2--gap-md {
    --horest-rg-gap: 16px;
}
.horest-rgrid-2--gap-lg {
    --horest-rg-gap: 24px;
}
.horest-rgrid-2--gap-14 {
    --horest-rg-gap: 14px;
}

.horest-rgrid-3 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--horest-rg-gap, 16px);
}
@media (min-width: 768px) {
    .horest-rgrid-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* =============================================================
   OO-ROLE — Section Expertise Ouverture Opérationnelle
   v1.4.18
   ============================================================= */

/* --- Wrapper de section --- */
.oo-role-wrap {
    background: #FAF8F6;
    padding: 64px 20px 32px;
    box-sizing: border-box;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: 100vw;
}

/* =============================================================
   OO-RUPTURE-GRID — 4 points de rupture
   Layout : titre + lead pleine largeur → split image(40%)|cards(60%)
   Animation séquencée : slide + scale title-part → title-lead → lead → media → cards cascade
   ============================================================= */

/* --- Wrapper global --- */
.oo-rupture-grid {
    padding: 64px 20px 80px;
    background: transparent;
    box-sizing: border-box;
    width: 100%;
}

.oo-rupture-grid__inner {
    max-width: 1328px;
    margin: 0 auto;
}

/* --- H2 titre : pleine largeur --- */
.oo-rupture-grid__title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: clamp(28px, 3.2vw, 38px);
    color: #3D3832;
    line-height: 1.15;
    margin: 0 0 20px;
    letter-spacing: -0.5px;
    max-width: 100%;
}

/* Partie titre "4 points" : slide + scale depuis la gauche */
.oo-rupture-grid__title-part {
    display: inline-block;
    opacity: 0;
    transform: translateX(-120px) scale(0.82);
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.oo-rupture-grid__title-part.is-revealed {
    opacity: 1;
    transform: translateX(0) scale(1);
}

/* Lead du titre "— qui décident…" : état initial → slide depuis la gauche */
.oo-rupture-grid__title-lead {
    display: inline-block;
    opacity: 0;
    transform: translateX(-120px) scale(0.82);
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.oo-rupture-grid__title-lead.is-revealed {
    opacity: 1;
    transform: translateX(0) scale(1);
}

/* --- Paragraphe lead : pleine largeur --- */
.oo-rupture-grid__lead {
    font-size: 16px;
    line-height: 1.75;
    color: #1A1816;
    max-width: 100%;
    margin: 0 0 40px;
    /* État initial : caché, décalé à gauche */
    opacity: 0;
    transform: translateX(-120px) scale(0.82);
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.oo-rupture-grid__lead.is-revealed {
    opacity: 1;
    transform: translateX(0) scale(1);
}

/* --- Split 40/60 : image gauche, cards 2×2 droite --- */
.oo-rupture-grid__split {
    display: grid;
    grid-template-columns: 40fr 60fr;
    gap: 32px;
    align-items: stretch;
    margin-bottom: 40px;
}

@media (max-width: 900px) {
    .oo-rupture-grid__split {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/* --- Colonne gauche : image cropée sur la hauteur des cards --- */
/*
 * Technique : l'image est position:absolute → le container n'a plus
 * de hauteur intrinsèque → la rangée CSS Grid est dimensionnée
 * uniquement par la colonne cards → align-self:stretch étire le
 * container __media exactement à cette hauteur → l'image la remplit.
 */
.oo-rupture-grid__media {
    border-radius: 12px;
    overflow: hidden;
    align-self: stretch;
    position: relative;
    /* État initial : caché, décalé à gauche */
    opacity: 0;
    transform: translateX(-120px) scale(0.92);
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.oo-rupture-grid__media.is-revealed {
    opacity: 1;
    transform: translateX(0) scale(1);
}

.oo-rupture-grid__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Mobile : le container n'a plus de hauteur sans l'image dans le flux,
   on impose un ratio via aspect-ratio pour garantir une hauteur visible */
@media (max-width: 900px) {
    .oo-rupture-grid__media {
        aspect-ratio: 4 / 3;
    }
}

/* --- Colonne droite : grille 2×2 de cards --- */
.oo-rupture-grid__cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

@media (max-width: 600px) {
    .oo-rupture-grid__cards {
        grid-template-columns: 1fr;
    }
}

/* --- Card individuelle --- */
.oo-rupture-card {
    background: #FAF8F6;
    border-radius: 12px;
    padding: 24px;
    border: 1px solid rgba(61, 56, 50, 0.08);
    /* État initial : caché, légèrement décalé vers le bas */
    opacity: 0;
    transform: translateY(20px);
}

.oo-rupture-card.is-revealed {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.5s ease,
                transform 0.5s ease,
                box-shadow 0.4s ease,
                border-color 0.4s ease;
}

.oo-rupture-card:hover {
    box-shadow: 0 12px 28px rgba(61, 56, 50, 0.10);
    border-color: #C9A961;
}

/* --- Pastille numéro --- */
.oo-rupture-card__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: #C9A961;
    color: #3D3832;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 14px;
    border-radius: 50%;
    margin-bottom: 14px;
}

/* --- Titre card --- */
.oo-rupture-card__title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 17px;
    color: #3D3832;
    line-height: 1.3;
    margin: 0 0 8px;
}

/* --- Texte card --- */
.oo-rupture-card__text {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(26, 24, 22, 0.78);
    margin: 0;
}

/* --- Encart conclusion --- */
.oo-rupture-grid__conclusion {
    font-style: italic;
    font-size: 16px;
    line-height: 1.65;
    color: #3D3832;
    border-left: 3px solid #C9A961;
    padding: 4px 0 4px 18px;
    margin: 32px 0 0;
    max-width: 980px;
}

/* --- prefers-reduced-motion : affichage immédiat sans animation --- */
@media (prefers-reduced-motion: reduce) {
    .oo-rupture-grid__title-part,
    .oo-rupture-grid__title-lead,
    .oo-rupture-grid__lead,
    .oo-rupture-grid__media,
    .oo-rupture-card {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* =============================================================
   ANIMATION FADE-UP — direction générique pour data-scroll-reveal-item
   ============================================================= */

[data-scroll-reveal-item][data-anim-direction="fade-up"] {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 900ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}
[data-scroll-reveal-item][data-anim-direction="fade-up"].is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    [data-scroll-reveal-item][data-anim-direction="fade-up"] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* =============================================================
   .concept-chr-methode-5etapes — extensions OO (intro + note recrutement)
   ============================================================= */

/* Paragraphe d'intro sous le H2 (fond sombre → texte clair) */
.concept-chr-methode-5etapes__intro {
    max-width: 52rem;
    margin: 0 auto 2rem;
    text-align: center;
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.65);
}

/* Encart note recrutement (fond clair sur fond sombre) */
.concept-chr-methode-5etapes__recrutement-note {
    max-width: 52rem;
    margin: 48px auto 0;
    padding: 24px 32px;
    background: #FAF5F0;
    border-left: 4px solid #C9A961;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.65;
    color: #3D3832;
    text-align: left;
}

/* =============================================================
   Empêche les coupes de ligne sur les groupes "mot :" (ponctuation française) */
.oo-nowrap {
    white-space: nowrap;
}

/* Retour à la ligne forcé en desktop, neutralisé en mobile */
.oo-br-desktop {
    display: inline;
}
@media (max-width: 767px) {
    .oo-br-desktop {
        display: none;
    }
}

/* Aligner la largeur intérieure sur le pattern .concept-chr-interventions-wide */
.oo-role-wrap > .section-inner {
    max-width: calc(var(--container, 1200px) + 8rem);
    padding-left: 0;
    padding-right: 0;
}

/* --- Titre H2 --- */
.oo-role-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: clamp(24px, 3vw, 32px);
    color: #3D3832;
    max-width: none;
    line-height: 1.2;
    margin-bottom: 20px;
    white-space: normal;
    /* animation initiale : zoom-in + montée prononcée */
    opacity: 0;
    transform: scale(0.75) translateY(60px);
    transform-origin: center top;
    transition: opacity 1100ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 1100ms cubic-bezier(0.16, 1, 0.3, 1);
}
.oo-role-title.is-visible {
    opacity: 1;
    transform: scale(1) translateY(0) !important;
}

/* --- Paragraphe intro --- */
.oo-role-intro {
    font-size: 16px;
    line-height: 1.75;
    max-width: none;
    margin-bottom: 56px;
    color: #1A1816;
    text-align: left !important;
    /* animation initiale : même effet que le H2, décalé de 150ms */
    opacity: 0;
    transform: scale(0.75) translateY(60px);
    transform-origin: center top;
    transition: opacity 1100ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 1100ms cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: 150ms;
}
.oo-role-intro.is-visible {
    opacity: 1;
    transform: scale(1) translateY(0) !important;
}

/* --- Grille de cards --- */
.oo-role-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}
@media (min-width: 900px) {
    .oo-role-cards {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* --- Card individuelle --- */
.oo-role-card {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 180px 1fr;
    background: #FFFFFF;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: none;
    outline: none;
    text-align: left;
    /* État initial : invisible, prêt pour l'animation */
    opacity: 0;
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.4s ease;
}
@media (min-width: 768px) {
    .oo-role-card {
        grid-template-columns: 200px 1fr;
        grid-template-rows: unset;
        min-height: 220px;
        max-height: 280px;
    }
}
/* Hover uniquement quand la card est déjà visible (.is-visible) */
.oo-role-card.is-visible:hover,
.oo-role-card.is-visible:focus-visible {
    box-shadow: 0 16px 36px rgba(61, 56, 50, 0.12);
    transform: translateY(-3px) !important;
}
.oo-role-card.is-visible:focus-visible {
    outline: 2px solid #C9A961;
    outline-offset: 3px;
}

/* --- Média de la card (image en background) --- */
.oo-role-card__media {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #3D3832;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    min-height: 160px;
}
@media (min-width: 768px) {
    .oo-role-card__media {
        min-height: 100%;
    }
}
.oo-role-card:hover .oo-role-card__media {
    transform: scale(1.04);
}

/* --- Contenu textuel de la card --- */
.oo-role-card__content {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.oo-role-card__content h3 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #3D3832;
    line-height: 1.3;
    margin-bottom: 10px;
    white-space: normal;
}
.oo-role-card__content p {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(26, 24, 22, 0.78);
    margin-bottom: 16px;
    text-align: left !important;
}
.oo-role-card__content .btn-text-link {
    color: #C9A961;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    transition: letter-spacing 0.2s ease;
    align-self: flex-start;
}
.oo-role-card__content .btn-text-link::after {
    content: '\00a0›';
    display: inline-block;
    transition: transform 0.2s ease;
}
.oo-role-card:hover .oo-role-card__content .btn-text-link::after {
    transform: translateX(4px);
}

/* --- Encart partenaires --- */
.oo-role-partners {
    margin-top: 48px;
    padding: 28px 32px;
    background: #FFFFFF;
    border-radius: 14px;
    border-left: 4px solid #C9A961;
    font-size: 14px;
    line-height: 1.7;
    color: #3D3832;
    text-align: left !important;
    opacity: 1;
    transform: none;
}

/* =============================================================
   ANIMATIONS SCROLL — états initiaux et classe .is-visible
   ============================================================= */

/* Cards : transforms initiaux selon la direction d'animation */
.oo-role-card[data-anim-direction="from-right"] {
    transform: translateX(180px);
}
.oo-role-card[data-anim-direction="from-bottom"] {
    transform: translateY(120px);
}
.oo-role-card[data-anim-direction="fade-scale-up"] {
    transform: scale(0.92) translateY(40px);
    transform-origin: center center;
}

/* État animé : toutes les cards reviennent à leur position normale */
.oo-role-card[data-anim-direction].is-visible {
    opacity: 1;
    transform: translate(0, 0) scale(1);
}

/* Utilitaire : coupe momentanément les transitions pour le reset propre (replay) */
.no-transition {
    transition: none !important;
}

/* Respect des préférences de réduction de mouvement */
@media (prefers-reduced-motion: reduce) {
    [data-scroll-reveal-item],
    .oo-role-card,
    .oo-role-title,
    .oo-role-intro,
    .oo-role-partners {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        transition-delay: 0ms !important;
    }
}

/* =============================================================
   MODAL OVERLAY
   ============================================================= */

/* Conteneur des données HTML cachées */
.oo-role-modal-contents {
    display: none;
}

/* Overlay principal */
.oo-role-modal {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}
.oo-role-modal[hidden] {
    display: none;
}

/* Fond semi-transparent */
.oo-role-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(26, 24, 22, 0.72);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

/* Boîte de dialogue */
.oo-role-modal__dialog {
    position: relative;
    background: #FAF8F6;
    border-radius: 12px;
    overflow: hidden;
    width: 100%;
    max-width: 700px;
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    transform: scale(0.94) translateY(20px);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.oo-role-modal.is-open .oo-role-modal__dialog {
    transform: scale(1) translateY(0);
    opacity: 1;
}
.oo-role-modal.is-closing .oo-role-modal__dialog {
    transform: scale(0.94) translateY(20px);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Bouton fermer */
.oo-role-modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(61, 56, 50, 0.75);
    color: #fff;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}
.oo-role-modal__close:hover {
    background: rgba(61, 56, 50, 1);
}
.oo-role-modal__close:focus-visible {
    outline: 2px solid #C9A961;
    outline-offset: 2px;
}

/* Contenu scrollable */
.oo-role-modal__inner {
    overflow-y: auto;
    flex: 1 1 auto;
    -webkit-overflow-scrolling: touch;
}

/* Image bandeau en haut de la modal */
.oo-role-modal__visual {
    width: 100%;
    height: 200px;
    background-size: cover;
    background-position: center;
    background-color: #3D3832;
    flex-shrink: 0;
}

/* Corps textuel de la modal */
.oo-role-modal__body {
    padding: 28px 32px 36px;
}
.oo-role-modal__body h3 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: #3D3832;
    line-height: 1.3;
    margin-bottom: 20px;
    white-space: normal;
}

/* Liste de détail dans la modal */
.oo-role-modal-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.oo-role-modal-list li {
    position: relative;
    padding-left: 20px;
    font-size: 15px;
    line-height: 1.65;
    color: #1A1816;
}
.oo-role-modal-list li::before {
    content: '›';
    position: absolute;
    left: 0;
    top: 0;
    color: #C9A961;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.65;
}

/* Mobile : modal full-width avec scroll */
@media (max-width: 599px) {
    .oo-role-modal {
        padding: 0;
        align-items: flex-end;
    }
    .oo-role-modal__dialog {
        max-width: 100%;
        border-radius: 12px 12px 0 0;
        max-height: 90vh;
    }
    .oo-role-modal__body {
        padding: 20px 20px 28px;
    }
}