/* =====================================================================
   pre-diagnostic.css — Page « Pré-diagnostic LVLEne »
   Style du flyer LVLEne : blanc, noir, vert Duralis, chevrons CECB.
   Règle de formes : cartes 12px, champs 8px, boutons en pilule.

   Responsive : la grille de page dépend de la largeur d'écran, mais chaque
   bloc (hero, sections, formulaire) se met en page selon SA largeur réelle
   (container queries). Ainsi la colonne étroite entre 992 et 1199px, ou un
   formulaire dans une colonne de 380px, ne se déforme jamais.
   ===================================================================== */

.pd-page {
    --pd-ink: #0f1412;
    --pd-muted: #4a524e;
    --pd-line: #e3e7e4;
    --pd-soft: #f4f7f2;
    --pd-green: var(--accent-green, #69A82F);
    --pd-green-ink: var(--accent-green-ink, #4c7d1e);
    /* Hauteur du header sticky (44px sur téléphone, 62-69px sur ordinateur) + marge */
    --pd-header-offset: 56px;
    /* Couleurs officielles de l'échelle CECB (A → G) */
    --cecb-a: #009a4e;
    --cecb-b: #50b848;
    --cecb-c: #bed630;
    --cecb-d: #fff200;
    --cecb-e: #fdb913;
    --cecb-f: #f37021;
    --cecb-g: #e30613;
    color: var(--pd-ink);
    background: #fff;
    padding-top: clamp(1.5rem, 4vw, 3.5rem);
    overflow-x: clip;
}

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

/* Ancres : ne pas passer sous le header sticky */
.pd-page [id] {
    scroll-margin-top: var(--pd-header-offset);
}

/* Blocs qui servent de référence aux container queries */
.pd-hero,
.pd-section,
.pd-form-card,
.pd-contact {
    container-type: inline-size;
}

/* Les mots longs (adresses email, URL) ne doivent jamais élargir un bloc */
.pd-page p,
.pd-page li,
.pd-page a,
.pd-page label {
    overflow-wrap: break-word;
}

/* ─── Grille principale ─────────────────────────────────────────────── */
/* < 992px : une seule colonne, le formulaire arrive après « Comment ça se passe ».
   ≥ 992px : texte à gauche, formulaire à droite. */
.pd-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "hero"
        "receive"
        "why"
        "how"
        "form"
        "about";
    column-gap: clamp(2rem, 4vw, 4.5rem);
    padding-bottom: clamp(2.5rem, 6vw, 5rem);
}

.pd-hero { grid-area: hero; }
#ce-que-vous-recevez { grid-area: receive; }
#pourquoi-maintenant { grid-area: why; }
#comment-ca-se-passe { grid-area: how; }
.pd-aside { grid-area: form; }
#qui-sommes-nous { grid-area: about; }

@media (min-width: 992px) {
    .pd-page {
        --pd-header-offset: 76px;
    }

    .pd-layout {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        grid-template-areas:
            "hero    form"
            "receive form"
            "why     form"
            "how     form"
            "about   form";
        grid-template-rows: auto auto auto auto 1fr;
    }

    /* L'aside occupe toute la hauteur de la colonne de texte : la carte du
       formulaire peut rester visible pendant la lecture, et l'encadré contact
       se place en bas, à côté de « Qui sommes-nous ». */
    .pd-aside {
        display: flex;
        flex-direction: column;
    }

    .pd-aside__zone {
        flex: 1 1 auto;
    }
}

/* Classe posée par pre-diagnostic.js (≥ 992px). Le JS calcule aussi `top` :
   sous le header si la carte tient dans l'écran, sinon une valeur négative
   pour que la carte se colle seulement une fois son bouton d'envoi visible. */
.pd-form-card.is-sticky {
    position: sticky;
    top: var(--pd-header-offset);
}

/* ─── Typo commune ──────────────────────────────────────────────────── */
.pd-eyebrow {
    display: inline-block;
    margin: 0 0 1rem;
    font-family: var(--default-font);
    font-size: var(--fs-small, 0.875rem);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pd-green-ink);
}

.pd-h2 {
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: clamp(1.4rem, 1.6vw + 1rem, 2rem);
    line-height: var(--lh-heading, 1.25);
    color: var(--pd-ink);
    margin: 0 0 1.5rem;
    text-wrap: balance;
}

.pd-text {
    font-size: var(--fs-body, 1rem);
    line-height: var(--lh-relaxed, 1.7);
    color: var(--pd-muted);
    max-width: 65ch;
    margin: 0;
}

/* ─── Hero ──────────────────────────────────────────────────────────── */
.pd-hero {
    padding-bottom: clamp(2rem, 5vw, 4rem);
}

.pd-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
    align-items: center;
}

/* Chevrons à côté du texte uniquement si le hero est assez large */
@container (min-width: 600px) {
    .pd-hero__inner {
        grid-template-columns: minmax(0, 1fr) clamp(120px, 22cqi, 170px);
        gap: 2rem;
    }
}

.pd-hero__title {
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: clamp(1.75rem, 6.6cqi, 3.25rem);
    line-height: 1.08;
    letter-spacing: -0.015em;
    color: var(--pd-ink);
    margin: 0 0 1.25rem;
    text-wrap: balance;
    hyphens: manual;
}

.pd-hero__lead {
    font-size: var(--fs-lead, 1.125rem);
    line-height: 1.6;
    color: var(--pd-muted);
    max-width: 58ch;
    margin: 0 0 1.75rem;
}

/* ─── Échelle CECB (chevrons du flyer) ──────────────────────────────── */
/* Par défaut : bandeau horizontal compact (hero étroit) */
.pd-cecb {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 3px;
    width: 100%;
    max-width: 420px;
}

.pd-cecb__bar {
    flex: 1 1 0;
    min-width: 0;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: 0.75rem;
    line-height: 1;
    color: #fff;
    clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, 0 100%, 7px 50%);
}

.pd-cecb__bar--a { --w: 40%; background: var(--cecb-a); }
.pd-cecb__bar--b { --w: 50%; background: var(--cecb-b); }
.pd-cecb__bar--c { --w: 60%; background: var(--cecb-c); color: var(--pd-ink); }
.pd-cecb__bar--d { --w: 70%; background: var(--cecb-d); color: var(--pd-ink); }
.pd-cecb__bar--e { --w: 80%; background: var(--cecb-e); color: var(--pd-ink); }
.pd-cecb__bar--f { --w: 90%; background: var(--cecb-f); }
.pd-cecb__bar--g { --w: 100%; background: var(--cecb-g); }

/* Hero large : échelle verticale en escalier, comme sur l'étiquette énergie */
@container (min-width: 600px) {
    .pd-cecb {
        flex-direction: column;
        gap: 5px;
        max-width: none;
    }

    .pd-cecb__bar {
        flex: none;
        width: var(--w);
        height: 26px;
        justify-content: flex-start;
        padding-left: 10px;
        font-size: 0.875rem;
        clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%);
    }
}

@media (prefers-reduced-motion: no-preference) {
    .pd-cecb__bar {
        animation: pd-bar-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
        transform-origin: left center;
    }

    .pd-cecb__bar:nth-child(2) { animation-delay: 0.05s; }
    .pd-cecb__bar:nth-child(3) { animation-delay: 0.10s; }
    .pd-cecb__bar:nth-child(4) { animation-delay: 0.15s; }
    .pd-cecb__bar:nth-child(5) { animation-delay: 0.20s; }
    .pd-cecb__bar:nth-child(6) { animation-delay: 0.25s; }
    .pd-cecb__bar:nth-child(7) { animation-delay: 0.30s; }
}

@keyframes pd-bar-in {
    from { transform: scaleX(0.2); opacity: 0; }
    to { transform: scaleX(1); opacity: 1; }
}

/* Pastille de classe dans le texte (« classe G », « classe D ») */
.pd-class {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.6em;
    padding: 0 0.45em 0 0.35em;
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: 0.85em;
    line-height: 1.5;
    color: #fff;
    vertical-align: 0.05em;
    clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 0 100%);
}

.pd-class--d { background: var(--cecb-d); color: var(--pd-ink); }
/* Texte foncé sur l'orange F : le blanc n'atteint pas le contraste AA (2,9:1) */
.pd-class--f { background: var(--cecb-f); color: var(--pd-ink); }
.pd-class--g { background: var(--cecb-g); }

/* ─── Boutons ───────────────────────────────────────────────────────── */
.pd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    max-width: 100%;
    padding: 0.95rem 1.6rem;
    border: 0;
    border-radius: var(--radius-pill, 32px);
    font-family: var(--default-font);
    font-size: var(--fs-btn, 0.9375rem);
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease, transform 0.15s ease;
}

.pd-btn i {
    flex: none;
}

.pd-btn--primary {
    background: var(--pd-ink);
    color: #fff;
}

.pd-btn--primary i {
    color: var(--pd-green);
    transition: color 0.25s ease, transform 0.25s ease;
}

.pd-btn--primary:hover,
.pd-btn--primary:focus-visible {
    background: var(--pd-green);
    color: var(--pd-ink);
}

.pd-btn--primary:hover i,
.pd-btn--primary:focus-visible i {
    color: var(--pd-ink);
}

.pd-btn--primary:hover .bi-arrow-down {
    transform: translateY(2px);
}

.pd-btn:active {
    transform: translateY(1px);
}

.pd-btn:focus-visible {
    outline: 3px solid var(--pd-green);
    outline-offset: 3px;
}

.pd-btn--block {
    width: 100%;
}

/* Hero très étroit (petits téléphones) : bouton pleine largeur */
@container (max-width: 400px) {
    .pd-hero .pd-btn {
        width: 100%;
        padding-inline: 1.25rem;
    }
}

/* ─── Sections de contenu ───────────────────────────────────────────── */
.pd-section {
    background: transparent;
    padding: clamp(2.25rem, 5vw, 3.5rem) 0;
    border-top: 1px solid var(--pd-line);
}

/* Ce que vous recevez */
.pd-deliverables {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    display: grid;
    gap: 1.25rem;
}

.pd-deliverable {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.pd-deliverable p {
    margin: 0;
    padding-top: 0.55rem;
    line-height: var(--lh-relaxed, 1.7);
    color: var(--pd-muted);
    max-width: 62ch;
}

.pd-deliverable__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--pd-soft);
    color: var(--pd-green-ink);
    display: grid;
    place-items: center;
    font-size: 1.25rem;
}

@container (max-width: 360px) {
    .pd-deliverable {
        grid-template-columns: 36px minmax(0, 1fr);
        gap: 0.75rem;
    }

    .pd-deliverable__icon {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        font-size: 1.05rem;
    }

    .pd-deliverable p {
        padding-top: 0.3rem;
    }
}

.pd-free {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--pd-ink);
}

.pd-free i {
    color: var(--pd-green);
}

/* Pourquoi maintenant : frise des échéances */
.pd-timeline {
    --pd-year-w: 5.5rem;
    --pd-rail: calc(var(--pd-year-w) + 0.6rem);
    list-style: none;
    margin: 0 0 1.75rem;
    padding: 0;
}

.pd-timeline__item {
    position: relative;
    display: grid;
    grid-template-columns: var(--pd-year-w) minmax(0, 1fr);
    gap: 1.25rem;
    padding: 0 0 1.5rem;
}

/* Fil vertical entre les années */
.pd-timeline__item::before {
    content: "";
    position: absolute;
    left: var(--pd-rail);
    top: 0.55rem;
    bottom: -0.55rem;
    width: 2px;
    background: var(--pd-line);
}

.pd-timeline__item:last-child::before {
    display: none;
}

.pd-timeline__item::after {
    content: "";
    position: absolute;
    left: calc(var(--pd-rail) - 4px);
    top: 0.5rem;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--pd-green);
    box-shadow: 0 0 0 4px #fff;
}

.pd-timeline__year {
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.1;
    color: var(--pd-ink);
}

.pd-timeline__item p {
    margin: 0;
    padding-left: 1.25rem;
    line-height: 1.6;
    color: var(--pd-muted);
}

@container (max-width: 420px) {
    .pd-timeline {
        --pd-year-w: 3.6rem;
        --pd-rail: calc(var(--pd-year-w) + 0.35rem);
    }

    .pd-timeline__item {
        gap: 0.75rem;
    }

    .pd-timeline__year {
        font-size: 1.2rem;
    }

    .pd-timeline__item p {
        padding-left: 0.9rem;
    }
}

/* Comment ça se passe : étapes numérotées */
.pd-steps {
    list-style: none;
    counter-reset: pd-step;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

@container (min-width: 520px) {
    .pd-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.pd-steps li {
    counter-increment: pd-step;
    position: relative;
    padding: 1.25rem 1.25rem 1.25rem 4rem;
    background: var(--pd-soft);
    border-radius: 12px;
    line-height: 1.55;
    color: var(--pd-ink);
}

.pd-steps li::before {
    content: counter(pd-step);
    position: absolute;
    left: 1.25rem;
    top: 1.15rem;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    background: var(--pd-ink);
    color: #fff;
    display: grid;
    place-items: center;
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: 0.95rem;
}

@container (max-width: 360px) {
    .pd-steps li {
        padding: 1rem 1rem 1rem 3.4rem;
    }

    .pd-steps li::before {
        left: 1rem;
        top: 0.95rem;
    }
}

/* Qui sommes-nous : bandeau de chiffres + logos */
.pd-stats {
    margin: 2rem 0;
    padding: 1.5rem clamp(1rem, 5cqi, 2rem);
    background: var(--pd-ink);
    border-radius: 12px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem 1rem;
}

@container (min-width: 620px) {
    .pd-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        padding-block: 1.75rem;
    }
}

.pd-stat {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    gap: 0.3rem;
    min-width: 0;
}

.pd-stat dd {
    margin: 0;
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: clamp(1.375rem, 4.4cqi, 2rem);
    line-height: 1;
    color: var(--pd-green);
    white-space: nowrap;
}

.pd-stat dt {
    /* Mots longs (« Kundenzufriedenheit ») : coupure syllabique selon lang */
    hyphens: auto;
    overflow-wrap: break-word;
    font-weight: 400;
    font-size: var(--fs-small, 0.875rem);
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.82);
}

.pd-logos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem 2.5rem;
    align-items: center;
}

.pd-logos li {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    min-width: 0;
}

.pd-logos img {
    flex: none;
    height: 68px;
    width: auto;
    max-width: 136px;
    object-fit: contain;
}

.pd-logos span {
    font-weight: 500;
    font-size: var(--fs-small, 0.875rem);
    color: var(--pd-ink);
    max-width: 12rem;
    line-height: 1.35;
}

/* ─── Formulaire ────────────────────────────────────────────────────── */
.pd-aside {
    padding: clamp(2.25rem, 5vw, 3.5rem) 0;
    border-top: 1px solid var(--pd-line);
    min-width: 0;
}

@media (min-width: 992px) {
    .pd-aside {
        padding: 0;
        border-top: 0;
    }
}

.pd-form-card {
    background: #fff;
    border: 1px solid var(--pd-line);
    border-top: 4px solid var(--pd-green);
    border-radius: 12px;
    padding: clamp(1rem, 2.2vw, 1.75rem);
    box-shadow: 0 18px 40px -24px rgba(15, 40, 20, 0.28);
}

.pd-form-card__title {
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: clamp(1.2rem, 0.8vw + 1rem, 1.5rem);
    line-height: 1.2;
    color: var(--pd-ink);
    margin: 0 0 1.25rem;
    text-wrap: balance;
}

/* Une colonne par défaut ; deux colonnes seulement si la carte le permet */
.pd-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.85rem;
}

@container (min-width: 440px) {
    .pd-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.pd-field {
    display: flex;
    flex-direction: column;
    /* Si un libellé passe sur deux lignes, les champs restent alignés */
    justify-content: flex-end;
    gap: 0.35rem;
    min-width: 0;
}

.pd-field--full {
    grid-column: 1 / -1;
}

.pd-field label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--pd-ink);
    line-height: 1.3;
}

.pd-field label span {
    color: var(--pd-green-ink);
}

.pd-field input,
.pd-field select,
.pd-field textarea {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 0.6rem 0.8rem;
    border: 1px solid #c9d0cb;
    border-radius: 8px;
    background: #fff;
    font-family: var(--default-font);
    /* 16px minimum : évite le zoom automatique d'iOS au focus */
    font-size: max(16px, var(--fs-input, 1rem));
    line-height: 1.4;
    color: var(--pd-ink);
    text-overflow: ellipsis;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.pd-field textarea {
    resize: vertical;
    min-height: 88px;
}

.pd-field input::placeholder,
.pd-field textarea::placeholder {
    color: #6b736e;
    opacity: 1;
}

.pd-field input:focus,
.pd-field select:focus,
.pd-field textarea:focus {
    outline: none;
    border-color: var(--pd-green-ink);
    box-shadow: 0 0 0 3px rgba(105, 168, 47, 0.25);
}

/* Erreurs de validation natives, uniquement après une tentative d'envoi */
.pd-form.was-submitted :invalid {
    border-color: #c4291c;
}

.pd-select {
    position: relative;
}

.pd-select select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.25rem;
    cursor: pointer;
}

.pd-select select:invalid,
.pd-select select.is-placeholder {
    color: #6b736e;
}

.pd-select i {
    position: absolute;
    right: 0.8rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--pd-muted);
    font-size: 0.85rem;
}

.pd-consent {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 0.65rem;
    align-items: start;
    margin: 1.1rem 0 1rem;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--pd-ink);
    cursor: pointer;
}

.pd-consent input {
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    accent-color: var(--pd-green-ink);
    cursor: pointer;
}

.pd-consent > span > span {
    color: var(--pd-green-ink);
}

.pd-form__status .loading,
.pd-form__status .error-message,
.pd-form__status .sent-message {
    border-radius: 8px;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.pd-form__status .error-message {
    background: #fdecea;
    color: #8f1d14;
    border: 1px solid #f3b8b1;
}

.pd-form__status .sent-message {
    background: var(--pd-soft);
    color: var(--pd-ink);
    border: 1px solid #cfe3bb;
    text-align: left;
    padding: 1.1rem;
}

/* Reçoit le focus après l'envoi (pre-diagnostic.js) ; ce n'est pas une commande */
.pd-form__status .sent-message:focus {
    outline: none;
}

.pd-form__status .sent-message.d-block {
    display: grid !important;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 0.75rem;
}

.pd-form__status .sent-message i {
    color: var(--pd-green);
    font-size: 1.3rem;
    line-height: 1.2;
}

.pd-form__status .sent-message p {
    margin: 0;
    line-height: 1.55;
}

.pd-form__status .sent-message a {
    color: var(--pd-green-ink);
    font-weight: 500;
    white-space: nowrap;
}

/* Après l'envoi : on masque les champs, seul le message de confirmation reste */
.pd-form.is-sent .pd-fields,
.pd-form.is-sent .pd-consent,
.pd-form.is-sent button[type="submit"] {
    display: none;
}

.pd-privacy {
    margin: 0.9rem 0 0;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--pd-muted);
}

.pd-privacy i {
    color: var(--pd-green-ink);
    margin-right: 0.3rem;
}

.pd-privacy a {
    color: var(--pd-green-ink);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Encadré contact sous le formulaire */
.pd-contact {
    margin-top: 1.25rem;
    padding: 1.25rem clamp(1rem, 4cqi, 1.5rem);
    border-radius: 12px;
    background: var(--pd-soft);
    font-size: 0.875rem;
}

.pd-contact__title {
    margin: 0 0 0.6rem;
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: 1rem;
    color: var(--pd-ink);
}

.pd-contact__lines {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.25rem;
    margin: 0 0 0.6rem;
}

.pd-contact__lines a {
    display: inline-flex;
    gap: 0.4rem;
    align-items: center;
    color: var(--pd-ink);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.pd-contact__lines a:hover {
    color: var(--pd-green-ink);
}

.pd-contact__lines i {
    color: var(--pd-green-ink);
}

.pd-contact__address {
    margin: 0;
    color: var(--pd-muted);
    line-height: 1.5;
}

/* ─── FAQ (réutilise le composant .faq de main.css) ─────────────────── */
.pd-faq__title {
    margin-bottom: 2rem;
}

.pd-sources {
    margin: 2.5rem 0 0;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--pd-muted);
}

/* ─── Apparition au défilement (scroll-reveal.js) ───────────────────── */
@media (prefers-reduced-motion: no-preference) {
    .pd-page [data-reveal] {
        opacity: 0;
        transform: translateY(16px);
        transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .pd-page [data-reveal].is-visible {
        opacity: 1;
        transform: none;
    }
}