/*
===============================================================================
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
   ========================================================================== */

/* The HPE illustration contains a lot of white space. Keep the visual,
   but prevent it from forcing an excessively tall banner. */
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: cover;
    object-position: center;
}

/* Purchase-box secondary action should be visually centered. */
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;
    }
}