/* Geist, servie par le site : la feuille jsdelivr appelee jusqu'au 02/10/2026
   repondait 404, les pages s'affichaient en Arial. Licence OFL : fonts/. */

/* ══════════ TOKENS ══════════
   Aligned on www.sorank.com (09/10/2026, research/sorank-design.md): blue
   #4379F0, neutral greys, 1px #E7E7E7 borders, radii 8 / 12 / 16 / 20, flat
   buttons and pills (no gradient, no glow). */
.dsr {
    --blue: #4379F0;            /* fills, icons, focus rings (www --blue) */
    --blue-dark: #2F63D6;       /* hover, active pills (white text 5.4:1) */
    --blue-bg: #F4F7FE;         /* hover tint of the www menus */
    --blue-tint: rgba(67, 121, 240, 0.10);   /* icon tiles */
    --link: #2F63D6;            /* text links: #4379F0 is only 4.0:1 on white */
    --ink: #0A0A0A;             /* headings */
    --text: #1F2937;            /* prose */
    --text-secondary: #4B5563;  /* 7.2:1 on --bg */
    --text-muted: #6B7280;      /* smallest grey allowed for text: 4.6:1 on --bg */
    --bg: #FAFAFA;
    --grey: #F3F3F3;
    --white: #FFFFFF;
    --border: #E7E7E7;
    --border-strong: #D6D6D6;
    --border-panel: #ECECEC;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 32px -12px rgba(16, 37, 94, 0.18);
    --shadow-panel: 0 24px 60px rgba(16, 37, 94, 0.16);
    --shadow-btn: 0 2px 10px -3px rgba(0, 0, 0, 0.2);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius: 16px;
    --radius-lg: 20px;
    --radius-pill: 999px;
    --ease: cubic-bezier(.2, .8, .2, 1);
    /* One layout box for every band: header, breadcrumb, filter bar,
       sections, footer. 1200 - 2 x 32 = 1136px, so every left edge is at
       x=152 at 1440px, x=32 at 1024px and x=16 on phones. */
    --container: 1200px;
    --gutter: 32px;
    --content: calc(var(--container) - 2 * var(--gutter));
    --measure: 100%;            /* text of the sections: the full width of the page grid */
    --section-pad: 28px;        /* two sections are 56px apart */
    --nav-h: 76px;
}
@media (max-width: 991px) { .dsr { --nav-h: 64px; } }
@media (max-width: 768px) { .dsr { --gutter: 16px; --section-pad: 22px; } }

.dsr * { margin: 0; padding: 0; box-sizing: border-box; }
.dsr, .dsr { overflow-x: clip; }
.dsr {
    font-family: 'Geist', Arial, sans-serif; background: var(--bg); color: var(--text);
    font-size: 16px; line-height: 1.65; font-weight: 400;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
@media (prefers-reduced-motion: no-preference) { .dsr { scroll-behavior: smooth; } }
.dsr [id] { scroll-margin-top: 72px; }

/* Focus: one visible ring everywhere (white on the blue header) */
.dsr :focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.dsr .nav-wrapper :focus-visible, .dsr .hero :focus-visible { outline-color: #fff; }

/* ══════════ NAV + HERO WRAPPER ══════════ */
.dsr .nav-hero-wrapper {
    background: #4379F0 url('hero-bg.webp') 50% 0 / cover no-repeat;
}
@media (max-width: 900px) {
    .dsr .nav-hero-wrapper { background-image: url('hero-bg-sm.webp'); }
}

/* ══════════ NAV (like www.sorank.com, Navbar.astro) ══════════ */
.dsr .nav-wrapper {
    position: relative; z-index: 100;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.dsr nav {
    position: relative;
    display: flex; align-items: center;
    height: var(--nav-h); max-width: var(--container); margin: 0 auto; width: 100%;
    padding: 0 var(--gutter);
}
.dsr .nav-left { display: flex; align-items: center; flex: 1; flex-shrink: 0; }
.dsr .nav-center { display: flex; align-items: center; justify-content: center; gap: 8px; }
.dsr .nav-right { display: flex; align-items: center; gap: 8px; flex: 1; justify-content: flex-end; min-width: max-content; margin-left: 16px; }
/* Logo: the 750px file of www.sorank.com shown at 100 x 33, fully opaque
   (the 300px copy at 84 x 28 looked washed out). */
.dsr .nav-logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; border-radius: 4px; }
.dsr .nav-logo img { height: 33px; width: auto; display: block; opacity: 1; }
.dsr .nav-links { display: flex; align-items: center; gap: 8px; }
.dsr .nav-links > a, .dsr .nav-dd-toggle {
    display: inline-flex; align-items: center; gap: 5px;
    font-family: inherit; font-size: 16px; line-height: 24px; font-weight: 400; color: #fff;
    background: none; border: 0; border-radius: 6px; padding: 5px 7px;
    text-decoration: none; white-space: nowrap; cursor: pointer;
    transition: opacity 0.15s;
}
.dsr .nav-links > a:hover { opacity: 0.82; }
.dsr .nav-links > a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.dsr .nav-dd-toggle svg { color: #fff; transition: transform 0.18s var(--ease); }
.dsr .nav-page-dropdown.open > .nav-dd-toggle svg { transform: rotate(180deg); }

/* Language switcher: round flag, hover like www (500ms close delay in nav.js) */
.dsr .lang-dropdown { position: relative; }
.dsr .lang-dropdown-btn {
    display: flex; align-items: center; gap: 8px;
    background: none; border: none; border-radius: 50%;
    padding: 6px; cursor: pointer; font-family: inherit;
}
.dsr .lang-dropdown-btn img { width: 20px; height: 20px; object-fit: cover; border-radius: 50%; display: block; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35); }
.dsr .lang-dropdown-btn span { display: none; }
.dsr .lang-dropdown-btn svg { display: none; }
.dsr .lang-dropdown-menu {
    display: none; position: absolute; top: 100%; right: -2px;
    background: var(--white); border: 1px solid var(--border-panel); border-radius: 14px;
    box-shadow: var(--shadow-panel); z-index: 200; padding: 6px;
    flex-direction: column; gap: 4px;
}
.dsr .lang-dropdown.open .lang-dropdown-menu { display: flex; }
.dsr .lang-dropdown-item {
    display: flex; align-items: center; justify-content: center;
    padding: 6px; font-size: 0; color: transparent;
    text-decoration: none; border-radius: 10px;
    transition: background-color 0.15s;
}
.dsr .lang-dropdown-item:hover, .dsr .lang-dropdown-item:focus-visible { background: var(--blue-bg); }
.dsr .lang-dropdown-item img { width: 24px; height: 24px; object-fit: cover; border-radius: 50%; display: block; }

/* Buttons of the header: "Connexion" link and the black www CTA */
.dsr .nav-login {
    color: #fff; font-size: 16px; line-height: 24px; font-weight: 400; text-decoration: none;
    padding: 5px 7px; border-radius: 6px; white-space: nowrap; transition: opacity 0.15s;
}
.dsr .nav-login:hover { opacity: 0.82; }
.dsr .nav-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    font-family: inherit; font-size: 16px; line-height: 16px; font-weight: 500; letter-spacing: -0.2px;
    padding: 8px 12px; min-height: 34px; border-radius: var(--radius-sm); border: none;
    text-decoration: none; white-space: nowrap; cursor: pointer;
    transition: background-color 0.3s;
}
.dsr .nav-btn-primary { color: #fff; background: #000; box-shadow: var(--shadow-btn); }
.dsr .nav-btn-primary:hover { background: #1F1F1F; }
.dsr .nav-btn-primary svg { width: 16px; height: 16px; }

/* Mobile CTA (hidden on desktop, shown in the mobile menu) */
.dsr .nav-mobile-cta { display: none; }

/* Hamburger (mobile) */
.dsr .nav-hamburger {
    display: none; background: none; border: none; cursor: pointer;
    width: 44px; height: 44px; padding: 11px; border-radius: 10px; margin-left: 8px;
    transition: background-color 0.2s;
}
.dsr .nav-hamburger svg { display: block; }
.dsr .nav-hamburger .nav-hamburger-close { display: none; }
.dsr .nav-hamburger[aria-expanded="true"] { background: rgba(255, 255, 255, 0.18); }
.dsr .nav-hamburger[aria-expanded="true"] .nav-hamburger-open { display: none; }
.dsr .nav-hamburger[aria-expanded="true"] .nav-hamburger-close { display: block; }

/* ── Header menus ──
   www.sorank.com: white panel, radius 18, padding 10, 40px icon tiles
   (radius 11), 15px names, hover #F4F7FE, panel flush under the toggle.
   nav.js opens them on hover (intent delays), click/tap and keyboard. */
.dsr .nav-page-dropdown { position: relative; }
.dsr .nav-page-menu {
    display: none; position: absolute; top: 100%; left: 0; z-index: 200;
    background: var(--white); border: 1px solid var(--border-panel); border-radius: 18px;
    box-shadow: var(--shadow-panel); padding: 10px; min-width: 260px;
}
.dsr .nav-page-dropdown.open > .nav-page-menu { display: block; }
.dsr .nav-menu-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px;
    width: min(780px, calc(100vw - 32px));
}
.dsr .nav-page-dropdown.open > .nav-menu-grid { display: grid; }
.dsr .nav-menu-grid .nav-menu-all { grid-column: 1 / -1; }
.dsr .nav-menu-list { width: 300px; }
/* Model logos are already rounded tiles: show them as the tile */
.dsr .nav-menu-list .nav-ico-logo { background: none; border: 0; }
.dsr .nav-menu-list .nav-ico-logo img { width: 40px; height: 40px; border-radius: 11px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06); }
.dsr .nav-page-menu a {
    display: flex; align-items: center; gap: 12px; padding: 10px 12px; min-width: 0;
    font-size: 15px; line-height: 20px; font-weight: 500; color: #111; text-decoration: none;
    border-radius: 12px; transition: background-color 0.15s;
}
.dsr .nav-page-menu a:hover, .dsr .nav-page-menu a:focus-visible, .dsr .nav-page-menu a[aria-current="page"] { background: var(--blue-bg); }
.dsr .nav-page-menu a:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.dsr .nav-item-text { display: flex; flex-direction: column; min-width: 0; }
.dsr .nav-item-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dsr .nav-item-desc { font-size: 13px; line-height: 18px; font-weight: 400; color: #6B7280; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dsr .nav-ico {
    display: inline-flex; flex: none; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 11px; background: var(--blue-tint);
}
.dsr .nav-ico img { width: 20px; height: 20px; display: block; }
.dsr .nav-ico-logo { background: #fff; border: 1px solid var(--border-panel); }
.dsr .nav-ico-logo img { border-radius: 5px; object-fit: contain; }
/* Footer tray of a menu: "All industries (37) →" */
.dsr .nav-page-menu a.nav-menu-all {
    justify-content: space-between; margin: 6px -10px -10px; padding: 12px 22px;
    background: #FAFAFA; border-top: 1px solid var(--border-panel); border-radius: 0 0 18px 18px;
    font-size: 14px; color: var(--link);
}
.dsr .nav-page-menu a.nav-menu-all:hover, .dsr .nav-page-menu a.nav-menu-all:focus-visible { background: var(--blue-bg); }

/* Desktop: fade + 4px slide (160ms), flush under the toggle. The panels stay
   display:none until nav.js marks the header "live" (first pointer or focus),
   so their ~40 lazy images never compete with the hero on page load. */
@media (min-width: 992px) {
    .dsr .nav-live .nav-page-menu, .dsr .nav-live .lang-dropdown-menu {
        display: block; visibility: hidden; opacity: 0; pointer-events: none;
        transform: translate3d(var(--dx, 0px), 4px, 0);
        transition: opacity 0.16s var(--ease), transform 0.16s var(--ease), visibility 0s linear 0.16s;
    }
    .dsr .nav-live .nav-menu-grid { display: grid; }
    .dsr .nav-live .lang-dropdown-menu { display: flex; }
    .dsr .nav-live .open > .nav-page-menu, .dsr .nav-live .lang-dropdown.open .lang-dropdown-menu {
        visibility: visible; opacity: 1; pointer-events: auto;
        transform: translate3d(var(--dx, 0px), 0, 0);
        transition: opacity 0.16s var(--ease), transform 0.16s var(--ease), visibility 0s;
    }
    /* Without JavaScript (nav.js adds .nav-js): plain CSS hover and focus */
    .dsr .nav-center:not(.nav-js) .nav-page-dropdown:hover > .nav-page-menu,
    .dsr .nav-center:not(.nav-js) .nav-page-dropdown:focus-within > .nav-page-menu { display: block; }
    .dsr .nav-center:not(.nav-js) .nav-page-dropdown:hover > .nav-menu-grid,
    .dsr .nav-center:not(.nav-js) .nav-page-dropdown:focus-within > .nav-menu-grid { display: grid; }
    /* Hover bridge: the pointer can travel from the toggle into the panel */
    .dsr .nav-page-menu::before, .dsr .lang-dropdown-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .dsr .nav-live .nav-page-menu, .dsr .nav-live .lang-dropdown-menu { transition: none !important; transform: translate3d(var(--dx, 0px), 0, 0) !important; }
    .dsr .nav-dd-toggle svg { transition: none !important; }
}

/* ══════════ HERO ══════════ */
.dsr .hero {
    background: transparent;
    padding: 64px var(--gutter) 72px;
    text-align: center; position: relative; overflow: hidden;
}
.dsr .hero-content { position: relative; max-width: var(--content); margin: 0 auto; }
.dsr .hero-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.28);
    color: #fff; font-size: 13px; line-height: 18px; font-weight: 500;
    padding: 5px 14px; border-radius: var(--radius-pill); margin-bottom: 20px;
}
.dsr .hero h1 {
    font-size: 48px; font-weight: 600; line-height: 1.1; letter-spacing: -0.025em;
    color: var(--white); margin: 0 auto 16px; max-width: 860px; text-wrap: balance;
}
.dsr .hero h1 .blue { color: #D4E2FF; }
.dsr .hero p {
    font-size: 18px; line-height: 1.55; color: #fff; opacity: 0.94;
    margin: 0 auto 28px; max-width: 640px; text-wrap: pretty;
}
.dsr .hero-llms { display: flex; justify-content: center; gap: 16px; margin-bottom: 28px; }
.dsr .hero-llms a {
    display: flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; border-radius: 14px;
    box-shadow: 0 8px 20px rgba(11, 17, 32, 0.20), 0 0 0 1px rgba(255, 255, 255, 0.25);
    transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.dsr .hero-llms a:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(11, 17, 32, 0.26), 0 0 0 1px rgba(255, 255, 255, 0.45); }
.dsr .hero-llms img { width: 48px; height: 48px; border-radius: 14px; display: block; }
.dsr .hero-stats { display: flex; justify-content: center; gap: 48px; margin-top: 32px; }
.dsr .hero-stat-value { font-size: 32px; line-height: 1.1; font-weight: 600; color: var(--white); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.dsr .hero-stat-label { font-size: 12px; line-height: 16px; font-weight: 500; color: rgba(255, 255, 255, 0.82); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 6px; }

/* Inner pages: left-aligned on the page edge, like the content below */
.dsr .hero-sm { padding: 44px var(--gutter) 48px; text-align: left; }
.dsr .hero-sm h1 {
    font-size: 36px; line-height: 1.15; margin: 0 0 12px; max-width: none;
    display: flex; align-items: center; justify-content: flex-start; gap: 16px;
}
.dsr .hero-sm p { margin: 0; max-width: var(--measure); font-size: 17px; line-height: 1.6; }
.dsr .hero-sm .hero-badge { margin-bottom: 16px; }
.dsr .hero-favicon { width: 48px; height: 48px; border-radius: 12px; display: block; flex-shrink: 0; background: #fff; box-shadow: 0 8px 20px rgba(11, 17, 32, 0.18); object-fit: contain; }
.dsr img.hero-favicon { padding: 6px; }
/* The H1 is a flex row (icon + text): the text sits in ONE span, otherwise
   each text node and <span class="blue"> becomes a flex item and the 14px gap
   opens between "Logiciels" and ": mentions IA". */
.dsr .hero-h1-text { display: block; min-width: 0; }
.dsr .hero-icon { display: flex; align-items: center; justify-content: center; }
.dsr .hero-icon img { width: 26px; height: 26px; display: block; }

/* ══════════ ONE LAYOUT BOX ══════════
   Breadcrumb, filter bar, main, GEO box and footer share --content, so
   their left edges line up at every width. */
.dsr .container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.dsr main.container { padding-top: 12px; padding-bottom: 24px; }

/* ══════════ FILTER BAR ══════════ */
.dsr .filter-bar {
    background: rgba(255, 255, 255, 0.88); border-bottom: 1px solid var(--border);
    -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px);
    padding: 0 var(--gutter); position: sticky; top: 0; z-index: 60;
}
.dsr .filter-bar:has(.filter-bar-inner:empty),
.dsr .filter-bar-inner:empty { display: none; }
.dsr .filter-bar-inner {
    max-width: var(--content); margin: 0 auto;
    display: flex; align-items: center; gap: 0;
    min-height: 52px;
}
.dsr .filter-bar-inner > .month-nav-inner {
    flex: 1; overflow-x: auto; display: flex; gap: 2px;
    align-items: center; padding: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.dsr .filter-bar-inner > .month-nav-inner::-webkit-scrollbar { display: none; }
.dsr .filter-bar-inner > .tabs {
    display: flex; gap: 4px; align-items: center;
    padding: 0 0 0 12px;
    border-left: 1px solid var(--border); margin-left: 12px;
    flex-shrink: 0;
    margin-bottom: 0;
}

/* Pills: flat, like www (no gradient, no glow). Active = blue-dark, 5.4:1. */
.dsr .month-btn {
    display: inline-flex; align-items: center; min-height: 32px;
    padding: 0 14px; border-radius: var(--radius-pill); border: none;
    background: transparent; color: var(--text-secondary); cursor: pointer;
    font-size: 14px; line-height: 20px; font-weight: 500; font-family: inherit;
    font-variant-numeric: tabular-nums; white-space: nowrap;
    transition: background-color 0.15s, color 0.15s;
}
.dsr .month-btn:hover { color: var(--ink); background: var(--grey); }
.dsr .month-btn.active { color: #fff; background: var(--blue-dark); font-weight: 500; box-shadow: none; }

/* ══════════ BREADCRUMB ══════════ */
.dsr .breadcrumb {
    padding: 0 var(--gutter); background: var(--white); border-bottom: 1px solid var(--border);
    font-size: 14px; line-height: 20px; color: var(--text-muted);
}
.dsr .breadcrumb-inner { max-width: var(--content); margin: 0 auto; padding: 12px 0; }
.dsr .breadcrumb a { color: var(--link); text-decoration: none; border-radius: 4px; }
.dsr .breadcrumb a:hover { text-decoration: underline; text-underline-offset: 3px; }
.dsr .breadcrumb span { margin: 0 8px; color: var(--text-muted); }

/* ══════════ SECTIONS ══════════ */
.dsr .section { padding: var(--section-pad) 0; }
.dsr .section-title {
    font-size: 26px; line-height: 32px; font-weight: 600; letter-spacing: -0.02em;
    color: var(--ink); margin-bottom: 8px; text-wrap: balance;
}
.dsr .section-desc { font-size: 16px; line-height: 1.6; color: var(--text-secondary); max-width: var(--measure); margin-bottom: 20px; }
.dsr .section-title + .card, .dsr .section-title + .grid-2, .dsr .section-title + .grid-3, .dsr .section-title + .kf-grid { margin-top: 16px; }

/* ══════════ CARDS ══════════
   Static boxes do not move on hover (www never animates a box that cannot
   be clicked). Only links (index cards, logo chips) react. */
.dsr .card {
    background: var(--white); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 24px;
    box-shadow: var(--shadow-sm); margin-bottom: 20px;
    overflow: hidden; position: relative;
}
.dsr .card .chart { margin: 0 -4px; }
.dsr .card-title { font-size: 16px; line-height: 22px; font-weight: 600; color: var(--ink); margin-bottom: 16px; }

/* ══════════ TABS ══════════ */
.dsr .tabs { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.dsr .tab {
    display: inline-flex; align-items: center; min-height: 32px;
    padding: 0 14px; border-radius: var(--radius-pill); border: 1px solid var(--border);
    background: var(--white); color: var(--text-secondary); cursor: pointer;
    font-size: 14px; line-height: 20px; font-weight: 500; font-family: inherit;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.dsr .tab:hover { border-color: var(--border-strong); color: var(--ink); }
.dsr .tab.active { background: var(--blue-dark); color: var(--white); border-color: var(--blue-dark); box-shadow: none; }

/* Filter select (dropdown replacement for wide tab bars) */
.dsr .filter-select {
    min-height: 32px; padding: 0 32px 0 14px; border-radius: var(--radius-pill); border: 1px solid var(--border);
    background: var(--white) url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;
    color: var(--text); cursor: pointer;
    font-size: 14px; line-height: 20px; font-weight: 500; font-family: inherit;
    appearance: none; -webkit-appearance: none;
    transition: border-color 0.15s;
}
.dsr .filter-select:hover { border-color: var(--border-strong); }
.dsr .filter-select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(67, 121, 240, 0.18); }

/* ══════════ CHARTS ══════════ */
.dsr .chart { width: 100%; height: 480px; position: relative; }
.dsr .chart-stats {
    display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 12px 0 0;
    font-size: 13px; line-height: 18px; color: var(--text-secondary); font-variant-numeric: tabular-nums;
}
.dsr .chart-stats span { white-space: nowrap; background: var(--grey); padding: 4px 12px; border-radius: var(--radius-pill); }
.dsr .chart-stats strong { color: var(--ink); font-weight: 600; }
.dsr .chart-watermark {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 170px;
    pointer-events: none;
}
.dsr .chart-lg { height: 560px; }

/* Download button */
.dsr .chart-download-btn {
    position: absolute; top: 8px; right: 8px; z-index: 10;
    background: var(--white); border: 1px solid var(--border); border-radius: 10px;
    padding: 7px 9px; cursor: pointer; color: var(--text-muted);
    transition: color 0.15s, border-color 0.15s, background-color 0.15s;
    display: flex; align-items: center;
    box-shadow: var(--shadow-sm);
}
.dsr .chart-download-btn:hover, .dsr .chart-download-btn[aria-expanded="true"] { color: #fff; border-color: var(--blue-dark); background: var(--blue-dark); }
.dsr .chart-download-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Menu Top 10 / Top 20 / vue actuelle, sous le bouton de telechargement */
.dsr .chart-download-menu {
    position: absolute; top: 46px; right: 8px; z-index: 11;
    min-width: 188px; padding: 6px;
    background: var(--white); border: 1px solid var(--border-panel); border-radius: var(--radius-md);
    box-shadow: var(--shadow-panel);
    display: flex; flex-direction: column; gap: 2px;
}
.dsr .chart-download-menu[hidden] { display: none; }
.dsr .chart-download-item {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    width: 100%; min-height: 44px; padding: 10px 12px;
    background: none; border: 0; border-radius: var(--radius-sm); cursor: pointer;
    font: inherit; font-size: 14px; font-weight: 500; color: var(--text); text-align: left;
}
.dsr .chart-download-item small { font-size: 12px; font-weight: 400; color: var(--text-muted); }
.dsr .chart-download-item:hover, .dsr .chart-download-item:focus-visible { background: var(--blue-bg); color: var(--blue-dark); outline: none; }
.dsr .chart-download-item:hover small, .dsr .chart-download-item:focus-visible small { color: var(--blue-dark); }

/* ══════════ GRID ══════════ */
.dsr .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.dsr .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

/* ══════════ INDEX CARDS (links) ══════════ */
.dsr .index-card {
    background: var(--white); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 20px;
    box-shadow: var(--shadow-sm); text-decoration: none; color: var(--text);
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s var(--ease); display: block;
}
.dsr .index-card:hover { border-color: #C9D7FA; box-shadow: var(--shadow); transform: translateY(-2px); }
.dsr .index-card-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 11px; margin-bottom: 12px;
    background: var(--blue-tint);
}
.dsr .index-card-icon img { width: 20px; height: 20px; display: block; }
.dsr .index-card-logo { background: #fff; border: 1px solid var(--border-panel); }
.dsr .index-card-logo img { width: 22px; height: 22px; border-radius: 5px; }

/* ══════════ PLATFORM LOGOS GRID (links) ══════════ */
.dsr .platform-logos-grid { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-start; margin-top: 16px; }
.dsr .platform-logo-item {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 10px 12px; border-radius: var(--radius-md); text-decoration: none;
    transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease); min-width: 72px;
    border: 1px solid var(--border); background: var(--white);
}
.dsr .platform-logo-item:hover { border-color: #C9D7FA; box-shadow: var(--shadow); transform: translateY(-2px); }
.dsr .platform-logo-item img { width: 24px; height: 24px; border-radius: 6px; }
.dsr .platform-logo-item span { font-size: 12px; line-height: 16px; color: var(--text-secondary); font-weight: 500; white-space: nowrap; }

/* ══════════ CRAWLABLE DATA BLOCKS (scripts/seo_blocks.py) ══════════ */
/* Figures, tables and answers written in the HTML at build time: readable
   without JavaScript by Google and the AI crawlers, and by people too. */
.dsr .key-figures, .dsr .data-section, .dsr .related-section, .dsr .faq-section { padding: var(--section-pad) 0; }
.dsr .kf-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.dsr .kf-item {
    background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md);
    padding: 18px 20px; box-shadow: var(--shadow-sm); min-width: 0;
}
.dsr .kf-value { font-size: 28px; line-height: 1.15; font-weight: 600; color: var(--ink); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dsr .kf-label { margin-top: 8px; font-size: 14px; line-height: 1.45; color: var(--text-secondary); }
.dsr .data-card { padding: 0; margin-top: 16px; }
.dsr .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dsr .data-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; font-variant-numeric: tabular-nums; }
.dsr .data-table th, .dsr .data-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
.dsr .data-table th { font-size: 13px; font-weight: 600; color: var(--text-secondary); background: #FAFAFA; }
.dsr .data-table .num { text-align: right; }
.dsr .data-table tbody th { font-size: inherit; font-weight: 500; letter-spacing: 0; color: var(--ink); background: none; }
.dsr .data-table tbody tr:hover { background: var(--blue-bg); }
.dsr .data-table tfoot td { font-weight: 600; color: var(--ink); background: #FAFAFA; border-bottom: none; }
.dsr .data-table a { color: var(--link); text-decoration: none; font-weight: 500; }
.dsr .data-table a:hover { text-decoration: underline; text-underline-offset: 3px; }
.dsr .data-note { padding: 12px 16px; font-size: 13px; line-height: 1.5; color: var(--text-muted); border-top: 1px solid var(--border); }
.dsr .related-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.dsr .related-link {
    display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px;
    background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md);
    color: var(--ink); text-decoration: none; font-size: 14px; line-height: 20px; font-weight: 500;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.dsr .related-link:hover { border-color: #C9D7FA; box-shadow: var(--shadow-sm); }
.dsr .related-link img { width: 20px; height: 20px; border-radius: 5px; object-fit: contain; }
.dsr .related-link small { color: var(--text-muted); font-size: 13px; font-weight: 400; font-variant-numeric: tabular-nums; }
.dsr .compare-links { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0 8px; }
.dsr .compare-link {
    display: inline-flex; align-items: center; min-height: 32px;
    padding: 0 14px; border-radius: var(--radius-pill); background: var(--blue-bg); color: var(--blue-dark);
    font-size: 14px; line-height: 20px; font-weight: 500; text-decoration: none;
    transition: background-color 0.15s;
}
.dsr .compare-link:hover { background: #E3EBFD; }
.dsr .index-card-meta { display: block; margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
    .dsr .kf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dsr .kf-value { font-size: 22px; }
    .dsr .data-table { font-size: 13px; }
    .dsr .data-table th { white-space: normal; vertical-align: bottom; }
    .dsr .data-table th, .dsr .data-table td { padding: 10px 8px; }
    .dsr .data-table th:first-child, .dsr .data-table td:first-child { padding-left: 12px; }
    .dsr .data-table th:last-child, .dsr .data-table td:last-child { padding-right: 12px; }
}

/* ══════════ CALL TO ACTION + FOOTER (same as www.sorank.com) ══════════ */
/* The card straddles the end of the page and the black footer: on www only
   its bottom 86px overlap the black. Measured values: research/sorank-design.md §2. */
.dsr .site-cta-wrap {
    padding: 72px var(--gutter) 0;
    background: linear-gradient(to bottom, transparent calc(100% - 86px), #000 calc(100% - 86px));
}
.dsr .site-cta {
    position: relative; overflow: hidden;
    max-width: var(--content); margin: 0 auto; padding: 60px 40px;
    border-radius: var(--radius-lg); text-align: center; color: #fff;
    background: #3D78F0 url('hero-bg.webp') 50% 0 / cover no-repeat;
}
.dsr .site-cta-title {
    position: relative; z-index: 1;
    max-width: 680px; margin: 0 auto;
    font-size: 48px; line-height: 1.1; font-weight: 500; letter-spacing: -0.045em; color: #fff;
    text-wrap: balance;
}
.dsr .site-cta-text {
    position: relative; z-index: 1;
    max-width: 560px; margin: 16px auto 0;
    font-size: 16px; line-height: 1.55; color: #fff; opacity: 0.92;
}
.dsr .site-cta-proof {
    position: relative; z-index: 1;
    display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 24px;
}
.dsr .site-cta-avatars { display: flex; padding-left: 12px; }
.dsr .site-cta-avatars img {
    width: 32px; height: 32px; border-radius: 50%; object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.4); margin-left: -12px; background: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.dsr .site-cta-rating { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.dsr .site-cta-stars { display: flex; gap: 2px; }
.dsr .site-cta-stars img { width: 12px; height: 12px; display: block; }
.dsr .site-cta-users { font-size: 12px; line-height: 16px; color: #fff; }
.dsr .site-cta-users strong { font-weight: 600; }
.dsr .site-cta-btn {
    position: relative; z-index: 1;
    display: inline-flex; align-items: center; gap: 6px; margin-top: 22px;
    padding: 9px 14px; border-radius: var(--radius-sm); background: #000; color: #fff;
    font-size: 16px; line-height: 16px; font-weight: 500; letter-spacing: -0.2px; text-decoration: none;
    box-shadow: var(--shadow-btn); transition: background-color 0.3s;
}
.dsr .site-cta-btn:hover { background: #1F1F1F; }
.dsr .site-cta-btn svg { width: 16px; height: 16px; }
/* Floating notification cards: rounded with a translucent rim, like www
   (the images are white rectangles, www rounds them in CSS). */
.dsr .site-cta-float {
    position: absolute; bottom: 64px; width: 200px; height: auto; z-index: 0;
    border-radius: 20px; border: 3px solid rgba(255, 255, 255, 0.4);
    opacity: 0.8; transition: opacity 0.35s ease-in-out;
}
.dsr .site-cta-float:hover { opacity: 1; }
.dsr .site-cta-float-left { left: 64px; transform: rotateY(1deg) rotate(4deg); animation: srk-float-a 4s ease-in-out infinite; }
.dsr .site-cta-float-right { right: 64px; transform: rotateY(1deg) rotate(-4deg); animation: srk-float-b 5.5s ease-in-out 0.6s infinite; }
@keyframes srk-float-a { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes srk-float-b { 0%, 100% { translate: 0 0; } 50% { translate: 0 -13px; } }
@media (prefers-reduced-motion: reduce) { .dsr .site-cta-float { animation: none; } }
@media (max-width: 1100px) { .dsr .site-cta-float { display: none; } }

.dsr .site-footer { background: #000; color: #F3F3F3; padding: 120px var(--gutter) 32px; }
.dsr .site-footer-inner { max-width: var(--content); margin: 0 auto; }
.dsr .site-footer-grid { display: grid; grid-template-columns: 288px repeat(4, minmax(0, 1fr)); gap: 32px; }
.dsr .site-footer-brand { display: flex; flex-direction: column; align-items: flex-start; }
.dsr .site-footer-logo { display: inline-block; border-radius: 4px; }
.dsr .site-footer-logo img { width: 100px; height: auto; display: block; }
.dsr .site-footer-tagline { margin: 18px 0 0; max-width: 280px; font-size: 16px; line-height: 24px; letter-spacing: -0.3px; color: #F3F3F3; }
/* Rating badges: icon, then the score, 20px like www */
.dsr .site-footer-reviews { display: flex; gap: 8px; margin-top: 40px; }
.dsr .site-review {
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    min-width: 72px; padding: 12px 10px; border-radius: var(--radius-md);
    color: rgba(255, 255, 255, 0.62); font-size: 20px; line-height: 22px; font-weight: 500;
    font-variant-numeric: tabular-nums; text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
}
.dsr .site-review:first-child { margin-left: -10px; }
.dsr .site-review:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.dsr .site-review img { width: 35px; height: 35px; object-fit: contain; display: block; }
/* Round social buttons that lift on hover, like www */
.dsr .site-footer-social { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.dsr .site-social {
    width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.08);
    transition: transform 0.2s var(--ease), background-color 0.2s;
}
.dsr .site-social:hover { background: rgba(255, 255, 255, 0.16); transform: translateY(-4px); }
.dsr .site-social img { width: 16px; height: 16px; object-fit: contain; filter: invert(1); display: block; }
.dsr .site-footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; }
.dsr .site-footer-title { font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: -0.01em; color: #fff; margin-bottom: 6px; text-transform: uppercase; }
.dsr .site-footer-col a { font-size: 15px; line-height: 22px; letter-spacing: -0.3px; color: #F3F3F3; text-decoration: none; border-radius: 4px; transition: color 0.2s; }
.dsr .site-footer-col a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255, 255, 255, 0.4); }
.dsr .site-footer-col a.site-footer-highlight {
    color: #4383F2;
    background: linear-gradient(15deg, #2E6BFF, #4383F2 60%, #3ACAF8);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.dsr .site-footer :focus-visible { outline-color: #fff; }
.dsr .site-footer-bottom {
    margin-top: 56px; padding-top: 24px; border-top: 1px dashed #333;
    text-align: center; font-size: 14px; line-height: 22px; letter-spacing: -0.2px; color: #fff;
}
.dsr .site-footer-bottom strong { color: #fff; font-weight: 500; }
.dsr .site-footer-bottom a { color: rgba(255, 255, 255, 0.6); text-decoration: none; transition: color 0.2s; }
.dsr .site-footer-bottom a:hover { color: #fff; }
@media (max-width: 1180px) {
    .dsr .site-footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 32px; }
    .dsr .site-footer-brand { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 16px 40px; }
    .dsr .site-footer-brand .site-footer-tagline { margin: 0; }
    .dsr .site-footer-reviews, .dsr .site-footer-social { margin-top: 0; }
}

/* ══════════ RESPONSIVE ══════════ */
@media (max-width: 900px) {
    .dsr .grid-2 { grid-template-columns: 1fr; }
    .dsr .grid-3 { grid-template-columns: 1fr 1fr; }
}

/* Mobile menu (<= 991px, like www): a white card under the bar that slides
   down; the three sub-menus stay closed (one tap opens one). */
@media (max-width: 991px) {
    .dsr .nav-hamburger { display: block; }
    .dsr .nav-right { display: none; }
    .dsr .nav-center {
        position: absolute; top: calc(100% + 4px); left: var(--gutter); right: var(--gutter);
        flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0;
        max-height: calc(100vh - var(--nav-h) - 16px); max-height: calc(100dvh - var(--nav-h) - 16px);
        overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
        padding: 10px; background: #fff; border-radius: var(--radius-lg);
        box-shadow: 0 16px 48px rgba(16, 37, 94, 0.22), 0 0 0 1px rgba(16, 37, 94, 0.06);
        z-index: 500;
        visibility: hidden; opacity: 0; transform: translateY(-8px); pointer-events: none;
        transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0s linear 0.22s;
    }
    .dsr .nav-center.mobile-open {
        visibility: visible; opacity: 1; transform: none; pointer-events: auto;
        transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0s;
    }
    .dsr .nav-center :focus-visible { outline-color: var(--blue); }
    .dsr .nav-center .nav-links { flex-direction: column; align-items: stretch; gap: 2px; }
    .dsr .nav-center .nav-links > a, .dsr .nav-center .nav-dd-toggle {
        width: 100%; justify-content: space-between; color: #111;
        font-size: 16px; line-height: 24px; font-weight: 500; padding: 12px 14px; border-radius: var(--radius-md);
    }
    .dsr .nav-center .nav-links > a:hover, .dsr .nav-center .nav-dd-toggle:hover { opacity: 1; background: var(--blue-bg); }
    .dsr .nav-center .nav-dd-toggle svg { color: #6B7280; }
    .dsr .nav-center .nav-page-dropdown.open > .nav-dd-toggle { background: var(--blue-bg); }
    .dsr .nav-center .nav-page-dropdown { width: 100%; }
    .dsr .nav-center .nav-page-menu {
        position: static; transform: none; min-width: 0; width: auto;
        margin: 4px 0 8px; padding: 6px; box-shadow: none; border: 1px solid var(--border-panel); border-radius: 16px;
    }
    .dsr .nav-center .nav-page-dropdown.open > .nav-menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); width: auto; }
    .dsr .nav-center .nav-page-menu a { padding: 8px 10px; font-size: 15px; gap: 10px; }
    .dsr .nav-center .nav-ico { width: 36px; height: 36px; border-radius: 10px; }
    .dsr .nav-center .nav-page-menu a.nav-menu-all { margin: 4px -6px -6px; padding: 12px 16px; border-radius: 0 0 16px 16px; }
    .dsr .nav-center .lang-dropdown { padding: 6px 4px 0; margin-top: 6px; border-top: 1px solid var(--border-panel); }
    .dsr .nav-center .lang-dropdown-btn { width: 100%; border-radius: var(--radius-md); padding: 10px; gap: 10px; }
    .dsr .nav-center .lang-dropdown-btn:hover { background: var(--blue-bg); }
    .dsr .nav-center .lang-dropdown-btn span { display: inline; color: #111; font-size: 16px; font-weight: 500; }
    .dsr .nav-center .lang-dropdown-btn svg { display: inline; margin-left: auto; color: #6B7280; }
    .dsr .nav-center .lang-dropdown-btn img { box-shadow: 0 0 0 1px var(--border); }
    .dsr .nav-center .lang-dropdown-menu {
        position: static; flex-direction: row; flex-wrap: wrap; gap: 4px;
        border: 0; box-shadow: none; padding: 4px 6px 8px;
    }
    .dsr .nav-center .nav-mobile-cta { display: inline-flex; flex-shrink: 0; justify-content: center; min-height: 44px; font-size: 16px; }
    .dsr .nav-center .nav-login.nav-mobile-cta { margin: 10px 4px 0; color: #111; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 9px 14px; }
    .dsr .nav-center .nav-btn-primary.nav-mobile-cta { margin: 8px 4px 4px; }
}
@media (max-width: 991px) and (prefers-reduced-motion: reduce) { .dsr .nav-center { transition: none; transform: none; } }

@media (max-width: 768px) {
    .dsr .hero h1 { font-size: 32px; line-height: 1.15; }
    .dsr .hero p { font-size: 16px; }
    .dsr .hero-sm h1 { font-size: 26px; line-height: 1.2; gap: 12px; }
    .dsr .hero-sm p { font-size: 16px; }
    .dsr .hero { padding: 40px var(--gutter) 48px; }
    .dsr .hero-sm { padding: 28px var(--gutter) 32px; }
    .dsr .hero-favicon { width: 40px; height: 40px; border-radius: 10px; }
    .dsr img.hero-favicon { padding: 5px; }
    .dsr .hero-stats { gap: 20px 28px; flex-wrap: wrap; }
    .dsr .hero-stat-value { font-size: 24px; }
    .dsr .chart { height: 320px; }
    .dsr .chart-watermark { width: 120px; }
    .dsr .chart-lg { height: 380px; }
    .dsr .card { padding: 16px 12px; }
    .dsr .card .chart { margin: 0; }
    .dsr .card-title { font-size: 15px; margin-bottom: 10px; }
    .dsr .section-title { font-size: 22px; line-height: 28px; }
    .dsr .section-desc { margin-bottom: 16px; }
    .dsr .tabs { gap: 4px; margin-bottom: 12px; }
    .dsr .tab, .dsr .month-btn, .dsr .filter-select { min-height: 40px; }
    .dsr .breadcrumb a { display: inline-block; padding: 10px 0; }
    .dsr .breadcrumb-inner { padding: 2px 0; }
    .dsr .filter-bar { position: static; }
    .dsr .filter-bar-inner { flex-wrap: wrap; align-items: center; gap: 4px; padding: 8px 0; }
    /* flex:1 (base 0%) annulait width:100% : la rangee des mois tenait dans
       un coin et les filtres de langue s'empilaient a cote. */
    .dsr .filter-bar-inner > .month-nav-inner { flex: 0 0 100%; width: 100%; padding: 2px 0; }
    .dsr .filter-bar-inner > .tabs { border-left: none; margin-left: 0; padding: 4px 0 0; }
    .dsr .filter-bar-inner > #lang-filter { flex: 1; }
    .dsr .filter-bar-inner > #category-filter { margin-left: auto; border-top: none; padding-top: 4px; }
    .dsr .grid-3 { grid-template-columns: 1fr; }
    .dsr .hero-llms { gap: 12px; }
    .dsr .chart-download-btn { padding: 4px 6px; }
    .dsr .chart-download-menu { top: 38px; }
    .dsr .platform-logo-item { min-width: 60px; padding: 8px; }
    .dsr .platform-logo-item img { width: 20px; height: 20px; }
    .dsr .platform-logo-item span { font-size: 11px; }
    .dsr .site-cta-wrap { padding: 48px var(--gutter) 0; background: linear-gradient(to bottom, transparent calc(100% - 120px), #000 calc(100% - 120px)); }
    .dsr .site-cta { padding: 44px 16px 40px; border-radius: var(--radius-lg); }
    .dsr .site-cta-title { font-size: 34px; letter-spacing: -0.04em; }
    .dsr .site-cta-text { font-size: 15px; }
    .dsr .site-footer { padding: 72px var(--gutter) 28px; }
    .dsr .site-footer-grid { grid-template-columns: 1fr 1fr; gap: 36px 24px; }
    .dsr .site-footer-brand { display: flex; align-items: flex-start; }
    .dsr .site-footer-brand .site-footer-tagline { margin-top: 16px; }
    .dsr .site-footer-reviews { margin-top: 28px; }
    .dsr .site-footer-social { margin-top: 20px; }
    .dsr .site-footer-col a { font-size: 15px; line-height: 22px; }
    .dsr .site-footer-bottom { margin-top: 40px; font-size: 13px; }
}
@media (max-width: 600px) {
    /* Three figures side by side rather than one per row */
    .dsr .hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
    .dsr .hero-stat-label { font-size: 10.5px; letter-spacing: 0.04em; overflow-wrap: anywhere; }
}
@media (max-width: 480px) {
    .dsr .hero h1 { font-size: 28px; }
    .dsr .hero-sm h1 { font-size: 23px; }
    .dsr .hero-stat-value { font-size: 20px; }
    .dsr .hero-stat-label { font-size: 11px; }
    .dsr .chart { height: 280px; }
    .dsr .chart-lg { height: 340px; }
    .dsr .section-title { font-size: 20px; line-height: 26px; }
    .dsr .platform-logos-grid { gap: 6px; }
    .dsr .platform-logo-item { min-width: 52px; padding: 6px; }
    .dsr .platform-logo-item img { width: 18px; height: 18px; }
    .dsr .platform-logo-item span { font-size: 10.5px; }
    .dsr .month-btn { padding: 0 12px; font-size: 13px; min-height: 44px; }
    .dsr .tab { padding: 0 12px; font-size: 13px; min-height: 44px; }
    .dsr .filter-select { font-size: 13px; padding: 0 26px 0 10px; min-height: 44px; }
    .dsr .breadcrumb { font-size: 13px; }
    .dsr .breadcrumb span { margin: 0 4px; }
    .dsr .nav-center .nav-page-dropdown.open > .nav-menu-grid { grid-template-columns: minmax(0, 1fr); }
    .dsr .nav-center .nav-page-menu a { padding: 6px 8px; }
    .dsr .nav-center .nav-ico { width: 34px; height: 34px; border-radius: 10px; }
    .dsr .site-cta-title { font-size: 30px; }
    .dsr .site-cta-proof { flex-direction: column; gap: 8px; }
    .dsr .site-cta-rating { align-items: center; }
    .dsr .site-review { min-width: 64px; font-size: 18px; }
    .dsr .grid-2 { grid-template-columns: 1fr; }
}

/* ══════════ VERSUS ══════════ */
.dsr .versus-picker {
    display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap;
    background: var(--white); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow-sm);
    margin-bottom: 20px;
}
.dsr .versus-side { display: flex; flex-direction: column; gap: 6px; flex: 1 1 200px; min-width: 0; }
.dsr .versus-side label {
    font-size: 12px; line-height: 16px; font-weight: 600; color: var(--text-secondary);
    text-transform: uppercase; letter-spacing: 0.05em;
}
.dsr .versus-side-model { flex: 1 1 180px; }
.dsr .versus-select {
    display: flex; align-items: center; gap: 8px;
    border: 1px solid var(--border); border-radius: 10px;
    background: var(--white); padding: 0 10px; height: 42px;
    transition: border-color 0.15s;
}
.dsr .versus-select:hover { border-color: var(--border-strong); }
.dsr .versus-select:focus-within { border-color: var(--blue); background: var(--white); box-shadow: 0 0 0 3px rgba(67, 121, 240, 0.18); }
.dsr .versus-select img { width: 18px; height: 18px; border-radius: 4px; flex-shrink: 0; }
.dsr .versus-select select {
    flex: 1; min-width: 0; border: none; background: none; outline: none;
    font-family: inherit; font-size: 15px; color: var(--ink);
    height: 100%; cursor: pointer;
}
.dsr .versus-swap {
    flex: 0 0 auto; width: 42px; height: 42px; border-radius: 10px;
    border: 1px solid var(--border); background: var(--white); color: var(--text-secondary);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: border-color 0.15s, color 0.15s, background-color 0.15s;
}
.dsr .versus-swap:hover { border-color: var(--blue); color: var(--blue-dark); background: var(--blue-bg); }

.dsr .versus-scoreboard {
    background: var(--white); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-sm);
}
.dsr .versus-rows { display: flex; flex-direction: column; gap: 14px; }
.dsr .versus-row-label {
    font-size: 12px; line-height: 16px; font-weight: 600; color: var(--text-secondary);
    text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px;
}
.dsr .versus-row-bar { display: flex; align-items: center; gap: 10px; }
.dsr .versus-track {
    flex: 1; display: flex; height: 10px; border-radius: 5px;
    overflow: hidden; background: var(--border); min-width: 0;
}
.dsr .versus-fill { height: 100%; transition: width 0.25s ease; }
.dsr .versus-fill-a { background: var(--blue); }
.dsr .versus-fill-b { background: #F97316; }
.dsr .versus-val { font-size: 14px; font-weight: 600; min-width: 52px; font-variant-numeric: tabular-nums; }
.dsr .versus-val-a { color: var(--blue-dark); text-align: right; }
.dsr .versus-val-b { color: #C2410C; text-align: left; }
.dsr .versus-warning {
    margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--text-secondary);
    background: var(--blue-bg); border-radius: var(--radius-sm); padding: 10px 14px;
}

@media (max-width: 767px) {
    .dsr .versus-picker { gap: 10px; padding: 14px; }
    .dsr .versus-side, .dsr .versus-side-model { flex: 1 1 100%; }
    .dsr .versus-swap { width: 100%; height: 40px; }
    .dsr .versus-val { min-width: 46px; font-size: 13px; }
}

/* ══════════ STUDY PAGES (research/, fr/etudes/) ══════════ */
.dsr .hero-badge a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.dsr .hero-badge a:hover { text-decoration-thickness: 2px; }
.dsr .study-figures { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
/* Logo of the platform and round language flags (images, never emoji). */
.dsr .study-figure-icons { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.dsr .study-figure-logo { width: 26px; height: 26px; border-radius: 7px; display: block; }
.dsr .flag-figure { width: 22px; height: 22px; display: block; }
.dsr .flag-inline { width: 1em; height: 1em; margin-right: 0.3em; vertical-align: -0.14em; display: inline-block; }
.dsr .flag-value { width: 0.72em; height: 0.72em; margin-right: 0.22em; vertical-align: 0.02em; display: inline-block; }
.dsr .hero-sm h1 > span { min-width: 0; }
.dsr .section-title-logo { display: flex; align-items: center; gap: 10px; }
.dsr .study-h2-logo { width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0; }
.dsr .study-figure { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 20px; box-shadow: var(--shadow-sm); }
.dsr .study-figure-value { font-size: 32px; font-weight: 600; color: var(--ink); letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.dsr .study-figure-label { margin-top: 8px; font-size: 14px; line-height: 1.45; color: var(--text-secondary); }
.dsr .study-list { max-width: var(--measure); padding-left: 20px; display: grid; gap: 10px; font-size: 16px; line-height: 1.65; color: var(--text); }
.dsr .study-text { max-width: var(--measure); font-size: 16px; line-height: 1.65; color: var(--text); }
.dsr .study-text a, .dsr .study-list a { color: var(--link); }
.dsr .study-note { max-width: var(--measure); margin-top: 10px; font-size: 14px; line-height: 1.55; color: var(--text-muted); }
.dsr .study-two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.dsr .study-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); font-size: 14px; color: var(--text); font-variant-numeric: tabular-nums; }
.dsr .study-table caption { caption-side: top; text-align: left; padding: 0 0 8px; font-size: 15px; font-weight: 600; color: var(--ink); }
.dsr .study-table th, .dsr .study-table td { padding: 9px 12px; border-bottom: 1px solid #EFEFEF; text-align: left; white-space: nowrap; }
.dsr .study-table tbody tr:last-child th, .dsr .study-table tbody tr:last-child td { border-bottom: 0; }
.dsr .study-table thead th { background: #FAFAFA; color: var(--text-secondary); font-size: 13px; font-weight: 600; vertical-align: bottom; }
.dsr .study-table thead tr:first-child th:first-child { border-top-left-radius: var(--radius-md); }
.dsr .study-table thead tr:first-child th:last-child { border-top-right-radius: var(--radius-md); }
.dsr .study-table tbody th { font-weight: 600; }
.dsr .study-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.dsr .study-table .grp { text-align: center; }
.dsr .study-table .th-unit { display: block; font-size: 12px; font-weight: 400; color: var(--text-muted); }
.dsr .study-table tr.is-reddit td { background: #FFF4ED; font-weight: 600; }
.dsr .study-table tr.gap td { padding: 2px 12px; text-align: center; color: var(--text-muted); }
.dsr .study-table tr.total th, .dsr .study-table tr.total td { background: #FAFAFA; font-weight: 600; }
.dsr .study-fav { width: 16px; height: 16px; margin-right: 8px; border-radius: 4px; vertical-align: -3px; }
.dsr .study-chart { width: 100%; height: 380px; }
.dsr .lang-chart { width: 100%; height: 360px; }
.dsr .lang-table .grp { text-align: center; }
.dsr .study .card + .table-scroll { margin-top: 16px; }
.dsr .study-method h3, .dsr .study-h3 { margin: 24px 0 8px; font-size: 18px; line-height: 1.4; font-weight: 600; color: var(--ink); }
.dsr .study-method h3:first-of-type { margin-top: 8px; }
.dsr .study-method p { max-width: var(--measure); margin-bottom: 10px; font-size: 16px; line-height: 1.65; color: var(--text); }
.dsr .study-cite { display: inline-block; margin-bottom: 10px; padding: 12px 16px; border-left: 3px solid var(--blue); border-radius: var(--radius-sm); background: var(--grey); font-size: 15px; color: var(--ink); }
.dsr .study-button { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 18px; border-radius: var(--radius-sm); background: var(--blue-dark); color: #fff; font-weight: 500; text-decoration: none; transition: background-color 0.2s; }
.dsr .study-button:hover { background: #2552B8; }
.dsr .study-button:focus-visible, .dsr .study-callout:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.dsr .study-queries { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.dsr .study-queries h4 { margin-bottom: 6px; font-size: 14px; font-weight: 600; color: var(--text-secondary); }
.dsr .study-queries ol { padding-left: 24px; display: grid; gap: 6px; font-size: 15px; line-height: 1.5; color: var(--text); }
.dsr .study-corrections { list-style: none; padding-left: 0; }
.dsr .study-links { list-style: none; display: grid; gap: 8px; font-size: 16px; }
.dsr .study-links a { color: var(--link); }
.dsr .study-callout { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 24px; padding: 14px 18px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--white); box-shadow: var(--shadow-sm); color: var(--ink); text-decoration: none; transition: border-color 0.15s; }
.dsr .study-callout span { font-size: 14px; color: var(--text-secondary); }
.dsr .study-callout .study-callout-arrow { margin-left: auto; font-size: 18px; color: var(--blue-dark); }
.dsr .study-callout:hover { border-color: #C9D7FA; }
@media (max-width: 900px) {
    .dsr .study-figures { grid-template-columns: 1fr 1fr; }
    .dsr .study-two, .dsr .study-queries { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .dsr .study-figure { padding: 16px; }
    .dsr .study-figure-value { font-size: 24px; }
    .dsr .study-chart { height: 300px; }
    .dsr .lang-chart { height: 280px; }
    .dsr .study-table { font-size: 13px; }
    .dsr .study-table th, .dsr .study-table td { padding: 7px 6px; }
    .dsr .study-table td.dom { white-space: normal; overflow-wrap: anywhere; }
    .dsr .study-fav { margin-right: 6px; }
}

/* ══════════ VERSUS: chart heads and coloured pills ══════════ */
.dsr .vs-chart-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 4px 4px 14px; font-size: 17px; font-weight: 600; color: var(--ink); }
.dsr .vs-head-item { display: inline-flex; align-items: center; gap: 10px; }
.dsr .vs-head-item img { width: 28px; height: 28px; border-radius: 7px; background: #fff; box-shadow: 0 0 0 1px var(--border); object-fit: contain; padding: 2px; }
.dsr .vs-head-vs { font-size: 14px; font-weight: 500; color: var(--text-muted); text-transform: lowercase; }
.dsr .vs-head-model { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--grey); font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.dsr .vs-head-model img { width: 20px; height: 20px; border-radius: 5px; }
.dsr .chart-stats .pill-dot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; vertical-align: 1px; }
@media (max-width: 480px) {
    .dsr .vs-chart-head { font-size: 15px; }
    .dsr .vs-head-model { margin-left: 0; }
}

/* ===== CHARTS v2 (brand colors, versus, subdomains) ===== */
/* Couleurs de marque, page Versus, sous-domaines regroupes (09/10/2026).
   Le JavaScript est dans chart-utils.js (PLATFORM_BRAND, pickPairColors,
   setRankingSubdomains) et versus.js. */

/* Filigrane Sorank : a 0.08 il disparaissait. Plus marque (0.18), il passe
   SOUS le canvas ECharts (fond transparent) pour ne pas griser les courbes. */
.dsr .chart > div:first-child { position: relative; z-index: 1; }
.dsr .chart-watermark { opacity: 0.18; z-index: 0; }

/* Explication sous un graphique (points creux = moins de 1'000 reponses). */
.dsr .chart-note { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 8px 0 0; font-size: 0.75rem; line-height: 1.4; color: #64748B; text-align: center; }
.dsr .chart-note-dot { flex: none; width: 9px; height: 9px; border: 2px solid #64748B; border-radius: 50%; background: #fff; }

/* ── Versus : tableau de score, les deux plateformes face a face ── */
.dsr .vs2-head {
    display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center; gap: 12px 16px;
    margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--border, #E6EBF2);
}
.dsr .vs2-side { display: flex; align-items: center; gap: 12px; min-width: 0; }
.dsr .vs2-side-a { grid-column: 1; grid-row: 1; }
.dsr .vs2-side-b { grid-column: 3; grid-row: 1; flex-direction: row-reverse; text-align: right; }
.dsr .vs2-logo {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 11px; background: #fff;
    box-shadow: 0 0 0 1px #E6EBF2, 0 1px 3px rgba(15,23,42,0.06);
}
.dsr .vs2-logo img { width: 30px; height: 30px; object-fit: contain; border-radius: 6px; }
.dsr .vs2-id { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.dsr .vs2-side-b .vs2-id { flex-direction: row-reverse; }
.dsr .vs2-name { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; font-size: 1.1rem; font-weight: 700; color: #0F172A; }
.dsr .vs2-side-b .vs2-name { flex-direction: row-reverse; }
.dsr .vs2-name-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dsr .vs2-swatch { flex: none; width: 14px; height: 4px; border-radius: 2px; }
.dsr .vs2-badge {
    display: inline-flex; align-items: center; padding: 2px 10px;
    border: 1px solid; border-radius: 999px;
    font-size: 0.78rem; font-weight: 600; color: #0F172A; white-space: nowrap;
}
.dsr .vs2-vs { grid-column: 2; grid-row: 1; font-size: 0.8rem; font-weight: 600; color: var(--text-muted); text-transform: lowercase; }
.dsr .vs2-tie {
    grid-column: 2; grid-row: 1;
    padding: 4px 12px; border-radius: 999px; background: #F1F5F9; border: 1px solid #E2E8F0;
    font-size: 0.8rem; font-weight: 600; color: #475569; white-space: nowrap;
}
.dsr .vs2 .versus-track { gap: 2px; background: transparent; }
.dsr .vs2 .versus-track.is-empty { background: #EEF2F7; }
.dsr .vs2 .versus-fill-a { border-radius: 5px 0 0 5px; }
.dsr .vs2 .versus-fill-b { border-radius: 0 5px 5px 0; }
.dsr .vs2 .versus-fill[style*="width:0.0%"] { display: none; }
/* Repere a 50 % : on voit d'un coup d'oeil qui depasse la moitie. */
.dsr .vs2 .versus-track { position: relative; overflow: visible; }
.dsr .vs2 .versus-track::after {
    content: ""; position: absolute; left: 50%; top: -4px; bottom: -4px; width: 2px; margin-left: -1px;
    border-radius: 1px; background: rgba(15,23,42,0.35); pointer-events: none;
}
.dsr .vs2 .versus-track.is-empty::after { display: none; }
/* « Par modele : 3 - 2 » sous les barres. */
.dsr .vs2-tally {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px;
    margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border, #E6EBF2);
}
.dsr .vs2-tally-label { font-size: 0.72rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.dsr .vs2-tally-logos { display: inline-flex; gap: 4px; min-width: 18px; }
.dsr .vs2-tally-a { justify-content: flex-end; }
.dsr .vs2-tally-logos img, .dsr .vs2-tally-ties img { width: 18px; height: 18px; border-radius: 5px; }
.dsr .vs2-tally-score { display: inline-flex; align-items: center; gap: 6px; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.dsr .vs2-tally-score b { font-weight: 700; }
.dsr .vs2-tally-score i { width: 10px; height: 4px; border-radius: 2px; }
.dsr .vs2-tally-score span { color: var(--text-muted); }
.dsr .vs2-tally-ties { display: inline-flex; align-items: center; gap: 4px; font-size: 0.8rem; color: var(--text-muted); }
.dsr .vs2 .versus-val { color: #64748B; font-weight: 500; font-variant-numeric: tabular-nums; }
.dsr .vs2 .versus-val.is-lead { color: #0F172A; font-weight: 700; }
@media (max-width: 560px) {
    .dsr .vs2-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 12px; }
    .dsr .vs2-side-b { grid-column: 2; }
    .dsr .vs2-vs { display: none; }
    .dsr .vs2-tie { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
    .dsr .vs2-logo { width: 36px; height: 36px; border-radius: 9px; }
    .dsr .vs2-logo img { width: 24px; height: 24px; }
    .dsr .vs2-side { gap: 8px; }
    .dsr .vs2-id { flex-direction: column; align-items: flex-start; }
    .dsr .vs2-side-b .vs2-id { flex-direction: column; align-items: flex-end; }
    .dsr .vs2-name { font-size: 0.95rem; gap: 6px; line-height: 1.2; }
    /* « Stack Overflow » passe sur deux lignes plutot que « Stack Ove… ». */
    .dsr .vs2-name-text { white-space: normal; overflow-wrap: break-word; }
    .dsr .vs2-badge { font-size: 0.72rem; padding: 1px 8px; }
}

/* Tetes des graphiques Versus : elles servent de legende (trait de couleur). */
.dsr .vs-head-swatch { flex: none; width: 16px; height: 4px; border-radius: 2px; margin-right: -2px; }
/* Selecteurs : un liseré de la couleur de chaque plateforme. */
.dsr .versus-select { box-shadow: inset 3px 0 0 var(--vs-accent, transparent); }

/* ── Sous-domaines regroupes, sous un classement de domaines ── */
.dsr .chart-subdomains { margin-top: 6px; text-align: center; }
.dsr .csd-toggle {
    display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 12px;
    border: 0; border-radius: 8px; background: none; cursor: pointer;
    font: inherit; font-size: 0.8rem; font-weight: 600; color: #475569;
}
.dsr .csd-toggle:hover { background: #F1F5F9; color: #0F172A; }
.dsr .csd-toggle:focus-visible { outline: 2px solid var(--blue, #4A7BF7); outline-offset: 2px; }
.dsr .csd-chevron { transform: rotate(-90deg); transition: transform 0.2s ease; }
.dsr .csd-toggle[aria-expanded="true"] .csd-chevron { transform: none; }
.dsr .csd-count { min-width: 20px; padding: 1px 7px; border-radius: 999px; background: #E8EEFE; color: #2748B8; font-size: 0.72rem; }
.dsr .csd-panel { max-width: 640px; margin: 6px auto 0; text-align: left; }
.dsr .csd-panel[hidden] { display: none; }
.dsr .csd-list, .dsr .csd-subs { list-style: none; margin: 0; padding: 0; }
.dsr .csd-list { display: grid; gap: 8px; }
.dsr .csd-item {
    padding: 10px 12px; border: 1px solid #EEF2F7; border-radius: 12px; background: #FAFBFD;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.dsr .csd-item:focus { outline: none; }
.dsr .csd-item:focus-visible { box-shadow: 0 0 0 3px rgba(74,123,247,0.35); }
.dsr .csd-item.is-active { border-color: var(--csd-color, #4A7BF7); box-shadow: 0 0 0 3px rgba(74,123,247,0.12); background: #fff; }
.dsr .csd-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 0.85rem; color: #0F172A; }
.dsr .csd-head img { flex: none; border-radius: 4px; }
.dsr .csd-head strong { font-weight: 600; overflow-wrap: anywhere; }
.dsr .csd-total { margin-left: auto; font-size: 0.75rem; color: #64748B; white-space: nowrap; }
.dsr .csd-subs { display: grid; gap: 4px; }
.dsr .csd-subs li {
    display: grid; grid-template-columns: minmax(0, 1fr) 84px 56px 44px; align-items: center; gap: 10px;
    font-size: 0.78rem; color: #334155;
}
.dsr .csd-name { overflow-wrap: anywhere; }
.dsr .csd-bar { height: 6px; border-radius: 3px; background: #EEF2F7; overflow: hidden; }
.dsr .csd-bar i { display: block; height: 100%; border-radius: 3px; background: var(--csd-color, #4A7BF7); }
.dsr .csd-num { font-weight: 600; color: #0F172A; text-align: right; font-variant-numeric: tabular-nums; }
.dsr .csd-share { color: #64748B; text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 480px) {
    .dsr .csd-subs li { grid-template-columns: minmax(0, 1fr) 40px 48px 38px; gap: 6px; }
}
@media (max-width: 480px) {
    .dsr .vs-chart-head { gap: 8px 10px; padding-right: 36px; }
    .dsr .vs-head-item { gap: 6px; }
    .dsr .vs-head-item img { width: 24px; height: 24px; }
    .dsr .vs-head-swatch { width: 12px; }
}

/* ===== EDITORIAL & SEO blocks ===== */
/* Report layout of the data pages (scripts/seo_blocks.py, editorial.py,
   build_pages.py report_page(), 09/10/2026): answer first in the hero, then
   key takeaways, data, explanation, FAQ, method. One text column
   (--measure) on the left edge of the cards, prose at 16-18px / 1.7. The
   class names are the contract with the generators; the design pass may
   restyle them freely. */

/* Hero, report header: eyebrow + edition, H1, generated takeaway, meta line, byline */
.dsr .hero-eyebrow {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 14px;
    font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    color: rgba(255, 255, 255, .86);
}
.dsr .hero-edition {
    padding: 3px 10px; border-radius: var(--radius-pill, 999px); background: rgba(255, 255, 255, .16);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); color: #fff; letter-spacing: .04em;
}
.dsr .hero .hero-lede {
    max-width: 760px; margin: 16px 0 0; font-size: 18px; line-height: 1.6;
    color: rgba(255, 255, 255, .94);
}
.dsr .hero-lede strong { color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }
.dsr .hero-lede a, .dsr .hero-byline a {
    color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .5);
}
.dsr .hero-lede a:hover, .dsr .hero-byline a:hover { text-decoration-color: #fff; }
.dsr .hero .hero-byline {
    max-width: none; margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .82);
    font-variant-numeric: tabular-nums;
}
/* Home: the hero stays centred */
.dsr .hero:not(.hero-sm) .hero-eyebrow { justify-content: center; }
.dsr .hero:not(.hero-sm) .hero-lede { margin-left: auto; margin-right: auto; }
.dsr .hero:not(.hero-sm) .hero-byline { margin-bottom: 24px; }

/* Main column */
.dsr main.report { padding-bottom: 24px; }
.dsr .editorial-lead {
    max-width: var(--measure); margin: 32px 0 8px; font-size: 18px; line-height: 1.7; color: var(--text);
}
.dsr .prose { max-width: var(--measure); font-size: 16px; line-height: 1.7; color: var(--text); }
.dsr .prose p { margin: 0 0 14px; }
.dsr .prose p:last-child { margin-bottom: 0; }
.dsr .prose ul, .dsr .prose ol { margin: 0 0 16px; padding-left: 22px; }
.dsr .prose li { margin-bottom: 8px; }
.dsr .prose strong, .dsr .editorial-lead strong { color: var(--ink); font-weight: 600; }
.dsr .prose a, .dsr .editorial-lead a, .dsr .chart-caption a, .dsr .takeaways a, .dsr .changes-box a, .dsr .movers a, .dsr .method-box a {
    color: var(--link); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(47, 99, 214, .35);
}
.dsr .prose a:hover, .dsr .editorial-lead a:hover, .dsr .chart-caption a:hover, .dsr .takeaways a:hover, .dsr .changes-box a:hover, .dsr .movers a:hover, .dsr .method-box a:hover { text-decoration-color: currentColor; }
.dsr .editorial-section { padding: var(--section-pad, 28px) 0; }
.dsr .editorial-section .section-title { max-width: var(--measure); }
.dsr .editorial-section .section-title + .prose { margin-top: 8px; }
/* « How to... » steps: numbered cards in a grid */
.dsr .tips-list {
    list-style: none; counter-reset: tip; padding: 0; margin: 16px 0 0; max-width: none;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px;
}
.dsr .tips-list li {
    counter-increment: tip; position: relative; margin: 0; padding: 18px 20px 18px 60px;
    background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md, 12px);
    font-size: 15px; line-height: 1.6;
}
.dsr .tips-list li::before {
    content: counter(tip); position: absolute; left: 18px; top: 16px;
    width: 28px; height: 28px; border-radius: 50%; background: var(--blue-tint); color: var(--blue-dark);
    font-size: 14px; font-weight: 700; line-height: 28px; text-align: center;
}

/* Key figures band, takeaways and « what changed », side by side */
.dsr .kpi-band { padding: 8px 0 0; }
.dsr .report-grid {
    display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 20px;
    margin: 24px 0 8px; align-items: start;
}
.dsr .report-grid > :only-child { grid-column: 1 / -1; max-width: none; }
.dsr .takeaways, .dsr .changes-box {
    background: var(--white); border: 1px solid var(--border); border-radius: var(--radius, 16px); padding: 22px 24px;
}
.dsr .kt-title { font-size: 20px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 12px; }
.dsr .takeaways-list { margin: 0; padding-left: 20px; max-width: none; }
.dsr .takeaways-list li { margin-bottom: 10px; }
.dsr .takeaways-list li::marker { color: var(--blue); }
.dsr .takeaways-list strong, .dsr .chart-finding strong, .dsr .changes-list span strong { font-variant-numeric: tabular-nums; }
.dsr .summarize-ai {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 16px 0 0; padding-top: 14px;
    border-top: 1px solid var(--border); font-size: 13px; line-height: 1.4; color: var(--text-muted);
}
.dsr .summarize-ai a {
    display: inline-flex; align-items: center; min-height: 30px; padding: 4px 12px; border-radius: var(--radius-pill, 999px);
    border: 1px solid var(--border); background: var(--white); color: var(--text); font-weight: 500; text-decoration: none;
}
.dsr .summarize-ai a:hover { border-color: var(--blue); color: var(--link); }
.dsr .changes-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.dsr .changes-list li { display: grid; gap: 2px; font-size: 15px; line-height: 1.5; color: var(--text); }
.dsr .changes-list li > strong {
    font-size: 12px; line-height: 16px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); font-weight: 600;
}
.dsr .changes-list li span strong { color: var(--ink); }
.dsr .changes-box .data-note { margin: 16px -24px -22px; padding: 10px 24px 12px; border-top: 1px solid var(--border); }
@media (max-width: 900px) { .dsr .report-grid { grid-template-columns: 1fr; } }

/* Chart captions: the finding, then « how to read it » */
.dsr .chart-caption { margin: 4px 0 16px; }
.dsr .chart-finding { font-size: 17px; line-height: 1.6; color: var(--text); margin: 0 0 6px; }
.dsr .chart-finding strong { color: var(--ink); }
.dsr .chart-read { font-size: 14px; line-height: 1.55; color: var(--text-secondary); margin: 0; }
.dsr .chart-read strong { font-weight: 600; color: var(--text-secondary); }
.dsr .section > .card + .card, .dsr .section > .card + .data-card { margin-top: 16px; }
.dsr .data-section > .section-desc + .card { margin-top: 0; }
.dsr .section-more { margin-top: 14px; font-size: 15px; }
.dsr .section-more a { color: var(--link); font-weight: 500; text-decoration: none; }
.dsr .section-more a:hover { text-decoration: underline; text-underline-offset: 3px; }
.dsr .section-more a + a { margin-left: 24px; }

/* Rising and falling (points of citations per 100 answers) */
.dsr .movers-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.dsr .movers-col { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md, 12px); padding: 16px 20px; }
.dsr .movers-label { font-size: 12px; line-height: 16px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; margin-bottom: 10px; }
.dsr .movers-label.up, .dsr .mv-delta.up { color: #047857; }
.dsr .movers-label.down, .dsr .mv-delta.down { color: #B91C1C; }
.dsr .movers-col ol { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 15px; line-height: 1.45; }
.dsr .mv-val { margin-left: 6px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.dsr .mv-delta { margin-left: 6px; font-size: 13px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dsr .movers > .data-note { border-top: 0; padding: 12px 0 0; }
@media (max-width: 640px) { .dsr .movers-grid { grid-template-columns: 1fr; } }

/* Names in tables and lists: logo or favicon, then the name */
.dsr .cell-name { display: inline-flex; align-items: center; gap: 8px; vertical-align: middle; }
.dsr .cell-ico { flex: none; width: 16px; height: 16px; border-radius: 3px; object-fit: contain; }
/* Ranking tables: platform domain, merged subdomains in a disclosure */
.dsr .dom-sub { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.dsr .subdomains summary {
    display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; cursor: pointer; list-style: none;
}
.dsr .subdomains summary::-webkit-details-marker { display: none; }
.dsr .subdomains summary::after {
    content: ""; align-self: center; width: 6px; height: 6px; margin-left: 2px;
    border-right: 1.5px solid var(--text-muted); border-bottom: 1.5px solid var(--text-muted);
    transform: rotate(45deg) translateY(-2px); transition: transform .15s var(--ease, ease);
}
.dsr .subdomains[open] summary::after { transform: rotate(225deg) translateY(-1px); }
.dsr .subdomains summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
.dsr .sd-count { font-size: 12px; font-weight: 500; color: var(--link); white-space: nowrap; }
.dsr .subdomains ul {
    list-style: none; margin: 8px 0 2px; padding: 4px 0 4px 12px; border-left: 2px solid var(--border);
    display: grid; gap: 4px; font-size: 13px; line-height: 1.4; color: var(--text-secondary);
}
.dsr .subdomains li { display: flex; justify-content: space-between; gap: 16px; }
.dsr .subdomains li .num { font-variant-numeric: tabular-nums; }

/* FAQ in two columns on wide screens */
/* FAQ: one question per line, the answer opens under it (the answers stay in
   the HTML, as FAQPage says). One column: questions read top to bottom. */
.dsr .faq-list { max-width: none; margin-top: 12px; border-top: 1px solid var(--border); }
.dsr .faq-item { border-bottom: 1px solid var(--border); }
.dsr .faq-item > summary {
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    padding: 16px 4px; cursor: pointer; list-style: none;
}
.dsr .faq-item > summary::-webkit-details-marker { display: none; }
.dsr .faq-item > summary h3 { font-size: 17px; line-height: 1.45; font-weight: 600; color: var(--ink); margin: 0; }
.dsr .faq-item > summary::after {
    content: ""; flex: none; width: 8px; height: 8px; margin-right: 6px;
    border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted);
    transform: rotate(45deg) translateY(-3px); transition: transform .18s var(--ease, ease);
}
.dsr .faq-item[open] > summary::after { transform: rotate(225deg) translateY(-1px); }
.dsr .faq-item > summary:hover h3 { color: var(--link); }
.dsr .faq-item > summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 6px; }
.dsr .faq-item > p { margin: 0; padding: 0 4px 18px; max-width: var(--measure); font-size: 16px; line-height: 1.7; color: var(--text-secondary); }

/* « Method and sources » and « How to cite » */
.dsr .method-box {
    margin: 32px 0 16px; padding: 24px; border: 1px solid var(--border); border-radius: var(--radius, 16px); background: var(--white);
}
.dsr .method-box .section-title { font-size: 20px; line-height: 1.3; }
.dsr .method-box .prose { font-size: 15px; }
.dsr .cite-line { font-size: 14px; color: var(--text-secondary); }

/* Hub cards: the name is a span (no H3 under an H1 without H2) */
.dsr .index-card-title { display: block; font-size: 16px; line-height: 1.4; font-weight: 600; color: var(--ink); margin-bottom: 2px; }

/* ===== DATA MODULES v3 (server) =====
   Written at build time by scripts/seo_blocks.py (09/10/2026): rank change
   and 12-month sparkline in the ranking tables, « biggest movers », model ×
   platform heatmap, Table / Cards toggle and filter of the hubs
   (public/hub.js). Green #047857 and red #B91C1C pass 5:1 on white and on
   the row hover tint; every arrow also has a visually hidden reading. */
.dsr .dm-sr {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Rank change (▲ 3, ▼ 2, =, new, -) */
.dsr .data-table .c-rk { text-align: center; width: 1%; }
.dsr .rk { display: inline-flex; align-items: center; font-size: 13px; line-height: 18px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dsr .rk-up { color: #047857; }
.dsr .rk-down { color: #B91C1C; }
.dsr .rk-same, .dsr .rk-na { color: var(--text-muted); font-weight: 500; }
.dsr .rk-new {
    padding: 1px 8px; border-radius: var(--radius-pill); background: var(--blue-bg); color: var(--blue-dark);
    font-size: 12px; font-weight: 600;
}
.dsr .rk-out {
    padding: 1px 8px; border-radius: var(--radius-pill); background: #FEF2F2; color: #B91C1C;
    font-size: 12px; font-weight: 600;
}

/* 12-month sparkline: 72 x 20, brand blue, hollow points under 1'000 answers */
.dsr .data-table .c-spark { width: 1%; padding-top: 6px; padding-bottom: 6px; vertical-align: middle; }
.dsr .spark { display: block; overflow: visible; }
.dsr .spark path { fill: none; stroke: #4379F0; stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; }
.dsr .spark .end, .dsr .spark .pt { fill: #4379F0; }
.dsr .spark .lo { fill: var(--white); stroke: #4379F0; stroke-width: 1.25; }

/* Biggest movers: two cards, top 5 rises and falls */
.dsr .dm-movers { padding: 8px 0 var(--section-pad); }
.dsr .dm-movers .section-desc { margin-bottom: 0; }
.dsr .dm-mv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.dsr .dm-mv-col { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px 8px; box-shadow: var(--shadow-sm); min-width: 0; }
.dsr .dm-mv-col .movers-label { margin-bottom: 4px; }
.dsr .mv-list { list-style: none; margin: 0; padding: 0; }
.dsr .mv-list li {
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px;
    padding: 10px 0; border-top: 1px solid var(--border); font-size: 15px; line-height: 1.4;
}
.dsr .mv-list li:first-child { border-top: 0; }
.dsr .mv-name { display: inline-flex; align-items: center; gap: 10px; min-width: 0; color: var(--ink); font-weight: 500; text-decoration: none; }
.dsr .mv-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dsr .mv-name:hover span { text-decoration: underline; text-underline-offset: 3px; }
.dsr .mv-name img { width: 20px; height: 20px; border-radius: 5px; flex: none; object-fit: contain; }
.dsr .mv-rates { font-size: 14px; color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dsr .mv-list .mv-delta { margin-left: 0; padding: 2px 8px; border-radius: var(--radius-pill); font-size: 13px; line-height: 18px; }
.dsr .mv-list .mv-delta.up { background: #ECFDF5; }
.dsr .mv-list .mv-delta.down { background: #FEF2F2; }
.dsr .mv-none { padding: 10px 0 12px; font-size: 14px; color: var(--text-secondary); }
.dsr .dm-movers-low .section-desc { padding: 14px 18px; background: var(--white); border: 1px dashed var(--border-strong); border-radius: var(--radius-md); margin-top: 12px; }
@media (max-width: 720px) { .dsr .dm-mv-grid { grid-template-columns: 1fr; } }

/* Model × platform heatmap: one sequential blue scale, number in every cell */
.dsr .hm-card { padding: 0; }
.dsr .hm-legend {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 12px 16px;
    border-bottom: 1px solid var(--border); font-size: 12px; line-height: 16px; color: var(--text-secondary);
}
.dsr .hm-legend ol { display: flex; flex-wrap: wrap; gap: 4px 10px; list-style: none; margin: 0; padding: 0; font-variant-numeric: tabular-nums; }
.dsr .hm-legend li { display: inline-flex; align-items: center; gap: 4px; }
.dsr .hm-sw { width: 14px; height: 14px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(10, 10, 10, .08); }
.dsr .data-table.hm-table { table-layout: fixed; border-collapse: separate; border-spacing: 3px; min-width: 340px; }
.dsr .hm-table col.hm-c0 { width: 30%; }
.dsr .data-table.hm-table th, .dsr .data-table.hm-table td { border-bottom: 0; }
.dsr .data-table.hm-table thead th { background: none; padding: 10px 4px 4px; vertical-align: bottom; }
.dsr .hm-table .hm-p { padding-left: 10px; }
.dsr .hm-table .hm-m { text-align: center; }
.dsr .hm-m a { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; color: var(--text-secondary); font-weight: 600; }
.dsr .hm-m img { width: 20px; height: 20px; border-radius: 5px; display: block; }
.dsr .hm-table tbody th { padding: 6px 8px 6px 10px; overflow: hidden; }
.dsr .hm-table tbody th a { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dsr .hm-table tbody th a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dsr .hm-table tbody th img { width: 16px; height: 16px; border-radius: 4px; flex: none; object-fit: contain; }
.dsr .data-table.hm-table tbody tr:hover { background: none; }
.dsr .hm-table tbody tr:hover th a span { text-decoration: underline; text-underline-offset: 3px; }
.dsr .hm-table td.hm { text-align: center; padding: 8px 2px; border-radius: 6px; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--text); }
.dsr .hm-table td.h0 { background: var(--white); color: var(--text-muted); box-shadow: inset 0 0 0 1px var(--border-panel); }
.dsr .hm-table td.h1 { background: #F1F6FF; }
.dsr .hm-table td.h2 { background: #D2E0FB; }
.dsr .hm-table td.h3 { background: #B4CBF9; }
.dsr .hm-table td.h4 { background: #92B2F3; }
.dsr .hm-table td.h5 { background: #6F96E8; }
.dsr .hm-table td.h6 { background: #416FD8; color: #fff; }
.dsr .hm-table td.h7 { background: #224BB2; color: #fff; }
.dsr .hm-sw.h0 { background: var(--white); }
.dsr .hm-sw.h1 { background: #F1F6FF; }
.dsr .hm-sw.h2 { background: #D2E0FB; }
.dsr .hm-sw.h3 { background: #B4CBF9; }
.dsr .hm-sw.h4 { background: #92B2F3; }
.dsr .hm-sw.h5 { background: #6F96E8; }
.dsr .hm-sw.h6 { background: #416FD8; }
.dsr .hm-sw.h7 { background: #224BB2; }
.dsr .hm-more { border-top: 1px solid var(--border); }
.dsr .hm-more summary {
    display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; cursor: pointer; list-style: none;
    font-size: 14px; font-weight: 600; color: var(--link);
}
.dsr .hm-more summary::-webkit-details-marker { display: none; }
.dsr .hm-more summary::after {
    content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px); transition: transform .15s var(--ease);
}
.dsr .hm-more[open] summary::after { transform: rotate(225deg) translateY(-1px); }
.dsr .hm-more summary:hover { background: var(--blue-bg); }
.dsr .hm-more summary:focus-visible { outline-offset: -2px; }
.dsr .hm-more[open] .hm-show, .dsr .hm-more:not([open]) .hm-hide { display: none; }
@media (max-width: 600px) {
    .dsr .hm-table col.hm-c0 { width: 112px; }
    .dsr .hm-mname { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
    .dsr .data-table.hm-table { border-spacing: 2px; }
    .dsr .hm-table td.hm { padding: 8px 0; font-size: 12px; }
    .dsr .hm-table tbody th { padding: 6px 4px 6px 8px; font-size: 13px; }
    .dsr .hm-table tbody th a { gap: 6px; }
}

/* Hubs: filter, count and Table / Cards toggle (shown by hub.js) */
.dsr .hub-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 16px; }
.dsr .hub-tools[hidden], .dsr [data-hub] [hidden] { display: none !important; }
.dsr .hub-filter { position: relative; flex: 1 1 260px; max-width: 380px; }
.dsr .hub-filter svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
.dsr .hub-filter input {
    width: 100%; height: 42px; padding: 0 14px 0 38px; border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
    background: var(--white); color: var(--ink); font: inherit; font-size: 15px;
}
.dsr .hub-filter input::placeholder { color: var(--text-muted); opacity: 1; }
.dsr .hub-filter input:focus { border-color: var(--blue); }
.dsr .hub-count { margin: 0; font-size: 13px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.dsr .hub-view { display: inline-flex; gap: 2px; margin-left: auto; padding: 3px; background: var(--grey); border-radius: var(--radius-pill); }
.dsr .hub-view button {
    display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border: 0; border-radius: var(--radius-pill);
    background: transparent; color: var(--text-secondary); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
    transition: background-color .15s, color .15s;
}
.dsr .hub-view button:hover { color: var(--ink); }
.dsr .hub-view button[aria-pressed="true"] { background: var(--white); color: var(--ink); box-shadow: var(--shadow-sm); }
.dsr .hub-view-cards { margin-top: 28px; }
.dsr .hub-cards-title { font-size: 18px; line-height: 1.35; font-weight: 600; color: var(--ink); margin-bottom: 14px; }
.dsr .hub-js .hub-view-cards { margin-top: 16px; }
.dsr .hub-js .hub-cards-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.dsr .hub-empty {
    margin-top: 16px; padding: 20px; text-align: center; font-size: 15px; color: var(--text-secondary);
    background: var(--white); border: 1px dashed var(--border-strong); border-radius: var(--radius);
}
.dsr .hub-view-table.hub-no-match { display: none; }
@media (max-width: 600px) {
    .dsr .hub-filter { flex-basis: 100%; max-width: none; }
    .dsr .hub-view button { min-height: 40px; }
}

/* ===== DATA MODULES v3 (client) =====
   Chart share menu (chart-utils.js, addShareBtn), copy toast, and the
   « Is your site cited by AI? » lookup box (lookup.js). Only this section
   belongs to the client modules: do not edit the sections above from here. */

/* Share button: left of the PNG download button, same look */
.dsr .chart-share-btn {
    position: absolute; top: 8px; right: 50px; z-index: 10;
    display: flex; align-items: center; padding: 7px 9px;
    background: var(--white); border: 1px solid var(--border); border-radius: 10px;
    color: var(--text-muted); cursor: pointer; box-shadow: var(--shadow-sm);
    transition: color 0.15s, border-color 0.15s, background-color 0.15s;
}
.dsr .chart-share-btn:hover, .dsr .chart-share-btn[aria-expanded="true"] { color: #fff; border-color: var(--blue-dark); background: var(--blue-dark); }
.dsr .chart-share-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.dsr .chart-share-menu {
    position: absolute; top: 46px; right: 8px; z-index: 11;
    min-width: 236px; padding: 6px;
    background: var(--white); border: 1px solid var(--border-panel); border-radius: var(--radius-md);
    box-shadow: var(--shadow-panel);
    display: flex; flex-direction: column; gap: 2px;
}
.dsr .chart-share-menu[hidden] { display: none; }
.dsr .chart-share-item {
    position: relative; display: flex; align-items: center; gap: 10px;
    width: 100%; min-height: 44px; padding: 10px 12px;
    background: none; border: 0; border-radius: var(--radius-sm); cursor: pointer;
    font: inherit; font-size: 14px; font-weight: 500; line-height: 20px; color: var(--text);
    text-align: left; text-decoration: none;
}
.dsr .chart-share-item svg { flex: none; color: var(--text-muted); }
.dsr .chart-share-item .csm-label { flex: 1; }
.dsr .chart-share-item small { font-size: 12px; font-weight: 400; color: var(--text-muted); white-space: nowrap; }
.dsr .chart-share-item:hover, .dsr .chart-share-item:focus-visible { background: var(--blue-bg); color: var(--blue-dark); outline: none; }
.dsr .chart-share-item:hover svg, .dsr .chart-share-item:focus-visible svg, .dsr .chart-share-item:hover small, .dsr .chart-share-item:focus-visible small { color: var(--blue-dark); }
.dsr .chart-share-item:focus-visible { box-shadow: inset 0 0 0 2px var(--blue); }
/* A thin rule between « data » (CSV, link) and « share » (LinkedIn, X, cite) */
.dsr .chart-share-item[data-act="linkedin"] { margin-top: 5px; }
.dsr .chart-share-item[data-act="linkedin"]::before {
    content: ""; position: absolute; left: 10px; right: 10px; top: -4px; height: 1px; background: var(--border-panel);
}
/* Two buttons now sit in the top right corner: titles under them make room */
.dsr .card:has(> .chart-share-btn) > .card-title { padding-right: 92px; }
.dsr .card:has(> .chart-share-btn) > .vs-chart-head { padding-right: 92px; }
/* A chart that opens its card (no title) starts under the two buttons: they
   covered the end of the first bar and the legend pager on phones. */
.dsr .card:has(> .chart-share-btn) > .chart:first-child { margin-top: 20px; }
@media (max-width: 768px) {
    .dsr .chart-share-btn { padding: 4px 6px; right: 42px; }
    .dsr .chart-share-menu { top: 38px; }
    .dsr .card:has(> .chart-share-btn) > .card-title,
    .dsr .card:has(> .chart-share-btn) > .vs-chart-head { padding-right: 76px; }
    .dsr .card:has(> .chart-share-btn) > .chart:first-child { margin-top: 24px; }
}

/* Confirmation toast (copy link, citation, CSV) */
.dsr .sorank-toast {
    position: fixed; left: 50%; bottom: 24px; z-index: 1000;
    max-width: calc(100vw - 32px); padding: 12px 18px;
    border-radius: var(--radius-md); background: var(--ink); color: #fff;
    font-size: 14px; font-weight: 500; line-height: 1.4; text-align: center;
    box-shadow: var(--shadow-panel);
    opacity: 0; transform: translate(-50%, 12px); pointer-events: none;
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.dsr .sorank-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* Lookup box: intro on the left, the field on the right, result below */
.dsr .lookup {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 16px 40px; align-items: start;
    margin: 24px 0 8px; padding: 24px;
    background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.dsr .lookup-top { display: flex; align-items: flex-start; gap: 14px; }
.dsr .lookup-icon {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--blue-tint); color: var(--blue-dark);
}
.dsr .lookup-top-text { min-width: 0; }
.dsr .lookup > * { min-width: 0; }
.dsr .lookup .lookup-title { margin-bottom: 6px; }
.dsr .lookup-intro { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-secondary); }
.dsr .lookup-form { margin: 0; }
.dsr .lookup-label { display: block; margin-bottom: 6px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); }
.dsr .lookup-row { display: flex; gap: 8px; }
.dsr .lookup-input {
    flex: 1; min-width: 0; min-height: 46px; padding: 0 14px;
    border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--white);
    font: inherit; font-size: 16px; color: var(--ink);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.dsr .lookup-input::placeholder { color: var(--text-muted); opacity: 1; }
.dsr .lookup-input:hover { border-color: #BDBDBD; }
.dsr .lookup-input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(67, 121, 240, 0.18); }
.dsr .lookup-btn {
    flex: none; min-height: 46px; padding: 0 20px; border: 0; border-radius: var(--radius-md);
    background: var(--blue-dark); color: #fff; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
    transition: background-color 0.15s;
}
.dsr .lookup-btn:hover { background: #2554BE; }
.dsr .lookup-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.dsr .lookup-hint { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-muted); }
.dsr .lookup-result { grid-column: 1 / -1; }
.dsr .lookup-result[hidden] { display: none; }
.dsr .lookup-result.is-stale { opacity: 0.5; transition: opacity 0.15s; }
.dsr .lookup-sr {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.dsr .lk-msg { margin: 0; padding: 12px 14px; border-radius: var(--radius-md); background: var(--bg); font-size: 14px; line-height: 1.5; color: var(--text-secondary); }
.dsr .lk-busy::before {
    content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 8px; vertical-align: -1px;
    border: 2px solid var(--border-strong); border-top-color: var(--blue-dark); border-radius: 50%;
    animation: lk-spin 0.8s linear infinite;
}
@keyframes lk-spin { to { transform: rotate(360deg); } }

/* Result card */
.dsr .lk-card { padding: 20px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg); }
.dsr .lk-card.is-found { border-color: rgba(67, 121, 240, 0.28); background: var(--blue-bg); }
.dsr .lk-head { display: flex; align-items: center; gap: 12px; }
.dsr .lk-logo, .dsr .lk-mono {
    flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--white); border: 1px solid var(--border);
}
.dsr .lk-logo { object-fit: contain; padding: 7px; }
.dsr .lk-mono { display: inline-flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; color: var(--blue-dark); }
.dsr .lk-head-text { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.dsr .lk-name { margin: 0; font-size: 18px; line-height: 1.3; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.dsr .lk-name-nf { font-size: 17px; }
.dsr .lk-badge {
    display: inline-flex; align-items: center; min-height: 22px; padding: 0 10px; border-radius: var(--radius-pill);
    background: var(--white); border: 1px solid rgba(67, 121, 240, 0.3); font-size: 12px; font-weight: 600; color: var(--blue-dark);
}
.dsr .lk-lede { margin: 12px 0 0; max-width: var(--measure); font-size: 15px; line-height: 1.6; color: var(--text); }
.dsr .lk-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 16px 0 0; }
.dsr .lk-stat { padding: 12px 14px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); }
.dsr .lk-stat dt { font-size: 12px; line-height: 1.4; font-weight: 600; color: var(--text-muted); }
.dsr .lk-stat dd { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 0; }
.dsr .lk-num { font-size: 22px; line-height: 1.2; font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dsr .lk-stat small { font-size: 12px; line-height: 1.4; color: var(--text-secondary); }
.dsr .lk-lines { list-style: none; display: grid; gap: 8px; margin: 14px 0 0; padding: 0; }
.dsr .lk-lines li {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px;
    padding: 10px 14px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md);
    font-size: 15px; line-height: 1.5; color: var(--text); font-variant-numeric: tabular-nums;
}
.dsr .lk-small {
    display: inline-block; margin-left: 6px; padding: 0 8px; border-radius: var(--radius-pill);
    background: #FEF3C7; color: #92400E; font-size: 12px; font-weight: 600; line-height: 20px;
}
.dsr .lk-more { margin: 8px 0 0; font-size: 14px; color: var(--text-secondary); }
.dsr .lk-note { margin: 12px 0 0; max-width: var(--measure); font-size: 13px; line-height: 1.55; color: var(--text-secondary); }
.dsr .lk-actions { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 14px; }
.dsr .lk-link { color: var(--link); font-size: 15px; font-weight: 500; text-decoration: none; }
.dsr .lk-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.dsr .lk-link:focus-visible, .dsr .lk-cta:focus-visible, .dsr .lk-chip:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
.dsr .lk-others { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0 0; font-size: 14px; color: var(--text-secondary); }
.dsr .lk-chip {
    min-height: 32px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--radius-pill);
    background: var(--white); font: inherit; font-size: 13px; color: var(--text); cursor: pointer;
}
.dsr .lk-chip:hover { border-color: var(--border-strong); color: var(--ink); }
.dsr .lk-cta {
    display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-top: 16px; padding: 11px 16px;
    border: 1px solid var(--blue-dark); border-radius: var(--radius-md); background: var(--white);
    color: var(--blue-dark); font-size: 15px; font-weight: 600; line-height: 1.35; text-decoration: none;
    transition: background-color 0.15s;
}
.dsr .lk-cta small { font-size: 13px; font-weight: 500; }
.dsr .lk-cta:hover { background: #E8EEFC; }
.dsr .lk-cta.is-primary { background: var(--blue-dark); color: #fff; }
.dsr .lk-cta.is-primary:hover { background: #2554BE; }
@media (max-width: 900px) {
    .dsr .lookup { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .dsr .lk-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    .dsr .lookup { padding: 18px 16px; margin-top: 20px; }
    .dsr .lookup-icon { width: 36px; height: 36px; }
    .dsr .lk-card { padding: 16px 14px; }
    .dsr .lk-num { font-size: 20px; }
    .dsr .lookup-btn { padding: 0 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .dsr .sorank-toast { transition: none; }
    .dsr .lk-busy::before { animation: none; }
}

/* Live hero counters (app.js liveHeroStats) */
.dsr .hero .hero-live { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 18px auto 0; max-width: none; font-size: 12px; line-height: 16px; color: rgba(255, 255, 255, 0.72); }
.dsr .hero-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6); animation: hero-live-pulse 2s infinite; }
@keyframes hero-live-pulse { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6); } 70% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }
@media (prefers-reduced-motion: reduce) { .dsr .hero-live-dot { animation: none; } }

/* ===== Retours Thibault 13/10/2026 ===== */
/* Report hero centred on every page */
.dsr .hero-report .hero-content, .dsr .hero-report .hero-content > * { text-align: center; }
.dsr .hero-report .hero-eyebrow { justify-content: center; }
.dsr .hero-report h1 { justify-content: center; }
.dsr .hero-report .hero-lede { margin-left: auto; margin-right: auto; }
/* Author photo inline before the name */
.dsr .hero-author { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; vertical-align: middle; margin: -3px 6px 0 0; box-shadow: 0 0 0 1.5px rgba(255,255,255,.6); }
/* Favicon in the KPI cards */
.dsr .kf-value { display: flex; align-items: center; gap: 8px; }
.dsr .kf-ico { width: 20px; height: 20px; border-radius: 5px; object-fit: contain; flex-shrink: 0; }
/* Model logo inline in the H1, no white tile */
.dsr .hero-logo-inline { width: 1em; height: 1em; display: inline-block; flex-shrink: 0; object-fit: contain; background: none; box-shadow: none; padding: 0; border-radius: 0; align-self: center; }
/* Action steps: 3 x 2 grid */
.dsr .tips-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .dsr .tips-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .dsr .tips-list { grid-template-columns: 1fr; } }