/* Shared components for public pages, loaded by base.html site-wide: dark
   hero (grid, glows), section headers, simulator card, trust cards, FAQ, final
   call and mobile action bar. Home-only parts live in pages/accueil.css. */

/* ── Page header ───────────────────────────────────────────────────────── */
.a-hero {
    position: relative;
    isolation: isolate;
    /* `clip`, not `hidden`: a `hidden` box can scroll internally when an anchor
   targets it. */
    overflow: hidden;
    overflow: clip;
    padding: calc(88px + clamp(2.5rem, 1rem + 5vw, 5.5rem)) 0 clamp(3rem, 2rem + 3vw, 4.5rem);
    background: var(--r-nuit);
    color: rgba(232, 238, 233, .82);
}
.a-hero::before {
    /* Glowing grid, faded at the edges. */
    content: "";
    position: absolute; inset: 0; z-index: -2;
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%);
}
.a-halo { position: absolute; z-index: -1; border-radius: 50%; filter: blur(70px); opacity: .55; pointer-events: none; }
.a-halo-1 { width: 620px; height: 620px; left: -160px; top: -200px; background: radial-gradient(circle, #2f7a58, transparent 65%); animation: a-derive 18s ease-in-out infinite alternate; }
.a-halo-2 { width: 520px; height: 520px; right: -120px; top: 120px; background: radial-gradient(circle, #c67139, transparent 65%); opacity: .4; animation: a-derive 22s ease-in-out infinite alternate-reverse; }
.a-halo-3 { width: 420px; height: 420px; left: 40%; bottom: -260px; background: radial-gradient(circle, #d99a3d, transparent 65%); opacity: .25; animation: a-derive 26s ease-in-out infinite alternate; }
@keyframes a-derive { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(60px, 40px, 0) scale(1.12); } }

.a-hero-grille { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: center; }
@media (max-width: 991px) { .a-hero-grille { grid-template-columns: 1fr; } }

.a-badge {
    display: inline-flex; align-items: center; gap: .6rem;
    padding: .4rem .9rem .4rem .45rem;
    border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    font-size: .85rem; font-weight: 500; color: #e8eee9;
    backdrop-filter: blur(8px);
}
.a-badge-point { position: relative; display: inline-flex; padding: .2rem .55rem; border-radius: 999px; background: rgba(143, 193, 159, .18); color: #a9d8b8; font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.a-badge-point::before { content: ""; width: 6px; height: 6px; margin: auto .4rem auto 0; border-radius: 50%; background: #8fc19f; box-shadow: 0 0 0 0 rgba(143, 193, 159, .7); animation: a-pouls 2s infinite; }
@keyframes a-pouls { 70% { box-shadow: 0 0 0 8px rgba(143, 193, 159, 0); } 100% { box-shadow: 0 0 0 0 rgba(143, 193, 159, 0); } }

.a-hero h1 {
    margin: 1.4rem 0 1.2rem;
    font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4.3rem);
    line-height: 1.04;
    letter-spacing: -.025em;
    color: #fff;
}
.a-degrade {
    background: linear-gradient(100deg, #f7d9c4 0%, #d98a52 45%, #8fc19f 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.a-chapo { max-width: 34rem; font-size: 1.13rem; line-height: 1.65; color: rgba(232, 238, 233, .78); }
.a-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 2rem 0 1.75rem; }
.a-actions .btn-lg { border-radius: 999px; }
.a-bouton-verre { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); color: #fff; backdrop-filter: blur(8px); }
.a-bouton-verre:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.a-preuves { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; padding: 0; margin: 0; list-style: none; font-size: .9rem; color: rgba(232, 238, 233, .7); }
.a-preuves li { display: inline-flex; align-items: center; gap: .45rem; }
.a-preuves i { color: #8fc19f; }

/* Simulator as a light glass card with a glowing edge. */
.a-simulateur {
    position: relative;
    padding: 1.75rem;
    border-radius: 28px;
    background: var(--surface-haute);
    color: var(--texte);
    box-shadow: 0 40px 100px -40px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .06);
}
.a-simulateur::before {
    content: "";
    position: absolute; inset: -1px; z-index: -1; border-radius: 29px; padding: 1px;
    background: conic-gradient(from var(--angle, 0deg), rgba(198, 113, 57, .9), rgba(143, 193, 159, .9), rgba(217, 154, 61, .8), rgba(198, 113, 57, .9));
    filter: blur(14px); opacity: .55;
    animation: a-tour 8s linear infinite;
}
@property --angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes a-tour { to { --angle: 360deg; } }
.a-simulateur-tete { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.a-simulateur-titre { margin: 0; font-family: var(--r-titre); font-size: 1.3rem; font-weight: 600; color: var(--r-encre); }
.a-chrono { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .65rem; border-radius: 999px; background: var(--r-sauge); color: var(--r-foret); font-size: .78rem; font-weight: 600; white-space: nowrap; }

/* Figures under the hero. */
.a-chiffres { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: clamp(3rem, 2rem + 3vw, 4.5rem); border-radius: 22px; overflow: hidden; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .08); }
.a-chiffres > div { padding: 1.4rem 1.5rem; background: rgba(11, 23, 18, .6); }
.a-chiffres strong { display: block; font-family: var(--r-titre); font-size: clamp(1.8rem, 1.2rem + 1.6vw, 2.6rem); font-weight: 600; line-height: 1; color: #fff; }
.a-chiffres span { display: block; margin-top: .5rem; font-size: .88rem; color: rgba(232, 238, 233, .65); }
@media (max-width: 767px) { .a-chiffres { grid-template-columns: 1fr 1fr; } }

/* ── Ticker ─────────────────────────────────────────────────────────────── */
/* No edge fade: the mask showed the page background on both sides. */
.a-defilant { position: relative; padding: 1.4rem 0; background: var(--r-nuit); border-top: 1px solid rgba(255, 255, 255, .06); overflow: hidden; }
/* Reassurance texture, not an eye-catcher: very slow scroll, soft contrast,
   hidden on phones. */
.a-defilant-piste { display: flex; gap: .6rem; width: max-content; animation: a-defile 140s linear infinite; }
.a-defilant:hover .a-defilant-piste { animation-play-state: paused; }
.a-defilant-piste span { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .9rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .06); background: rgba(255, 255, 255, .02); color: rgba(232, 238, 233, .58); font-size: .82rem; white-space: nowrap; }
.a-defilant-piste i { color: rgba(217, 138, 82, .6); font-size: .74rem; }
@media (max-width: 767px) { .a-defilant { display: none; } }
@keyframes a-defile { to { transform: translateX(-50%); } }

/* ── Worked comparison (home, dog and cat pages) ───────────────────────────── */
.a-duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: center; }
@media (max-width: 991px) { .a-duo { grid-template-columns: 1fr; } }
.a-comparaison { padding: 2rem; border-radius: 26px; background: var(--surface-haute); border: 1px solid var(--bordure); box-shadow: var(--r-ombre-haute); }
.a-barre { height: 12px; margin: .6rem 0 .4rem; border-radius: 999px; background: var(--r-creme); overflow: hidden; }
.a-barre > span { display: block; height: 100%; border-radius: 999px; width: 0; transition: width 1.4s var(--r-ease); }
.r-visible .a-barre > span, html:not(.r-anime) .a-barre > span { width: var(--largeur); }
.a-ligne-chiffre { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.a-ligne-chiffre b { font-family: var(--r-titre); font-size: 1.6rem; font-weight: 600; color: var(--r-encre); }


/* ── Section headers ───────────────────────────────────────────────────── */
.a-section { padding: clamp(4rem, 2.5rem + 5vw, 7.5rem) 0; }
.a-section-creme { background: var(--r-creme); }
.a-section-blanche { background: var(--surface-haute); }
.a-entete { max-width: 46rem; margin: 0 auto clamp(2.5rem, 1.5rem + 2vw, 3.75rem); text-align: center; }
.a-entete-gauche { margin-left: 0; text-align: left; }
.a-surtitre { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1rem; padding: .35rem .8rem; border-radius: 999px; background: var(--r-sauge); color: var(--r-foret); font-size: .78rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.a-titre { margin: 0 0 1rem; font-size: clamp(2rem, 1.3rem + 2.4vw, 3.2rem); line-height: 1.08; letter-spacing: -.02em; }
.a-titre .a-sourdine { color: #6b7570; }
.a-texte { font-size: 1.1rem; line-height: 1.65; color: var(--texte-secondaire); }

/* ── Lead magnet ───────────────────────────────────────────────────────── */
.a-appel {
    position: relative; overflow: hidden; display: flex; align-items: center; gap: 1.5rem;
    padding: 1.75rem 2rem; border-radius: 26px;
    background: linear-gradient(120deg, var(--r-sauge), #f3f7f1 55%, var(--r-argile-clair));
    border: 1px solid var(--r-sauge-2);
}
.a-appel-icone { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 20px; background: #fff; color: var(--r-argile); font-size: 1.5rem; box-shadow: var(--r-ombre); }
@media (max-width: 767px) { .a-appel { flex-direction: column; align-items: flex-start; } }

.a-tuile-icone { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; margin-bottom: 1rem; border-radius: 14px; background: var(--r-sauge); color: var(--r-foret); }

/* Glow following the mouse (`.r-lueur`, rationnelle-ui.js). */
.r-lueur::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
    background: radial-gradient(420px circle at var(--x, 50%) var(--y, 50%), rgba(198, 113, 57, .09), transparent 45%);
}
.r-lueur:hover::after { opacity: 1; }

/* ── Comparatif ────────────────────────────────────────────────────────── */
.a-comparatif { border-radius: 26px; background: var(--surface-haute); border: 1px solid var(--bordure); box-shadow: var(--r-ombre); overflow: hidden; }
.a-comparatif table { width: 100%; border-collapse: collapse; }
.a-comparatif th, .a-comparatif td { padding: 1rem 1.25rem; border-bottom: 1px solid var(--bordure); text-align: left; font-size: .95rem; }
.a-comparatif tbody tr:last-child > * { border-bottom: 0; }
.a-comparatif thead th { font-size: .82rem; font-weight: 600; color: var(--texte-secondaire); background: var(--r-creme); }
.a-comparatif tbody th { font-weight: 600; color: var(--r-encre); }
.a-comparatif .a-nous { background: linear-gradient(180deg, rgba(47, 122, 88, .07), rgba(47, 122, 88, .03)); color: var(--r-foret); font-weight: 600; }
.a-comparatif thead .a-nous { color: #fff; background: var(--r-foret); }
.a-comparatif .a-non { color: #5f6b65; }
.a-comparatif .a-nous i { margin-right: .4rem; color: var(--r-succes); }
/* On phones four columns do not fit: each criterion becomes a card, Rationnelle last. */
@media (max-width: 640px) {
    .a-comparatif { border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
    .a-comparatif thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .a-comparatif table, .a-comparatif tbody, .a-comparatif tr, .a-comparatif th, .a-comparatif td { display: block; }
    .a-comparatif tbody { display: grid; gap: .75rem; }
    .a-comparatif tr { overflow: hidden; border-radius: 16px; background: var(--surface-haute); border: 1px solid var(--bordure); }
    .a-comparatif tbody th { padding: .85rem 1rem .6rem; border: 0; font-size: .98rem; }
    .a-comparatif td { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 1rem; border: 0; border-top: 1px solid var(--bordure); font-size: .9rem; text-align: right; }
    .a-comparatif td::before { content: attr(data-libelle); color: var(--texte-secondaire); font-weight: 500; text-align: left; }
    .a-comparatif td.a-nous::before { color: var(--r-foret); font-weight: 600; }
    .a-comparatif td.a-nous { gap: 0; }
    .a-comparatif td.a-nous::before { margin-right: 1rem; }
    .a-comparatif td.a-nous i { margin-left: auto; align-self: center; }
    .a-comparatif tbody tr:last-child > * { border-bottom: 0; }
    .a-comparatif tbody tr:last-child > td { border-top: 1px solid var(--bordure); }
}

/* ── Confiance ─────────────────────────────────────────────────────────── */
.a-confiance { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
@media (max-width: 991px) { .a-confiance { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .a-confiance { grid-template-columns: 1fr; } }
.a-confiance > :is(div, article) { position: relative; overflow: hidden; padding: 1.6rem; border-radius: 22px; background: var(--surface-haute); border: 1px solid var(--bordure); }
.a-confiance h3 { margin: 1rem 0 .4rem; font-size: 1.1rem; }
.a-confiance p { margin: 0; font-size: .95rem; color: var(--texte-secondaire); }

/* ── Avis ──────────────────────────────────────────────────────────────── */
.a-avis-section { position: relative; overflow: hidden; overflow: clip; background: var(--r-nuit); color: rgba(232, 238, 233, .8); }
.a-avis-section .a-titre { color: #fff; }
.a-avis-section .a-surtitre { background: rgba(255, 255, 255, .08); color: #a9d8b8; }
.a-avis { columns: 3 300px; column-gap: 1.25rem; }
.a-avis figure { break-inside: avoid; margin: 0 0 1.25rem; padding: 1.5rem; border-radius: 22px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); }
.a-avis blockquote { margin: 0 0 1rem; padding: 0; border: 0; font-size: 1rem; line-height: 1.6; color: rgba(255, 255, 255, .92); }
.a-avis figcaption { font-size: .88rem; color: rgba(232, 238, 233, .65); }
.a-avis figcaption strong { color: #fff; }

/* ── Questions ─────────────────────────────────────────────────────────── */
.a-faq { display: grid; gap: .75rem; max-width: 52rem; margin: 0 auto; }
.a-faq details { padding: 0; border-radius: 18px; background: var(--surface-haute); border: 1px solid var(--bordure); transition: box-shadow .2s; }
.a-faq details[open] { box-shadow: var(--r-ombre); }
.a-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.35rem; font-weight: 600; color: var(--r-encre); cursor: pointer; list-style: none; }
.a-faq summary::-webkit-details-marker { display: none; }
.a-faq summary::after { content: "+"; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--r-sauge); color: var(--r-foret); font-size: 1.1rem; transition: transform .3s var(--r-ease); }
.a-faq details[open] summary::after { transform: rotate(45deg); }
.a-faq details p { margin: 0; padding: 0 1.35rem 1.25rem; color: var(--texte-secondaire); }
@media (max-width: 640px) {
    .a-faq summary { padding: 1rem 1.1rem; font-size: 1rem; line-height: 1.4; }
    .a-faq details p { padding: 0 1.1rem 1.1rem; }
}

/* ── Dernier appel ─────────────────────────────────────────────────────── */
.a-final { position: relative; overflow: hidden; overflow: clip; isolation: isolate; padding: clamp(4.5rem, 3rem + 5vw, 8rem) 0; background: var(--r-nuit); color: rgba(232, 238, 233, .8); text-align: center; }
.a-final::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 900px; height: 900px; transform: translate(-50%, -30%); background: radial-gradient(circle, rgba(198, 113, 57, .45), rgba(47, 122, 88, .25) 40%, transparent 65%); filter: blur(30px); }
.a-final h2 { font-size: clamp(2.2rem, 1.4rem + 3vw, 3.8rem); line-height: 1.05; letter-spacing: -.02em; color: #fff; }

/* ── Mobile action bar ─────────────────────────────────────────────────── */
.r-barre-mobile { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 1035; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem .6rem .6rem 1.1rem; border-radius: 999px; background: rgba(11, 23, 18, .88); color: #fff; backdrop-filter: blur(12px); box-shadow: var(--r-ombre-flottante); }
.r-barre-mobile .r-note { color: rgba(255, 255, 255, .8); }
@media (min-width: 768px) { .r-barre-mobile { display: none !important; } }

/* Three steps side by side only when there is room; stacked on phone and tablet. */
.a-etapes { grid-template-columns: minmax(0, 1fr); max-width: 40rem; margin-inline: auto; }
@media (min-width: 992px) { .a-etapes { grid-template-columns: repeat(3, 1fr); max-width: none; } }

/* Reduced motion: no drift, rotation or scrolling. The still ticker wraps and
   centres; its loop copy is removed. Still hidden on phones. */
@media (prefers-reduced-motion: reduce) {
    .a-halo, .a-simulateur::before, .a-badge-point::before { animation: none !important; }
    .a-defilant-piste { animation: none; flex-wrap: wrap; justify-content: center; width: auto; padding-inline: 16px; }
    .a-defilant-piste span:nth-child(n+15) { display: none; }
}

/* ── Page header (partials/_entete_page.html) ──────────────────────────── */
/* Compact version of the home hero for other pages. The page sets
   `data-ton="sombre"` on <body> so the floating header matches. */
.p-entete {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    overflow: clip;
    padding: calc(88px + clamp(2.25rem, 1rem + 4vw, 4.25rem)) 0 clamp(2.5rem, 1.5rem + 3vw, 4rem);
    background: var(--r-nuit);
    color: rgba(232, 238, 233, .8);
    text-align: center;
}
.p-entete::before {
    content: "";
    position: absolute; inset: 0; z-index: -2;
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 70% 80% at 50% 20%, #000 25%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 20%, #000 25%, transparent 75%);
}
.p-entete .a-halo-1 { width: 520px; height: 520px; top: -260px; }
.p-entete .a-halo-2 { width: 420px; height: 420px; top: -40px; }
.p-entete h1 {
    max-width: 22ch;
    margin: 0 auto .9rem;
    font-size: clamp(2.1rem, 1.4rem + 2.8vw, 3.6rem);
    line-height: 1.06;
    letter-spacing: -.022em;
    color: #fff;
}
.p-entete h1 em, .p-entete h1 .a-degrade { font-style: normal; }
.p-chapo { max-width: 40rem; margin: 0 auto; font-size: 1.1rem; line-height: 1.65; color: rgba(232, 238, 233, .76); }
.p-entete .a-surtitre { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .1); color: #a9d8b8; }
.p-entete-gauche { text-align: left; }
.p-entete-gauche h1, .p-entete-gauche .p-chapo { margin-left: 0; }
.p-entete-suite { margin-top: 1.75rem; }

/* Breadcrumb: a discreet line above the title. */
.p-fil { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; margin: 0 0 1.25rem; padding: 0; list-style: none; font-size: .85rem; color: rgba(232, 238, 233, .55); }
.p-entete-gauche .p-fil { justify-content: flex-start; }
.p-fil li { display: inline-flex; align-items: center; gap: .35rem; }
.p-fil li + li::before { content: "/"; color: rgba(232, 238, 233, .3); }
.p-fil a { color: rgba(232, 238, 233, .75); text-decoration: none; }
.p-fil a:hover { color: #fff; }
.p-fil [aria-current] { max-width: 32ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(232, 238, 233, .55); }

/* Content after the header: generous margin, cream background. */
.p-corps { padding-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); padding-bottom: clamp(3.5rem, 2rem + 4vw, 6rem); }
.p-lecture { max-width: 46rem; margin-inline: auto; }

/* White card overlapping the dark band (login, password). */
.p-entete-chevauche { padding-bottom: clamp(6rem, 4.5rem + 4vw, 8rem); }
.p-chevauche { position: relative; z-index: 1; margin-top: clamp(-6.5rem, -4.5rem - 2vw, -4.5rem); }
.p-carte { padding: clamp(1.4rem, 1rem + 1.5vw, 2.25rem); border-radius: 22px; background: var(--surface-haute); border: 1px solid var(--bordure); box-shadow: var(--r-ombre-haute); }
.p-carte-titre { margin: 0 0 1.25rem; font-family: var(--r-titre); font-size: 1.4rem; font-weight: 600; color: var(--r-encre); }

/* ── Guides: featured article and grid (guides_index.html) ──────────────── */
.g-surtitre { display: inline-block; margin-bottom: .6rem; font-size: .74rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--r-argile); }
.g-meta { display: flex; align-items: center; gap: .45rem; margin: 0; font-size: .84rem; color: var(--texte-secondaire); }
.g-une { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); overflow: hidden; border-radius: 26px; background: var(--surface-haute); border: 1px solid var(--bordure); box-shadow: var(--r-ombre); }
.g-une-image { display: block; overflow: hidden; background: var(--r-creme); }
.g-une-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--r-ease); }
.g-une:hover .g-une-image img { transform: scale(1.03); }
.g-une-texte { display: flex; flex-direction: column; justify-content: center; gap: .25rem; padding: clamp(1.5rem, 1rem + 2vw, 2.75rem); }
.g-une h2 { margin: 0 0 .5rem; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.15; }
.g-une h2 a, .g-carte h2 a { color: var(--r-encre); text-decoration: none; }
.g-une h2 a:hover, .g-carte h2 a:hover { color: var(--r-argile); }
.g-une-texte > p:not(.g-meta) { margin: 0 0 .75rem; color: var(--texte-secondaire); }
.g-une .g-meta { margin-bottom: 1.25rem; }
.g-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin-top: 1.5rem; }
.g-carte { display: flex; flex-direction: column; overflow: hidden; border-radius: 22px; background: var(--surface-haute); border: 1px solid var(--bordure); transition: transform .35s var(--r-ease), box-shadow .35s var(--r-ease); }
.g-carte:hover { transform: translateY(-4px); box-shadow: var(--r-ombre-haute); }
.g-carte-image { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--r-creme); }
.g-carte-image img { width: 100%; height: 100%; object-fit: cover; }
.g-carte-texte { display: flex; flex: 1; flex-direction: column; padding: 1.35rem 1.4rem 1.5rem; }
.g-carte h2 { margin: 0 0 .5rem; font-size: 1.2rem; line-height: 1.25; }
.g-carte-texte > p:not(.g-meta) { margin: 0 0 1rem; font-size: .95rem; color: var(--texte-secondaire); }
.g-carte .g-meta { margin-top: auto; }
@media (max-width: 991px) {
    .g-une { grid-template-columns: minmax(0, 1fr); }
    .g-une-image { aspect-ratio: 16 / 9; }
    .g-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) { .g-grille { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .g-carte:hover, .g-une:hover .g-une-image img { transform: none; } }

/* ── Guide article (guides/_base.html) ─────────────────────────────────── */
.g-meta-sombre { justify-content: center; color: rgba(232, 238, 233, .6); }
.g-couverture { display: block; width: 100%; height: auto; margin-bottom: 2.5rem; border-radius: 22px; box-shadow: var(--r-ombre-haute); }
.g-suite { max-width: 1100px; margin: clamp(3.5rem, 2rem + 4vw, 5.5rem) auto 0; }
.g-suite-titre { margin-bottom: 1.5rem; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); text-align: center; }
.g-suite .g-grille { margin-top: 0; }
.g-carte .h2-carte { margin: 0; font-size: 1.12rem; line-height: 1.3; }
.g-carte .h2-carte a { color: var(--r-encre); text-decoration: none; }
.g-carte .h2-carte a:hover { color: var(--r-argile); }

/* ── Help centre (aide_index.html, aide_article.html) ──────────────────── */
.h-recherche { display: flex; align-items: center; gap: .5rem; max-width: 40rem; margin: 0 auto; padding: .4rem .4rem .4rem 1.1rem; border-radius: 16px; background: #fff; box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .6); }
.h-recherche > i { color: var(--r-argile); }
.h-recherche input { flex: 1; min-width: 0; padding: .65rem .25rem; border: 0; background: none; font-size: 1rem; color: var(--r-encre); outline: none; }
.h-recherche .btn { flex-shrink: 0; border-radius: 12px; }
.h-reinitialiser { display: inline-block; margin-top: .9rem; font-size: .88rem; color: #f7d9c4; }
.h-reinitialiser:hover { color: #fff; }
.h-titre { margin: 0 0 1.25rem; font-size: clamp(1.4rem, 1.15rem + 1vw, 1.9rem); }
.h-resultats { max-width: 52rem; margin: 0 auto 3rem; }
.h-liste { overflow: hidden; border-radius: 20px; background: var(--surface-haute); border: 1px solid var(--bordure); }
.h-resultat { display: block; padding: 1.15rem 1.35rem; border-top: 1px solid var(--bordure); color: inherit; text-decoration: none; transition: background-color .15s; }
.h-resultat:first-child { border-top: 0; }
.h-resultat:hover { background: var(--r-creme); color: inherit; }
.h-resultat-tete { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.h-resultat-tete strong { color: var(--r-encre); }
.h-resultat-texte { display: block; margin-top: .35rem; font-size: .92rem; color: var(--texte-secondaire); }
.h-pastille { flex-shrink: 0; padding: .2rem .6rem; border-radius: 999px; background: var(--r-sauge); color: var(--r-foret); font-size: .74rem; font-weight: 600; }
.h-rubriques { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.h-rubrique { display: flex; flex-direction: column; padding: 1.5rem; border-radius: 22px; background: var(--surface-haute); border: 1px solid var(--bordure); }
.h-rubrique-pleine { grid-column: 1 / -1; }
.h-rubrique-tete { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: .75rem; }
.h-rubrique-tete .a-tuile-icone { flex-shrink: 0; margin: 0; }
.h-rubrique h3 { margin: .15rem 0 .3rem; font-size: 1.15rem; }
.h-rubrique-tete p { margin: 0; font-size: .9rem; color: var(--texte-secondaire); }
.h-articles { margin: 0; padding: 0; list-style: none; }
.h-articles li { border-top: 1px solid var(--bordure); }
.h-articles a { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .7rem .1rem; color: var(--r-encre); font-size: .93rem; font-weight: 500; text-decoration: none; }
.h-articles a i { flex-shrink: 0; font-size: .7rem; color: var(--r-argile); transition: transform .2s var(--r-ease); }
.h-articles a:hover { color: var(--r-argile); }
.h-articles a:hover i { transform: translateX(3px); }
.aide-deux-colonnes { columns: 2; column-gap: 2rem; }
.aide-deux-colonnes li { break-inside: avoid; }
.h-escalade { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); border-radius: 26px; background: radial-gradient(circle at 0% 0%, rgba(47, 122, 88, .4), transparent 55%), var(--r-nuit); color: rgba(232, 238, 233, .78); }
.h-escalade h2 { margin: 0 0 .35rem; font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); color: #fff; }
.h-escalade p { margin: 0; }
.h-escalade .btn { flex-shrink: 0; }
@media (max-width: 991px) { .h-rubriques { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) {
    .h-rubriques { grid-template-columns: minmax(0, 1fr); }
    .aide-deux-colonnes { columns: 1; }
    .h-escalade { flex-direction: column; align-items: flex-start; }
    .h-recherche { flex-wrap: wrap; padding: .5rem; }
    .h-recherche > i { display: none; }
    .h-recherche input { flex-basis: 100%; padding: .6rem .5rem; }
    .h-recherche .btn { width: 100%; }
}

.h-article { margin-bottom: 0; }
.h-article .article-content { font-size: 1.02rem; line-height: 1.75; color: var(--texte); }
.h-article .article-content > :last-child { margin-bottom: 0; }
.h-article .article-content h2 { margin: 2rem 0 .75rem; font-size: 1.4rem; }
.h-article .article-content h3 { margin: 1.5rem 0 .5rem; font-size: 1.15rem; }
.h-article .article-content h2:first-child, .h-article .article-content h3:first-child { margin-top: 0; }
.h-connexes { margin-top: clamp(2.5rem, 1.5rem + 3vw, 3.5rem); }
.h-articles-seuls li:first-child { border-top: 0; }

/* ── Method: sticky contents and reading column (methode.html) ─────────── */
.m-doc { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(2rem, 1rem + 3vw, 4rem); max-width: 1100px; margin: 0 auto; }
.m-sommaire { position: sticky; top: 104px; align-self: start; padding: 1.25rem; border-radius: 18px; background: var(--surface-haute); border: 1px solid var(--bordure); }
.m-sommaire-titre { margin: 0 0 .75rem; font-size: .74rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--texte-secondaire); }
.m-sommaire ol { display: grid; gap: .15rem; margin: 0; padding: 0; list-style: none; }
.m-sommaire a { display: flex; gap: .6rem; padding: .45rem .55rem; border-radius: 10px; color: var(--r-encre); font-size: .9rem; line-height: 1.35; text-decoration: none; transition: background-color .15s; }
.m-sommaire a span { flex-shrink: 0; width: 1.3rem; height: 1.3rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; background: var(--r-sauge); color: var(--r-foret); font-size: .72rem; font-weight: 700; }
.m-sommaire a:hover { background: var(--r-creme); }
.m-contenu { min-width: 0; max-width: 46rem; }
.m-contenu > h2:first-child { margin-top: 0; }
.m-contenu h2 { scroll-margin-top: 110px; }
@media (max-width: 991px) {
    .m-doc { grid-template-columns: minmax(0, 1fr); }
    .m-sommaire { position: static; }
    .m-sommaire ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 559px) { .m-sommaire ol { grid-template-columns: minmax(0, 1fr); } }

/* ── Tarifs (paywall.html) ─────────────────────────────────────────────── */
.t-actions { display: flex; justify-content: center; }
.t-actions .btn { border-radius: 999px; }
.t-animal { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .4rem; margin: 1.25rem 0 0; padding: .45rem 1rem; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); color: #fff; font-size: .9rem; }
.t-animal i { color: #a9d8b8; }
.t-animal .btn-link { color: #f7d9c4; font-size: .9rem; }
.t-offres { padding-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.t-garanties { padding-block: clamp(3rem, 2rem + 3vw, 4.5rem); }
.tarifs-video { text-align: center; }

/* ── Dog and cat pages (landing_dog.html, landing_cat.html) ────────────── */
.l-hero h1 { font-size: clamp(2.1rem, 1.3rem + 2.8vw, 3.5rem); }
/* The shared simulator drops its own card inside the hero glass card. */
.l-simulateur #calculateur { height: auto !important; background: none !important; border: 0 !important; box-shadow: none !important; }
.l-simulateur #calculateur > .card-body { padding: 0 !important; }
.l-titre { font-size: clamp(1.75rem, 1.25rem + 1.8vw, 2.6rem); margin-bottom: 1rem; }
.l-sous-titre { margin: 2rem 0 .6rem; font-size: 1.3rem; }
.l-pourquoi .pourquoi-lien { display: inline-block; margin-top: .75rem; font-weight: 600; color: var(--r-argile); }
.l-final .a-chapo { color: rgba(232, 238, 233, .8); }
.l-final .btn-light, .l-final .r-bouton-discret { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .2); color: #fff; }

.a-avis-provenance { color: rgba(232, 238, 233, .6); }
.l-final .text-color-grey { color: rgba(232, 238, 233, .8) !important; }

/* ── Menus complets (menu_complet.html) ───────────────────────────────── */
.mc-astuce { max-width: 34rem; margin-top: 1.75rem; padding: 1.1rem 1.25rem; border-radius: 18px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); }
.mc-astuce h2 { display: flex; align-items: center; gap: .5rem; margin: 0 0 .4rem; font-family: var(--r-corps); font-size: .95rem; font-weight: 600; color: #fff; }
.mc-astuce h2 i { color: #d98a52; }
/* On tablet the hero is a single column: the tip box takes the full width. */
@media (max-width: 991.98px) { .mc-astuce { max-width: none; } }
.mc-astuce p { margin: 0; font-size: .92rem; line-height: 1.6; color: rgba(232, 238, 233, .75); }
.mc-astuce strong { color: #fff; }

/* ── Free result (resultat_gratuit.html) ───────────────────────────────── */
.res-entete { padding-bottom: clamp(2.25rem, 1.5rem + 2vw, 3.25rem); }
.res-entete .res-retour { color: rgba(232, 238, 233, .7); }
.res-entete .res-retour:hover { color: #fff; }
.res-entete .r-surtitre { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); color: #e8eee9; }
.res-entete .r-surtitre i { color: #a9d8b8; }
.res-entete h1 { max-width: none; margin: 0 0 .5rem; font-size: clamp(1.9rem, 1.4rem + 2vw, 2.8rem); }
.res-entete .r-chiffre { color: #fff; }
.res-entete .r-chapo { color: rgba(232, 238, 233, .75); }

/* ── Status pages ──────────────────────────────────────────────────────── */
/* Status pages (error, confirmations, unsubscribe, password, purchase): dark
   background, one or two centred white cards. Legacy `.card` and
   `.featured-box` get the same look. */
.p-statut {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    overflow: clip;
    min-height: 72vh;
    padding: calc(88px + clamp(2rem, 1rem + 4vw, 4rem)) 0 clamp(3rem, 2rem + 4vw, 5rem);
    background: var(--r-nuit);
}
.p-statut::before {
    content: "";
    position: absolute; inset: 0; z-index: -2;
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 70% 70% at 50% 30%, #000 25%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 30%, #000 25%, transparent 75%);
}
.p-statut-pile { display: grid; gap: 1.25rem; max-width: 600px; margin: 0 auto; }
/* Grid items must be able to shrink below their content width. */
.p-statut-pile > * { min-width: 0; }
.p-statut-large { max-width: 760px; }
.p-statut-carte, .p-statut .card, .p-statut .featured-box {
    border: 0 !important;
    border-radius: 24px !important;
    background: var(--surface-haute) !important;
    box-shadow: 0 40px 100px -40px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .06) !important;
    color: var(--texte);
}
.p-statut-carte, .p-statut .featured-box { padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.p-statut .card, .p-statut .featured-box { margin: 0 !important; }
.p-statut .featured-box .box-content { padding: 0; border: 0; }
.p-statut-icone { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin-bottom: 1.25rem; border-radius: 20px; background: var(--r-argile-clair); color: var(--r-argile); font-size: 1.55rem; }
.p-statut h1 { margin: 0 0 .75rem; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); line-height: 1.15; color: var(--r-encre); }
.p-statut-titre { margin: 0 0 1.25rem; font-size: clamp(1.3rem, 1.1rem + .8vw, 1.65rem); line-height: 1.25; }
.p-statut-texte { color: var(--texte-secondaire); }
.p-statut-code { margin: 0 0 .4rem; font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--texte-secondaire); }
.p-statut-encadre { margin-top: 1.25rem; padding: 1rem 1.25rem; border-radius: 16px; background: var(--r-creme); text-align: left; }
.p-statut-encadre ul { margin-bottom: 0; }
/* Title set directly on the dark background (purchase confirmation). */
.p-statut-h1-clair { color: #fff !important; font-size: clamp(1.8rem, 1.3rem + 2vw, 2.6rem) !important; }
.p-statut-chapo { color: rgba(232, 238, 233, .78); font-size: 1.08rem; }
.p-statut-chapo strong { color: #fff; }
.p-statut > .container > .p-statut-pile > .text-center:not(.p-statut-carte) { color: rgba(232, 238, 233, .8); }
/* A table does not clip its cells: the wrapper rounds and clips, and the last
   row has no separator running into the rounded corners. */
.p-statut .table { margin: 0 !important; background: var(--surface-haute); }
.p-statut .table-responsive { overflow: hidden; border-radius: 18px; background: var(--surface-haute); }
.p-statut .table tbody tr:last-child > * { border-bottom: 0; }
.p-statut .alert-default { margin: 0; border-radius: 16px; }

/* Free calendar (bilan.html): notes under the title. */
.b-notes { display: grid; gap: .75rem; max-width: 42rem; margin: 0 auto; }
.b-note { margin: 0; font-size: .9rem; line-height: 1.6; color: rgba(232, 238, 233, .65); }
.b-favoris { margin: 0; padding: .6rem 1rem; border-radius: 14px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); font-size: .9rem; color: rgba(232, 238, 233, .85); }
.b-favoris i { margin-right: .35rem; color: #d98a52; }
.b-favoris strong { color: #fff; }

/* Print: dark bands disappear, text turns black. */
@media print {
    .p-entete, .p-statut { min-height: 0; padding: 0 0 1rem; background: none !important; color: #000; }
    .p-entete::before, .p-statut::before, .a-halo, .p-fil, .r-haut { display: none !important; }
    .p-entete h1, .p-chapo, .p-entete .a-degrade, .b-note { color: #000 !important; -webkit-text-fill-color: #000; background: none; }
    .p-entete .a-surtitre { display: none; }
}

/* ── Calendar campaign page (campagne_calendrier_chien.html) ───────────── */
.c-entete { position: absolute; top: 0; left: 0; right: 0; z-index: 5; padding: 1.25rem 0; }
.c-entete .r-logo { width: 170px; }
.c-hero { padding-top: calc(80px + clamp(1.5rem, 1rem + 3vw, 3.5rem)); }
.c-hero .row { --bs-gutter-x: 0; }
.c-accroche { max-width: 30ch; margin: 0 auto 2.5rem; font-family: var(--r-titre); font-size: clamp(1.8rem, 1.2rem + 2vw, 2.8rem); font-weight: 600; line-height: 1.1; letter-spacing: -.02em; text-align: center; color: #fff; }
.c-titre { margin: 0 0 1rem; font-size: clamp(2rem, 1.4rem + 2.4vw, 3.2rem); line-height: 1.06; letter-spacing: -.025em; color: #fff; }
.c-preuves { flex-direction: column; gap: .55rem; margin-top: 1.5rem; }
.c-preuves i { margin-right: .1rem; }
/* The form uses the home calculator card. */
.c-simulateur-chapo { margin: -.65rem 0 1.25rem; }
.c-simulateur .r-champs { margin-bottom: 1rem; }
/* Weight and name side by side even on phones: the submit button stays high. */
.c-simulateur .r-champs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: .75rem; }
.c-simulateur .r-champ { margin-bottom: 0; }
@media (max-width: 420px) { .c-simulateur { padding: 1.35rem 1.15rem; } }
.c-hero .carte-calendrier { overflow: hidden; border: 0 !important; border-radius: 26px !important; box-shadow: 0 40px 100px -40px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .06) !important; }
.c-section .titre-campagne { text-align: center; }
.c-pied { padding: 2rem 0; background: var(--r-nuit); font-size: .88rem; color: rgba(232, 238, 233, .6); }
.c-pied a { margin: 0 .75rem; color: rgba(232, 238, 233, .8); text-decoration: none; }
.c-pied a:hover { color: #fff; }
.c-pied p { max-width: 46rem; margin: 1rem auto 0; }
@media (max-width: 991px) { .c-titre { text-align: center; } }

/* ── Dog and cat pages, in-depth redesign ──────────────────────────────── */
/* Why Rationnelle: each card has a small computed visual (`exemple`). */
.l-cartes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.l-carte { position: relative; overflow: hidden; display: flex; flex-direction: column; border-radius: 24px; background: var(--surface-haute); border: 1px solid var(--bordure); transition: transform .35s var(--r-ease), box-shadow .35s var(--r-ease); }
.l-carte:hover { transform: translateY(-4px); box-shadow: var(--r-ombre-haute); }
.l-carte-texte { padding: 1.4rem 1.5rem 1.6rem; }
.l-carte h3 { display: flex; align-items: center; gap: .75rem; margin: 0 0 .6rem; font-size: 1.15rem; line-height: 1.25; }
.l-carte h3 .a-tuile-icone { flex-shrink: 0; width: 2.4rem; height: 2.4rem; margin: 0; border-radius: 12px; }
.l-carte p { margin: 0; color: var(--texte-secondaire); font-size: .95rem; }
.l-carte .pourquoi-lien { display: inline-block; margin-top: .9rem; font-weight: 600; color: var(--r-argile); }
.l-mini { display: grid; align-content: center; gap: .35rem; min-height: 168px; padding: 1.25rem 1.4rem; background: linear-gradient(160deg, var(--r-creme), #fff 85%); border-bottom: 1px solid var(--bordure); }
.l-mini small { margin-top: .35rem; font-size: .76rem; color: #5f6b65; }
.l-mini .a-barre { margin: .15rem 0 .45rem; height: 10px; }
.l-mini-ligne { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: .86rem; color: var(--texte-secondaire); }
.l-mini-ligne b { font-family: var(--r-titre); font-size: 1.2rem; color: var(--r-encre); }
.l-mini-pile { display: flex; gap: 3px; height: 14px; margin: .35rem 0; border-radius: 999px; overflow: hidden; }
.l-puces { display: flex; flex-wrap: wrap; align-content: center; gap: .4rem; }
.l-puces span { padding: .3rem .65rem; border-radius: 999px; background: #fff; border: 1px solid var(--bordure); font-size: .78rem; font-weight: 600; color: var(--r-encre); }
.l-puces .l-puce-c { background: var(--r-sauge); border-color: transparent; color: var(--r-foret); }
.l-panier { gap: .55rem; }
.l-panier span { display: flex; align-items: center; gap: .6rem; padding: .5rem .75rem; border-radius: 12px; background: #fff; border: 1px solid var(--bordure); font-size: .86rem; font-weight: 600; color: var(--r-encre); }
.l-panier i { width: 1.1rem; text-align: center; color: var(--r-argile); }

/* Full plan: dark band, argument left, button right. */
.l-bande-offre { display: grid; grid-template-columns: minmax(0, 1.4fr) auto; align-items: center; gap: 2rem; padding: clamp(1.6rem, 1rem + 2.5vw, 2.75rem); border-radius: 28px; background: radial-gradient(circle at 0% 0%, rgba(47, 122, 88, .45), transparent 55%), radial-gradient(circle at 100% 100%, rgba(198, 113, 57, .3), transparent 50%), var(--r-nuit); color: rgba(232, 238, 233, .8); box-shadow: var(--r-ombre-flottante); }
.l-bande-offre .a-surtitre { background: rgba(255, 255, 255, .08); color: #a9d8b8; }
.l-bande-offre h2 { margin: 0 0 1rem; font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.2rem); line-height: 1.12; color: #fff; }
.l-bande-offre .a-preuves { color: rgba(232, 238, 233, .78); }
.l-bande-offre-action { min-width: 240px; }
.l-bande-offre-action .text-color-grey { color: rgba(232, 238, 233, .7) !important; }

/* Free calendar: dark section, text left, card right. */
.l-calendrier { position: relative; isolation: isolate; overflow: hidden; overflow: clip; background: var(--r-nuit); color: rgba(232, 238, 233, .8); }
.l-calendrier .a-halo-1 { top: -240px; }
.l-calendrier .a-halo-2 { top: auto; bottom: -260px; }
.l-calendrier-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 1rem + 4vw, 4.5rem); }
.l-calendrier .a-surtitre { background: rgba(255, 255, 255, .08); color: #a9d8b8; }
.l-calendrier .a-titre { color: #fff; }
.l-coches { display: grid; gap: .7rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.l-coches li { display: flex; gap: .7rem; align-items: flex-start; color: rgba(232, 238, 233, .85); }
.l-coches i { flex-shrink: 0; margin-top: .3rem; color: #8fc19f; }
/* The card uses the home calculator style, like the campaign page. */
.l-calendrier-simulateur-chapo { margin: -.65rem 0 1.25rem; }
.l-calendrier-simulateur .r-champs { margin-bottom: 1rem; }
@media (max-width: 420px) { .l-calendrier-simulateur { padding: 1.35rem 1.15rem; } }

/* Proportions: the computed sample bowl, then the four guides. */
.l-gamelle { max-width: 900px; margin: 0 auto 1.5rem; padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); border-radius: 24px; background: var(--surface-haute); border: 1px solid var(--bordure); box-shadow: var(--r-ombre); }
.l-gamelle-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 1rem; }
.l-gamelle-tete p { margin: 0; color: var(--texte-secondaire); }
.l-gamelle-tete strong { margin-right: .5rem; font-family: var(--r-titre); font-size: 1.5rem; color: var(--r-encre); }
.l-gamelle-tete > span { flex-shrink: 0; padding: .25rem .7rem; border-radius: 999px; background: var(--r-creme); font-size: .82rem; font-weight: 600; color: var(--texte-secondaire); }
.l-gamelle-pile { display: flex; gap: 3px; height: 18px; border-radius: 999px; overflow: hidden; }
.l-gamelle-pile span { display: block; height: 100%; }
.l-gamelle-legende { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem 1.5rem; margin: 1.1rem 0 0; padding: 0; list-style: none; font-size: .9rem; color: var(--texte-secondaire); }
.l-gamelle-legende li { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.l-gamelle-legende i { flex-shrink: 0; width: 10px; height: 10px; border-radius: 3px; }
.l-gamelle-legende b { margin-left: auto; color: var(--r-encre); white-space: nowrap; }
.l-gamelle-note { display: flex; align-items: center; gap: .5rem; margin: 1.1rem 0 0; padding-top: 1rem; border-top: 1px dashed var(--bordure); font-size: .82rem; color: #5f6b65; }
.l-gamelle-note i { color: var(--r-argile); }
.l-tuiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; max-width: 900px; margin: 0 auto; overflow: hidden; border-radius: 24px; background: var(--bordure); border: 1px solid var(--bordure); }
.l-tuile { padding: 1.4rem 1.3rem; background: var(--surface-haute); }
.l-tuile-pct { display: block; margin-bottom: .4rem; font-family: var(--r-titre); font-size: 2.1rem; font-weight: 600; line-height: 1; color: var(--r-argile); }
.l-tuile h3 { margin: 0 0 .35rem; font-size: 1.02rem; }
.l-tuile p { margin: 0; font-size: .88rem; color: var(--texte-secondaire); }

/* Text and callouts side by side; callouts stay visible while scrolling. */
.l-duo { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: start; max-width: 1140px; margin: 0 auto; }
.l-duo-aside { position: sticky; top: 104px; display: grid; gap: 1rem; }
.l-duo-texte .l-titre { margin-bottom: 1.25rem; }
.l-p { margin: 0 0 1rem; font-size: 1.04rem; line-height: 1.75; color: var(--texte); }
.l-duo-texte .l-sous-titre { margin: 2rem 0 .6rem; font-size: 1.3rem; scroll-margin-top: 110px; }
.l-tableau { overflow-x: auto; border-radius: 20px; background: var(--surface-haute); border: 1px solid var(--bordure); box-shadow: var(--r-ombre); }
.l-tableau table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.l-tableau th, .l-tableau td { padding: .7rem .8rem; border-bottom: 1px solid var(--bordure); text-align: right; white-space: nowrap; }
.l-tableau th:first-child { text-align: left; white-space: normal; }
.l-tableau thead th { font-size: .74rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--texte-secondaire); background: var(--r-creme); }
.l-tableau tbody tr:last-child > * { border-bottom: 0; }
.l-tableau tbody th { font-weight: 500; color: var(--r-encre); }
.l-tableau .l-pct { font-weight: 700; color: var(--r-argile); }
.l-comparaison { padding: 1.5rem; }
.l-liste { padding: 1.2rem 1.35rem; border-radius: 20px; background: var(--surface-haute); border: 1px solid var(--bordure); }
.l-liste-titre { display: flex; align-items: center; gap: .55rem; margin: 0 0 .7rem; font-weight: 600; color: var(--r-encre); }
.l-liste-oui .l-liste-titre i { color: var(--r-succes); }
.l-liste-non .l-liste-titre i { color: var(--r-alerte); }
.l-liste ul { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.l-liste li { position: relative; padding-left: 1.1rem; font-size: .93rem; color: var(--texte-secondaire); }
.l-liste li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--r-succes); }
.l-liste-non li::before { background: var(--r-alerte); }
.l-chiffre-cle { display: flex; gap: 1rem; align-items: center; padding: 1.2rem 1.35rem; border-radius: 20px; background: var(--r-sauge); }
.l-chiffre-cle > span { flex-shrink: 0; font-family: var(--r-titre); font-size: 2rem; font-weight: 600; line-height: 1; color: var(--r-foret); }
.l-chiffre-cle p { margin: 0; font-size: .9rem; color: var(--r-texte); }
.l-chiffre-fort { background: var(--r-nuit); }
.l-chiffre-fort > span { color: #d98a52; }
.l-chiffre-fort p { color: rgba(232, 238, 233, .85); }
.l-chiffre-fort strong { color: #fff; }

/* FAQ: "further reading" links as cards, discreet disclaimer. */
.l-plus-loin { max-width: 52rem; margin: 2.5rem auto 0; }
.l-plus-loin-titre { margin: 0 0 1rem; font-size: 1.15rem; text-align: center; }
.l-liens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.l-lien { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .85rem 1.1rem; border-radius: 14px; background: var(--r-creme); color: var(--r-encre); font-size: .92rem; font-weight: 500; text-decoration: none; transition: background-color .15s; }
.l-lien:hover { background: var(--r-argile-clair); color: var(--r-encre); }
.l-lien i { flex-shrink: 0; font-size: .7rem; color: var(--r-argile); }
.l-avertissement { display: flex; gap: .6rem; align-items: flex-start; max-width: 52rem; margin: 2rem auto 0; font-size: .85rem; color: #5f6b65; }
.l-avertissement i { margin-top: .2rem; color: var(--r-argile); }

@media (max-width: 991px) {
    .l-cartes { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin: 0 auto; }
    .l-bande-offre { grid-template-columns: minmax(0, 1fr); }
    .l-calendrier-grille { grid-template-columns: minmax(0, 1fr); }
    .l-tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .l-duo { grid-template-columns: minmax(0, 1fr); }
    .l-duo-aside { position: static; }
}
@media (max-width: 639px) {
    .l-gamelle-legende { grid-template-columns: minmax(0, 1fr); }
    .l-gamelle-tete { flex-direction: column; gap: .4rem; }
    .l-tuiles { grid-template-columns: minmax(0, 1fr); }
    .l-liens { grid-template-columns: minmax(0, 1fr); }
    .l-mini { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) { .l-carte:hover { transform: none; } }

/* Quantities: intro, full-width table, then text and its callout side by side. */
.l-intro { max-width: 46rem; margin: 0 auto 1.75rem; }
.l-tableau-large { max-width: 1140px; margin: 0 auto clamp(2.5rem, 1.5rem + 2vw, 3.5rem); }
.l-tableau-large th, .l-tableau-large td { padding: .9rem 1.1rem; font-size: .95rem; }
.l-tableau-large th:first-child { min-width: 14rem; }
.l-duo-suite { align-items: start; }
.l-bande-offre-action .text-color-grey { color: rgba(232, 238, 233, .85) !important; font-size: .9rem; }
@media (max-width: 639px) { .l-tableau-large th:first-child { min-width: 10rem; } }

/* On phones the quantity table becomes one card per profile. */
@media (max-width: 639px) {
    .l-tableau-large { overflow: visible; border: 0; background: none; box-shadow: none; }
    .l-tableau-large table, .l-tableau-large tbody, .l-tableau-large tr, .l-tableau-large th, .l-tableau-large td { display: block; }
    .l-tableau-large thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .l-tableau-large tbody { display: grid; gap: .75rem; }
    .l-tableau-large tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; padding: 1rem; border-radius: 18px; background: var(--surface-haute); border: 1px solid var(--bordure); }
    .l-tableau-large tbody th { grid-column: 1 / -1; min-width: 0; padding: 0; border: 0; font-weight: 600; white-space: normal; }
    .l-tableau-large td { padding: .45rem .35rem; border: 0; border-radius: 10px; background: var(--r-creme); text-align: center; font-size: .88rem; white-space: nowrap; }
    .l-tableau-large td::before { content: attr(data-libelle); display: block; margin-bottom: .1rem; font-size: .68rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--texte-secondaire); }
    .l-tableau-large td.l-pct { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; background: var(--r-argile-clair); text-align: left; }
    .l-tableau-large td.l-pct::before { margin: 0; }
}
body:has(#barreCalcul:not([hidden])) .r-haut, body:has(#barreCampagne:not([hidden])) .r-haut { bottom: 84px; }

/* Readability on dark backgrounds: dark bands restore light greys, except
   inside their white cards. */
.body .main :is(.a-hero, .p-entete, .l-bande-offre, .l-calendrier, .a-final, .a-avis-section, .p-statut) :is(.text-color-grey, .text-muted, .text-secondary):not(:is(.card, .p-carte, .p-statut-carte, .l-calendrier-carte, .a-simulateur, .r-resultat-direct, .r-offre, form) *) {
    color: rgba(232, 238, 233, .82) !important;
}
.table .text-color-primary, td.text-color-primary { color: var(--r-argile-fonce) !important; }

/* Free result: the blurred overlay leads to the offer, which highlights
   briefly when reached through that link or the header. */
.r-verrou-lien { color: inherit; text-decoration: none; cursor: pointer; }
.r-verrou-lien:hover, .r-verrou-lien:focus-visible { color: inherit; text-decoration: none; }
.r-verrou-lien .r-carte { transition: transform .2s var(--r-ease), box-shadow .2s; }
.r-verrou-lien:hover .r-carte, .r-verrou-lien:focus-visible .r-carte { transform: translateY(-2px); box-shadow: var(--r-ombre-flottante); }
.r-verrou-lien .r-pastille { margin-bottom: .75rem; }
#offre-plan-complet { scroll-margin-top: 96px; }
#offre-plan-complet:target { animation: res-eclat 1.6s var(--r-ease) 1; }
@keyframes res-eclat { 0%, 100% { box-shadow: var(--r-ombre-haute); } 35% { box-shadow: 0 0 0 4px rgba(198, 113, 57, .35), var(--r-ombre-haute); } }