/* ============================================================
   ESPACE D'ADMINISTRATION — la feuille de style
   ------------------------------------------------------------
   Autonome : elle ne charge PAS styles.css. Le site public pèse
   138 ko de feuille et d'animations écrites pour convaincre un
   visiteur ; ici on outille quelqu'un qui travaille, debout sur
   le parc, sur un téléphone, parfois en 4G. Ce sont deux métiers
   différents.

   Ce qui est repris du site, et rien d'autre : la fonte NouvelR,
   le jaune #EFDF00, l'encre presque noire, le gris-papier chaud.
   L'espace admin doit se reconnaître comme la coulisse du même
   bâtiment, pas comme un logiciel étranger.

   TÉLÉPHONE D'ABORD. Toutes les tailles de touche sont à 44 px
   minimum, les boutons dangereux sont éloignés des boutons
   fréquents, et rien d'important n'est caché derrière un survol
   — au doigt, le survol n'existe pas.
   ============================================================ */

@font-face {
  font-family: "NouvelR";
  src: url("../assets/fonts/nouvelr-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "NouvelR";
  src: url("../assets/fonts/nouvelr-bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --a-blanc:   #ffffff;
  --a-papier:  #f5f4f1;
  --a-papier2: #eceae5;
  --a-encre:   #0a0a0b;
  --a-encre2:  #55545a;
  --a-encre3:  #86858c;
  --a-bord:    rgba(10, 10, 11, .12);
  --a-bord-fort: rgba(10, 10, 11, .26);

  --a-jaune:      #efdf00;
  --a-jaune-fonce:#d4c400;

  --a-ok:      #1c7a4b;
  --a-ok-fond: #e9f4ee;
  --a-warn:     #a86412;
  --a-warn-fond:#fbf1e2;
  --a-err:      #c0392b;
  --a-err-fond: #fbecea;

  --a-r:    8px;
  --a-r-lg: 14px;
  --a-ombre: 0 1px 2px rgba(10,10,11,.05), 0 10px 26px -18px rgba(10,10,11,.3);
  --a-ease: cubic-bezier(.22, 1, .36, 1);

  --a-font: "NouvelR", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--a-papier);
  color: var(--a-encre);
  font-family: var(--a-font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  padding-bottom: env(safe-area-inset-bottom);
}

a { color: inherit; }

/* Le focus clavier reste visible partout : c'est la seule
   navigation possible pour qui n'utilise pas de souris. */
:focus-visible {
  outline: 2px solid var(--a-encre);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ============================================================
   BARRE DU HAUT
   ============================================================ */
.a-barre {
  position: sticky; top: 0; z-index: 40;
  background: var(--a-blanc);
  border-bottom: 1px solid var(--a-bord);
  padding: 10px 16px;
  padding-top: calc(10px + env(safe-area-inset-top));
  display: flex; align-items: center; gap: 12px;
}
.a-barre-nom {
  font-weight: 700; font-size: 15px; letter-spacing: -.01em;
  display: flex; align-items: center; gap: 9px; margin-right: auto;
  text-decoration: none; white-space: nowrap; min-width: 0;
}
.a-barre-nom svg { width: 15px; height: auto; flex: none; }
.a-barre-nom span { color: var(--a-encre3); font-weight: 400; }
/* Sous 420 px, deux boutons et un nom complet ne tiennent pas sur
   une ligne. C'est le sous-titre qui part : « Garage Duverger »
   suffit à dire où l'on est. */
@media (max-width: 420px) {
  .a-barre { gap: 8px; }
  .a-barre-nom span { display: none; }
}

.a-barre-retour {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 15px; font-weight: 700; text-decoration: none;
  margin-right: auto; min-height: 44px;
}
.a-barre-retour svg { width: 16px; height: 16px; }

/* ============================================================
   MISE EN PAGE
   ============================================================ */
.a-page { max-width: 940px; margin: 0 auto; padding: 18px 16px 120px; }
.a-page-etroite { max-width: 620px; }

.a-simple {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 24px 16px;
}
.a-boite {
  background: var(--a-blanc);
  border: 1px solid var(--a-bord);
  border-radius: var(--a-r-lg);
  box-shadow: var(--a-ombre);
  padding: 28px 24px;
  width: 100%; max-width: 400px;
}
.a-boite-large { max-width: 660px; }

h1, h2, h3 { letter-spacing: -.02em; text-wrap: balance; }

.a-titre {
  font-size: 26px; line-height: 1.15; font-weight: 700;
  margin: 0 0 4px;
}
.a-titre-outil { font-size: 24px; margin: 0 0 16px; }
.a-sous-titre { font-size: 17px; font-weight: 700; margin: 26px 0 8px; }
.a-compte { color: var(--a-encre3); font-size: 14px; margin: 0 0 20px; }

.a-note { color: var(--a-encre2); font-size: 15px; margin: 0 0 16px; }
.a-note-petite { color: var(--a-encre3); font-size: 13.5px; line-height: 1.45; margin: 6px 0 0; }

/* Une note fine posée DANS un <label class="a-champ"> est un
   enfant direct au même titre que le libellé : sans cette
   remise à zéro, elle héritait des capitales et de la graisse
   du libellé et se lisait comme un second titre de champ. */
.a-champ > span.a-note-petite {
  font-size: 13.5px; font-weight: 400; letter-spacing: 0;
  text-transform: none; color: var(--a-encre3); margin: 6px 0 0;
}

.a-lien { font-weight: 700; text-underline-offset: 3px; }

/* ============================================================
   BOUTONS
   ============================================================ */
.a-btn {
  appearance: none; -webkit-appearance: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 18px;
  border: 1px solid var(--a-bord-fort); border-radius: var(--a-r);
  background: var(--a-blanc); color: var(--a-encre);
  font-family: inherit; font-size: 15px; font-weight: 700; letter-spacing: .01em;
  text-decoration: none; cursor: pointer;
  transition: transform var(--a-ease) 110ms, background 150ms, border-color 150ms;
}
.a-btn:active { transform: scale(.985); }
.a-btn:disabled { opacity: .5; cursor: not-allowed; }

.a-btn-primaire {
  background: var(--a-jaune); border-color: var(--a-jaune-fonce); color: var(--a-encre);
}
.a-btn-primaire:hover { background: var(--a-jaune-fonce); }

.a-btn-sombre { background: var(--a-encre); border-color: var(--a-encre); color: var(--a-blanc); }

.a-btn-danger { color: var(--a-err); border-color: rgba(192, 57, 43, .35); }
.a-btn-danger:hover { background: var(--a-err-fond); }

.a-btn-bloc { width: 100%; }
.a-btn-petit { min-height: 38px; padding: 0 12px; font-size: 13.5px; }

.a-btns { display: flex; flex-wrap: wrap; gap: 10px; }

/* ============================================================
   ALERTES ET MESSAGES
   ============================================================ */
.a-alerte {
  border-radius: var(--a-r); padding: 12px 15px; margin: 0 0 18px;
  font-size: 14.5px; line-height: 1.5;
  border: 1px solid transparent;
}
.a-alerte-ok   { background: var(--a-ok-fond);   color: var(--a-ok);   border-color: rgba(28,122,75,.2); }
.a-alerte-warn { background: var(--a-warn-fond); color: var(--a-warn); border-color: rgba(168,100,18,.2); }
.a-alerte-err  { background: var(--a-err-fond);  color: var(--a-err);  border-color: rgba(192,57,43,.2); }

/* ============================================================
   CHAMPS
   ============================================================ */
.a-champ { display: block; margin: 0 0 16px; }
.a-champ > span {
  display: block; font-size: 12.5px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--a-encre2); margin-bottom: 6px;
}
.a-champ input[type="text"],
.a-champ input[type="password"],
.a-champ input[type="number"],
.a-champ select,
.a-champ textarea {
  width: 100%;
  min-height: 46px; padding: 11px 13px;
  border: 1px solid var(--a-bord-fort); border-radius: var(--a-r);
  background: var(--a-blanc); color: var(--a-encre);
  font-family: inherit;
  /* 16 px minimum : en dessous, iOS zoome à la mise au point du
     champ et l'écran part de travers. */
  font-size: 16px;
  line-height: 1.4;
}
.a-champ textarea { min-height: 110px; resize: vertical; }
.a-champ select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%230a0a0b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M6 9.5l6 5.5 6-5.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
  padding-right: 38px;
}
.a-champ input:focus, .a-champ select:focus, .a-champ textarea:focus {
  outline: none; border-color: var(--a-encre); box-shadow: 0 0 0 3px rgba(239, 223, 0, .45);
}

.a-grille2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
@media (max-width: 420px) { .a-grille2 { grid-template-columns: 1fr; } }

.a-form-outil { margin-top: 18px; }

.a-suggestion { font-size: 15px; color: var(--a-encre2); margin: 0 0 18px; }
.a-suggestion code {
  font-size: 16px; font-weight: 700; color: var(--a-encre);
  background: var(--a-papier2); padding: 4px 9px; border-radius: 5px;
}
.a-suggestion span { display: block; color: var(--a-encre3); font-size: 13px; margin-top: 5px; }

.a-code {
  background: var(--a-encre); color: #f4f4f0;
  padding: 15px 16px; border-radius: var(--a-r);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; line-height: 1.6;
  overflow-x: auto; margin: 0 0 12px;
}

/* ============================================================
   BLOC DE SECTION DANS LA FICHE
   ============================================================ */
.a-bloc {
  background: var(--a-blanc);
  border: 1px solid var(--a-bord);
  border-radius: var(--a-r-lg);
  padding: 20px 18px;
  margin: 0 0 16px;
  box-shadow: var(--a-ombre);
}
.a-bloc > h2 {
  font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--a-encre3); margin: 0 0 16px;
  display: flex; align-items: center; gap: 9px;
}
.a-bloc > h2::after {
  content: ""; flex: 1; height: 1px; background: var(--a-bord);
}

/* ============================================================
   LA LISTE DES VÉHICULES
   ============================================================ */
.a-outils {
  display: flex; gap: 10px; align-items: center;
  margin: 0 0 14px;
}
.a-recherche { flex: 1; position: relative; }
.a-recherche input {
  width: 100%; min-height: 46px; padding: 11px 13px 11px 40px;
  border: 1px solid var(--a-bord-fort); border-radius: var(--a-r);
  background: var(--a-blanc); font-family: inherit; font-size: 16px;
}
.a-recherche svg {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; color: var(--a-encre3); pointer-events: none;
}

.a-onglets {
  display: flex; gap: 6px; margin: 0 0 18px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.a-onglets::-webkit-scrollbar { display: none; }
.a-onglet {
  flex: none;
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 40px; padding: 0 14px;
  border: 1px solid var(--a-bord-fort); border-radius: 100px;
  background: var(--a-blanc); color: var(--a-encre2);
  font-family: inherit; font-size: 14px; font-weight: 700;
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.a-onglet b { color: var(--a-encre3); font-weight: 400; }
.a-onglet[aria-current="true"] {
  background: var(--a-encre); border-color: var(--a-encre); color: var(--a-blanc);
}
.a-onglet[aria-current="true"] b { color: rgba(255,255,255,.6); }

.a-liste { display: grid; gap: 14px; }

/* ---------- LA CARTE DE LA LISTE ----------
   Au TÉLÉPHONE : la photographie en bandeau, au format paysage,
   puis le texte dessous. C'est la disposition de Vinted, et elle
   n'est pas choisie pour l'imiter : une photo de voiture est
   large: la ranger dans une colonne de 104 px de large et 350 px
   de haut n'en montre qu'une roue avant. Une vignette qui ne
   permet pas de reconnaître la voiture ne sert à rien dans une
   liste dont c'est le seul rôle.

   Au-delà de 560 px l'espace revient, et la carte redevient une
   RANGÉE compacte : on voit alors six véhicules d'un coup d'œil
   au lieu de deux. */
.a-carte {
  background: var(--a-blanc);
  border: 1px solid var(--a-bord);
  border-radius: var(--a-r-lg);
  overflow: hidden;
  box-shadow: var(--a-ombre);
}

.a-vignette {
  position: relative;
  background: var(--a-papier2);
  aspect-ratio: 1.6;
}
.a-vignette img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.a-vignette-vide {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--a-encre3); font-size: 12px; text-align: center; padding: 8px;
}

.a-carte-corps { padding: 14px 15px 15px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.a-carte-marque {
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--a-encre3);
}
.a-carte-nom {
  font-size: 18px; font-weight: 700; line-height: 1.2; margin: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.a-carte-nom a { text-decoration: none; }
.a-carte-nom a:hover { text-decoration: underline; }
.a-carte-prix { font-size: 17px; font-weight: 700; margin-top: 1px; }
.a-carte-meta { font-size: 13px; color: var(--a-encre3); }
.a-carte-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.a-carte-actions form { display: contents; }

.a-etats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }

@media (min-width: 560px) {
  .a-carte { display: grid; grid-template-columns: 168px 1fr; }
  .a-vignette { aspect-ratio: auto; }
  .a-carte-corps { padding: 15px 17px; justify-content: center; }
}

/* Les pastilles d'état. La couleur seule ne suffirait pas —
   environ un homme sur douze ne distingue pas le vert du rouge —
   donc chacune porte aussi son mot en toutes lettres. */
.a-etat {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 100px; white-space: nowrap;
}
.a-etat::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.a-etat-disponible { background: var(--a-ok-fond);   color: var(--a-ok); }
.a-etat-reserve    { background: var(--a-warn-fond); color: var(--a-warn); }
.a-etat-vendu      { background: var(--a-papier2);   color: var(--a-encre2); }
.a-etat-brouillon  { background: var(--a-papier2);   color: var(--a-encre3); }

.a-vide {
  text-align: center; padding: 46px 20px;
  background: var(--a-blanc); border: 1px dashed var(--a-bord-fort);
  border-radius: var(--a-r-lg); color: var(--a-encre2);
}
.a-vide p { margin: 0 0 16px; }

/* ============================================================
   LES PHOTOGRAPHIES

   Chaque vignette est une tuile : l'image, puis une rangée de
   commandes SOUS l'image. Les commandes ne sont pas posées en
   surimpression — au doigt, un bouton de 28 px superposé à une
   photo se rate une fois sur trois, et on supprime alors ce
   qu'on voulait déplacer.
   ============================================================ */
.a-photos {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 12px; margin: 0 0 16px;
}
@media (max-width: 400px) { .a-photos { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

.a-photo {
  border: 1px solid var(--a-bord); border-radius: var(--a-r);
  overflow: hidden; background: var(--a-blanc);
}

.a-photo-vue { position: relative; aspect-ratio: 1.6; background: var(--a-papier2); }
.a-photo-vue img { width: 100%; height: 100%; object-fit: cover; display: block; }

.a-photo-num,
.a-photo-couv {
  position: absolute; top: 6px; left: 6px;
  height: 21px; padding: 0 7px;
  display: inline-flex; align-items: center;
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  border-radius: 4px;
}
.a-photo-num  { background: rgba(10,10,11,.78); color: #fff; }
.a-photo-couv { background: var(--a-jaune); color: var(--a-encre); text-transform: uppercase; }

/* Au-delà de la troisième, la photo ne paraît pas sur le site.
   Elle n'est pas inutile pour autant — elle part sur leboncoin,
   et l'étiquette le dit sans la dévaloriser. */
.a-photo-badge {
  position: absolute; right: 6px; bottom: 6px;
  background: rgba(10,10,11,.78); color: #fff;
  font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 4px;
}

.a-photo-x {
  position: absolute; top: 5px; right: 5px;
  width: 30px; height: 30px; border-radius: 50%;
  border: none; background: rgba(10,10,11,.66); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
}
.a-photo-x svg { width: 13px; height: 13px; }

.a-photo-cmd {
  display: grid; grid-template-columns: 44px 1fr 44px;
  border-top: 1px solid var(--a-bord);
}
.a-photo-b {
  appearance: none; -webkit-appearance: none;
  min-height: 40px; border: none; background: var(--a-blanc);
  color: var(--a-encre); font-family: inherit; font-size: 13px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
}
.a-photo-b + .a-photo-b { border-left: 1px solid var(--a-bord); }
.a-photo-b svg { width: 15px; height: 15px; }
.a-photo-b:disabled { color: var(--a-encre3); opacity: .4; cursor: default; }
.a-photo-b:not(:disabled):active { background: var(--a-papier2); }
.a-photo-b-texte { font-size: 12.5px; color: var(--a-encre2); }

.a-depot {
  border: 1.5px dashed var(--a-bord-fort); border-radius: var(--a-r-lg);
  padding: 26px 18px; text-align: center; background: var(--a-papier);
  transition: border-color 150ms, background 150ms;
}
.a-depot.is-survol { border-color: var(--a-encre); background: var(--a-papier2); }
.a-depot p { margin: 0 0 12px; color: var(--a-encre2); font-size: 14.5px; }
.a-depot input[type="file"] { display: none; }

.a-progres { margin: 14px 0 0; }
.a-progres-barre {
  height: 5px; background: var(--a-papier2); border-radius: 100px; overflow: hidden;
}
.a-progres-barre i { display: block; height: 100%; background: var(--a-jaune-fonce); width: 0; transition: width 200ms linear; }
.a-progres-texte { font-size: 13px; color: var(--a-encre2); margin: 7px 0 0; text-align: center; }

/* ============================================================
   ÉQUIPEMENTS — cases à cocher
   ============================================================ */
.a-equip-groupe { margin: 0 0 18px; }
.a-equip-groupe > h3 {
  font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--a-encre3); margin: 0 0 9px;
}
.a-cases { display: flex; flex-wrap: wrap; gap: 8px; }
.a-case { position: relative; }
.a-case input { position: absolute; opacity: 0; width: 0; height: 0; }
.a-case span {
  display: inline-flex; align-items: center; min-height: 38px; padding: 0 13px;
  border: 1px solid var(--a-bord-fort); border-radius: 100px;
  background: var(--a-blanc); font-size: 14px; cursor: pointer;
  transition: background 130ms, border-color 130ms;
}
.a-case input:checked + span {
  background: var(--a-jaune); border-color: var(--a-jaune-fonce); font-weight: 700;
}
.a-case input:focus-visible + span { outline: 2px solid var(--a-encre); outline-offset: 2px; }

/* ============================================================
   BARRE D'ACTION COLLÉE EN BAS
   Publier est l'action qui compte ; elle ne doit jamais demander
   de faire défiler pour être atteinte.
   ============================================================ */
.a-pied {
  position: sticky; bottom: 0; z-index: 30;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-top: 1px solid var(--a-bord);
  padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  margin: 20px -16px 0;
  display: flex; gap: 10px; align-items: center;
}
.a-pied .a-btn-primaire { flex: 1; }

/* ============================================================
   L'APERÇU
   ============================================================ */
.a-apercu-cadre {
  border: 1px solid var(--a-bord); border-radius: var(--a-r-lg);
  overflow: hidden; background: var(--a-blanc); box-shadow: var(--a-ombre);
}
/* Une carte fait environ 440 px de haut ; 780 laissait un grand
   vide gris sous elle. 600 tient la carte dépliée (« Détails »
   ouvert) sans meubler l'écran de rien. */
.a-apercu-cadre iframe { display: block; width: 100%; height: 600px; border: 0; }

/* ============================================================
   LE DOSSIER LEBONCOIN
   ============================================================ */
.a-lbc-champ {
  border: 1px solid var(--a-bord); border-radius: var(--a-r);
  margin: 0 0 12px; overflow: hidden;
}
.a-lbc-tete {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; background: var(--a-papier);
  border-bottom: 1px solid var(--a-bord);
}
.a-lbc-tete b {
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--a-encre2); margin-right: auto;
}
.a-lbc-valeur {
  padding: 11px 12px; font-size: 15px; line-height: 1.5;
  white-space: pre-wrap; word-break: break-word;
}
.a-lbc-compteur { font-size: 11.5px; color: var(--a-encre3); font-variant-numeric: tabular-nums; }
.a-lbc-compteur.is-trop { color: var(--a-err); font-weight: 700; }

.a-lbc-ordre {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 9px; margin: 0 0 8px;
}
.a-lbc-vignette { position: relative; aspect-ratio: 1.6; border-radius: 6px; overflow: hidden; background: var(--a-papier2); }
.a-lbc-vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
.a-lbc-vignette b {
  position: absolute; top: 4px; left: 4px;
  width: 20px; height: 20px; border-radius: 4px;
  background: var(--a-encre); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px;
}

/* ============================================================
   TABLEAU DES VERSIONS
   ============================================================ */
.a-versions { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.a-versions th, .a-versions td {
  text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--a-bord);
}
.a-versions th {
  font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--a-encre3); font-weight: 700;
}
.a-versions tr:last-child td { border-bottom: none; }

/* ============================================================
   RÉDUCTION DES ANIMATIONS
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}