/* =============================================================================
   Annoncesmotos — feuille de style principale
   -----------------------------------------------------------------------------
   Direction : instrumentation. Le vocabulaire visuel vient du tableau de bord
   d'une moto — graduations, chiffres tabulaires, zone rouge — et non du monde
   des applications web. La cote s'affiche comme une jauge, pas comme un badge :
   c'est la signature du site.

   Typographie : Barlow Condensed, dessinée d'après la signalétique routière,
   pour les titres et les chiffres. IBM Plex Mono pour les données et les
   références, qui doivent se lire caractère par caractère.
   ========================================================================== */

/* --- Jetons ------------------------------------------------------------- */

:root {
    /* Encre : un noir légèrement froid, jamais pur, pour que les photos
       ressortent sans halo. */
    --ink-900: #0b0b0d;
    --ink-800: #141417;
    --ink-700: #1c1c21;
    --ink-600: #26262d;
    --line: #2b2b33;
    --line-strong: #3a3a45;

    --text: #edede9;
    --text-dim: #8f8f99;
    --text-faint: #5c5c66;

    /* Orange sodium : la couleur des lampes de tunnel et des routes de nuit.
       Réservée à l'action et à l'identité, jamais à l'état. */
    --sodium: #ff6b12;
    --sodium-deep: #c24e08;

    /* Couleurs d'instrument : le vert d'un cadran, le rouge d'une zone
       interdite. Elles disent un état, pas une marque. */
    --gauge-good: #3fbf87;
    --gauge-warn: #e8a33d;
    --gauge-red: #e4483b;

    --display: "Barlow Condensed", "Arial Narrow", sans-serif;
    --body: "Barlow", system-ui, -apple-system, sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

    --gutter: clamp(1rem, 3vw, 2.5rem);
    --measure: 68ch;
    --radius: 2px;

    --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* --- Socle -------------------------------------------------------------- */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--ink-900);
    color: var(--text);
    font-family: var(--body);
    font-size: 1rem;
    line-height: 1.55;
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font: inherit;
    color: inherit;
    cursor: pointer;
}

:focus-visible {
    outline: 2px solid var(--sodium);
    outline-offset: 3px;
}

::selection {
    background: var(--sodium);
    color: var(--ink-900);
}

.shell {
    width: min(1440px, 100%);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* --- Typographie -------------------------------------------------------- */

h1,
h2,
h3,
h4 {
    font-family: var(--display);
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: -0.01em;
    margin: 0;
    text-wrap: balance;
}

.display-xl {
    font-size: clamp(2.75rem, 7vw, 6rem);
    text-transform: uppercase;
}

.display-l {
    font-size: clamp(2rem, 4vw, 3.25rem);
    text-transform: uppercase;
}

.display-m {
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    text-transform: uppercase;
}

/* Étiquette d'instrument : petite, espacée, monospace. Sert à nommer une
   mesure, jamais à faire du décor. */
.label {
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin: 0;
}

.lede {
    font-size: clamp(1rem, 1.4vw, 1.1875rem);
    color: var(--text-dim);
    max-width: var(--measure);
    margin: 0;
}

/* --- Graduations --------------------------------------------------------
   Le motif structurant du site : une règle graduée. Elle borne les sections
   comme les repères d'un cadran bornent une plage de mesure. */

.rule {
    height: 10px;
    background-image: repeating-linear-gradient(
        to right,
        var(--line) 0 1px,
        transparent 1px 12px
    );
    border-top: 1px solid var(--line);
    opacity: 0.9;
}

.rule--dense {
    background-image: repeating-linear-gradient(
        to right,
        var(--line) 0 1px,
        transparent 1px 6px
    );
}

/* --- En-tête ------------------------------------------------------------ */

.masthead {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--ink-900) 88%, transparent);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
}

.masthead__inner {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 3vw, 3rem);
    min-height: 68px;
}

.wordmark {
    font-family: var(--display);
    font-weight: 800;
    font-size: 1.375rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
}

.wordmark span {
    color: var(--sodium);
}

.nav {
    display: flex;
    gap: 1.75rem;
    margin-left: auto;
    font-size: 0.9375rem;
    font-weight: 500;
}

.nav a {
    color: var(--text-dim);
    padding-block: 0.25rem;
    border-bottom: 2px solid transparent;
    transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
}

.nav a:hover,
.nav a[aria-current="page"] {
    color: var(--text);
    border-bottom-color: var(--sodium);
}

/* --- Boutons ------------------------------------------------------------ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: transparent;
    color: var(--text);
    font-family: var(--display);
    font-size: 1.0625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: background 0.15s var(--ease), border-color 0.15s var(--ease),
        color 0.15s var(--ease);
}

.btn:hover {
    border-color: var(--text-dim);
    background: var(--ink-700);
}

.btn--primary {
    background: var(--sodium);
    border-color: var(--sodium);
    color: var(--ink-900);
}

.btn--primary:hover {
    background: #ff7f31;
    border-color: #ff7f31;
    color: var(--ink-900);
}

.btn--lg {
    padding: 1rem 2rem;
    font-size: 1.25rem;
}

/* --- Hero : la requête comme une phrase ---------------------------------
   Le site ne s'ouvre pas sur un champ de recherche, mais sur la phrase que
   l'acheteur a réellement en tête. Chaque segment souligné est un réglage. */

.hero {
    padding-block: clamp(3rem, 8vw, 6.5rem) clamp(2.5rem, 5vw, 4rem);
}

.hero__eyebrow {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.75rem;
}

.hero__eyebrow::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
}

/* La phrase est un formulaire : quatre listes deroulantes posees dans une
   phrase, plutot qu une colonne de champs. Chaque partie doit rester un mot
   dans une phrase — pas un widget pose dessus. */
.query {
    margin: 0 0 2rem;
}

.query__line {
    font-family: var(--display);
    font-size: clamp(1.75rem, 5vw, 4.25rem);
    font-weight: 600;
    line-height: 1.14;
    text-transform: uppercase;
    max-width: 26ch;
    margin: 0 0 2rem;
}

.query__word {
    white-space: nowrap;
}

.query__slot {
    color: var(--sodium);
    border: 0;
    border-bottom: 3px solid var(--sodium);
    background: none;
    font: inherit;
    /* Sans cette remise a zero, le navigateur dessine sa propre fleche et son
       propre fond : le mot cesse d etre un mot. */
    appearance: none;
    -webkit-appearance: none;
    color-scheme: dark;
    max-width: 100%;
    padding: 0 0.15em 0.05em;
    cursor: pointer;
    transition: background 0.15s var(--ease);
}

/* La liste ouverte, elle, est dessinee par le systeme : elle doit rester
   lisible, donc revenir a une taille de texte normale. */
.query__slot option {
    font-family: var(--body);
    font-size: 1rem;
    text-transform: none;
    background: var(--ink-800);
    color: var(--text);
}

.query__slot:focus-visible {
    outline: 2px solid var(--sodium);
    outline-offset: 3px;
}

.hero__aside {
    margin-top: 1.25rem;
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.hero__aside a {
    color: var(--text-dim);
}

.hero__aside a:hover {
    color: var(--text);
}

.query__slot:hover {
    background: color-mix(in srgb, var(--sodium) 16%, transparent);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.875rem;
    align-items: center;
}

.hero__count {
    font-family: var(--mono);
    font-size: 0.8125rem;
    color: var(--text-faint);
}

/* --- Jauge de cote : la signature ---------------------------------------
   Une règle graduée où se place le prix demandé. La zone claire est la
   fourchette du marché (premier au troisième quartile), le trait vertical est
   l'annonce. Rien à interpréter : on voit d'un coup si le prix tient. */

.gauge {
    --at: 50%;
    display: grid;
    gap: 0.5rem;
}

.gauge__track {
    position: relative;
    height: 46px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--ink-800);
    background-image: repeating-linear-gradient(
        to right,
        var(--line) 0 1px,
        transparent 1px 10px
    );
    background-position: bottom;
    background-size: 100% 9px;
    background-repeat: repeat-x;
    overflow: hidden;
}

.gauge__band {
    position: absolute;
    inset-block: 0;
    left: var(--band-start, 30%);
    width: var(--band-width, 40%);
    background: color-mix(in srgb, var(--gauge-good) 14%, transparent);
    border-inline: 1px solid color-mix(in srgb, var(--gauge-good) 45%, transparent);
}

.gauge__redline {
    position: absolute;
    inset-block: 0;
    left: var(--red-start, 82%);
    right: 0;
    background: repeating-linear-gradient(
        135deg,
        color-mix(in srgb, var(--gauge-red) 22%, transparent) 0 6px,
        transparent 6px 12px
    );
}

.gauge__needle {
    position: absolute;
    inset-block: -1px;
    left: var(--at);
    width: 3px;
    margin-left: -1.5px;
    background: var(--text);
    box-shadow: 0 0 12px color-mix(in srgb, var(--text) 55%, transparent);
    transition: left 0.9s var(--ease);
}

.gauge__needle::after {
    content: "";
    position: absolute;
    top: -1px;
    left: 50%;
    translate: -50% 0;
    border: 5px solid transparent;
    border-top-color: var(--text);
}

.gauge__scale {
    display: flex;
    justify-content: space-between;
    font-family: var(--mono);
    font-size: 0.6875rem;
    color: var(--text-faint);
}

.gauge__verdict {
    font-family: var(--display);
    font-size: 1.375rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.gauge__verdict[data-state="good"] {
    color: var(--gauge-good);
}

.gauge__verdict[data-state="market"] {
    color: var(--text);
}

.gauge__verdict[data-state="high"] {
    color: var(--gauge-red);
}

/* Version réduite, posée sur une carte de résultat. */
.gauge--mini .gauge__track {
    height: 8px;
    background-image: none;
}

.gauge--mini .gauge__needle::after {
    display: none;
}

/* --- Sections ----------------------------------------------------------- */

.section {
    padding-block: clamp(3rem, 6vw, 5rem);
}

.section__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.section__link {
    font-family: var(--display);
    font-size: 1.0625rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--sodium);
    border-bottom: 2px solid transparent;
    transition: border-color 0.15s var(--ease);
}

.section__link:hover {
    border-bottom-color: var(--sodium);
}

/* --- Cartes d'annonce --------------------------------------------------- */

.grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.card {
    display: flex;
    flex-direction: column;
    background: var(--ink-800);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.card:hover {
    border-color: var(--line-strong);
    transform: translateY(-2px);
}

.card__media {
    position: relative;
    aspect-ratio: 3 / 2;
}

.card__badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    padding: 0.25rem 0.6rem;
    background: var(--ink-900);
    border: 1px solid var(--gauge-good);
    color: var(--gauge-good);
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Une machine transformee par un carrossier n'est plus le modele qu'elle
   affiche : la mention se lit avant les caracteristiques, pas apres. */
.conversion-note {
    display: inline-block;
    margin-top: 0.75rem;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--line);
    border-left: 3px solid var(--sodium);
    color: var(--text-dim);
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
}

/* Le verdict de cote, dans les trois etats. La bonne affaire se voit de loin,
   le prix de marche se lit sans crier, le surcote avertit sans accuser : c est
   une mesure, pas un jugement sur le vendeur. */
.card__badge--good {
    border-color: var(--gauge-good);
    color: var(--gauge-good);
}

.card__badge--market {
    border-color: var(--line-strong);
    color: var(--text-dim);
}

.card__badge--high {
    border-color: var(--gauge-warn);
    color: var(--gauge-warn);
}

.facet__link--deal.is-active {
    color: var(--gauge-good);
    border-left-color: var(--gauge-good);
}

.facet__link--high.is-active {
    color: var(--gauge-warn);
    border-left-color: var(--gauge-warn);
}

.card__count {
    position: absolute;
    bottom: 0.75rem;
    right: 0.75rem;
    padding: 0.2rem 0.5rem;
    background: color-mix(in srgb, var(--ink-900) 80%, transparent);
    font-family: var(--mono);
    font-size: 0.6875rem;
    color: var(--text-dim);
}

.card__body {
    padding: 1.125rem 1.125rem 1.25rem;
    display: grid;
    gap: 0.875rem;
}

.card__title {
    font-family: var(--display);
    font-size: 1.5rem;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1;
}

.card__price {
    font-family: var(--display);
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1;
}

.card__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

/* Bandeau de mesures : les chiffres alignés comme sur un compteur. */
.specs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem 0;
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--text-dim);
    margin: 0;
}

.specs span {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.specs span + span::before {
    content: "";
    width: 1px;
    height: 11px;
    background: var(--line-strong);
    margin-inline: 0.75rem;
}

.card__place {
    font-size: 0.8125rem;
    color: var(--text-faint);
}

/* --- Photo de remplacement ----------------------------------------------
   Tant que les vraies photos ne sont pas rapatriées, le cadre reste tenu :
   un fond d'atelier, le motif de graduation, et le modèle en filigrane. Il
   ne prétend pas être une photo. */

.photo {
    position: relative;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(120% 90% at 30% 0%, #2a2a31 0%, #141418 55%, #0d0d10 100%);
    display: grid;
    place-items: center;
    overflow: hidden;
}

.photo::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        to right,
        color-mix(in srgb, var(--text) 6%, transparent) 0 1px,
        transparent 1px 14px
    );
    mask-image: linear-gradient(to top, black 0%, transparent 40%);
}

.photo__mark {
    font-family: var(--display);
    font-size: clamp(1.5rem, 4vw, 2.75rem);
    font-weight: 800;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--text) 9%, transparent);
    letter-spacing: 0.04em;
    text-align: center;
    padding-inline: 1rem;
}

.photo__note {
    position: absolute;
    bottom: 0.625rem;
    left: 0.75rem;
    font-family: var(--mono);
    font-size: 0.625rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-faint);
}

/* --- Rangée de raccourcis par permis ------------------------------------ */

.licences {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.licence {
    display: grid;
    gap: 0.5rem;
    padding: 1.25rem;
    background: var(--ink-800);
    border: 1px solid var(--line);
    border-left: 3px solid var(--sodium);
    border-radius: var(--radius);
    transition: background 0.15s var(--ease);
}

.licence:hover {
    background: var(--ink-700);
}

.licence__code {
    font-family: var(--display);
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 0.9;
}

.licence__desc {
    font-size: 0.875rem;
    color: var(--text-dim);
}

.licence__count {
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--text-faint);
}

/* --- Page de résultats -------------------------------------------------- */

.results {
    display: grid;
    gap: 2rem;
    grid-template-columns: 280px 1fr;
    align-items: start;
    padding-block: 2rem 4rem;
}

@media (max-width: 900px) {
    .results {
        grid-template-columns: 1fr;
    }
}

.facets {
    position: sticky;
    top: 88px;
    display: grid;
    gap: 1.75rem;
    padding: 1.25rem;
    background: var(--ink-800);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.facet {
    display: grid;
    gap: 0.75rem;
}

.facet__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}

.facet__list label {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.9375rem;
    color: var(--text-dim);
    cursor: pointer;
}

.facet__list label:hover {
    color: var(--text);
}

.facet__list input {
    accent-color: var(--sodium);
    width: 15px;
    height: 15px;
}

.facet__count {
    margin-left: auto;
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--text-faint);
}

/* Curseur de budget dessiné comme une réglette graduée. */
.range {
    display: grid;
    gap: 0.5rem;
}

.range input {
    width: 100%;
    accent-color: var(--sodium);
}

.range__bounds {
    display: flex;
    justify-content: space-between;
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--text-faint);
}

.toolbar {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-bottom: 1.25rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--line);
}

.toolbar__count strong {
    font-family: var(--display);
    font-size: 1.75rem;
    font-weight: 700;
}

.sort {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.sort button {
    padding: 0.4rem 0.875rem;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--text-dim);
    font-size: 0.875rem;
    transition: all 0.15s var(--ease);
}

.sort button[aria-pressed="true"] {
    border-color: var(--sodium);
    color: var(--sodium);
}

.sort button:hover {
    color: var(--text);
}

/* --- Fiche annonce ------------------------------------------------------ */

.listing {
    display: grid;
    gap: clamp(1.5rem, 3vw, 3rem);
    grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr);
    align-items: start;
    padding-block: 2rem 4rem;
}

@media (max-width: 1000px) {
    .listing {
        grid-template-columns: 1fr;
    }
}

.gallery {
    display: grid;
    gap: 0.5rem;
}

.gallery__main {
    aspect-ratio: 3 / 2;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}

.gallery__strip {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
}

.gallery__thumb {
    aspect-ratio: 3 / 2;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    padding: 0;
    background: none;
}

.gallery__thumb[aria-current="true"] {
    border-color: var(--sodium);
}

/* Bandeau de mesures principal : le compteur de la fiche. */
.readout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--ink-800);
    margin-block: 1.5rem;
}

.readout__cell {
    padding: 1rem 1.125rem;
    border-right: 1px solid var(--line);
}

.readout__cell:last-child {
    border-right: 0;
}

.readout__value {
    font-family: var(--display);
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
}

.readout__unit {
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--text-faint);
    font-weight: 400;
}

.panel {
    background: var(--ink-800);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.5rem;
    display: grid;
    gap: 1.25rem;
}

.panel--sticky {
    position: sticky;
    top: 88px;
}

.price {
    font-family: var(--display);
    font-size: clamp(2.75rem, 5vw, 3.75rem);
    font-weight: 800;
    line-height: 0.9;
}

.seller {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
}

.seller__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--ink-600);
    display: grid;
    place-items: center;
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.125rem;
}

.seller__name {
    font-weight: 600;
}

.seller__meta {
    font-size: 0.8125rem;
    color: var(--text-faint);
}

/* Historique de prix : des barres, pas une courbe. Chaque palier est une
   décision du vendeur, pas un point de mesure continu. */
.history {
    display: grid;
    gap: 0.625rem;
}

.history__row {
    display: grid;
    grid-template-columns: 92px 1fr auto;
    align-items: center;
    gap: 0.875rem;
    font-family: var(--mono);
    font-size: 0.8125rem;
}

.history__bar {
    height: 6px;
    background: var(--ink-600);
    border-radius: 1px;
    position: relative;
}

.history__bar span {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--w, 100%);
    background: var(--sodium-deep);
    border-radius: 1px;
}

.history__row:first-child .history__bar span {
    background: var(--sodium);
}

.history__delta {
    color: var(--gauge-good);
}

/* Fiche technique : un tableau dense, comme une notice constructeur. */
.datasheet {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.datasheet th,
.datasheet td {
    text-align: left;
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--line);
    vertical-align: baseline;
}

.datasheet th {
    font-weight: 500;
    color: var(--text-dim);
    width: 45%;
}

.datasheet td {
    font-family: var(--mono);
    font-size: 0.875rem;
}

.trust {
    display: grid;
    gap: 0.75rem;
    padding: 1.125rem;
    border: 1px solid var(--line);
    border-left: 3px solid var(--gauge-good);
    background: var(--ink-800);
    border-radius: var(--radius);
}

.trust__item {
    display: flex;
    gap: 0.625rem;
    align-items: baseline;
    font-size: 0.9375rem;
    color: var(--text-dim);
}

.trust__item::before {
    content: "✓";
    color: var(--gauge-good);
    font-size: 0.8125rem;
}

/* --- Pied de page ------------------------------------------------------- */

.footer {
    border-top: 1px solid var(--line);
    padding-block: 3rem 4rem;
    margin-top: 2rem;
}

.footer__grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.footer h3 {
    font-size: 1rem;
    margin-bottom: 0.875rem;
    color: var(--text);
}

.footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}

.footer a {
    font-size: 0.9375rem;
    color: var(--text-dim);
}

.footer a:hover {
    color: var(--sodium);
}

.footer__legal {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--text-faint);
}

/* --- Entrée en scène ---------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
    .reveal {
        animation: rise 0.7s var(--ease) both;
    }

    .reveal:nth-child(2) {
        animation-delay: 0.06s;
    }

    .reveal:nth-child(3) {
        animation-delay: 0.12s;
    }

    .reveal:nth-child(4) {
        animation-delay: 0.18s;
    }
}

@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* --- Ajouts du controleur frontal ---------------------------------------
   Classes nees du passage aux gabarits dynamiques : les filtres deviennent des
   liens plutot que des cases, ce qui les rend partageables et indexables. */

.split {
    display: grid;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    align-items: start;
}

.stack {
    display: grid;
    gap: 1.5rem;
}

.showcase {
    margin: 0;
    display: grid;
    gap: 1.25rem;
}

/* Un filtre est un lien : il a une adresse, on peut l'envoyer et le mettre en
   favori. Une case a cocher n'a rien de tout cela. */
.facet__link {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.35rem 0.5rem;
    margin-inline: -0.5rem;
    border-radius: var(--radius);
    font-size: 0.9375rem;
    color: var(--text-dim);
    border-left: 2px solid transparent;
    transition: color 0.15s var(--ease), background 0.15s var(--ease);
}

.facet__link:hover {
    color: var(--text);
    background: var(--ink-700);
}

.facet__link.is-active {
    color: var(--sodium);
    border-left-color: var(--sodium);
    background: var(--ink-700);
}

/* -----------------------------------------------------------------------
   Panneau de filtres : les elements ajoutes avec les treize criteres.
   ----------------------------------------------------------------------- */

/* Les familles de categories. Vingt-sept liens a plat sont illisibles ;
   replies par famille, ils tiennent dans la colonne. */
.facet__group {
    border-top: 1px solid var(--line);
    padding-top: 0.625rem;
}

.facet__group:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.facet__summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.3rem 0;
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.facet__summary::-webkit-details-marker {
    display: none;
}

.facet__summary::after {
    content: "+";
    font-size: 0.9rem;
    color: var(--text-faint);
}

.facet__group[open] .facet__summary::after {
    content: "−";
}

.facet__summary:hover {
    color: var(--text);
}

.facet__group[open] .facet__list {
    margin-top: 0.5rem;
}

/* Une categorie sans annonce reste cliquable — elle mene a une page de
   contenu — mais ne doit pas attirer l oeil comme une piste ouverte. */
.facet__link.is-empty {
    color: var(--text-faint);
}

.facet--form {
    gap: 0.5rem;
    padding-block: 1.25rem;
    border-block: 1px solid var(--line);
}

.facet--form .label {
    margin-top: 0.75rem;
}

.facet--form .label:first-of-type {
    margin-top: 0;
}

.facet__note {
    display: block;
    margin-top: 0.15rem;
    font-family: var(--body);
    font-size: 0.6875rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--sodium);
}

.facet__select,
.facet__input {
    width: 100%;
    padding: 0.45rem 0.6rem;
    background: var(--ink-900);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--text);
    font-family: var(--body);
    font-size: 0.875rem;
}

.facet__select:focus-visible,
.facet__input:focus-visible {
    outline: 2px solid var(--sodium);
    outline-offset: 1px;
}

.facet__range {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.facet__range-sep {
    color: var(--text-faint);
}

.facet__submit {
    margin-top: 1rem;
    width: 100%;
    justify-content: center;
}

.facets__clear {
    justify-self: start;
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sodium);
}

/* Une etiquette lue par les lecteurs d ecran, invisible a l oeil. Les champs
   de la fourchette de prix n ont pas de libelle visible : le contexte suffit
   pour qui voit, pas pour qui ecoute. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* -----------------------------------------------------------------------
   Comparateur. Le tableau se lit par lignes : la première colonne reste
   visible pendant le défilement horizontal, sinon on perd de quoi on parle.
   ----------------------------------------------------------------------- */
.compare__head {
    display: grid;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.compare__picker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 2rem;
}

.compare__picker .facet__select {
    width: auto;
    min-width: min(22rem, 100%);
}

.compare__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.compare__table th,
.compare__table td {
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

.compare__table tbody th {
    font-weight: 400;
    color: var(--text-dim);
    white-space: nowrap;
}

.compare__table td.num {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
}

.compare__corner {
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.compare__model {
    display: grid;
    gap: 0.1rem;
}

.compare__brand {
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.compare__name {
    font-family: var(--display);
    font-size: 1.25rem;
    color: var(--text);
}

.compare__drop {
    display: inline-block;
    margin-top: 0.35rem;
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.compare__drop:hover {
    color: var(--gauge-red);
}

.compare__variant {
    display: block;
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--text-faint);
}

/* La meilleure valeur de la ligne. Un liseré, pas un fond : trois colonnes
   marquées en aplat feraient un damier illisible. */
.compare__table td.is-best {
    color: var(--gauge-good);
    box-shadow: inset 2px 0 0 var(--gauge-good);
}

.compare__note {
    margin-top: 1.5rem;
    max-width: var(--measure);
    font-size: 0.875rem;
    color: var(--text-dim);
}

.facet--alert {
    gap: 0.5rem;
    padding: 1rem;
    background: var(--ink-900);
    border: 1px solid var(--line);
    border-left: 3px solid var(--sodium);
    border-radius: var(--radius);
}

.facet__note--quiet {
    color: var(--text-dim);
    margin-bottom: 0.35rem;
}

.sort__link {
    padding: 0.4rem 0.875rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--text-dim);
    font-size: 0.875rem;
    transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
}

.sort__link:hover {
    color: var(--text);
}

.sort__link[aria-pressed="true"] {
    border-color: var(--sodium);
    color: var(--sodium);
}

/* Une recherche sans resultat n'est pas une impasse : elle propose une sortie. */
.empty {
    display: grid;
    gap: 1.25rem;
    justify-items: start;
    padding: clamp(2rem, 6vw, 4rem);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--ink-800);
}

.pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--line);
}

.query__slot {
    display: inline-block;
}

/* --- Silhouettes ------------------------------------------------------------
   Le site ne peut pas montrer de photographies : celles des constructeurs sont
   protegees. Plutot qu une case vide, un dessin schematique — des roues, une
   ligne de cadre. Il dit de quelle famille est la machine, ce qui est tout ce
   qu on lit d une vignette. Une silhouette realiste mentirait sur ce qu elle
   montre. */

.silhouette {
    position: relative;
    display: grid;
    place-items: center;
    margin: 0;
    padding: 1.25rem;
    background:
        radial-gradient(120% 90% at 50% 20%, var(--ink-700), var(--ink-900) 70%);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}

.silhouette svg {
    width: 100%;
    height: auto;
    max-height: 100%;
}

.silhouette__grid line {
    stroke: var(--line-strong);
    stroke-width: 1;
}

/* Le trait seul, sans remplissage : c est un releve, pas une illustration. */
.silhouette__body circle,
.silhouette__body path {
    fill: none;
    stroke: var(--sodium);
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.silhouette__body circle {
    stroke-width: 4.5;
}

.silhouette__label {
    position: absolute;
    left: 0.9rem;
    bottom: 0.7rem;
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.hero__figure {
    max-width: 420px;
    margin-bottom: 1.5rem;
}

.silhouette--mini {
    padding: 0.5rem;
}

.silhouette--mini .silhouette__label {
    display: none;
}

/* Dans une carte de resultat, la silhouette remplit le cadre photo. */
.card__media .silhouette {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
}

/* --- Pages editoriales -----------------------------------------------------
   Un texte long se lit sur une colonne etroite : au-dela d une soixantaine de
   caracteres, l oeil perd la ligne suivante en revenant a la marge. */

.prose {
    padding-bottom: clamp(3rem, 7vw, 5.5rem);
}

.prose > section {
    max-width: var(--measure);
}

.prose h2 {
    margin: 0 0 1.25rem;
}

.prose p {
    margin: 0 0 1.15rem;
    color: var(--text-dim);
    font-size: 1.0625rem;
}

.prose p:last-child {
    margin-bottom: 0;
}

.prose strong {
    color: var(--text);
    font-weight: 600;
}

.prose .rule {
    margin-block: clamp(2.25rem, 5vw, 3.5rem);
}

.prose .readout {
    margin-top: 1.75rem;
}

.prose .label {
    display: block;
    margin-top: 1.25rem;
}

/* Un chiffre pris dans la base, au milieu d un texte : il porte la marque du
   sodium pour qu on voie qu il est mesure, pas redige. */
.callout {
    margin: 1.75rem 0 0;
    padding: 1rem 1.25rem;
    border-left: 3px solid var(--sodium);
    background: var(--ink-800);
    color: var(--text);
}

.callout .label {
    display: block;
    margin: 0 0 0.35rem;
}

.callout strong {
    font-family: var(--mono);
    font-size: 1.125rem;
    color: var(--sodium);
}

/* --- Formulaires -----------------------------------------------------------
   Un formulaire de depot se remplit souvent au telephone, dans un garage, une
   main sur le guidon : cibles larges, contraste franc, aucune fioriture. */

.form-shell {
    max-width: 52rem;
    padding-bottom: clamp(3rem, 7vw, 5.5rem);
}

.form__group {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 0;
    padding: clamp(1.75rem, 4vw, 2.5rem) 0 0;
}

.form__group + .form__group {
    margin-top: clamp(1.75rem, 4vw, 2.5rem);
}

.form__group legend {
    padding: 0;
    margin-bottom: 1.5rem;
}

.field {
    margin-bottom: 1.25rem;
}

.field label {
    display: block;
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 0.5rem;
}

.field__hint {
    display: block;
    font-family: var(--body);
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-faint);
    margin: 0.4rem 0 0;
}

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="number"],
.field input[type="file"],
.field select,
.field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 0.7rem 0.85rem;
    background: var(--ink-800);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    color: var(--text);
    font-family: var(--body);
    font-size: 1rem;
    /* 16px au minimum : en dessous, un iPhone zoome sur le champ actif et
       l utilisateur perd la page des yeux. */
    transition: border-color 0.15s var(--ease);
}

.field textarea {
    resize: vertical;
    min-height: 7rem;
    line-height: 1.5;
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
    outline: 2px solid var(--sodium);
    outline-offset: 1px;
    border-color: var(--sodium);
}

.field--error input,
.field--error select,
.field--error textarea {
    border-color: var(--gauge-red);
}

.field__error {
    margin: 0.45rem 0 0;
    color: var(--gauge-red);
    font-size: 0.875rem;
}

.field__suffixed {
    display: flex;
    align-items: stretch;
}

.field__suffixed input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.field__suffixed span {
    display: flex;
    align-items: center;
    padding: 0 0.85rem;
    border: 1px solid var(--line-strong);
    border-left: 0;
    border-radius: 0 var(--radius) var(--radius) 0;
    background: var(--ink-700);
    color: var(--text-dim);
    font-family: var(--mono);
    font-size: 0.875rem;
}

.field--check label {
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
    font-family: var(--body);
    font-size: 0.9375rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text);
    cursor: pointer;
}

.field--check input {
    margin-top: 0.15rem;
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--sodium);
    flex: none;
}

.field-row {
    display: grid;
    gap: 0 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.form__actions {
    margin-top: 2rem;
    display: grid;
    gap: 0.85rem;
    justify-items: start;
}

/* Piege a robots : hors de l ecran plutot que display:none, que certains
   remplisseurs automatiques savent reconnaitre et ignorer. */
.honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --- Messages --------------------------------------------------------------- */

.alert {
    margin-bottom: 1.75rem;
    padding: 1rem 1.25rem;
    border-left: 3px solid var(--line-strong);
    background: var(--ink-800);
}

.alert p {
    margin: 0 0 0.5rem;
    color: var(--text-dim);
}

.alert p:last-child {
    margin-bottom: 0;
}

.alert strong {
    color: var(--text);
}

.alert--error {
    border-left-color: var(--gauge-red);
}

.alert--ok {
    border-left-color: var(--gauge-good);
}

/* --- Contact sur la fiche --------------------------------------------------- */

.contact {
    margin-top: clamp(2.5rem, 6vw, 4rem);
    padding-top: clamp(2rem, 5vw, 3rem);
    border-top: 1px solid var(--line);
    max-width: 52rem;
}

.contact h2 {
    margin: 0 0 1.5rem;
}

/* Liste de faits : mentions legales, durees de conservation, chiffres de la
   cote. Une liste sans puces rondes, alignee sur la grille du texte. */
.facts {
    list-style: none;
    margin: 0 0 1.15rem;
    padding: 0;
}

.facts li {
    position: relative;
    padding-left: 1.1rem;
    margin-bottom: 0.55rem;
    color: var(--text-dim);
}

.facts li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 0.45rem;
    height: 1px;
    background: var(--sodium);
}

.facts strong {
    color: var(--text);
}

/* --- Espace vendeur ---------------------------------------------------------
   Une liste d annonces avec leurs actions. Chaque ligne se lit d un coup
   d oeil : etat, prix, messages recus, puis ce qu on peut en faire. */

.holdings {
    list-style: none;
    margin: 1.5rem 0 2rem;
    padding: 0;
    display: grid;
    gap: 1rem;
}

.holding {
    display: grid;
    grid-template-columns: 8rem 1fr auto;
    gap: 1.25rem;
    align-items: start;
    padding: 1rem;
    background: var(--ink-800);
    border: 1px solid var(--line);
    border-left: 3px solid var(--line-strong);
    border-radius: var(--radius);
}

/* L etat se lit a la tranche, avant meme le texte. */
.holding--ok { border-left-color: var(--gauge-good); }
.holding--wait { border-left-color: var(--sodium); }
.holding--done { border-left-color: var(--text-faint); }
.holding--off { border-left-color: var(--line-strong); }
.holding--bad { border-left-color: var(--gauge-red); }

.holding__media {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--ink-700);
}

.holding__status {
    color: var(--text);
}

.holding__title {
    font-family: var(--display);
    font-size: 1.25rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    margin: 0.35rem 0 0.5rem;
}

.holding__title a {
    color: inherit;
    text-decoration: none;
}

.holding__title a:hover {
    color: var(--sodium);
}

.holding__facts {
    margin: 0 0 0.5rem;
    color: var(--text-dim);
}

.holding__facts strong {
    font-family: var(--mono);
    font-size: 1.0625rem;
    color: var(--text);
}

.holding__actions {
    display: grid;
    gap: 0.5rem;
    justify-items: stretch;
    min-width: 12rem;
}

.holding__actions form {
    margin: 0;
}

.holding__actions .btn {
    width: 100%;
    text-align: center;
}

.sold__row {
    display: flex;
    gap: 0.4rem;
}

.sold__row input {
    min-width: 0;
    flex: 1;
    padding: 0.5rem 0.6rem;
    background: var(--ink-900);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    color: var(--text);
    font-family: var(--body);
    font-size: 0.9375rem;
}

.sold__row .btn {
    width: auto;
    flex: none;
}

.logins {
    margin-top: 2.5rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--line);
}

@media (max-width: 46rem) {
    .holding {
        grid-template-columns: 5.5rem 1fr;
    }

    .holding__actions {
        grid-column: 1 / -1;
        min-width: 0;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
    }

    .sold__row {
        flex-direction: column;
    }
}

/* --- Catalogue --------------------------------------------------------------
   Des listes longues — cent marques, deux mille modeles. Deux colonnes de
   texte alignees, l information a droite, pour balayer a la verticale. */

.marques {
    list-style: none;
    margin: 1.25rem 0 2rem;
    padding: 0;
    border-top: 1px solid var(--line);
}

.marques li {
    border-bottom: 1px solid var(--line);
}

.marques a {
    display: flex;
    gap: 1rem;
    align-items: baseline;
    justify-content: space-between;
    padding: 0.7rem 0.25rem;
    color: var(--text);
    text-decoration: none;
    transition: background 0.12s var(--ease), padding-left 0.12s var(--ease);
}

.marques a:hover,
.marques a:focus-visible {
    background: var(--ink-800);
    padding-left: 0.6rem;
    color: var(--sodium);
}

.marques__name {
    font-family: var(--display);
    font-size: 1.0625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.01em;
}

.marques__years {
    font-family: var(--mono);
    font-size: 0.75rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-faint);
    margin-left: 0.4rem;
}

.marques__count {
    flex: none;
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: var(--text-dim);
}

.marques__thin {
    color: var(--text-faint);
}

/* --- Tableaux de caracteristiques ------------------------------------------
   Un tableau large ne doit jamais faire glisser la page entiere : il defile
   dans son propre cadre. */

.table-scroll {
    overflow-x: auto;
    margin: 0 0 1.5rem;
    -webkit-overflow-scrolling: touch;
}

.specs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.specs-table th,
.specs-table td {
    padding: 0.6rem 0.9rem 0.6rem 0;
    text-align: left;
    border-bottom: 1px solid var(--line);
    vertical-align: baseline;
}

.specs-table thead th {
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-faint);
    border-bottom-color: var(--line-strong);
    white-space: nowrap;
}

.specs-table tbody th {
    font-family: var(--body);
    font-weight: 400;
    color: var(--text-dim);
    white-space: nowrap;
}

.specs-table .num {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.specs-table strong {
    color: var(--sodium);
}

.spec-heading {
    font-family: var(--display);
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-dim);
    margin: 1.75rem 0 0.75rem;
}