/* ==========================================================================
   SilverStone — site stylesheet
   1. Colours          5. Content
   2. Base             6. Footer
   3. Header           7. Data tables
   4. Navigation       8. Home page
                       9. Login page
                      10. Cars page (grid, filters, gallery)
                      11. Data pages (portfolio, production)
                      12. Valuation page
                      13. Car history page
                      14. Database page
                      15. Market analysis page
   ========================================================================== */


/* 1. Colours — change a colour here and it updates everywhere
   -------------------------------------------------------------------------- */

:root {
    --page-bg:      #282828;  /* dark patterned background */
    --panel-bg:     #ffffff;  /* header, menu and content boxes */
    --text:         #363b29;
    --line:         #a4a4a4;
    --link:         #3498db;
    --link-hover:   #2e86c1;
    --accent:       red;      /* menu underline, login status, small headings */
    --footer-text:  #e6a948;
}


/* 2. Base
   -------------------------------------------------------------------------- */

html,
body {
    height: 100%;
}

body {
    margin: 0 80px;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: var(--page-bg);
    background-image:
        radial-gradient(black 15%, transparent 16%),
        radial-gradient(black 15%, transparent 16%),
        radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%),
        radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%);
    background-position: 0 0, 8px 8px, 0 1px, 8px 9px;
    background-size: 16px 16px;
}

a {
    color: var(--link);
}

a:hover,
a:focus {
    color: var(--link-hover);
}

h1 {
    font-size: 36px;
    font-weight: normal;
}

h2 {
    font-size: 18px;
    font-weight: normal;
    text-decoration: underline;
}

h3 {
    font-size: 14px;
    font-weight: normal;
    color: var(--accent);
}

/* On phones, give the page the full width instead of 80px margins each side */
@media (max-width: 700px) {
    body {
        margin: 0 8px;
    }

    #entete,
    #contenu,
    #pied {
        padding-left: 12px;
        padding-right: 12px;
    }

    #entete img {
        max-width: 100%;
        height: auto;
    }
}

#global {
    width: 750px;
    min-height: 100%;
    margin: 0 auto;
    overflow: hidden;
}


/* 3. Header
   -------------------------------------------------------------------------- */

#entete {
    padding: 15px 20px 10px;
    background: var(--panel-bg);
    border-bottom: 1px solid var(--line);
}

#entete h1 {
    margin: 0;
}

#entete h1 img {
    float: left;
    margin: 7px 20px 10px 0;
}

#entete .sous-titre {
    margin: 4px 0 15px;
}

#login,
#sessioninfo {
    text-align: right;
    font-size: 12px;
    color: var(--accent);
}

#sessioninfo {
    background: var(--panel-bg);
}


/* 4. Navigation
   -------------------------------------------------------------------------- */

#navigation {
    padding: 12px 15px;
    font-size: 16px;
    background: var(--panel-bg) linear-gradient(to left, rgba(40, 40, 40, 1), rgba(255, 255, 255, 0));
    border-bottom: 1px solid var(--line);
}

#navigation ul {
    margin: 0;
    list-style: none;
    text-align: center;
}

#navigation li {
    display: inline;
}

#navigation a {
    padding: 6px;
    font-size: 0.9em;
    line-height: 1.5;
    color: black;
    text-decoration: none;
}

#navigation a:hover,
#navigation a:focus {
    color: black;
    border-bottom: 2px solid var(--accent);
}

#navigation a.nav-account {
    color: var(--accent);
}

/* The page being shown */
#navigation a.is-current {
    border-bottom: 2px solid var(--accent);
}

/* Drop-down menus (INVESTMENT, INPUT) */
#navigation .nav-group {
    position: relative;
    display: inline-block;
    margin: -8px 0;   /* same height as the plain links, so the bar doesn't grow */
}

#navigation .nav-group__btn {
    padding: 6px 6px 4px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    color: black;
    font: inherit;
    font-size: 0.9em;
    line-height: normal;   /* underline level with the plain links */
    cursor: pointer;
}

#navigation .nav-group__btn:hover,
#navigation .nav-group__btn:focus-visible,
#navigation .nav-group.is-current .nav-group__btn {
    border-bottom-color: var(--accent);
}

#navigation .nav-group__arrow {
    margin-left: 4px;
    font-size: 0.8em;
}

#navigation .nav-group__menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 50;
    min-width: 170px;
    padding: 6px 0;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 3px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    text-align: left;
}

/* Open on hover (mouse), keyboard focus, or a click/tap */
#navigation .nav-group.is-open .nav-group__menu,
#navigation .nav-group:focus-within .nav-group__menu {
    display: block;
}

@media (hover: hover) {
    #navigation .nav-group:hover .nav-group__menu {
        display: block;
    }
}

#navigation .nav-group__menu a {
    display: block;
    padding: 6px 14px;
    border-bottom: 0;
    white-space: nowrap;
}

#navigation .nav-group__menu a:hover,
#navigation .nav-group__menu a:focus {
    border-bottom: 0;
    background: #f2f2f2;
}

#navigation .nav-group__menu a.is-current {
    border-bottom: 0;
    font-weight: bold;
    box-shadow: inset 3px 0 0 var(--accent);
}


/* 5. Content
   -------------------------------------------------------------------------- */

#contenu {
    padding: 10px 20px;
    color: var(--text);
    background: var(--panel-bg);
}

#contenu > :first-child {
    margin-top: 10px;
}

#contenu p,
#contenu li {
    line-height: 1.5;
}


/* 6. Footer
   -------------------------------------------------------------------------- */

#pied {
    padding: 15px 20px;
    font-size: 0.85em;
    color: var(--footer-text);
}

#pied p {
    margin: 0.5em 0;
}

#copyright {
    text-align: left;
    font-size: 1em;
}


/* 7. Data tables
   -------------------------------------------------------------------------- */

#TableScrollContainer {
    height: 150px;
    min-height: 150px;
    overflow-x: hidden;
    overflow-y: auto;
    border-collapse: collapse;
}

#table1 {
    border: 1px solid black;
    border-collapse: collapse;
}

/* Shared header and cell styles */
#th1, #th2, #th3, #th4, #th5, #th6,
#td1, #td2, #td3, #td4, #td5, #td6 {
    padding: 5px;
    border: 1px solid black;
    border-collapse: collapse;
}

#th1, #th2, #th3, #th4, #th5, #th6 {
    font-size: 12px;
}

#td1, #td2, #td3, #td4, #td5, #td6 {
    font-size: 10px;
}

/* Header colours */
#th1 { background-color: #7cb3ff; color: black; }  /* blue   */
#th2 { background-color: #ffd700; color: black; }  /* yellow */
#th3 { background-color: orange;  color: black; }  /* orange */
#th4 { background-color: #04b431; color: white; }  /* green  */
#th5 { background-color: #e74c3c; color: white; }  /* red    */
#th6 { background-color: #a4a4a4; color: white; }  /* grey   */

/* Cell colours (#td1 has none) */
#td2 { background-color: #bbd7fd; }  /* light blue   */
#td3 { background-color: #f6e3ce; }  /* light orange */
#td4 { background-color: #f7f2e0; }  /* light yellow */
#td5 { background-color: #d8f6ce; }  /* light green  */
#td6 { background-color: #e6e6e6; }  /* light grey   */


/* 8. Home page
   -------------------------------------------------------------------------- */

#contenu .home__banner {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 10px;
}

#contenu .home__section {
    max-width: 820px;
    margin: 0 auto 32px;
}

#contenu .home__figure {
    margin: 24px auto;
    text-align: center;
}

#contenu .home__figure img {
    display: inline-block;
    width: 80%;
    max-width: 640px;
    height: auto;
}

#contenu .home__cta {
    max-width: 820px;
    margin: 0 auto 24px;
    font-size: 18px;
}

#contenu .home__cta a {
    text-decoration: none;
}

#contenu .home__cta a:hover {
    text-decoration: underline;
}

@media (max-width: 700px) {
    #contenu .home__figure img {
        width: 100%;
    }
}


/* 9. Login page
   -------------------------------------------------------------------------- */

#contenu .login-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 320px;
    margin: 24px 0 32px;
}

#contenu .login-form label {
    margin-top: 8px;
    font-size: 14px;
}

#contenu .login-form input {
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 3px;
    font: inherit;
}

#contenu .login-form input:focus {
    outline: 2px solid var(--link);
    outline-offset: 1px;
}

#contenu .login-form button {
    align-self: flex-start;
    margin-top: 16px;
    padding: 10px 24px;
    border: 0;
    border-radius: 3px;
    background: var(--accent);
    color: #fff;
    font: inherit;
    font-weight: bold;
    cursor: pointer;
}

#contenu .form-error {
    padding: 10px 14px;
    border-left: 3px solid var(--accent);
    background: #fdecec;
    color: #8a1010;
}

#contenu .form-error p {
    margin: 0;
}

#contenu .form-error p + p {
    margin-top: 6px;
}

#contenu .form-success {
    padding: 10px 14px;
    border-left: 3px solid #1e7d32;
    background: #e9f6ea;
    color: #1b5e20;
}

#contenu .form-hint {
    color: #6b6b6b;
    font-size: 12px;
}


/* 10. Cars page
   -------------------------------------------------------------------------- */

/* Filter buttons: two rows, status then make */
#contenu .filters {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 24px 0;
}

#contenu .filters__group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#contenu .chip {
    min-height: 36px;
    padding: 0 16px;
    border: 1px solid rgba(128, 128, 128, 0.5);
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

#contenu .chip:hover {
    border-color: currentColor;
}

#contenu .chip[aria-pressed="true"] {
    border: 2px solid currentColor;
    font-weight: bold;
}

/* Grid of cars */
#contenu .car-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 32px 24px;
    margin: 24px 0;
    padding: 0;
    list-style: none;
}

#contenu .car-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Cover photo: every one is cropped to the same 3:2 frame */
#contenu .car-card__media {
    position: relative;
    display: block;
    height: 0;
    padding-top: 66.67%;
    overflow: hidden;
    border-radius: 4px;
    background: rgba(128, 128, 128, 0.15);
}

#contenu .car-card__media img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

#contenu .car-card__media:hover img {
    transform: scale(1.03);
}

/* "6 photos" label on the cover */
#contenu .badge {
    position: absolute;
    left: 10px;
    bottom: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    font-size: 12px;
}

/* "SOLD" sticker: a red ribbon across the top-right corner of the photo */
#contenu .sold-sticker {
    position: absolute;
    top: 22px;
    right: -38px;
    z-index: 1;
    width: 150px;
    padding: 5px 0;
    transform: rotate(45deg);
    background: #c8102e;
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 0.2em;
    text-align: center;
    text-transform: uppercase;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

/* Sold cars' photos are slightly faded so current cars stand out */
#contenu .car-card--sold .car-card__media img {
    filter: grayscale(35%);
    opacity: 0.9;
}

#contenu .car-card--sold .car-card__media:hover img {
    filter: none;
    opacity: 1;
}

/* Text under the photo */
#contenu .car-card__body {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

#contenu .car-card__make,
#contenu .car-card__meta {
    margin: 0;
    font-size: 0.85em;
    opacity: 0.75;
}

#contenu .car-card__make {
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

#contenu .car-card__model {
    margin: 2px 0 0;
}

#contenu .car-card__link {
    white-space: nowrap;
}

/* Photo gallery: full screen and always dark, so photos stand out */
body.gallery-open {
    overflow: hidden;
}

.gallery {
    box-sizing: border-box;
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 20px 24px 24px;
    border: 0;
    background: rgba(8, 8, 8, 0.97);
    color: #eee;
}

.gallery::backdrop {
    background: rgba(8, 8, 8, 0.97);
}

.gallery[open] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.gallery__bar,
.gallery__tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.gallery__make,
.gallery__counter {
    margin: 0;
    color: #aaa;
    font-size: 13px;
}

.gallery__make {
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.gallery__model {
    margin: 0;
    font-size: 22px;
    text-decoration: none;
}

/* Round buttons: close, previous, next */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid #444;
    border-radius: 50%;
    background: rgba(18, 18, 18, 0.8);
    color: #eee;
    cursor: pointer;
}

.icon-btn:hover {
    border-color: #eee;
}

.icon-btn--lg {
    width: 52px;
    height: 52px;
}

/* The large photo: one fixed 3:2 frame, as big as the screen allows.
   Landscape photos fill the frame (16:9 and 4:3 shots are trimmed slightly);
   upright photos are shown whole inside it, on black. */
.gallery__stage {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    container-type: size;
}

.gallery__figure {
    flex: none;
    width: min(calc(100% - 136px), 150cqh);
    aspect-ratio: 3 / 2;
    margin: 0;
    overflow: hidden;
    border-radius: 4px;
    background: #000;
}

.gallery__figure img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery__figure.is-upright img {
    object-fit: contain;
}

/* Thumbnail strip */
.gallery__thumbs {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.gallery__thumbs > :first-child { margin-left: auto; }
.gallery__thumbs > :last-child  { margin-right: auto; }

.thumb {
    flex: none;
    width: 96px;
    height: 64px;
    padding: 0;
    overflow: hidden;
    border: 1px solid #333;
    border-radius: 3px;
    background: #1c1c1c;
    opacity: 0.55;
    cursor: pointer;
}

.thumb:hover {
    opacity: 0.85;
}

.thumb[aria-current="true"] {
    border: 2px solid #eee;
    opacity: 1;
}

.thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Hidden by the filters or the gallery script */
[hidden] {
    display: none !important;
}

/* Phones */
@media (max-width: 700px) {
    .gallery {
        padding: 16px 12px;
    }

    .gallery__nav {
        position: absolute;
        top: 50%;
        z-index: 1;
        transform: translateY(-50%);
    }

    .gallery__nav--prev { left: 8px; }
    .gallery__nav--next { right: 8px; }

    .gallery__figure {
        width: min(100%, 150cqh);
    }

    .thumb {
        width: 72px;
        height: 48px;
    }
}

/* Visitors who prefer less motion */
@media (prefers-reduced-motion: reduce) {
    #contenu .car-card__media img {
        transition: none;
    }

    #contenu .car-card__media:hover img {
        transform: none;
    }
}


/* 11. Data pages (portfolio and other members' tables)
   -------------------------------------------------------------------------- */

/* Key figures */
#contenu .kpis {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 12px;
    margin: 16px 0 32px;
}

#contenu .kpi {
    padding: 12px 14px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fafafa;
}

#contenu .kpi dt {
    color: #666;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

#contenu .kpi dd {
    margin: 4px 0 0;
    font-size: 22px;
    font-weight: bold;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

#contenu .kpi--accent {
    border-color: #f2b8b8;
    background: #fdf3f3;
}

#contenu .kpi--accent dd {
    color: #b00000;
}

/* Wide tables scroll sideways instead of spilling out of the page */
#contenu .table-scroll {
    overflow-x: auto;
    margin: 12px 0 28px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

#contenu .data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

#contenu .data-table th,
#contenu .data-table td {
    padding: 6px 8px;
    border-bottom: 1px solid #e3e3e3;
    text-align: left;
    vertical-align: top;
}

#contenu .data-table thead th {
    position: sticky;
    top: 0;
    background: #7cb3ff;  /* same blue as the old table headers */
    color: #000;
    font-weight: bold;
    white-space: nowrap;
}

#contenu .data-table thead th.col-valo {
    background: orange;   /* same orange as the old valuation columns */
}

#contenu .data-table thead th.col-market {
    background: #c0392b;  /* the old red header, darkened so white text reads clearly */
    color: #fff;
}

#contenu .data-table thead th.col-concours {
    background: #6b6b6b;  /* the old grey header, darkened for the same reason */
    color: #fff;
}

#contenu .data-table tbody tr:nth-child(even) {
    background: #f6f8fb;
}

#contenu .data-table tbody tr:hover {
    background: #eaf2ff;
}

#contenu .data-table tfoot td {
    border-top: 2px solid #999;
    border-bottom: 0;
    background: #f0f0f0;
    font-weight: bold;
}

#contenu .data-table .num {
    text-align: right;
    white-space: nowrap;
}

#contenu .data-table .center {
    text-align: center;
}

#contenu .data-table .nowrap {
    white-space: nowrap;
}

#contenu .data-table .pos {
    color: #1b6e20;
}

#contenu .data-table .neg {
    color: #b00000;
}

#contenu .data-table .empty {
    padding: 16px;
    color: #666;
    text-align: center;
}

#contenu .table-note {
    color: #666;
    font-size: 12px;
}


/* 12. Valuation page (chart, commentary, breakdowns)
   -------------------------------------------------------------------------- */

/* Links to the page's sections */
#contenu .page-sections {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 20px 0 8px;
}

#contenu .page-sections a {
    padding: 6px 14px;
    border: 1px solid #ccc;
    border-radius: 999px;
    color: inherit;
    font-size: 14px;
    text-decoration: none;
}

#contenu .page-sections a:hover {
    border-color: currentColor;
}

#contenu.valo section {
    padding-top: 12px;
    scroll-margin-top: 12px;
}

#contenu.valo h3 {
    margin: 24px 0 8px;
    color: #333;
    font-size: 15px;
    font-weight: bold;
}

#contenu .muted {
    color: #777;
}

#contenu .data-table td.strong {
    font-weight: bold;
}

/* Latest quarterly commentary */
#contenu .latest-note {
    margin: 12px 0 8px;
    padding: 14px 18px;
    border-left: 4px solid #2a78d6;
    background: #f3f7fc;
}

#contenu .latest-note p {
    margin: 0 0 8px;
}

#contenu .latest-note__label {
    color: #1c5cab;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

#contenu .latest-note a {
    font-size: 14px;
}

/* Chart */
#contenu .chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 0 0 8px;
    padding: 0;
    list-style: none;
    font-size: 13px;
}

.chart-legend__swatch {
    display: inline-block;
    width: 14px;
    height: 3px;
    margin-right: 6px;
    border-radius: 2px;
    vertical-align: middle;
}

#contenu .chart {
    position: relative;
    max-width: 760px;
}

#contenu .chart svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.chart__grid {
    stroke: #e8e8e8;
    stroke-width: 1;
}

.chart__base {
    stroke: #999;
    stroke-width: 1;
    stroke-dasharray: 4 3;
}

.chart__axis {
    fill: #666;
    font-size: 12px;
}

.chart__label {
    fill: #444;
    font-size: 12px;
}

.chart__label--main {
    fill: #111;
    font-weight: bold;
}

.chart__crosshair {
    stroke: #888;
    stroke-width: 1;
}

.chart__hit {
    cursor: crosshair;
}

#contenu .chart__tooltip {
    position: absolute;
    z-index: 2;
    min-width: 170px;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    font-size: 12px;
    line-height: 1.6;
    pointer-events: none;
}

/* Quarterly table: one coloured header group per index */
#contenu .data-table thead th.group {
    text-align: center;
}

#contenu .data-table thead th.group--cours    { background: #2a78d6; color: #fff; }
#contenu .data-table thead th.group--estoxx   { background: #fbd9cb; color: #000; }
#contenu .data-table thead th.group--livx     { background: #c9eedf; color: #000; }
#contenu .data-table thead th.group--hagi_top { background: #fbe7b5; color: #000; }

#contenu .data-table thead th.sub {
    font-weight: normal;
    font-size: 11px;
}

#contenu .data-table td.group-start {
    border-left: 1px solid #ddd;
}

/* Breakdown tables side by side */
#contenu .breakdowns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0 20px;
}

/* Notes on sold cars */
#contenu .sold-notes {
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

#contenu .sold-notes li {
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}

#contenu .sold-notes__q {
    display: inline-block;
    min-width: 64px;
    color: #666;
    font-size: 13px;
    font-weight: bold;
}

/* Commentary, one fold-out per year */
#contenu .year-notes {
    margin: 0 0 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

#contenu .year-notes summary {
    padding: 10px 14px;
    background: #f6f6f6;
    font-weight: bold;
    cursor: pointer;
}

#contenu .year-notes[open] summary {
    border-bottom: 1px solid #ddd;
}

#contenu .year-notes p {
    margin: 12px 14px;
}

/* Long tables scroll inside their own box, header stays visible */
#contenu .table-scroll--tall {
    max-height: 520px;
    overflow-y: auto;
}

#contenu .page-sections a[aria-current="page"] {
    border-color: #333;
    background: #333;
    color: #fff;
}

#contenu .page-sections__download {
    margin-left: auto;
}


/* 13. Car history page
   -------------------------------------------------------------------------- */

#contenu .car-picker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 16px 0 8px;
}

#contenu .car-picker label {
    font-weight: bold;
}

#contenu .car-picker select {
    min-width: 280px;
    max-width: 100%;
    padding: 9px 10px;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: #fff;
    font: inherit;
}

#contenu .car-facts {
    margin-top: -6px;
    color: #555;
}

#contenu .tag {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 10px;
    border-radius: 999px;
    background: #e8f0fb;
    color: #1c5cab;
    font-size: 12px;
    font-weight: bold;
}

#contenu .tag--sold {
    background: #c8102e;
    color: #fff;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#contenu .kpi dd.kpi__small {
    font-size: 17px;
}

.chart__sale {
    stroke: #eb6834;
    stroke-width: 1;
    stroke-dasharray: 3 3;
}

.chart-legend__swatch--dashed {
    background: repeating-linear-gradient(to right, #999 0 4px, transparent 4px 7px);
}

.chart-legend__dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 6px;
    border-radius: 50%;
    vertical-align: middle;
}


/* 14. Database page (new entry, calculation, query)
   -------------------------------------------------------------------------- */

#contenu .entry-form {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 12px 16px;
    max-width: 820px;
    margin: 12px 0 8px;
}

#contenu .entry-form .field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#contenu .entry-form label,
#contenu .entry-form legend {
    font-size: 13px;
    font-weight: bold;
}

#contenu .entry-form .field-row {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 8px 16px;
    margin: 0;
    padding: 0;
    border: 0;
}

#contenu .entry-form .field-row legend {
    margin-bottom: 4px;
    padding: 0;
}

#contenu .entry-form input,
#contenu .entry-form select,
#contenu .query-form select {
    min-height: 38px;
    padding: 6px 8px;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: #fff;
    font: inherit;
}

#contenu .form-buttons {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
}

#contenu .form-buttons button,
#contenu .query-form button {
    min-height: 40px;
    padding: 0 22px;
    border: 0;
    border-radius: 3px;
    background: var(--accent);
    color: #fff;
    font: inherit;
    font-weight: bold;
    cursor: pointer;
}

#contenu .form-buttons .btn-secondary {
    border: 1px solid #333;
    background: #fff;
    color: #333;
}

#contenu .query-form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 8px;
}

#contenu .calc-box {
    max-width: 820px;
    margin: 12px 0;
    padding: 12px 16px;
    border: 1px solid #d6e2f3;
    border-radius: 4px;
    background: #f5f8fd;
}

#contenu .calc-box__title {
    margin: 0 0 8px;
    color: #1c5cab;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

#contenu .calc-steps {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

#contenu .calc-steps td {
    padding: 4px 0;
    border-bottom: 1px solid #e3eaf5;
}

#contenu .calc-steps tr:last-child td {
    border-bottom: 0;
    font-weight: bold;
}

#contenu .calc-steps .num {
    padding-left: 16px;
    text-align: right;
    white-space: nowrap;
}

#contenu .stats-table {
    max-width: 520px;
}

.chart__recent {
    fill: #f3f6fa;
}

.chart__base--strong {
    stroke: #555;
}

.chart__focus {
    fill: none;
    stroke: #111;
    stroke-width: 1.5;
}


/* 15. Market analysis page
   -------------------------------------------------------------------------- */

#contenu .market-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px 16px;
    margin: 16px 0 20px;
}

#contenu .market-picker .field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#contenu .market-picker label {
    font-size: 13px;
    font-weight: bold;
}

#contenu .market-picker select {
    min-height: 40px;
    padding: 6px 8px;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: #fff;
    font: inherit;
}

#contenu .kpi--car {
    border-top: 4px solid #999;
}

#contenu .kpi dd.kpi__note {
    margin-top: 4px;
    color: #555;
    font-size: 13px;
    font-weight: normal;
    white-space: normal;
}

#contenu .chart-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 20px;
    margin: 8px 0;
}

#contenu .chart-toolbar .chart-legend {
    margin: 0;
}

#contenu .box-key {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 18px;
    margin: 0 0 8px;
    color: #555;
    font-size: 12px;
}

#contenu .box-key span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

#contenu .market-chart {
    position: relative;
}

#contenu .market-chart__scroll {
    overflow-x: auto;
}

#contenu .market-chart__svg {
    display: block;
    width: 100%;
    min-width: 680px;
    height: auto;
}

.market-chart__band {
    fill: #eef2f7;
}

.market-chart__sep {
    stroke: #f0f0f0;
    stroke-width: 1;
}

.market-chart__hit {
    cursor: pointer;
    outline: none;
}

.market-chart__hit:focus-visible {
    stroke: #333;
    stroke-width: 1;
}

#contenu .market-chart .chart__tooltip {
    min-width: 200px;
}

.mtip__car {
    margin-top: 6px;
}

.mtip__row {
    padding-left: 20px;
}

.mtip__basis {
    color: #777;
    font-style: italic;
}

#contenu .tag--est {
    margin-left: 0;
    background: #f0f0f0;
    color: #666;
    font-weight: normal;
    font-style: italic;
}

/* 16. Market review page
   ----------------------------------------------------------------------------- */
#contenu .review-filter {
    margin: 8px 0 14px;
}

#contenu .review-filter .chip {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

#contenu .review-card {
    max-width: 900px;
    margin: 0 0 14px;
    padding: 12px 16px;
    border: 1px solid #ddd;
    border-left: 4px solid #eda100;
    border-radius: 3px;
    background: #fff;
}

#contenu .review-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 12px;
}

#contenu .review-card__title {
    margin: 4px 0 0;
    color: #555;
}

#contenu .review-card__reasons {
    margin: 8px 0;
    padding-left: 20px;
    color: #8a5a00;
}

#contenu .review-card__fields {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 8px 12px;
    margin: 8px 0;
}

#contenu .review-card__fields label {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 0.85em;
    font-weight: bold;
}

#contenu .review-card__fields input,
#contenu .review-card__fields select {
    min-height: 34px;
    padding: 4px 6px;
    border: 1px solid var(--line);
    border-radius: 3px;
    font: inherit;
    font-weight: normal;
}

#contenu .review-card__meta {
    margin: 4px 0 10px;
    font-size: 0.85em;
    color: #666;
}

#contenu .review-why {
    min-width: 220px;
    font-size: 0.85em;
    color: #666;
}

/* 17. Collect switches (Production page) and search toolbar
   ----------------------------------------------------------------------------- */
#contenu .models-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    margin: 12px 0;
}

#contenu .models-search input {
    width: min(360px, 100%);
    min-height: 38px;
    padding: 4px 10px;
    border: 1px solid var(--line);
    border-radius: 3px;
    font: inherit;
}

#contenu .models-count {
    margin: 0;
}

#contenu .models-table tr.is-off td:not(:first-child) {
    color: #999;
}

#contenu .switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 0.9em;
    cursor: pointer;
}

#contenu .switch[disabled] {
    opacity: 0.6;
    cursor: wait;
}

#contenu .switch__track {
    position: relative;
    width: 38px;
    height: 22px;
    border-radius: 999px;
    background: #c9c9c9;
    transition: background 0.15s;
}

#contenu .switch__thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    transition: left 0.15s;
}

#contenu .switch[aria-checked="true"] .switch__track {
    background: #1baf7a;
}

#contenu .switch[aria-checked="true"] .switch__thumb {
    left: 19px;
}

#contenu .switch:focus-visible .switch__track {
    outline: 2px solid var(--link);
    outline-offset: 2px;
}

#contenu .switch__text {
    min-width: 2em;
    text-align: left;
}

#contenu .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

#contenu .production-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    margin: 10px 0;
}

#contenu .production-incomplete {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

#contenu .production-table tr.is-off td:not(:first-child) {
    color: #999;
}

/* Market review: car drop-down, body note, correction card */
#contenu .review-card__fields .review-card__car {
    grid-column: 1 / -1;
}

#contenu .review-card__car select {
    max-width: 420px;
}

#contenu .review-card__bodynote {
    margin: -2px 0 8px;
    font-size: 0.85em;
    color: #1c5cab;
}

#contenu .review-card--correct {
    border-left-color: #2a78d6;
}

#contenu .form-buttons a.button-link {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 22px;
    border: 1px solid #333;
    border-radius: 3px;
    background: #fff;
    color: #333;
    font-weight: bold;
    text-decoration: none;
}

/* Production page: normative average over a wider period than 60 days */
#contenu .production-table td.is-widened {
    color: #8a8a8a;
    font-style: italic;
}

/* 18. Market vs theoretical page
   ----------------------------------------------------------------------------- */
#contenu .theo-filter {
    margin: 8px 0 4px;
}

#contenu h2.theo-h {
    margin: 22px 0 4px;
    font-size: 1.15em;
}

#contenu .theo-key {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin: 0 0 6px;
    font-size: 0.85em;
    color: #555;
}

#contenu .theo-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 5px;
    border-radius: 2px;
    vertical-align: -1px;
}

#contenu .theo-swatch--pale {
    background: #d4e2f5;
    border: 1px dashed #2a78d6;
}

#contenu .theo-swatch--dot {
    border-radius: 50%;
}

#contenu .theo-chart {
    position: relative;
    max-width: 960px;
}

#contenu .theo-chart svg {
    display: block;
    width: 100%;
    height: auto;
}

#contenu .theo-chart .theo-label {
    font-size: 12px;
    fill: #333;
}

#contenu .theo-chart .theo-value {
    font-size: 11px;
    font-weight: bold;
    fill: #333;
}

#contenu .theo-chart .theo-axis-title {
    font-size: 12px;
    fill: #555;
}

#contenu .theo-chart [tabindex]:focus {
    outline: none;
}

#contenu .theo-chart circle[tabindex]:focus {
    stroke: #111;
    stroke-width: 2.5;
}

#contenu .theo-table tr.is-widened td {
    color: #8a8a8a;
    font-style: italic;
}

/* PROD page: "Add a car" */
#contenu .add-car {
    margin: 12px 0 16px;
    max-width: 860px;
}
#contenu .add-car summary {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid #333;
    border-radius: 3px;
    background: #fff;
    font-weight: bold;
    cursor: pointer;
    list-style: none;
}
#contenu .add-car summary::-webkit-details-marker {
    display: none;
}
#contenu .add-car summary::before {
    content: "+ ";
}
#contenu .add-car[open] summary::before {
    content: "− ";
}
#contenu .add-car .form-error {
    margin-top: 10px;
}
#contenu .add-car__urls,
#contenu .add-car__hint {
    grid-column: 1 / -1;
}
#contenu .add-car__collect {
    justify-content: flex-end;
}
#contenu .add-car__collect label {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    font-weight: normal;
}
#contenu .add-car textarea {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--line);
    border-radius: 3px;
    font: inherit;
    box-sizing: border-box;
}
#contenu .add-car input:not([type="checkbox"]),
#contenu .add-car select {
    height: 44px;
    min-height: 0;
    box-sizing: border-box;
}

/* MODEL page (market_model.php) */
#contenu.dd h2 { font-size: 17px; margin: 26px 0 4px; }
#contenu .dd-sub { color: #666; font-size: 13px; margin: 0 0 6px; }
#contenu .dd-filters { display: flex; flex-wrap: wrap; gap: 10px 18px; margin: 4px 0 14px; }
#contenu .dd-kpis { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
#contenu .dd-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
#contenu .dd-two > section { min-width: 0; }
#contenu .dd-chart { position: relative; }
#contenu .dd-chart svg { display: block; width: 100%; height: auto; }
#contenu .dd-chart--half { max-width: 560px; }
#contenu .dd-lab { font-size: 12px; font-weight: bold; fill: #222; }
#contenu .dd-key { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: #555; margin: 0 0 4px; }
#contenu .dd-key i { display: inline-block; vertical-align: middle; margin-right: 5px; }
#contenu .dd-dot { width: 8px; height: 8px; border-radius: 50%; background: #2a78d6; opacity: .6; }
#contenu .dd-dia { width: 8px; height: 8px; background: #eb6834; transform: rotate(45deg); }
#contenu .dd-line { width: 22px; height: 0; border-top: 2.5px solid #2a78d6; }
#contenu .dd-line--est { border-top: 2px dashed #2a78d6; opacity: .7; }
#contenu .dd-line--fit { border-top-color: #eb6834; }
#contenu .dd-line--coef { border-top: 1.5px dashed #111; }
@media (max-width: 760px) {
    #contenu .dd-two { grid-template-columns: 1fr; }
}

/* Database page: small note under a field (gearbox set by the type) */
.field-note { display: block; margin-top: 4px; font-size: 0.8rem; color: #6b7280; }

/* Model deep dive, section 7: theoretical price and goodwill */
#contenu .dd-theo h3 { font-size: 14px; margin: 18px 0 4px; }
#contenu .dd-sq { width: 10px; height: 10px; border-radius: 2px; }
#contenu .dd-theo .kpi--neg dd:not(.kpi__note) { color: #c0392b; }
#contenu .dd-theo .kpi--pos dd:not(.kpi__note) { color: #1e8449; }
#contenu .dd-theo-table td.neg, #contenu .dd-theo-table .neg { color: #c0392b; }
#contenu .dd-theo-table td.pos, #contenu .dd-theo-table .pos { color: #1e8449; }
#contenu .dd-theo-table tr.dd-total td { font-weight: bold; background: #fafafa; }
#contenu .dd-theo-table tr.dd-detail td { color: #777; font-size: 12px; }
/* On a phone the waterfall keeps a readable size and scrolls sideways. */
#contenu .dd-chart--scroll { overflow-x: auto; }
#contenu .dd-chart--scroll svg { min-width: 720px; }

/* Model deep dive: tabs (Market, Price drivers, Value, Prices) */
#contenu.dd [hidden] { display: none !important; }
#contenu .dd-tabs { display: flex; gap: 4px; box-shadow: inset 0 -2px 0 #c9c9c9; margin: 10px 0 14px; padding: 2px 2px 0; overflow-x: auto; scrollbar-width: none; }
#contenu .dd-tabs::-webkit-scrollbar { display: none; }
/* Folder tabs: each tab is a grey box; the open one turns white, with a red top edge, and joins the page below. */
#contenu .dd-tab { flex: 0 0 auto; background: #ececec; border: 2px solid #c9c9c9; border-bottom: 0; border-radius: 6px 6px 0 0;
    padding: 9px 20px; font: inherit; font-size: 14px; color: #444; text-align: left; cursor: pointer; box-shadow: inset 0 -2px 0 #c9c9c9; }
#contenu .dd-tab small { display: block; font-size: 11px; color: #888; }
#contenu .dd-tab:hover { background: #f6f6f6; color: #111; }
#contenu .dd-tab[aria-selected="true"] { background: #fff; color: #111; font-weight: bold; border-top: 3px solid var(--accent);
    padding-top: 8px; cursor: default; box-shadow: none; }
#contenu .dd-tab[aria-selected="true"] small { font-weight: normal; }
#contenu .dd-tab:focus-visible { outline: 2px solid var(--link); outline-offset: -4px; }
#contenu .dd-note { font-size: 12px; color: #777; background: #f6f6f6; border-radius: 4px; padding: 6px 10px; margin: 0 0 10px; }

/* PROD page: collect level, Off / Light / Full */
#contenu .levels { display: inline-flex; border: 1px solid #c9c9c9; border-radius: 999px; overflow: hidden; white-space: nowrap; }
#contenu .levels__btn { border: 0; background: #fff; font: inherit; font-size: 0.85em; padding: 5px 10px; min-height: 30px; cursor: pointer; color: #555; }
#contenu .levels__btn + .levels__btn { border-left: 1px solid #c9c9c9; }
#contenu .levels__btn:hover { background: #f2f2f2; }
#contenu .levels__btn[aria-pressed="true"] { color: #fff; font-weight: bold; cursor: default; }
#contenu .levels__btn--off[aria-pressed="true"] { background: #8a8a8a; }
#contenu .levels__btn--light[aria-pressed="true"] { background: #f5b942; color: #4a3200; }
#contenu .levels__btn--full[aria-pressed="true"] { background: #1baf7a; }
#contenu .levels__btn:focus-visible { outline: 2px solid var(--link); outline-offset: -2px; }
#contenu .levels__btn[disabled] { opacity: 0.6; cursor: wait; }
#contenu .add-car__collect { justify-content: normal; }
#contenu .add-car__collect label { min-height: 0; font-weight: bold; }
#contenu .dd-dot--sister { background: #b5b5b5; }

/* VS THEO: goodwill over the years (one row per car, one column per year) */
#contenu .gw-sort { margin: 6px 0 10px; }
#contenu .gw-wrap { position: relative; }
#contenu .gw-scroll { max-height: none; }
#contenu .gw-table { border-collapse: separate; border-spacing: 2px; font-size: 12px; }
#contenu .gw-table th { font-weight: normal; color: #777; padding: 2px 4px; text-align: center; background: none; white-space: nowrap; }
#contenu .gw-table th.gw-car { text-align: left; color: #333; padding-right: 10px; position: sticky; left: 0; background: #fff; z-index: 1; min-width: 170px; }
#contenu .gw-table th.gw-car small { color: #999; }
#contenu .gw-table tr.gw-sum th.gw-car, #contenu .gw-table tr.gw-sum td { font-weight: bold; }
#contenu .gw-table tr.gw-gap td { height: 4px; padding: 0; }
#contenu .gw-cell { min-width: 40px; height: 24px; text-align: center; border-radius: 2px; color: #222; cursor: pointer; padding: 0 3px; }
#contenu .gw-sum .gw-cell { cursor: default; }
#contenu .gw-cell--pale { font-style: italic; outline: 2px dotted #222; outline-offset: -4px; }
#contenu .gw-cell--pale.gw-cell--strong { outline-color: #fff; }
#contenu .gw-cell:hover, #contenu .gw-cell:focus-visible { outline: 2px solid #111; outline-offset: -1px; }
#contenu .gw-none { min-width: 40px; }
#contenu .gw-tip { min-width: 210px; pointer-events: none; }
#contenu .gw-tip__go { color: var(--link); }
#contenu .gw-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12px; color: #666; margin: 10px 0 0; }
#contenu .gw-bar { display: inline-block; width: 200px; height: 10px; border-radius: 2px;
    background: linear-gradient(90deg, rgb(178,24,43), rgb(245,245,245), rgb(26,127,60)); }
#contenu .gw-legend__note { margin-left: 8px; }

/* Pages with tabs (VS THEO) */
#contenu.tabbed [hidden] { display: none !important; }
/* PROD page: a car switched on without an AutoScout24 address (the collection skips it) */
#contenu .levels__warn { display: block; margin-top: 3px; font-size: 0.78em; color: #b26a00; white-space: nowrap; cursor: help; }
#contenu .production-table tr.is-off .levels__warn { display: none; }
#contenu .levels__review { display: block; margin-top: 3px; font-size: 0.78em; color: #2a78d6; white-space: nowrap; cursor: help; }

/* VS THEO, Figures tab: sortable column headers */
#contenu .theo-table th .th-sort { background: none; border: 0; padding: 0; font: inherit; color: inherit; font-weight: inherit; cursor: pointer; text-align: inherit; }
#contenu .theo-table th .th-sort:hover { text-decoration: underline; }
#contenu .theo-table th .th-sort:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
#contenu .theo-table th .th-sort i { font-style: normal; font-size: 0.8em; }

/* VS THEO, Price ranges tab: one line per car, every price of the last 12 months */
#contenu .rg-controls { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 4px 0 8px; }
#contenu .rg-key { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: #555; margin: 0 0 4px; }
#contenu .rg-k { display: inline-block; vertical-align: middle; margin-right: 5px; }
#contenu .rg-k--dot { width: 8px; height: 8px; border-radius: 50%; background: #2a78d6; opacity: .6; }
#contenu .rg-k--dia { width: 8px; height: 8px; background: #eb6834; transform: rotate(45deg); }
#contenu .rg-k--bar { width: 24px; height: 9px; border-radius: 2px; background: rgba(122,167,224,.35); }
#contenu .rg-k--med { width: 3px; height: 14px; background: #111; }
#contenu .rg-k--theo { width: 9px; height: 9px; border: 2px solid #1f5fbf; transform: rotate(45deg); background: #fff; }
#contenu .rg-chart .rg-name { font-size: 12px; fill: #2a5db0; text-decoration: underline; cursor: pointer; }
#contenu .rg-chart .rg-gap { font-size: 12px; font-weight: bold; }
#contenu .rg-chart .rg-gap--pos { fill: #1e8449; }
#contenu .rg-chart .rg-gap--neg { fill: #c0392b; }