/*
===============================================================================
modern.css — bilan-psychologique.com
Couche graphique moderne, conçue pour être chargée APRÈS assets/css/main.css.
===============================================================================

Installation sur une page modernisée :

<head>
    ...
    <link rel="stylesheet" href="assets/css/main.css" />
    <link rel="stylesheet" href="assets/css/modern.css" />
</head>

Puis :
<body class="is-preload modern-page">

Pour les pages situées dans un sous-dossier, adaptez naturellement le chemin
vers assets/css/modern.css.

Principe :
- main.css reste intact pour les anciennes pages ;
- modern.css ne s'active que sur les pages portant la classe modern-page ;
- les tailles sont en rem afin de ne plus subir les réductions anciennes
  de main.css selon la largeur de l'écran.
*/


/* ==========================================================================
   1. VARIABLES
   ========================================================================== */

body.modern-page {
    --bp-accent: #f56a6a;
    --bp-text: #202428;
    --bp-heading: #3d4449;
    --bp-muted: #667078;
    --bp-border: rgba(210, 215, 217, 0.92);
    --bp-soft: #f7f8f9;
    --bp-soft-2: #fafafa;
    --bp-white: #ffffff;
    --bp-dark: #3d4449;

    --bp-radius: 0.42rem;
    --bp-radius-lg: 0.58rem;

    --bp-reading-width: 80ch;
    --bp-wide-width: 1080px;

    --bp-body-size: 1.08rem;
    --bp-body-line: 1.70;

    color: var(--bp-text);
}


/* ==========================================================================
   2. TYPOGRAPHIE DE BASE
   ========================================================================== */

/*
 * main.css impose historiquement des tailles importantes en em aux paragraphes
 * et listes, puis réduit fortement le body sur certains écrans.
 * Ici, on stabilise uniquement le contenu principal des pages modernisées.
 */

body.modern-page #main p,
body.modern-page #main li {
    font-size: var(--bp-body-size) !important;
    line-height: var(--bp-body-line) !important;
    color: var(--bp-text);
}

body.modern-page #main p {
    margin-bottom: 1.45rem;
}

body.modern-page #main li {
    margin-bottom: 0.34rem;
}

body.modern-page #main h1,
body.modern-page #main h2,
body.modern-page #main h3,
body.modern-page #main h4 {
    color: var(--bp-heading);
    text-transform: none;
    letter-spacing: normal;
}

body.modern-page #main h1 {
    font-size: clamp(2.35rem, 3.2vw, 3.05rem) !important;
    line-height: 1.14 !important;
    letter-spacing: -0.025em !important;
    margin: 0 0 0.65em 0 !important;
}

body.modern-page #main h2 {
    font-size: 1.58rem !important;
    line-height: 1.30 !important;
    margin: 0 0 0.78rem 0 !important;
}

body.modern-page #main h3 {
    font-size: 1.23rem !important;
    line-height: 1.36 !important;
    margin: 0 0 0.62rem 0 !important;
}

body.modern-page #main h4 {
    font-size: 1.08rem !important;
    line-height: 1.4 !important;
}

body.modern-page #main strong,
body.modern-page #main b {
    color: var(--bp-heading);
}

body.modern-page #main a {
    text-underline-offset: 0.12em;
}

body.modern-page #main section {
    scroll-margin-top: 1.5rem;
}

/* Texte de lecture : longueur de ligne confortable */
body.modern-page .reading-width,
body.modern-page .section-intro,
body.modern-page .modern-reading {
    max-width: var(--bp-reading-width);
}


/* ==========================================================================
   3. TITRES, INTRODUCTIONS ET HÉROS
   ========================================================================== */

body.modern-page .modern-hero,
body.modern-page .home-hero,
body.modern-page .hpi-hero,
body.modern-page .screening-hero {
    padding: 3.6rem 0 2.65rem;
    border-bottom: 1px solid var(--bp-border);
}

body.modern-page .modern-eyebrow,
body.modern-page .home-eyebrow,
body.modern-page .hpi-eyebrow,
body.modern-page .screening-eyebrow {
    color: var(--bp-accent) !important;
    font-size: 0.92rem !important;
    line-height: 1.35 !important;
    font-weight: 700;
    letter-spacing: 0.075em;
    text-transform: uppercase;
    margin-bottom: 0.72rem !important;
}

body.modern-page .modern-lead,
body.modern-page .home-lead,
body.modern-page .hpi-lead,
body.modern-page .screening-lead,
body.modern-page .asperger-page > .lead {
    max-width: var(--bp-reading-width);
    font-family: "Open Sans", sans-serif !important;
    font-size: 1.22rem !important;
    line-height: 1.70 !important;
    font-weight: 400 !important;
    color: #4d565c !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    margin: 0 0 1.45rem 0 !important;
}

body.modern-page .section-intro {
    font-size: 1.13rem !important;
    line-height: 1.70 !important;
    color: var(--bp-muted) !important;
}

body.modern-page .modern-section,
body.modern-page .home-section,
body.modern-page .hpi-section,
body.modern-page .screening-section {
    padding: 2.75rem 0 0.7rem;
}


/* ==========================================================================
   4. BOUTONS ET ACTIONS
   ========================================================================== */

body.modern-page #main .button {
    font-size: 0.84rem !important;
    letter-spacing: 0.055em !important;
    min-height: 3.25rem;
    height: auto !important;
    line-height: 1.2 !important;
    padding: 1rem 1.55rem !important;
    white-space: normal;
}

body.modern-page #main .button.big {
    font-size: 0.88rem !important;
    padding: 1.05rem 1.7rem !important;
}

body.modern-page .modern-actions,
body.modern-page .home-actions,
body.modern-page .hpi-actions,
body.modern-page .screening-actions,
body.modern-page .questionnaire-actions,
body.modern-page .cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.72rem;
    align-items: center;
    margin: 1.35rem 0 1.9rem;
}

body.modern-page .modern-actions .button,
body.modern-page .home-actions .button,
body.modern-page .hpi-actions .button,
body.modern-page .screening-actions .button,
body.modern-page .questionnaire-actions .button,
body.modern-page .cta-row .button {
    margin: 0 !important;
}


/* ==========================================================================
   5. BANDEAUX DE CONFIANCE / REPÈRES
   ========================================================================== */

body.modern-page .trust-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    max-width: 1000px;
    margin: 1.35rem 0 2rem;
}

body.modern-page .trust-item {
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius);
    padding: 1.08rem 1.12rem;
    background: var(--bp-white);
    font-size: 1rem;
    line-height: 1.55;
}

body.modern-page .trust-item strong {
    display: block;
    color: var(--bp-heading);
    font-size: 1.04rem !important;
    line-height: 1.35;
    margin-bottom: 0.32rem;
}

body.modern-page .trust-item span {
    color: var(--bp-muted);
    font-size: 0.96rem;
}


/* ==========================================================================
   6. GRILLES ET CARTES
   ========================================================================== */

body.modern-page .modern-grid,
body.modern-page .offer-grid,
body.modern-page .why-grid,
body.modern-page .question-grid,
body.modern-page .steps-grid,
body.modern-page .fact-grid,
body.modern-page .myth-grid,
body.modern-page .diff-grid,
body.modern-page .value-grid,
body.modern-page .result-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.05rem;
    margin: 1.55rem 0;
    align-items: stretch;
}

body.modern-page .modern-card,
body.modern-page .offer-card,
body.modern-page .why-card,
body.modern-page .question-card,
body.modern-page .step-card,
body.modern-page .fact-card,
body.modern-page .myth-card,
body.modern-page .diff-card,
body.modern-page .value-card,
body.modern-page .result-card,
body.modern-page .related-card {
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius-lg);
    padding: 1.32rem 1.4rem;
    background: var(--bp-white);
}

body.modern-page .offer-card {
    display: flex;
    flex-direction: column;
    box-shadow: 0 6px 20px rgba(61, 68, 73, 0.045);
}

body.modern-page .offer-card.featured {
    border: 2px solid var(--bp-accent);
}

body.modern-page .offer-label {
    display: inline-block;
    width: fit-content;
    color: var(--bp-accent);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.065em;
    text-transform: uppercase;
    margin-bottom: 0.7rem;
}

body.modern-page .offer-card ul {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
}

body.modern-page .offer-card li {
    position: relative;
    padding-left: 1.35rem;
    margin-bottom: 0.42rem;
}

body.modern-page .offer-card li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--bp-accent);
    font-weight: 700;
}

body.modern-page .offer-card .card-link {
    margin-top: auto;
    font-weight: 700;
}

body.modern-page .modern-card p:last-child,
body.modern-page .why-card p:last-child,
body.modern-page .question-card p:last-child,
body.modern-page .step-card p:last-child,
body.modern-page .fact-card p:last-child,
body.modern-page .myth-card p:last-child,
body.modern-page .diff-card p:last-child,
body.modern-page .value-card p:last-child,
body.modern-page .result-card p:last-child {
    margin-bottom: 0;
}

body.modern-page .fact-card strong.big,
body.modern-page .value-card strong.big {
    display: block;
    color: var(--bp-accent);
    font-family: "Roboto Slab", serif;
    font-size: 1.5rem;
    line-height: 1.18;
    margin-bottom: 0.35rem;
}


/* ==========================================================================
   7. ENCADRÉS, NOTES ET BLOCS CLINIQUES
   ========================================================================== */

body.modern-page .modern-note,
body.modern-page .note-box,
body.modern-page .terminology-box,
body.modern-page .screening-box,
body.modern-page .clinical-box {
    background: var(--bp-soft);
    border-left: 4px solid var(--bp-accent);
    border-radius: var(--bp-radius);
    padding: 1.35rem 1.5rem;
    margin: 1.5rem 0 1.9rem;
}

body.modern-page .modern-note p:last-child,
body.modern-page .note-box p:last-child,
body.modern-page .terminology-box p:last-child,
body.modern-page .screening-box p:last-child,
body.modern-page .clinical-box p:last-child {
    margin-bottom: 0;
}

body.modern-page .profile-note,
body.modern-page .expert-box {
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius-lg);
    padding: 1.4rem 1.5rem;
    margin: 1.5rem 0 1.9rem;
    background: var(--bp-white);
}

body.modern-page .expert-box {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 1.5rem;
    align-items: center;
}

body.modern-page .terminology-box p,
body.modern-page .screening-box p,
body.modern-page .clinical-box p,
body.modern-page .profile-note p,
body.modern-page .expert-box p {
    max-width: var(--bp-reading-width);
}


/* ==========================================================================
   8. ÉTAPES, LISTES ET SOMMAIRES
   ========================================================================== */

body.modern-page .step-number {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bp-accent);
    color: #fff;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

body.modern-page .check-list {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}

body.modern-page .check-list li {
    position: relative;
    padding-left: 1.45rem;
    margin-bottom: 0.45rem;
}

body.modern-page .check-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--bp-accent);
    font-weight: 700;
}

body.modern-page .toc {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin: 1.2rem 0 0;
}

body.modern-page .toc a {
    display: inline-block;
    border: 1px solid var(--bp-border);
    border-radius: 999px;
    padding: 0.5rem 0.8rem;
    background: #fff;
    font-size: 0.95rem;
    line-height: 1.25;
    border-bottom-width: 1px;
}


/* ==========================================================================
   9. FAQ
   ========================================================================== */

body.modern-page .faq {
    margin-top: 1.3rem;
}

body.modern-page .faq details {
    border-top: 1px solid var(--bp-border);
    padding: 1rem 0;
}

body.modern-page .faq details:last-child {
    border-bottom: 1px solid var(--bp-border);
}

body.modern-page .faq summary {
    cursor: pointer;
    color: var(--bp-heading);
    font-size: 1.08rem;
    line-height: 1.45;
    font-weight: 700;
}

body.modern-page .faq details p {
    margin: 0.8rem 0 0.25rem;
}


/* ==========================================================================
   10. CTA FINAUX ET BLOCS FONCÉS
   ========================================================================== */

body.modern-page .final-cta,
body.modern-page .purchase-box {
    margin: 2.5rem 0 1rem;
    padding: 1.85rem 2rem;
    border-radius: var(--bp-radius-lg);
}

body.modern-page .final-cta.dark,
body.modern-page .purchase-box {
    background: var(--bp-dark);
    color: #fff;
}

body.modern-page .final-cta:not(.dark) {
    background: var(--bp-soft);
    border-left: 4px solid var(--bp-accent);
}

body.modern-page .final-cta.dark h2,
body.modern-page .final-cta.dark h3,
body.modern-page .final-cta.dark strong,
body.modern-page .purchase-box h2,
body.modern-page .purchase-box h3,
body.modern-page .purchase-box strong {
    color: #fff;
}

body.modern-page .final-cta.dark p,
body.modern-page .purchase-box p {
    color: rgba(255, 255, 255, 0.88) !important;
    max-width: var(--bp-reading-width);
}

body.modern-page .purchase-box {
    text-align: center;
}

body.modern-page .purchase-box p {
    margin-left: auto;
    margin-right: auto;
}

body.modern-page .purchase-box .button,
body.modern-page .final-cta.dark .button {
    background: #fff;
    box-shadow: inset 0 0 0 2px #fff;
    color: var(--bp-dark) !important;
}

body.modern-page .purchase-price {
    font-family: "Roboto Slab", serif;
    font-weight: 700;
    font-size: 2.15rem !important;
    color: #fff !important;
    margin: 0.1rem 0 0.5rem !important;
}

body.modern-page .purchase-small {
    font-size: 0.94rem !important;
    color: rgba(255,255,255,0.74) !important;
}


/* ==========================================================================
   11. PAGE QUESTIONNAIRE HPI
   ========================================================================== */

body.modern-page .hpi-questionnaire {
    max-width: 1000px;
}

body.modern-page .hpi-questionnaire .questionnaire-intro {
    max-width: var(--bp-reading-width);
    font-size: 1.20rem !important;
    line-height: 1.70 !important;
    color: var(--bp-heading);
    margin-bottom: 1.35rem;
}

body.modern-page .hpi-questionnaire .questionnaire-note {
    background: var(--bp-soft);
    border-left: 4px solid var(--bp-accent);
    border-radius: var(--bp-radius);
    padding: 1.35rem 1.5rem;
    margin: 1.4rem 0 1.8rem;
}

body.modern-page .hpi-questionnaire .questionnaire-note p {
    font-size: 1.12rem !important;
    line-height: 1.70 !important;
}

body.modern-page .hpi-questionnaire .questionnaire-note p:last-child {
    margin-bottom: 0;
}

body.modern-page .hpi-questionnaire .question-group {
    margin: 0 0 1.5rem;
    padding: 1.35rem 1.45rem 0.25rem;
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius);
    background: #fff;
}

body.modern-page .hpi-questionnaire .question-group h2 {
    font-size: 1.35rem !important;
    margin-bottom: 0.8rem !important;
}

body.modern-page .hpi-questionnaire .question {
    font-size: 1.08rem !important;
    line-height: 1.68 !important;
    color: var(--bp-text);
    margin-bottom: 1.15rem !important;
}

body.modern-page .hpi-questionnaire .closing-box {
    background: var(--bp-soft);
    border-radius: var(--bp-radius);
    padding: 1.4rem 1.5rem;
    margin-top: 1.75rem;
}

body.modern-page .hpi-questionnaire .closing-box h2 {
    font-size: 1.34rem !important;
}

body.modern-page .hpi-questionnaire .closing-box p {
    font-size: 1.08rem !important;
}

body.modern-page .hpi-questionnaire .closing-cta {
    display: inline-block !important;
    width: auto !important;
    min-width: 0 !important;
    font-size: 0.82rem !important;
    padding: 0.88rem 1.3rem !important;
}


/* ==========================================================================
   12. PAGE ASPERGER / CARACTÉRISTIQUES
   ========================================================================== */

body.modern-page .asperger-page {
    max-width: 1060px;
}

body.modern-page .asperger-page .characteristics-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin: 1.35rem 0 2.2rem;
}

body.modern-page .asperger-page .characteristic {
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius);
    padding: 1.2rem 1.32rem 0.22rem;
    background: #fff;
}

body.modern-page .asperger-page .characteristic h2 {
    font-size: 1.23rem !important;
    line-height: 1.36 !important;
    margin-bottom: 0.55rem !important;
}

body.modern-page .asperger-page .characteristic p {
    font-size: 1.04rem !important;
    line-height: 1.65 !important;
    margin-bottom: 1.05rem !important;
}

body.modern-page .asperger-page .num {
    color: var(--bp-accent);
}

body.modern-page .small-note {
    font-size: 0.96rem !important;
    color: #646d73 !important;
    line-height: 1.62 !important;
}


/* ==========================================================================
   13. SECTIONS "FEATURES" ET "POSTS" HÉRITÉES DE HTML5 UP
   ========================================================================== */

/*
 * Ces règles permettent de moderniser les anciennes sections sans devoir
 * les réécrire immédiatement.
 */

body.modern-page #main .features article .content h3,
body.modern-page #main .posts article h3 {
    font-size: 1.18rem !important;
    line-height: 1.36 !important;
    margin-bottom: 0.55rem !important;
}

body.modern-page #main .features article .content p,
body.modern-page #main .posts article p {
    font-size: 1.04rem !important;
    line-height: 1.64 !important;
}

body.modern-page #main header.major h2 {
    font-size: 1.52rem !important;
    line-height: 1.30 !important;
}

body.modern-page #main .posts article .image {
    margin-bottom: 1rem;
}


/* ==========================================================================
   14. RESSOURCES / ACCORDÉONS
   ========================================================================== */

body.modern-page .resource-group {
    border-top: 1px solid var(--bp-border);
    padding: 0.1rem 0;
}

body.modern-page .resource-group:last-child {
    border-bottom: 1px solid var(--bp-border);
}

body.modern-page .resource-group summary {
    cursor: pointer;
    padding: 0.95rem 0.15rem;
    font-family: "Roboto Slab", serif;
    font-weight: 700;
    color: var(--bp-heading);
    font-size: 1.08rem;
    line-height: 1.4;
}

body.modern-page .resource-group summary span {
    font-family: "Open Sans", sans-serif;
    font-weight: 400;
    color: #858d92;
    font-size: 0.88rem;
    margin-left: 0.4rem;
}

body.modern-page .resource-links {
    columns: 2;
    column-gap: 2rem;
    padding: 0 0 1rem 1.1rem;
    margin: 0;
}

body.modern-page .resource-links li {
    break-inside: avoid;
    margin-bottom: 0.35rem;
    font-size: 1rem !important;
}


/* ==========================================================================
   15. IMAGES, VIDÉOS ET CONTENU ASSOCIÉ
   ========================================================================== */

body.modern-page .video-block {
    max-width: 900px;
    margin: 1.4rem auto 0;
}

body.modern-page .video-responsive {
    border-radius: var(--bp-radius);
}

body.modern-page .hpi-image {
    margin: 1.5rem 0 1rem;
}

body.modern-page .hpi-image img,
body.modern-page .practitioner img {
    width: 100%;
    height: auto;
    border-radius: var(--bp-radius-lg);
}

body.modern-page .practitioner {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(250px, 0.55fr);
    gap: 1.8rem;
    align-items: center;
}


/* ==========================================================================
   16. MÉTADONNÉES ET PETITS TEXTES
   ========================================================================== */

body.modern-page .updated {
    color: #858d92 !important;
    font-size: 0.92rem !important;
    margin-top: -0.2rem !important;
}

body.modern-page .inline-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem 1rem;
    padding: 0;
    margin: 1.1rem 0 0;
    list-style: none;
}

body.modern-page .inline-links li {
    margin: 0;
    font-size: 1rem !important;
}


/* ==========================================================================
   17. ACCESSIBILITÉ
   ========================================================================== */

body.modern-page a:focus-visible,
body.modern-page button:focus-visible,
body.modern-page summary:focus-visible,
body.modern-page input:focus-visible,
body.modern-page textarea:focus-visible,
body.modern-page select:focus-visible {
    outline: 3px solid rgba(245, 106, 106, 0.42);
    outline-offset: 3px;
}

body.modern-page #main img {
    max-width: 100%;
    height: auto;
}


/* ==========================================================================
   18. RESPONSIVE
   ========================================================================== */

@media screen and (max-width: 980px) {

    body.modern-page #main h1 {
        font-size: 2.35rem !important;
    }

    body.modern-page .modern-grid,
    body.modern-page .offer-grid,
    body.modern-page .why-grid,
    body.modern-page .question-grid,
    body.modern-page .steps-grid,
    body.modern-page .fact-grid,
    body.modern-page .myth-grid,
    body.modern-page .diff-grid,
    body.modern-page .value-grid,
    body.modern-page .result-grid {
        grid-template-columns: 1fr;
    }

    body.modern-page .expert-box,
    body.modern-page .practitioner {
        grid-template-columns: 1fr;
    }

    body.modern-page .asperger-page .characteristics-grid {
        grid-template-columns: 1fr;
    }

    body.modern-page .trust-strip {
        grid-template-columns: 1fr;
        max-width: 760px;
    }
}


@media screen and (max-width: 736px) {

    body.modern-page {
        --bp-body-size: 1.02rem;
        --bp-body-line: 1.68;
    }

    body.modern-page #main h1 {
        font-size: 2rem !important;
        line-height: 1.18 !important;
    }

    body.modern-page #main h2 {
        font-size: 1.38rem !important;
    }

    body.modern-page #main h3 {
        font-size: 1.16rem !important;
    }

    body.modern-page .modern-hero,
    body.modern-page .home-hero,
    body.modern-page .hpi-hero,
    body.modern-page .screening-hero {
        padding: 2.35rem 0 2rem;
    }

    body.modern-page .modern-lead,
    body.modern-page .home-lead,
    body.modern-page .hpi-lead,
    body.modern-page .screening-lead,
    body.modern-page .asperger-page > .lead {
        font-size: 1.10rem !important;
        line-height: 1.66 !important;
    }

    body.modern-page .section-intro {
        font-size: 1.06rem !important;
    }

    body.modern-page .modern-actions,
    body.modern-page .home-actions,
    body.modern-page .hpi-actions,
    body.modern-page .screening-actions,
    body.modern-page .questionnaire-actions {
        display: block;
    }

    body.modern-page .modern-actions .button,
    body.modern-page .home-actions .button,
    body.modern-page .hpi-actions .button,
    body.modern-page .screening-actions .button,
    body.modern-page .questionnaire-actions .button {
        width: 100%;
        text-align: center;
        margin-bottom: 0.7rem !important;
    }

    body.modern-page .modern-note,
    body.modern-page .note-box,
    body.modern-page .terminology-box,
    body.modern-page .screening-box,
    body.modern-page .clinical-box,
    body.modern-page .profile-note,
    body.modern-page .expert-box,
    body.modern-page .final-cta,
    body.modern-page .purchase-box {
        padding: 1.25rem 1.2rem;
    }

    body.modern-page .hpi-questionnaire .questionnaire-intro {
        font-size: 1.10rem !important;
    }

    body.modern-page .hpi-questionnaire .questionnaire-note p {
        font-size: 1.05rem !important;
    }

    body.modern-page .hpi-questionnaire .question-group {
        padding: 1.15rem 1.05rem 0.15rem;
    }

    body.modern-page .hpi-questionnaire .question {
        font-size: 1.02rem !important;
    }

    body.modern-page .resource-links {
        columns: 1;
    }
}


/* ==========================================================================
   19. PRÉFÉRENCES DE MOUVEMENT
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    body.modern-page *,
    body.modern-page *::before,
    body.modern-page *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}


/* ==========================================================================
   20. CORRECTION PRIX DANS LES BLOCS D'ACHAT
   ========================================================================== */

body.modern-page #main .purchase-box .purchase-price {
    display: block;
    width: 100%;
    max-width: none;
    margin: 0.15rem auto 0.6rem !important;
    padding: 0;
    text-align: center;
    font-family: "Roboto Slab", serif;
    font-weight: 700;
    font-size: 2.05rem !important;
    line-height: 1.15 !important;
    color: #fff !important;
}

body.modern-page #main .purchase-box .purchase-small {
    font-size: 0.96rem !important;
    line-height: 1.6 !important;
    color: rgba(255, 255, 255, 0.76) !important;
}

@media screen and (max-width: 736px) {
    body.modern-page #main .purchase-box .purchase-price {
        font-size: 1.8rem !important;
    }
}


/* ==========================================================================
   21. BLOC D'ACHAT — CORRECTION ROBUSTE
   ========================================================================== */

body.modern-page #main .purchase-box {
    text-align: center !important;
}

body.modern-page #main .purchase-box > h2 {
    display: block !important;
    width: 100% !important;
    color: #ffffff !important;
    font-size: 1.55rem !important;
    line-height: 1.30 !important;
    text-align: center !important;
    margin: 0 0 0.85rem 0 !important;
}

body.modern-page #main .purchase-box > .purchase-price {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    color: #ffffff !important;
    font-family: "Roboto Slab", serif !important;
    font-size: 2.45rem !important;
    font-weight: 700 !important;
    line-height: 1.10 !important;
    text-align: center !important;
    margin: 0 0 0.8rem 0 !important;
    padding: 0 !important;
}

body.modern-page #main .purchase-box > p {
    margin-left: auto !important;
    margin-right: auto !important;
}

@media screen and (max-width: 736px) {
    body.modern-page #main .purchase-box > h2 {
        font-size: 1.35rem !important;
    }

    body.modern-page #main .purchase-box > .purchase-price {
        font-size: 2.05rem !important;
    }
}


/* ==========================================================================
   22. SIDEBAR — ADRESSE E-MAIL LONGUE
   ========================================================================== */

body.modern-page #sidebar .contact li {
    line-height: 1.55;
}

body.modern-page #sidebar .contact li a {
    display: inline-block;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.55;
    font-size: 1.02rem;
}

@media screen and (max-width: 1280px) {
    body.modern-page #sidebar .contact li a {
        font-size: 0.98rem;
    }
}


/* ==========================================================================
   19. HPE SCREENING HERO + PURCHASE CTA ALIGNMENT (latest)
   ========================================================================== */
body.modern-page #banner.hpe-screening-hero { padding: 3.2rem 0 2.4rem; align-items: center; }
body.modern-page #banner.hpe-screening-hero .image { height: 23rem; max-height: 23rem; margin-bottom: 0; overflow: hidden; border-radius: var(--bp-radius-lg); }
body.modern-page #banner.hpe-screening-hero .image img { width:100%; height:100%; object-fit:contain; object-position:center center; transform:scale(2.1); transform-origin:center center; }
body.modern-page .purchase-box .purchase-actions { justify-content:center; }
@media screen and (max-width:980px){ body.modern-page #banner.hpe-screening-hero{padding:2.5rem 0 2rem;} body.modern-page #banner.hpe-screening-hero .image{height:18rem;max-height:18rem;margin-bottom:2rem;} }
@media screen and (max-width:480px){ body.modern-page #banner.hpe-screening-hero .image{height:15rem;max-height:15rem;} }

/* ==========================================================================
   20. ARTICLES 10 SIGNES / 10 SOUFFRANCES
   ========================================================================== */
body.modern-page .article-modern{padding-top:2.7rem;}
body.modern-page .article-kicker{color:var(--bp-accent)!important;font-size:.84rem!important;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin:0 0 .65rem!important;}
body.modern-page .article-modern>h1{max-width:900px;margin-bottom:.9rem;}
body.modern-page .article-lead{max-width:920px;color:var(--bp-muted)!important;font-size:1.18rem!important;line-height:1.72!important;margin-bottom:1rem!important;}
body.modern-page .article-top-actions{margin-bottom:2.1rem;}
body.modern-page .article-video{max-width:920px;margin:1.2rem 0 2.35rem;}
body.modern-page .article-video .video-responsive{overflow:hidden;border:1px solid var(--bp-border);border-radius:var(--bp-radius-lg);box-shadow:0 10px 28px rgba(61,68,73,.08);background:#111;}
body.modern-page .article-video-caption{margin:.7rem 0 0!important;color:var(--bp-muted)!important;font-size:.93rem!important;}
body.modern-page .article-context{max-width:920px;margin:0 0 1.35rem;}
body.modern-page .sign-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:1.6rem 0 2.4rem;align-items:stretch;}
body.modern-page #main .sign-card{margin:0!important;padding:1.35rem 1.42rem!important;border:1px solid var(--bp-border);border-radius:var(--bp-radius-lg);background:var(--bp-white);box-shadow:0 6px 20px rgba(61,68,73,.04);line-height:1.68!important;}
body.modern-page .article-next-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
body.modern-page .article-next-card{display:flex;flex-direction:column;}
body.modern-page .article-next-card .card-link{margin-top:auto;padding-top:.55rem;font-weight:700;}
@media screen and (max-width:980px){body.modern-page .sign-list,body.modern-page .article-next-grid{grid-template-columns:1fr;}}

/* ==========================================================================
   21. DEEP EDITORIAL / SELF-DISCOVERY PAGES
   ========================================================================== */
body.modern-page .editorial-page{padding-top:2.75rem;padding-bottom:.35rem;}
body.modern-page .editorial-kicker{color:var(--bp-accent)!important;font-size:.84rem!important;font-weight:800;letter-spacing:.085em;text-transform:uppercase;margin:0 0 .65rem!important;}
body.modern-page .editorial-page h1{max-width:950px;margin:0 0 .9rem;}
body.modern-page .editorial-lead{max-width:920px;color:var(--bp-muted)!important;font-size:1.2rem!important;line-height:1.72!important;margin:0 0 1.2rem!important;}
body.modern-page .editorial-actions{margin:1.15rem 0 2rem;}
body.modern-page .editorial-video{max-width:920px;margin:1.1rem 0 1.7rem;}
body.modern-page .editorial-video .video-responsive{overflow:hidden;border-radius:var(--bp-radius-lg);border:1px solid var(--bp-border);background:#111;box-shadow:0 12px 32px rgba(61,68,73,.08);}
body.modern-page .editorial-body{max-width:1080px;}
body.modern-page .editorial-body>h2{margin-top:2.35rem;margin-bottom:.7rem;}
body.modern-page .editorial-body>p{max-width:88ch;}
body.modern-page .numbered-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:1.35rem 0 2.2rem;}
body.modern-page .numbered-card{display:flex;gap:1rem;align-items:flex-start;padding:1.28rem 1.3rem;border:1px solid var(--bp-border);border-radius:var(--bp-radius-lg);background:var(--bp-white);box-shadow:0 6px 20px rgba(61,68,73,.035);}
body.modern-page .numbered-card:hover{border-color:rgba(245,106,106,.45);}
body.modern-page .numbered-card .number-badge{flex:0 0 2.35rem;width:2.35rem;height:2.35rem;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(245,106,106,.11);color:var(--bp-accent);font-weight:800;font-family:"Roboto Slab",serif;}
body.modern-page .numbered-card h3{margin:.06rem 0 .45rem;font-size:1.08rem;}
body.modern-page .numbered-card p{margin:0!important;line-height:1.65!important;}
body.modern-page .compact-six .numbered-card{min-height:100%;}
body.modern-page .pathway-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
body.modern-page .pathway-card{display:flex;flex-direction:column;}
body.modern-page .pathway-card .card-link{margin-top:auto;padding-top:.6rem;font-weight:700;}
body.modern-page .editorial-next{padding-top:1.1rem;}
body.modern-page .image-split{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(240px,.65fr);gap:2rem;align-items:center;margin:2rem 0;padding:1.55rem;border:1px solid var(--bp-border);border-radius:var(--bp-radius-lg);background:var(--bp-soft-2);}
body.modern-page .image-split.reverse{grid-template-columns:minmax(0,1.35fr) minmax(240px,.65fr);}
body.modern-page .image-split-content h2:first-child{margin-top:0;}
body.modern-page .image-split-media img{display:block;width:100%;height:auto;max-height:340px;object-fit:contain;border-radius:var(--bp-radius);margin:0 auto;}
body.modern-page .related-posts-modern{margin-top:1.25rem;}
body.modern-page .related-posts-modern .posts article{border-radius:var(--bp-radius-lg);}

/* Screening hub */
body.modern-page .screening-hub-hero{max-width:1180px;}
body.modern-page .hub-hero-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(300px,.7fr);gap:2.4rem;align-items:center;}
body.modern-page .hub-hero-image{overflow:hidden;border-radius:var(--bp-radius-lg);background:var(--bp-soft);}
body.modern-page .hub-hero-image img{display:block;width:100%;height:auto;max-height:360px;object-fit:contain;margin:0 auto;}
body.modern-page .hub-trust{margin-top:.6rem;}
body.modern-page .screening-choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.15rem;margin:1.35rem 0 2.2rem;}
body.modern-page .screening-choice-card{overflow:hidden;border:1px solid var(--bp-border);border-radius:var(--bp-radius-lg);background:var(--bp-white);box-shadow:0 6px 20px rgba(61,68,73,.035);display:flex;flex-direction:column;}
body.modern-page .screening-choice-image{display:block;height:170px;overflow:hidden;background:var(--bp-soft);}
body.modern-page .screening-choice-image img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .25s ease;}
body.modern-page .screening-choice-card:hover .screening-choice-image img{transform:scale(1.025);}
body.modern-page .screening-choice-body{padding:1.2rem;display:flex;flex-direction:column;flex:1;}
body.modern-page .screening-choice-body h3{font-size:1.05rem;margin:0 0 .45rem;}
body.modern-page .screening-choice-body p{font-size:.98rem!important;line-height:1.58!important;margin-bottom:1rem!important;}
body.modern-page .screening-choice-body .button{margin-top:auto;align-self:flex-start;}
body.modern-page .example-grid{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:1.8rem;}

@media screen and (max-width:980px){
 body.modern-page .numbered-grid,body.modern-page .pathway-grid,body.modern-page .screening-choice-grid,body.modern-page .example-grid{grid-template-columns:1fr;}
 body.modern-page .hub-hero-grid,body.modern-page .image-split,body.modern-page .image-split.reverse{grid-template-columns:1fr;}
 body.modern-page .hub-hero-image{max-width:650px;}
 body.modern-page .hub-hero-image img{height:auto;max-height:360px;object-fit:contain;}
 body.modern-page .image-split-media{max-width:520px;}
 body.modern-page .editorial-lead{font-size:1.1rem!important;}
}
@media screen and (max-width:480px){
 body.modern-page .editorial-page{padding-top:2rem;}
 body.modern-page .numbered-card{padding:1.08rem;gap:.8rem;}
 body.modern-page .numbered-card .number-badge{flex-basis:2rem;width:2rem;height:2rem;font-size:.9rem;}
 body.modern-page .image-split{padding:1rem;}
 body.modern-page .screening-choice-image{height:150px;}
}


/* ==========================================================================
   23. INDEX HAUT POTENTIEL — HUB
   ========================================================================== */

body.modern-page .hp-index-hero {
    padding: 2.9rem 0 1.2rem;
}

body.modern-page .hp-index-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(390px, .88fr);
    gap: 2.6rem;
    align-items: center;
}

body.modern-page .hp-index-hero-copy h1 {
    max-width: 780px;
    margin-bottom: .85rem;
}

body.modern-page .hp-index-actions {
    margin: 1.25rem 0 .6rem;
}

body.modern-page .hp-index-video {
    margin: 0;
}

body.modern-page .hp-index-video .video-responsive {
    overflow: hidden;
    border-radius: var(--bp-radius-lg);
    border: 1px solid var(--bp-border);
    background: #111;
    box-shadow: 0 14px 34px rgba(61,68,73,.08);
}

body.modern-page .hp-index-video-caption {
    color: var(--bp-muted) !important;
    font-size: .92rem !important;
    line-height: 1.45 !important;
    margin: .7rem 0 0 !important;
}

body.modern-page .hp-index-trust {
    max-width: none;
    margin-top: 2rem;
}

body.modern-page .hp-index-section {
    padding-top: 2.1rem;
}

body.modern-page .hp-index-section > h2 {
    margin-bottom: .55rem;
}

body.modern-page .hp-index-section > .section-lead {
    max-width: 850px;
    color: var(--bp-muted) !important;
    margin-bottom: 1.15rem !important;
}

body.modern-page .hp-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.1rem;
    margin: 1.4rem 0 2.2rem;
}

body.modern-page .hp-form-card {
    display: flex;
    flex-direction: column;
    padding: 1.45rem;
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius-lg);
    background: var(--bp-white);
    box-shadow: 0 7px 22px rgba(61,68,73,.035);
}

body.modern-page .hp-form-card.featured {
    border: 2px solid rgba(245,106,106,.72);
}

body.modern-page .hp-form-card h3 {
    margin: 0 0 .55rem;
}

body.modern-page .hp-form-card p {
    line-height: 1.66 !important;
}

body.modern-page .hp-form-points {
    margin: .35rem 0 1.05rem;
    padding-left: 1.15rem;
}

body.modern-page .hp-form-points li {
    margin-bottom: .32rem;
}

body.modern-page .hp-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem 1rem;
    align-items: center;
    margin-top: auto;
    padding-top: .45rem;
}

body.modern-page .hp-form-actions .card-link,
body.modern-page .hp-topic-card .card-link,
body.modern-page .hp-path-card .card-link {
    font-weight: 700;
}

body.modern-page .hp-form-actions .button.small {
    padding: 0 1rem;
    height: 2.8rem;
    line-height: 2.8rem;
    font-size: .78rem;
}

body.modern-page .hp-path-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin: 1.35rem 0 1.4rem;
}

body.modern-page .hp-path-card {
    display: flex;
    flex-direction: column;
    padding: 1.3rem 1.35rem;
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius-lg);
    background: var(--bp-soft);
}

body.modern-page .hp-path-card h3 {
    margin: 0 0 .45rem;
    font-size: 1.08rem;
}

body.modern-page .hp-path-card p {
    margin-bottom: 1rem !important;
    line-height: 1.62 !important;
}

body.modern-page .hp-path-card .card-link {
    margin-top: auto;
}

body.modern-page .hp-index-note {
    max-width: 980px;
}

body.modern-page .hp-topic-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin: 1.35rem 0 1.8rem;
}

body.modern-page .hp-topic-card {
    display: flex;
    flex-direction: column;
}

body.modern-page .hp-topic-card h3 {
    font-size: 1.04rem;
}

body.modern-page .hp-topic-card .card-link {
    margin-top: auto;
    padding-top: .45rem;
}

body.modern-page .hp-index-final {
    margin-top: 2.7rem;
}

body.modern-page .hp-final-actions {
    margin-bottom: 0;
}

body.modern-page .hp-index-final .button.primary {
    background: #fff !important;
    color: var(--bp-dark) !important;
    box-shadow: inset 0 0 0 2px #fff !important;
}

@media screen and (max-width: 1100px) {
    body.modern-page .hp-index-hero-grid {
        grid-template-columns: 1fr;
        gap: 1.8rem;
    }

    body.modern-page .hp-index-video {
        max-width: 820px;
    }
}

@media screen and (max-width: 980px) {
    body.modern-page .hp-form-grid,
    body.modern-page .hp-path-grid,
    body.modern-page .hp-topic-grid {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 480px) {
    body.modern-page .hp-index-hero {
        padding-top: 2rem;
    }

    body.modern-page .hp-form-card,
    body.modern-page .hp-path-card {
        padding: 1.15rem;
    }
}


/* Ajustement d'espacement entre les formes de Haut Potentiel */
body.modern-page .hp-form-grid {
    row-gap: 1.75rem;
}

body.modern-page .hp-form-card {
    margin-bottom: 0 !important;
}

body.modern-page .hp-form-card .hp-form-actions {
    padding-bottom: 0.35rem;
}

body.modern-page .hp-form-card + .hp-form-card {
    margin-top: 0.25rem !important;
}

@media screen and (max-width: 980px) {
    body.modern-page .hp-form-grid {
        row-gap: 2rem;
    }
}


/* ==========================================================================
   24. ARTICLES HAUT POTENTIEL — MODERNISATION ÉDITORIALE PREMIUM
   ========================================================================== */

body.modern-page.deep-article-page .deep-article-hero {
    padding: 2.8rem 0 1.5rem;
}

body.modern-page.deep-article-page .deep-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(360px, .96fr);
    gap: 2.5rem;
    align-items: center;
}

body.modern-page.deep-article-page .deep-hero-copy h1 {
    max-width: 820px;
    margin: .2rem 0 .85rem;
}

body.modern-page.deep-article-page .deep-hero-actions {
    margin: 1.3rem 0 0;
}

body.modern-page.deep-article-page .deep-hero-visual {
    min-width: 0;
}

body.modern-page.deep-article-page .deep-hero-visual .video-responsive {
    overflow: hidden;
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius-lg);
    background: #111;
    box-shadow: 0 14px 34px rgba(61,68,73,.08);
}

body.modern-page.deep-article-page .deep-hero-visual > img {
    display: block;
    width: 100%;
    max-height: 390px;
    object-fit: contain;
    border-radius: var(--bp-radius-lg);
    background: var(--bp-soft);
}

body.modern-page.deep-article-page .deep-note-section {
    padding: .7rem 0 .9rem;
}

body.modern-page.deep-article-page .deep-clinical-box {
    max-width: 980px;
}

body.modern-page.deep-article-page .deep-clinical-box h2 {
    font-size: 1.2rem;
    margin-bottom: .5rem;
}

body.modern-page.deep-article-page .deep-article {
    padding-top: 1rem;
}

body.modern-page.deep-article-page .deep-content-block,
body.modern-page.deep-article-page .deep-preserved-split {
    margin: 0 0 2.25rem;
    padding: 0;
    border: 0;
}

body.modern-page.deep-article-page .deep-content-block > h2:first-child,
body.modern-page.deep-article-page .deep-preserved-split .content > h2:first-child {
    margin-top: 0;
}

body.modern-page.deep-article-page .deep-preserved-split {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr);
    gap: 2rem;
    align-items: center;
    padding: 1.55rem;
    background: var(--bp-soft);
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius-lg);
}

body.modern-page.deep-article-page .deep-preserved-split .image.object {
    margin: 0;
    min-height: 0;
}

body.modern-page.deep-article-page .deep-preserved-split .image.object img {
    display: block;
    width: 100%;
    max-height: 360px;
    object-fit: contain;
    border-radius: var(--bp-radius-md);
}

body.modern-page.deep-article-page .deep-article img {
    max-width: 100%;
    height: auto;
    border-radius: var(--bp-radius-md);
}

body.modern-page.deep-article-page .deep-article .video-responsive {
    max-width: 900px;
    margin: 1.25rem 0 1.7rem;
    overflow: hidden;
    border-radius: var(--bp-radius-lg);
    background: #111;
    box-shadow: 0 10px 26px rgba(61,68,73,.06);
}

body.modern-page.deep-article-page .modern-list {
    margin: .85rem 0 1.5rem;
}

body.modern-page.deep-article-page .modern-list li {
    margin-bottom: .52rem;
    line-height: 1.62;
}

/* Long numbered articles */
body.modern-page.deep-article-page .numbered-topic-card {
    margin: 1rem 0;
    padding: 1.25rem 1.35rem;
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius-lg);
    background: #fff;
    box-shadow: 0 6px 20px rgba(61,68,73,.035);
}

body.modern-page.deep-article-page .numbered-topic-card > h2,
body.modern-page.deep-article-page .numbered-topic-card > h3 {
    margin: 0 0 .55rem;
    color: var(--bp-heading);
    font-size: 1.12rem;
}

body.modern-page.deep-article-page .numbered-topic-card > :last-child {
    margin-bottom: 0 !important;
}

body.modern-page.deep-article-page p.trait-card {
    margin: .85rem 0 !important;
    padding: 1.12rem 1.25rem !important;
    border-left: 3px solid rgba(245,106,106,.72);
    border-radius: 0 var(--bp-radius-md) var(--bp-radius-md) 0;
    background: var(--bp-soft);
}

/* Comparison tables */
body.modern-page.deep-article-page .table-scroll {
    width: 100%;
    overflow-x: auto;
    margin: 1.1rem 0 2rem;
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius-lg);
    background: #fff;
}

body.modern-page.deep-article-page table.modern-comparison {
    width: 100%;
    min-width: 680px;
    margin: 0;
    border-collapse: collapse;
}

body.modern-page.deep-article-page table.modern-comparison td,
body.modern-page.deep-article-page table.modern-comparison th {
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--bp-border);
    vertical-align: top;
    line-height: 1.5;
}

body.modern-page.deep-article-page table.modern-comparison tr:first-child td {
    font-family: "Roboto Slab", serif;
    font-size: 1.08rem;
    background: var(--bp-soft);
}

body.modern-page.deep-article-page table.modern-comparison td:nth-child(2) {
    background: rgba(245,106,106,.035);
}

body.modern-page.deep-article-page table.modern-comparison tr:first-child td:nth-child(2) {
    box-shadow: inset 0 -2px 0 rgba(245,106,106,.65);
}

/* Related cards */
body.modern-page.deep-article-page .deep-related-section,
body.modern-page.deep-article-page .deep-faq-section {
    padding-top: 2.1rem;
}

body.modern-page.deep-article-page .deep-related-section > h2,
body.modern-page.deep-article-page .deep-faq-section > h2 {
    margin-bottom: .55rem;
}

body.modern-page.deep-article-page .deep-related-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 1rem;
    margin-top: 1.25rem;
}

body.modern-page.deep-article-page .deep-related-card {
    display: flex;
    flex-direction: column;
}

body.modern-page.deep-article-page .deep-related-card h3 {
    font-size: 1.05rem;
}

body.modern-page.deep-article-page .deep-related-card .card-link {
    margin-top: auto;
    padding-top: .55rem;
    font-weight: 700;
}

body.modern-page.deep-article-page .deep-final-cta {
    margin-top: 2.8rem;
}

body.modern-page.deep-article-page .deep-final-actions {
    margin-bottom: 0;
    justify-content: center;
}

body.modern-page.deep-article-page .deep-final-cta .button.primary {
    background: #fff !important;
    color: var(--bp-dark) !important;
    box-shadow: inset 0 0 0 2px #fff !important;
}

/* HPE gets a very discreet accent on HPI/HPE comparison */
body.modern-page.deep-article-page table.modern-comparison tr:first-child td:nth-child(2) strong,
body.modern-page.deep-article-page table.modern-comparison tr:first-child td:nth-child(2) b {
    color: var(--bp-accent);
}

@media screen and (max-width: 1100px) {
    body.modern-page.deep-article-page .deep-hero-grid {
        grid-template-columns: 1fr;
        gap: 1.7rem;
    }

    body.modern-page.deep-article-page .deep-hero-visual {
        max-width: 840px;
    }
}

@media screen and (max-width: 980px) {
    body.modern-page.deep-article-page .deep-preserved-split,
    body.modern-page.deep-article-page .deep-related-grid {
        grid-template-columns: 1fr;
    }

    body.modern-page.deep-article-page .deep-preserved-split .image.object {
        max-width: 560px;
    }
}

@media screen and (max-width: 480px) {
    body.modern-page.deep-article-page .deep-article-hero {
        padding-top: 2rem;
    }

    body.modern-page.deep-article-page .numbered-topic-card,
    body.modern-page.deep-article-page p.trait-card {
        padding: 1rem !important;
    }
}


/* ==========================================================================
   25. PERFECTIONNISME — ESPACEMENT ET BLOC CENTRAL
   ========================================================================== */

/* Override the generous default section spacing from Editorial for this
   article sequence. */
body.modern-page.deep-article-page #main > .inner > section.deep-note-section {
    padding: 1.35rem 0 1.45rem !important;
    margin: 0 !important;
    border-top: 0 !important;
}

body.modern-page.deep-article-page #main > .inner > section.deep-note-section .deep-clinical-box {
    margin: 0 !important;
}

body.modern-page.deep-article-page #main > .inner > section.deep-article {
    padding: 1.8rem 0 2.6rem !important;
    margin: 0 !important;
    border-top: 1px solid var(--bp-border) !important;
}

/* After removing the decorative torso image, keep this section visually
   distinct without creating empty vertical space. */
body.modern-page.deep-article-page .perfectionism-core-card {
    max-width: 920px;
    margin: 1.2rem 0 2rem !important;
    padding: 1.45rem 1.55rem !important;
    background: var(--bp-soft);
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius-lg);
}

body.modern-page.deep-article-page .perfectionism-core-card .content {
    width: 100%;
    max-width: none;
}

body.modern-page.deep-article-page .perfectionism-core-card h2:first-child {
    margin-top: 0;
}

body.modern-page.deep-article-page .perfectionism-core-card > :last-child,
body.modern-page.deep-article-page .perfectionism-core-card .content > :last-child {
    margin-bottom: 0 !important;
}

@media screen and (max-width: 480px) {
    body.modern-page.deep-article-page .perfectionism-core-card {
        padding: 1.15rem !important;
    }
}


/* ==========================================================================
   26. ARTICLES MODERNISÉS — RESPIRATION AUTOUR DES IMAGES
   ========================================================================== */

/* Give editorial images a little breathing room without loosening
   the overall rhythm of the article. */
body.modern-page.deep-article-page .deep-article img {
    margin-top: 1.4rem;
    margin-bottom: 1.5rem;
}

/* Images that are already positioned inside designed split cards
   should not receive the generic vertical margins. */
body.modern-page.deep-article-page .deep-preserved-split .image.object img,
body.modern-page.deep-article-page .perfectionism-core-card img {
    margin-top: 0;
    margin-bottom: 0;
}

/* Avoid extra space when an image is the first or last element
   of an image wrapper. */
body.modern-page.deep-article-page .deep-article .image > img {
    display: block;
}


/* ==========================================================================
   27. ARTICLES MODERNISÉS — CTA FINAL COMPACT ET ÉLÉGANT
   ========================================================================== */

body.modern-page.deep-article-page #main > .inner > section.deep-final-cta {
    margin: 2.2rem 0 0 !important;
    padding: 2rem 2.2rem !important;
    min-height: 0 !important;
    border-radius: var(--bp-radius-lg);
    text-align: center;
}

body.modern-page.deep-article-page .deep-final-cta h2 {
    display: block !important;
    margin: 0 0 .75rem !important;
    color: #fff !important;
    font-size: 1.55rem !important;
    line-height: 1.35 !important;
}

body.modern-page.deep-article-page .deep-final-cta > p {
    max-width: 820px;
    margin: 0 auto 1.35rem !important;
    color: rgba(255,255,255,.93) !important;
    font-size: 1.02rem !important;
    line-height: 1.65 !important;
    text-align: center;
}

body.modern-page.deep-article-page .deep-final-actions {
    display: flex;
    justify-content: center !important;
    align-items: center;
    gap: .8rem;
    flex-wrap: wrap;
    margin: 0 !important;
}

body.modern-page.deep-article-page .deep-final-actions .button {
    margin: 0 !important;
    min-width: 220px;
}

body.modern-page.deep-article-page .deep-final-cta .button.primary {
    background: #fff !important;
    color: var(--bp-dark) !important;
    box-shadow: inset 0 0 0 2px #fff !important;
}

body.modern-page.deep-article-page .deep-final-cta .button:not(.primary) {
    background: transparent !important;
    color: #fff !important;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.82) !important;
}

body.modern-page.deep-article-page .deep-final-cta .button:not(.primary):hover {
    box-shadow: inset 0 0 0 2px #fff !important;
}

@media screen and (max-width: 600px) {
    body.modern-page.deep-article-page #main > .inner > section.deep-final-cta {
        padding: 1.55rem 1.15rem !important;
    }

    body.modern-page.deep-article-page .deep-final-actions {
        display: block;
    }

    body.modern-page.deep-article-page .deep-final-actions .button {
        width: 100%;
        min-width: 0;
        margin: .4rem 0 !important;
    }
}


/* ==========================================================================
   28. SUIS-JE EMPATHIQUE — PAGE DÉDIÉE
   ========================================================================== */

body.modern-page.empathy-page .empathy-hero {
    padding: 2.65rem 0 1.75rem;
}

body.modern-page.empathy-page .empathy-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(330px, .92fr);
    gap: 2.6rem;
    align-items: start;
}

body.modern-page.empathy-page .empathy-hero-copy {
    padding-top: .2rem;
}

body.modern-page.empathy-page .empathy-hero-copy h1 {
    margin: .15rem 0 .25rem;
}

body.modern-page.empathy-page .empathy-subtitle {
    margin: 0 0 1.15rem !important;
    color: var(--bp-accent) !important;
    font-family: "Roboto Slab", serif;
    font-size: 1.18rem !important;
    font-weight: 700;
}

body.modern-page.empathy-page .empathy-hero-visual img {
    display: block;
    width: 100%;
    max-height: 360px;
    object-fit: cover;
    object-position: center;
    margin: 0 !important;
    border-radius: var(--bp-radius-lg);
    box-shadow: 0 12px 30px rgba(61,68,73,.07);
}

body.modern-page.empathy-page .empathy-hero-actions {
    margin-top: 1.2rem;
}

body.modern-page.empathy-page .empathy-intro,
body.modern-page.empathy-page .empathy-dimensions,
body.modern-page.empathy-page .empathy-self,
body.modern-page.empathy-page .empathy-hpe-bridge {
    padding-top: 1.8rem;
}

body.modern-page.empathy-page .empathy-note {
    margin-top: 1.2rem;
}

body.modern-page.empathy-page .empathy-dimension-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 1rem;
    margin: 1.3rem 0 .5rem;
}

body.modern-page.empathy-page .empathy-dimension-card {
    position: relative;
    padding: 1.45rem 1.35rem 1.3rem;
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius-lg);
    background: #fff;
    box-shadow: 0 7px 22px rgba(61,68,73,.035);
}

body.modern-page.empathy-page .empathy-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin-bottom: .85rem;
    border-radius: 50%;
    background: rgba(245,106,106,.12);
    color: var(--bp-accent);
    font-weight: 800;
}

body.modern-page.empathy-page .empathy-dimension-card h3 {
    margin-bottom: .35rem;
    font-size: 1.08rem;
}

body.modern-page.empathy-page .empathy-dimension-subtitle {
    color: var(--bp-heading) !important;
    font-weight: 700;
    line-height: 1.5 !important;
}

body.modern-page.empathy-page .empathy-questions {
    max-width: 900px;
}

body.modern-page.empathy-page .empathy-hpe-box {
    max-width: 980px;
}

body.modern-page.empathy-page .empathy-box-actions {
    margin: 1.1rem 0 0;
}

@media screen and (max-width: 1050px) {
    body.modern-page.empathy-page .empathy-hero-grid {
        grid-template-columns: 1fr;
        gap: 1.6rem;
    }

    body.modern-page.empathy-page .empathy-hero-visual {
        max-width: 680px;
    }
}

@media screen and (max-width: 900px) {
    body.modern-page.empathy-page .empathy-dimension-grid {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================================
   29. SUIS-JE EMPATHIQUE — RECONSTRUCTION DÉFINITIVE
   ========================================================================== */

body.modern-page.empathy-page #main > .inner > .empathy-hero-fixed {
    padding-top: 2.5rem !important;
    margin-top: 0 !important;
    border-top: 0 !important;
}

body.modern-page.empathy-page .empathy-core-section,
body.modern-page.empathy-page .empathy-editorial-section {
    padding: 2rem 0 !important;
    margin: 0 !important;
}

body.modern-page.empathy-page .empathy-core-section {
    border-top: 1px solid var(--bp-border);
}

body.modern-page.empathy-page .empathy-editorial-section + .empathy-editorial-section {
    border-top: 1px solid var(--bp-border);
}

body.modern-page.empathy-page .empathy-editorial-section > h2 {
    margin-bottom: .7rem;
}

body.modern-page.empathy-page .empathy-editorial-section > p {
    max-width: 980px;
    line-height: 1.72 !important;
}

body.modern-page.empathy-page .empathy-suffering-box {
    max-width: 980px;
    margin: 0 !important;
}

body.modern-page.empathy-page .empathy-suffering-box h2 {
    font-size: 1.28rem;
    margin-bottom: .6rem;
}

body.modern-page.empathy-page .empathy-dimension-card > p:last-child {
    margin-bottom: 0 !important;
}

@media screen and (max-width: 900px) {
    body.modern-page.empathy-page .empathy-dimension-grid {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================================
   30. SUIS-JE EMPATHIQUE — RYTHME ET NUMÉROTATION
   ========================================================================== */

/* Number and title share one clean line. */
body.modern-page.empathy-page .empathy-card-heading {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-bottom: .55rem;
}

body.modern-page.empathy-page .empathy-card-heading .empathy-number {
    flex: 0 0 2rem;
    margin: 0;
}

body.modern-page.empathy-page .empathy-card-heading h3 {
    margin: 0 !important;
    line-height: 1.35;
}

/* Tighter editorial rhythm between the major sections. */
body.modern-page.empathy-page .empathy-core-section,
body.modern-page.empathy-page .empathy-editorial-section,
body.modern-page.empathy-page .empathy-hpe-bridge,
body.modern-page.empathy-page .deep-related-section,
body.modern-page.empathy-page .deep-faq-section {
    padding-top: 1.35rem !important;
    padding-bottom: 1.35rem !important;
}

body.modern-page.empathy-page .empathy-editorial-section + .empathy-editorial-section {
    border-top: 1px solid var(--bp-border);
}

body.modern-page.empathy-page .empathy-editorial-section > h2,
body.modern-page.empathy-page .empathy-hpe-bridge h2,
body.modern-page.empathy-page .deep-related-section > h2,
body.modern-page.empathy-page .deep-faq-section > h2 {
    margin-bottom: .55rem;
}

body.modern-page.empathy-page .empathy-editorial-section > p {
    margin-bottom: 0 !important;
}

/* Slightly reduce the empty gap below the three-card block. */
body.modern-page.empathy-page .empathy-dimension-grid {
    margin-bottom: .2rem;
}


/* ==========================================================================
   31. HYPERESTHÉSIE — PAGE DÉDIÉE
   ========================================================================== */

body.modern-page.hyperesthesia-page .hyperesthesia-hero {
    padding: 2.55rem 0 1.45rem !important;
    margin-top: 0 !important;
    border-top: 0 !important;
}

body.modern-page.hyperesthesia-page .hyperesthesia-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
    gap: 2.6rem;
    align-items: center;
}

body.modern-page.hyperesthesia-page .hyperesthesia-hero-copy h1 {
    margin: .15rem 0 .35rem;
}

body.modern-page.hyperesthesia-page .hyperesthesia-subtitle {
    margin: 0 0 1.15rem !important;
    color: var(--bp-accent) !important;
    font-family: "Roboto Slab", serif;
    font-size: 1.14rem !important;
    font-weight: 700;
}

body.modern-page.hyperesthesia-page .hyperesthesia-hero-visual img {
    display: block;
    width: 100%;
    height: 330px;
    object-fit: cover;
    margin: 0 !important;
    border-radius: var(--bp-radius-lg);
    box-shadow: 0 12px 30px rgba(61,68,73,.07);
}

body.modern-page.hyperesthesia-page .hyperesthesia-actions {
    margin-top: 1.2rem;
}

body.modern-page.hyperesthesia-page .hyperesthesia-intro {
    padding: 1.1rem 0 1.35rem !important;
}

body.modern-page.hyperesthesia-page .hyperesthesia-note {
    max-width: 100% !important;
    margin: 0 !important;
}

body.modern-page.hyperesthesia-page .hyperesthesia-note h2 {
    font-size: 1.24rem;
    margin-bottom: .55rem;
}

body.modern-page.hyperesthesia-page .hyperesthesia-senses,
body.modern-page.hyperesthesia-page .hyperesthesia-editorial-section,
body.modern-page.hyperesthesia-page .deep-related-section,
body.modern-page.hyperesthesia-page .deep-faq-section {
    padding-top: 1.45rem !important;
    padding-bottom: 1.45rem !important;
    margin: 0 !important;
}

body.modern-page.hyperesthesia-page .hyperesthesia-sense-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .9rem;
    margin-top: 1.1rem;
}

body.modern-page.hyperesthesia-page .hyperesthesia-sense-card {
    padding: 1.15rem 1.2rem;
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius-lg);
    background: #fff;
    box-shadow: 0 5px 18px rgba(61,68,73,.03);
}

body.modern-page.hyperesthesia-page .hyperesthesia-sense-card h3 {
    margin: 0 0 .4rem;
    font-size: 1.02rem;
}

body.modern-page.hyperesthesia-page .hyperesthesia-sense-card p {
    margin: 0 !important;
    line-height: 1.62 !important;
}

body.modern-page.hyperesthesia-page .hyperesthesia-editorial-section {
    border-top: 1px solid var(--bp-border);
}

body.modern-page.hyperesthesia-page .hyperesthesia-editorial-section > h2 {
    margin-bottom: .6rem;
}

body.modern-page.hyperesthesia-page .hyperesthesia-editorial-section > p:last-child {
    margin-bottom: 0 !important;
}

@media screen and (max-width: 1050px) {
    body.modern-page.hyperesthesia-page .hyperesthesia-hero-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    body.modern-page.hyperesthesia-page .hyperesthesia-hero-visual {
        max-width: 720px;
    }
}

@media screen and (max-width: 780px) {
    body.modern-page.hyperesthesia-page .hyperesthesia-sense-grid {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================================
   32. HYPERESTHÉSIE — RYTHME VERTICAL RESSERRÉ
   ========================================================================== */

/* Neutralise les grands espacements hérités du template Editorial. */
body.modern-page.hyperesthesia-page #main > .inner > section {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Hero plus proche de la suite. */
body.modern-page.hyperesthesia-page #main > .inner > section.hyperesthesia-hero {
    padding-top: 2.35rem !important;
    padding-bottom: .75rem !important;
}

/* Encadré introductif : respiration courte, pas de grand vide. */
body.modern-page.hyperesthesia-page #main > .inner > section.hyperesthesia-intro {
    padding-top: .65rem !important;
    padding-bottom: .8rem !important;
    border-top: 0 !important;
}

body.modern-page.hyperesthesia-page .hyperesthesia-note {
    margin: 0 !important;
}

/* Les sections éditoriales s'enchaînent plus naturellement. */
body.modern-page.hyperesthesia-page #main > .inner > section.hyperesthesia-senses,
body.modern-page.hyperesthesia-page #main > .inner > section.hyperesthesia-editorial-section,
body.modern-page.hyperesthesia-page #main > .inner > section.deep-related-section,
body.modern-page.hyperesthesia-page #main > .inner > section.deep-faq-section {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    border-top: 1px solid var(--bp-border) !important;
}

/* Réduit aussi le vide interne juste avant/après les titres. */
body.modern-page.hyperesthesia-page .hyperesthesia-senses > h2,
body.modern-page.hyperesthesia-page .hyperesthesia-editorial-section > h2,
body.modern-page.hyperesthesia-page .deep-related-section > h2,
body.modern-page.hyperesthesia-page .deep-faq-section > h2 {
    margin-top: 0 !important;
    margin-bottom: .45rem !important;
}

body.modern-page.hyperesthesia-page .hyperesthesia-senses > .section-lead,
body.modern-page.hyperesthesia-page .deep-related-section > .section-lead {
    margin-bottom: .8rem !important;
}

body.modern-page.hyperesthesia-page .hyperesthesia-sense-grid {
    margin-top: .75rem !important;
    margin-bottom: 0 !important;
}

/* CTA final : rapproché de la FAQ sans coller. */
body.modern-page.hyperesthesia-page #main > .inner > section.deep-final-cta {
    margin-top: 1.35rem !important;
}


/* ==========================================================================
   33. NOUVELLES PAGES HP / HPE — MISE EN PAGE PREMIUM COMPACTE
   ========================================================================== */

body.modern-page .premium-hero {
    padding: 2.45rem 0 1rem !important;
    margin: 0 !important;
    border-top: 0 !important;
}

body.modern-page .premium-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(360px, .96fr);
    gap: 2.35rem;
    align-items: center;
}

body.modern-page .premium-hero-copy h1 {
    margin: .15rem 0 .45rem;
}

body.modern-page .premium-subtitle {
    margin: 0 0 1rem !important;
    color: var(--bp-accent) !important;
    font-family: "Roboto Slab", serif;
    font-weight: 700;
    font-size: 1.1rem !important;
}

body.modern-page .premium-hero-actions {
    margin: 1.15rem 0 0;
}

body.modern-page .premium-hero-visual .video-responsive {
    overflow: hidden;
    border-radius: var(--bp-radius-lg);
    background: #111;
    box-shadow: 0 12px 30px rgba(61,68,73,.07);
}

body.modern-page .premium-hero-visual > img {
    display: block;
    width: 100%;
    max-height: 345px;
    object-fit: contain;
    margin: 0 !important;
    border-radius: var(--bp-radius-lg);
    background: var(--bp-soft);
}

body.modern-page #main > .inner > section.compact-section {
    padding: 1.05rem 0 !important;
    margin: 0 !important;
    border-top: 1px solid var(--bp-border);
}

body.modern-page #main > .inner > section.compact-section:first-of-type {
    border-top: 0;
}

body.modern-page .full-clinical {
    max-width: 100% !important;
    margin: 0 !important;
}

body.modern-page .full-clinical h2 {
    margin-bottom: .5rem;
    font-size: 1.25rem;
}

body.modern-page .compact-video {
    max-width: 840px;
    margin: 1rem 0 .25rem !important;
    overflow: hidden;
    border-radius: var(--bp-radius-lg);
    background: #111;
}

body.modern-page .comparison-section .table-scroll {
    margin-bottom: .2rem;
}

/* HPC trait list */
body.modern-page .trait-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: .75rem;
    margin: .9rem 0 .2rem;
}

body.modern-page .trait-chip {
    padding: .9rem 1rem;
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius-md);
    background: var(--bp-soft);
    line-height: 1.5;
}

/* HPE resources / kindness */
body.modern-page .numbered-resource-grid,
body.modern-page .seven-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: .85rem;
    margin-top: .9rem;
}

body.modern-page .numbered-resource-card,
body.modern-page .seven-card {
    padding: 1.15rem 1.2rem;
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius-lg);
    background: #fff;
    box-shadow: 0 5px 18px rgba(61,68,73,.03);
}

body.modern-page .numbered-resource-heading,
body.modern-page .seven-card-heading {
    display: flex;
    gap: .7rem;
    align-items: center;
    margin-bottom: .5rem;
}

body.modern-page .resource-number {
    flex: 0 0 2rem;
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(245,106,106,.12);
    color: var(--bp-accent);
    font-weight: 800;
}

body.modern-page .numbered-resource-heading h3,
body.modern-page .seven-card-heading h3 {
    margin: 0 !important;
    font-size: 1.03rem;
    line-height: 1.35;
}

body.modern-page .numbered-resource-card p,
body.modern-page .seven-card p {
    margin-bottom: 0 !important;
    line-height: 1.62 !important;
}

body.modern-page .hpe-accent-box {
    border-left-color: var(--bp-accent);
}

/* Avoid the excessive vertical rhythm seen in older pages */
body.modern-page.hp-asperger-page #main > .inner > section,
body.modern-page.hpc-page #main > .inner > section,
body.modern-page.hpe-problems-page #main > .inner > section,
body.modern-page.hpe-kindness-page #main > .inner > section {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

body.modern-page.hp-asperger-page .deep-related-section,
body.modern-page.hpc-page .deep-related-section,
body.modern-page.hpe-problems-page .deep-related-section,
body.modern-page.hpe-kindness-page .deep-related-section,
body.modern-page.hp-asperger-page .deep-faq-section,
body.modern-page.hpc-page .deep-faq-section,
body.modern-page.hpe-problems-page .deep-faq-section,
body.modern-page.hpe-kindness-page .deep-faq-section {
    padding-top: 1.15rem !important;
    padding-bottom: 1.15rem !important;
}

@media screen and (max-width: 1050px) {
    body.modern-page .premium-hero-grid {
        grid-template-columns: 1fr;
        gap: 1.4rem;
    }

    body.modern-page .premium-hero-visual {
        max-width: 760px;
    }
}

@media screen and (max-width: 820px) {
    body.modern-page .trait-grid,
    body.modern-page .numbered-resource-grid,
    body.modern-page .seven-card-grid {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================================
   34. HPE PROBLÈMES — NUMÉROTATION SIMPLIFIÉE
   ========================================================================== */

body.modern-page.hpe-problems-page .numbered-resource-heading {
    display: block;
    margin-bottom: .55rem;
}

body.modern-page.hpe-problems-page .situation-label {
    display: inline-block;
    margin-bottom: .32rem;
    color: var(--bp-accent);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

body.modern-page.hpe-problems-page .numbered-resource-heading h3 {
    margin: 0 !important;
}


/* ==========================================================================
   35. HPE PROBLÈMES — REPÈRES "SITUATION" PLUS VISIBLES
   ========================================================================== */

body.modern-page.hpe-problems-page .situation-label {
    display: inline-block;
    margin: 0 0 .48rem 0;
    padding: .34rem .62rem;
    border-radius: 999px;
    background: rgba(245,106,106,.12);
    color: var(--bp-accent);
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .055em;
    line-height: 1;
    text-transform: uppercase;
}

body.modern-page.hpe-problems-page .numbered-resource-heading h3 {
    margin: 0 !important;
    font-size: 1.08rem;
    line-height: 1.35;
}


/* ==========================================================================
   36. QUATRE PAGES HAUT POTENTIEL — VERSION PREMIUM 2
   ========================================================================== */

body.modern-page.premium2-page #main > .inner > section {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

body.modern-page.premium2-page .p2-hero {
    padding: 2.35rem 0 1rem !important;
    border-top: 0 !important;
}

body.modern-page.premium2-page .p2-hero-grid {
    display: grid;
    grid-template-columns: minmax(0,1.06fr) minmax(360px,.94fr);
    gap: 2.35rem;
    align-items: center;
}

body.modern-page.premium2-page .p2-hero-copy h1 {
    margin: .15rem 0 .35rem;
}

body.modern-page.premium2-page .p2-subtitle {
    margin: 0 0 1rem !important;
    color: var(--bp-accent) !important;
    font-family: "Roboto Slab", serif;
    font-weight: 700;
    font-size: 1.1rem !important;
}

body.modern-page.premium2-page .p2-actions {
    margin: 1.15rem 0 0;
}

body.modern-page.premium2-page .p2-hero-visual .video-responsive {
    overflow: hidden;
    border-radius: var(--bp-radius-lg);
    background: #111;
    box-shadow: 0 12px 30px rgba(61,68,73,.07);
}

body.modern-page.premium2-page .p2-hero-visual > img {
    display: block;
    width: 100%;
    max-height: 350px;
    object-fit: contain;
    margin: 0 !important;
    border-radius: var(--bp-radius-lg);
    background: var(--bp-soft);
}

body.modern-page.premium2-page #main > .inner > .p2-section {
    padding: 1.05rem 0 !important;
    border-top: 1px solid var(--bp-border);
}

body.modern-page.premium2-page .p2-callout {
    max-width: 100% !important;
    margin: 0 !important;
}

body.modern-page.premium2-page .p2-callout h2 {
    margin-bottom: .5rem;
    font-size: 1.25rem;
}

body.modern-page.premium2-page .p2-callout-accent {
    border-left-color: var(--bp-accent);
}

body.modern-page.premium2-page .p2-card-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: .85rem;
    margin-top: .85rem;
}

body.modern-page.premium2-page .p2-number-card {
    padding: 1.12rem 1.2rem;
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius-lg);
    background: #fff;
    box-shadow: 0 5px 18px rgba(61,68,73,.03);
}

body.modern-page.premium2-page .p2-label {
    display: inline-block;
    margin-bottom: .45rem;
    padding: .34rem .62rem;
    border-radius: 999px;
    background: rgba(245,106,106,.12);
    color: var(--bp-accent);
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .045em;
    text-transform: uppercase;
    line-height: 1;
}

body.modern-page.premium2-page .p2-number-card h3 {
    margin: 0 0 .45rem;
    font-size: 1.06rem;
}

body.modern-page.premium2-page .p2-card-text {
    margin: 0 !important;
    line-height: 1.62 !important;
}

body.modern-page.premium2-page .p2-three-grid,
body.modern-page.premium2-page .p2-two-grid {
    display: grid;
    gap: .85rem;
    margin-top: .85rem;
}

body.modern-page.premium2-page .p2-three-grid {
    grid-template-columns: repeat(3,minmax(0,1fr));
}

body.modern-page.premium2-page .p2-two-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
}

body.modern-page.premium2-page .p2-three-card,
body.modern-page.premium2-page .p2-concept-card {
    padding: 1.12rem 1.2rem;
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius-lg);
    background: var(--bp-soft);
}

body.modern-page.premium2-page .p2-inline-heading {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: .5rem;
}

body.modern-page.premium2-page .p2-inline-heading h3,
body.modern-page.premium2-page .p2-concept-card h3 {
    margin: 0 !important;
    font-size: 1.05rem;
}

body.modern-page.premium2-page .p2-round {
    flex: 0 0 2rem;
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: rgba(245,106,106,.12);
    color: var(--bp-accent);
    font-weight: 800;
}

body.modern-page.premium2-page .p2-prose > h2 {
    margin-bottom: .55rem;
}

body.modern-page.premium2-page .p2-prose > p:last-child,
body.modern-page.premium2-page .p2-three-card > p:last-child,
body.modern-page.premium2-page .p2-concept-card > p:last-child {
    margin-bottom: 0 !important;
}

body.modern-page.premium2-page .p2-inline-video {
    max-width: 860px;
    margin: 0 !important;
    overflow: hidden;
    border-radius: var(--bp-radius-lg);
    background: #111;
}

body.modern-page.premium2-page .p2-related .deep-related-grid {
    margin-top: .8rem;
}

body.modern-page.premium2-page .p2-faq {
    padding-bottom: 1.25rem !important;
}

body.modern-page.premium2-page .p2-final {
    margin-top: 1.35rem !important;
}

/* Slight HPE emphasis on the women's page */
body.modern-page.gifted-woman-page .p2-actions .button.primary {
    box-shadow: inset 0 0 0 2px var(--bp-accent) !important;
}

@media screen and (max-width: 1050px) {
    body.modern-page.premium2-page .p2-hero-grid {
        grid-template-columns: 1fr;
        gap: 1.4rem;
    }
    body.modern-page.premium2-page .p2-hero-visual {
        max-width: 760px;
    }
}

@media screen and (max-width: 820px) {
    body.modern-page.premium2-page .p2-card-grid,
    body.modern-page.premium2-page .p2-three-grid,
    body.modern-page.premium2-page .p2-two-grid {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================================
   37. PREMIUM 2 — CTA FINAL COMPACT ET ÉQUILIBRÉ
   ========================================================================== */

/* Le vieux template Editorial applique un énorme padding aux <section>.
   Cette règle l'écrase explicitement pour les CTA finaux. */
body.modern-page.premium2-page #main > .inner > section.p2-final {
    display: block !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 1.25rem 0 0 !important;
    padding: 1.65rem 1.9rem !important;
    border-top: 0 !important;
    border-radius: var(--bp-radius-lg) !important;
    text-align: center !important;
}

body.modern-page.premium2-page .p2-final h2 {
    display: block !important;
    visibility: visible !important;
    color: #fff !important;
    margin: 0 0 .55rem !important;
    padding: 0 !important;
    font-size: 1.45rem !important;
    line-height: 1.35 !important;
    text-align: center !important;
}

body.modern-page.premium2-page .p2-final > p {
    display: block !important;
    max-width: 820px !important;
    margin: 0 auto 1.15rem !important;
    padding: 0 !important;
    color: rgba(255,255,255,.92) !important;
    font-size: 1rem !important;
    line-height: 1.58 !important;
    text-align: center !important;
}

body.modern-page.premium2-page .p2-final .deep-final-actions {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: .75rem !important;
    flex-wrap: wrap !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.modern-page.premium2-page .p2-final .deep-final-actions .button {
    margin: 0 !important;
    min-width: 220px;
}

body.modern-page.premium2-page .p2-final .button.primary {
    background: #fff !important;
    color: var(--bp-dark) !important;
    box-shadow: inset 0 0 0 2px #fff !important;
}

body.modern-page.premium2-page .p2-final .button:not(.primary) {
    background: transparent !important;
    color: #fff !important;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.8) !important;
}

body.modern-page.premium2-page .p2-final .button:not(.primary):hover {
    background: rgba(255,255,255,.08) !important;
}

@media screen and (max-width: 736px) {
    body.modern-page.premium2-page #main > .inner > section.p2-final {
        padding: 1.4rem 1.1rem !important;
    }

    body.modern-page.premium2-page .p2-final .deep-final-actions {
        display: block !important;
    }

    body.modern-page.premium2-page .p2-final .deep-final-actions .button {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 0 .65rem !important;
    }
}


/* ==========================================================================
   38. INDEX HAUT POTENTIEL — CTA FINAL COMPACT
   ========================================================================== */

body.modern-page #main > .inner > section.hp-index-final {
    display: block !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 1.5rem 0 0 !important;
    padding: 1.7rem 1.9rem !important;
    border-top: 0 !important;
    border-radius: var(--bp-radius-lg) !important;
    text-align: center !important;
}

body.modern-page #main > .inner > section.hp-index-final h2 {
    display: block !important;
    visibility: visible !important;
    margin: 0 0 .6rem !important;
    padding: 0 !important;
    color: #fff !important;
    font-size: 1.48rem !important;
    line-height: 1.35 !important;
    text-align: center !important;
}

body.modern-page #main > .inner > section.hp-index-final > p {
    display: block !important;
    max-width: 830px !important;
    margin: 0 auto 1.15rem !important;
    padding: 0 !important;
    color: rgba(255,255,255,.92) !important;
    font-size: 1rem !important;
    line-height: 1.6 !important;
    text-align: center !important;
}

body.modern-page #main > .inner > section.hp-index-final .hp-final-actions {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: .75rem !important;
    flex-wrap: wrap !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.modern-page #main > .inner > section.hp-index-final .hp-final-actions .button {
    margin: 0 !important;
    min-width: 225px;
}

body.modern-page #main > .inner > section.hp-index-final .button.primary {
    background: #fff !important;
    color: var(--bp-dark) !important;
    box-shadow: inset 0 0 0 2px #fff !important;
}

body.modern-page #main > .inner > section.hp-index-final .button:not(.primary) {
    background: transparent !important;
    color: #fff !important;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.82) !important;
}

body.modern-page #main > .inner > section.hp-index-final .button:not(.primary):hover {
    background: rgba(255,255,255,.08) !important;
}

@media screen and (max-width: 736px) {
    body.modern-page #main > .inner > section.hp-index-final {
        padding: 1.4rem 1.1rem !important;
    }

    body.modern-page #main > .inner > section.hp-index-final .hp-final-actions {
        display: block !important;
    }

    body.modern-page #main > .inner > section.hp-index-final .hp-final-actions .button {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 0 .65rem !important;
    }
}


/* ==========================================================================
   39. HAUT POTENTIEL ET RELATIONS AMOUREUSES
   ========================================================================== */

body.modern-page.love-hp-page #main > .inner > section {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

body.modern-page.love-hp-page .love-hero {
    padding: 2.35rem 0 1rem !important;
    border-top: 0 !important;
}

body.modern-page.love-hp-page .love-hero-grid {
    display: grid;
    grid-template-columns: minmax(0,1.04fr) minmax(360px,.96fr);
    gap: 2.3rem;
    align-items: center;
}

body.modern-page.love-hp-page .love-hero-copy h1 {
    margin: .15rem 0 .35rem;
}

body.modern-page.love-hp-page .love-subtitle {
    margin: 0 0 1rem !important;
    color: var(--bp-accent) !important;
    font-family: "Roboto Slab", serif;
    font-weight: 700;
    font-size: 1.08rem !important;
    line-height: 1.5 !important;
}

body.modern-page.love-hp-page .love-actions {
    margin: 1.15rem 0 0;
}

body.modern-page.love-hp-page .love-hero-video,
body.modern-page.love-hp-page .love-video {
    overflow: hidden;
    border-radius: var(--bp-radius-lg);
    background: #111;
    box-shadow: 0 10px 26px rgba(61,68,73,.06);
}

body.modern-page.love-hp-page #main > .inner > .love-section {
    padding: 1.05rem 0 !important;
    border-top: 1px solid var(--bp-border);
}

body.modern-page.love-hp-page .love-section > h2 {
    margin-bottom: .5rem;
}

body.modern-page.love-hp-page .love-section > .section-lead {
    margin-bottom: .85rem !important;
}

body.modern-page.love-hp-page .love-card-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: .8rem;
    margin-top: .75rem;
}

body.modern-page.love-hp-page .love-card {
    padding: 1rem 1.1rem;
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius-lg);
    background: #fff;
    box-shadow: 0 5px 18px rgba(61,68,73,.025);
}

body.modern-page.love-hp-page .love-card-heading {
    display: flex;
    align-items: center;
    gap: .7rem;
}

body.modern-page.love-hp-page .love-number {
    flex: 0 0 2rem;
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(245,106,106,.12);
    color: var(--bp-accent);
    font-weight: 800;
}

body.modern-page.love-hp-page .love-card-content {
    line-height: 1.5;
}

body.modern-page.love-hp-page .love-label {
    display: inline-block;
    margin-bottom: .45rem;
    padding: .32rem .58rem;
    border-radius: 999px;
    background: rgba(245,106,106,.12);
    color: var(--bp-accent);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1;
}

body.modern-page.love-hp-page .love-card-text {
    margin: 0 !important;
    line-height: 1.58 !important;
}

body.modern-page.love-hp-page .love-video-section {
    padding-top: .8rem !important;
    padding-bottom: .8rem !important;
}

body.modern-page.love-hp-page .love-video-section .love-video {
    max-width: 860px;
    margin: 0 !important;
}

body.modern-page.love-hp-page .love-hpe-box {
    max-width: 100% !important;
    margin: 0 !important;
    border-left-color: var(--bp-accent);
}

body.modern-page.love-hp-page .love-hpe-box h2 {
    margin-bottom: .55rem;
}

body.modern-page.love-hp-page .love-hpe-text {
    margin-bottom: 1rem !important;
}

body.modern-page.love-hp-page .love-hpe-actions {
    margin: 0;
}

body.modern-page.love-hp-page .love-final {
    display: block !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 1.25rem 0 0 !important;
    padding: 1.65rem 1.9rem !important;
    border-top: 0 !important;
    border-radius: var(--bp-radius-lg) !important;
    text-align: center !important;
}

body.modern-page.love-hp-page .love-final h2 {
    display: block !important;
    visibility: visible !important;
    margin: 0 0 .55rem !important;
    color: #fff !important;
    font-size: 1.45rem !important;
    line-height: 1.35 !important;
}

body.modern-page.love-hp-page .love-final > p {
    max-width: 820px !important;
    margin: 0 auto 1.15rem !important;
    color: rgba(255,255,255,.92) !important;
    line-height: 1.58 !important;
    text-align: center !important;
}

body.modern-page.love-hp-page .love-final .deep-final-actions {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: .75rem !important;
    flex-wrap: wrap !important;
    margin: 0 !important;
}

body.modern-page.love-hp-page .love-final .deep-final-actions .button {
    margin: 0 !important;
    min-width: 210px;
}

body.modern-page.love-hp-page .love-final .button.primary {
    background: #fff !important;
    color: var(--bp-dark) !important;
    box-shadow: inset 0 0 0 2px #fff !important;
}

body.modern-page.love-hp-page .love-final .button:not(.primary) {
    background: transparent !important;
    color: #fff !important;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.82) !important;
}

@media screen and (max-width: 1050px) {
    body.modern-page.love-hp-page .love-hero-grid {
        grid-template-columns: 1fr;
        gap: 1.4rem;
    }

    body.modern-page.love-hp-page .love-hero-visual {
        max-width: 760px;
    }
}

@media screen and (max-width: 820px) {
    body.modern-page.love-hp-page .love-card-grid {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 736px) {
    body.modern-page.love-hp-page .love-final {
        padding: 1.4rem 1.1rem !important;
    }

    body.modern-page.love-hp-page .love-final .deep-final-actions {
        display: block !important;
    }

    body.modern-page.love-hp-page .love-final .deep-final-actions .button {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 0 .65rem !important;
    }
}


/* ==========================================================================
   40. SURDOUANCE LOCALE — VERSION AFFIRMÉE
   ========================================================================== */

body.modern-page.local-giftedness-page #main > .inner > section {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

body.modern-page.local-giftedness-page .local-hero {
    padding: 2.35rem 0 1rem !important;
    border-top: 0 !important;
}

body.modern-page.local-giftedness-page .local-hero-grid {
    display: grid;
    grid-template-columns: minmax(0,1.04fr) minmax(360px,.96fr);
    gap: 2.3rem;
    align-items: center;
}

body.modern-page.local-giftedness-page .local-hero-copy h1 {
    margin: .15rem 0 .35rem;
}

body.modern-page.local-giftedness-page .local-subtitle {
    margin: 0 0 1rem !important;
    color: var(--bp-accent) !important;
    font-family: "Roboto Slab", serif;
    font-size: 1.1rem !important;
    font-weight: 700;
}

body.modern-page.local-giftedness-page .local-actions {
    margin: 1.15rem 0 0;
}

body.modern-page.local-giftedness-page .local-video {
    overflow: hidden;
    border-radius: var(--bp-radius-lg);
    background: #111;
    box-shadow: 0 10px 26px rgba(61,68,73,.06);
}

body.modern-page.local-giftedness-page #main > .inner > .local-section {
    padding: 1.05rem 0 !important;
    border-top: 1px solid var(--bp-border);
}

body.modern-page.local-giftedness-page .local-definition-box {
    max-width: 100% !important;
    margin: 0 !important;
    border-left-color: var(--bp-accent);
}

body.modern-page.local-giftedness-page .local-definition-box h2 {
    margin-bottom: .55rem;
    font-size: 1.3rem;
}

body.modern-page.local-giftedness-page .local-benefit-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: .8rem;
    margin-top: .8rem;
}

body.modern-page.local-giftedness-page .local-benefit-card,
body.modern-page.local-giftedness-page .local-five-card {
    padding: 1.05rem 1.1rem;
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius-lg);
    background: #fff;
    box-shadow: 0 5px 18px rgba(61,68,73,.025);
}

body.modern-page.local-giftedness-page .local-benefit-card h3 {
    margin-bottom: .45rem;
    font-size: 1.02rem;
}

body.modern-page.local-giftedness-page .local-five-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: .8rem;
    margin-top: .8rem;
}

body.modern-page.local-giftedness-page .local-five-heading {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: .5rem;
}

body.modern-page.local-giftedness-page .local-number {
    flex: 0 0 2rem;
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: rgba(245,106,106,.12);
    color: var(--bp-accent);
    font-weight: 800;
}

body.modern-page.local-giftedness-page .local-five-heading h3 {
    margin: 0 !important;
    font-size: 1.04rem;
}

body.modern-page.local-giftedness-page .local-five-card p,
body.modern-page.local-giftedness-page .local-benefit-card p {
    margin-bottom: 0 !important;
    line-height: 1.6 !important;
}

body.modern-page.local-giftedness-page .local-steps {
    margin-top: .8rem;
}

body.modern-page.local-giftedness-page .local-note {
    margin-top: .9rem;
}

body.modern-page.local-giftedness-page .local-final {
    display: block !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 1.25rem 0 0 !important;
    padding: 1.65rem 1.9rem !important;
    border-top: 0 !important;
    border-radius: var(--bp-radius-lg) !important;
    text-align: center !important;
}

body.modern-page.local-giftedness-page .local-final h2 {
    display: block !important;
    visibility: visible !important;
    margin: 0 0 .55rem !important;
    color: #fff !important;
    font-size: 1.45rem !important;
    line-height: 1.35 !important;
}

body.modern-page.local-giftedness-page .local-final > p {
    max-width: 830px !important;
    margin: 0 auto 1.15rem !important;
    color: rgba(255,255,255,.92) !important;
    line-height: 1.58 !important;
    text-align: center !important;
}

body.modern-page.local-giftedness-page .local-final .deep-final-actions {
    display: flex !important;
    justify-content: center !important;
    gap: .75rem !important;
    flex-wrap: wrap !important;
    margin: 0 !important;
}

body.modern-page.local-giftedness-page .local-final .deep-final-actions .button {
    margin: 0 !important;
    min-width: 225px;
}

body.modern-page.local-giftedness-page .local-final .button.primary {
    background: #fff !important;
    color: var(--bp-dark) !important;
    box-shadow: inset 0 0 0 2px #fff !important;
}

body.modern-page.local-giftedness-page .local-final .button:not(.primary) {
    background: transparent !important;
    color: #fff !important;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.82) !important;
}

@media screen and (max-width: 1050px) {
    body.modern-page.local-giftedness-page .local-hero-grid {
        grid-template-columns: 1fr;
        gap: 1.4rem;
    }
    body.modern-page.local-giftedness-page .local-hero-visual {
        max-width: 760px;
    }
}

@media screen and (max-width: 820px) {
    body.modern-page.local-giftedness-page .local-benefit-grid,
    body.modern-page.local-giftedness-page .local-five-grid {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 736px) {
    body.modern-page.local-giftedness-page .local-final {
        padding: 1.4rem 1.1rem !important;
    }
    body.modern-page.local-giftedness-page .local-final .deep-final-actions {
        display: block !important;
    }
    body.modern-page.local-giftedness-page .local-final .deep-final-actions .button {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 0 .65rem !important;
    }
}