/* Mise en page du comparatif, alignée sur les articles du blog. */
body.comparison-page {
    background: var(--bg);
}

body .comparison-article {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: min(800px, calc(100% - 32px));
    max-width: 800px;
    margin: 40px auto 0;
    padding-bottom: 80px;
    color: #2b2b2b;
    font-family: "Merriweather", Georgia, serif;
}

body .comparison-article *,
body .comparison-article *::before,
body .comparison-article *::after {
    box-sizing: border-box;
}

body .comparison-article :is(h1, h2, h3, h4, h5, h6) {
    width: 100%;
    max-width: none;
    margin: 0;
    color: #1a1a1a;
    font-family: "Merriweather", Georgia, serif !important;
    text-align: left;
    text-wrap: balance;
}

body .comparison-article > h1 {
    max-width: 30ch;
    margin: 27px 0 0;
    padding: 0;
    font-size: clamp(1.86rem, 4.8vw, 2.5rem) !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
}

body .comparison-article :is(.tableauDesPrix, .partieFaq, .articleFin, #partieFaqEtarget) > h2 {
    font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem) !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}

body .comparison-article :is(.articleEntier, .sectionFaq, .articleFaqEtarget, .article-conclusion) > h3 {
    font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem) !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
}

body main.comparison-article p:not(.legacy-brand-title):not(.legacy-intro__eyebrow):not(.legacy-intro__channel),
body .comparison-article li {
    color: #2b2b2b;
    font-family: "Merriweather", Georgia, serif !important;
    font-size: 1.08rem !important;
    font-weight: 400 !important;
    line-height: 1.7 !important;
}

body .comparison-article p {
    max-width: none;
    margin: 0;
}

body .comparison-article strong {
    color: inherit;
    font-weight: 700;
}

body .comparison-article a {
    color: #006070 !important;
    text-decoration: underline !important;
    text-underline-offset: 0.15em;
}

body .comparison-article a:hover,
body .comparison-article a:focus-visible {
    color: #004f5c !important;
}

body .comparison-article > img {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 28px;
    border-radius: 8px;
}

body .comparison-article > img + p {
    margin-top: 32px;
}

body .comparison-article mark {
    color: inherit;
    padding: 0 0.1em;
    background: #e7f3f4;
    font-weight: 600;
}

body main.comparison-article p.list-subheading:not(.legacy-brand-title):not(.legacy-intro__eyebrow):not(.legacy-intro__channel) {
    margin-top: 24px;
    font-weight: 700 !important;
}

body .comparison-article .nowrap {
    color: inherit;
    white-space: nowrap;
}

/* Sommaire à puces, comme dans les articles enrichis du blog. */
body .comparison-article .article-toc {
    align-self: flex-start;
    width: fit-content;
    max-width: 100%;
    margin-top: 32px;
    padding: 16px 20px;
    border: 1px solid #e4e8ea;
    border-radius: 8px;
    background: #fff;
}

body main.comparison-article p.article-toc__title:not(.legacy-brand-title):not(.legacy-intro__eyebrow):not(.legacy-intro__channel) {
    margin: 0 0 12px;
    color: #1a1a1a;
    font-family: "Merriweather", Georgia, serif !important;
    font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.625rem) !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
}

body .comparison-article .article-toc ul {
    margin: 0;
    padding: 0 0 0 1.35rem;
}

body .comparison-article .article-toc li {
    margin: 0;
    padding: 0;
    color: #2b2b2b;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 1.08rem !important;
    line-height: 1.3 !important;
    list-style: disc;
}

body .comparison-article .article-toc li + li {
    margin-top: 0.6rem;
}

body .comparison-article .article-toc a {
    color: #2b2b2b !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: inherit;
    font-weight: 500;
    text-decoration-color: #006070 !important;
}

body .comparison-article .article-toc a:hover,
body .comparison-article .article-toc a:focus-visible {
    color: #006070 !important;
}

body .comparison-article > hr {
    width: 100% !important;
    height: 0 !important;
    margin: 32px 0 0 !important;
    border: 0 !important;
    border-top: 1px solid #e4e8ea !important;
    background: transparent !important;
}

body .comparison-article #debutDuGuide2026 {
    margin-top: 40px;
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    text-decoration: none !important;
}

body .comparison-article .tableauDesPrixContainer {
    width: 100%;
    margin-top: 24px;
    overflow-x: auto;
    background: transparent;
}

body .comparison-article .tableauDesPrix {
    width: 100%;
}

body .comparison-article :is(.tableauDesPrix, .tarifs) table {
    width: 100%;
    min-width: 580px;
    margin-top: 20px;
    border: 1px solid #e4e8ea;
    border-collapse: collapse;
    background: #fff;
}

body .comparison-article :is(.tableauDesPrix, .tarifs) :is(th, td) {
    padding: 10px 12px;
    border: 1px solid #e4e8ea;
    color: #2b2b2b;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 0.9rem;
    line-height: 1.4;
    text-align: left;
    vertical-align: top;
}

body .comparison-article :is(.tableauDesPrix, .tarifs) th {
    color: #1a1a1a;
    font-weight: 600;
    background: #e7f3f4;
}

body .comparison-article :is(.tableauDesPrix, .tarifs) tr:nth-child(even) {
    background: #f8fafb;
}

body .comparison-article #ligneeTarget td:first-child {
    color: #006070;
    font-weight: 700;
}

body .comparison-article .articleEntier {
    width: 100%;
    margin-top: 56px;
    padding-top: 40px;
    border-top: 1px solid #e4e8ea;
}

body .comparison-article .articleEntier > img {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 24px;
    border-radius: 8px;
}

body .comparison-article #etarget > img {
    transform: scale(0.92);
    transform-origin: center;
}

body .comparison-article .articleEntier > .texteResume,
body .comparison-article .sectionFaq .texteFaq > p,
body .comparison-article .articleFin > p,
body .comparison-article #partieFaqEtarget .articleFaqEtarget > p {
    margin-top: 16px;
}

body .comparison-article .fonctions,
body .comparison-article .tarifs {
    width: 100%;
    margin-top: 24px;
}

body main.comparison-article :is(.fonctions, .tarifs) > p:not(.legacy-brand-title):not(.legacy-intro__eyebrow):not(.legacy-intro__channel) {
    font-weight: 700 !important;
}

body .comparison-article :is(.tarifs, .articleFin) {
    overflow-x: auto;
}

body .comparison-article ul {
    margin: 12px 0 0;
    padding-left: 1.5rem;
}

body .comparison-article ul > li {
    margin: 0;
    padding-left: 0.1rem;
    list-style: disc;
}

body .comparison-article ul > li + li {
    margin-top: 0.5rem;
}

body .comparison-article .infosSuplementairesEtLiensVersSites {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin-top: 24px;
}

body .comparison-article .infosSuplementairesEtLiensVersSites a {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 600;
}

body .comparison-article .article-conclusion,
body .comparison-article .partieFaq,
body .comparison-article .articleFin,
body .comparison-article #partieFaqEtarget {
    width: 100%;
    margin-top: 64px;
    padding-top: 32px;
    border-top: 1px solid #e4e8ea;
}

body .comparison-article .article-conclusion > h3 br {
    display: none;
}

body .comparison-article .article-conclusion > p {
    margin-top: 16px;
}

body .comparison-article .sectionFaq,
body .comparison-article .articleFaqEtarget {
    padding-top: 36px;
}

body .comparison-article .articleFin > ul > li {
    margin-top: 12px;
}

/* FAQ : mêmes blocs repliables que dans les articles du blog. */
body .comparison-article .article-faq {
    display: grid;
    gap: 0.75rem;
    width: 100%;
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid #e4e8ea;
}

body .comparison-article .article-faq > h2 {
    margin: 0 0 0.5rem;
    font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem) !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}

body .comparison-article .article-faq__item {
    padding: 1rem 1.25rem;
    border: 1px solid #e4e8ea;
    border-radius: 8px;
    background: #fff;
}

body .comparison-article .article-faq__item > summary {
    display: list-item;
    margin-left: 0.75rem;
    padding-left: 0.25rem;
    color: #2b2b2b;
    cursor: pointer;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.45;
    list-style-position: outside;
}

body .comparison-article .article-faq__item > summary::marker {
    color: #006070;
}

body .comparison-article .article-faq__item[open] > summary {
    margin-bottom: 0.75rem;
}

body .comparison-article .article-faq__item > summary:focus-visible {
    outline: 2px solid #006070;
    outline-offset: 4px;
}

body .comparison-article .article-faq__item > p {
    margin: 0;
}

body .comparison-article :is(.sectionFaq, .articleFaqEtarget, .articleEntier, .articleFin, .partieFaq, .article-conclusion, .article-faq, #partieFaqEtarget),
body .comparison-article [id] {
    scroll-margin-top: 90px;
}

@media (max-width: 700px) {
    body .comparison-article {
        margin-top: 24px;
        padding-bottom: 56px;
    }

    body .comparison-article > h1 {
        font-size: clamp(1.86rem, 6vw, 2.25rem) !important;
    }

    body .comparison-article .article-toc {
        padding: 14px 16px;
    }

    body .comparison-article .articleEntier {
        margin-top: 44px;
        padding-top: 32px;
    }

    body .comparison-article .article-conclusion,
    body .comparison-article .partieFaq,
    body .comparison-article .articleFin,
    body .comparison-article #partieFaqEtarget {
        margin-top: 48px;
    }
}