/* ==========================================================================
   WautoParc, la fiche d'un vehicule (single-listings.php), le bloc « Plus de
   details » du formulaire d'annonce (page-espace-parc.php) et les lignes du
   comparateur. Chargee apres la feuille enrichie par inc/fiche.php, sur ces
   trois pages seulement.

   Dessinee sur les captures du site de reference : la grille valeur en gras
   sur libelle gris, la boite blanche des points forts, la boite verte des
   equipements les plus apprecies, les accordeons a puces rouges, la barre
   noire du bas. Les jetons sont ceux du site (oklch) ; le vert est celui du
   bouton « Verifier la disponibilite ».
   ========================================================================== */

.wa-root{
  --wa-fi-vert:#137d41;
  --wa-fi-vert-encre:#005126;
  --wa-fi-vert-fond:#edfbf0;
  --wa-fi-vert-bord:#a3d2ae;
  /* Le bas de l'entete collee, barre de WordPress comprise : le jeton du site (wautoparc-enrichi.css). */
  --wa-fi-entete:var(--wa-entete-bas,calc(var(--wa-utile-h,40px) + 70px));
}@supports (color:oklch(0 0 0)){.wa-root{--wa-fi-vert:oklch(0.52 0.13 152);--wa-fi-vert-encre:oklch(0.38 0.1 152);--wa-fi-vert-fond:oklch(0.975 0.022 152);--wa-fi-vert-bord:oklch(0.82 0.07 152)}}

/* Lu par les lecteurs d'ecran, pas a l'ecran. */
.wa-root .wa-lecteur{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* --- le haut de la fiche --------------------------------------------------- */
/* Sur telephone, le panneau du prix vient apres toute la fiche : le prix se lit sous le titre. */
.wa-root .wa-fiche-prixmob{display:flex;align-items:baseline;gap:6px;margin-top:10px}
.wa-root .wa-fiche-prixmob b{font-family:var(--fd);font-weight:700;font-size:26px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink)}
.wa-root .wa-fiche-prixmob small{font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--muted)}
@media (min-width:981px){.wa-root .wa-fiche-prixmob{display:none}}
/* ux#1 : au telephone, ecrire au vendeur juste sous le prix ; au bureau, le panneau de cote le fait. */
.wa-root .wa-fiche-contact{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.wa-root .wa-fiche-contact a{flex:1 1 auto;min-height:48px;padding:10px 16px;font-size:15px;line-height:1.2;white-space:nowrap}
/* ux#18 : au bureau, le panneau colle a l'ecran pendant qu'on lit la fiche ; il rappelle de quel vehicule il s'agit
   quand le titre, en tete de page, est deja loin. */
.wa-root .wa-spanel-nom{display:none;margin:0 0 12px;padding-bottom:12px;border-bottom:1px solid var(--line)}
@media (min-width:981px){.wa-root .wa-spanel-nom{display:block}}
.wa-root .wa-spanel-nom b{display:block;font-family:var(--fd);font-weight:700;font-size:18px;line-height:1.25;color:var(--ink)}
.wa-root .wa-spanel-nom span{display:block;margin-top:3px;font-size:14px;color:var(--muted)}
@media (min-width:981px){.wa-root .wa-fiche-contact{display:none}}
/* Au telephone, le panneau passe dans le fil de la fiche (wa-fiche.js) : il ne colle plus. */
@media (max-width:980.98px){.wa-root .wa-sside{position:static;top:auto}.wa-root .wa-fiche-principal > .wa-sside{margin-top:40px}}
/* La colonne de la fiche peut retrecir sous la largeur de ce qu'elle porte (a 320 px, les vignettes poussaient la page a 407 px). */
.wa-root .wa-sgrid>*{min-width:0}

/* La retouche du 27 septembre : le vehicule se nomme avant ses photos. Le fil d'Ariane, le titre, sa ville et ses
   badges (au telephone, le prix et le contact), puis la galerie ; ses vignettes defilent de cote (le theme). */
.wa-root .wa-fiche-principal > .wa-crumb{margin:0 0 14px}
.wa-root .wa-fiche-principal > .wa-stitle{margin:0 0 20px}
.wa-root .wa-fiche-principal > .wa-stitle h1{font-size:clamp(32px,3.4vw,48px);line-height:1.1;margin-top:0}
.wa-root .wa-fiche-principal > .wa-stitle .wa-sbadges{margin-top:14px;gap:8px}
.wa-root .wa-thumbs img{display:block;width:100%;height:auto}
/* Chaque vignette est un bouton (Tab l'atteint, Entree la montre) : sans fond ni bord, l'image dessine la vignette ;
   celle qu'on voit (aria-pressed) a le bord rouge, le focus un anneau. */
.wa-root .wa-thumbs .wa-thumb{display:block;min-width:0;margin:0;padding:0;border:0;border-radius:11px;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.wa-root .wa-thumbs .wa-thumb[aria-pressed="true"] img{opacity:1;border-color:var(--red)}
.wa-root .wa-thumbs .wa-thumb:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.wa-root .wa-thumbs .wa-thumb:focus-visible img{opacity:1}
/* Sans photo, un seul visuel : le dessin du type et « Photos a venir », comme sur les cartes (jamais la photo d'un autre vehicule). */
.wa-root .wa-gal-sansphoto .main{display:flex;align-items:center;justify-content:center}
.wa-root .wa-fiche-sansphoto{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:20px;text-align:center;color:var(--muted)}
.wa-root .wa-fiche-sansphoto svg{width:46%;max-width:220px;height:auto;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.wa-root .wa-fiche-sansphoto b{font-size:16px;font-weight:700;color:var(--ink-soft)}
.wa-root .wa-fiche-sansphoto span{max-width:34ch;font-size:14px;line-height:1.45}
.wa-root .wa-sbadges .wa-fiche-bonne{color:var(--red-ink)}
.wa-root .wa-sactions button{cursor:pointer;text-align:left}
/* « Fiche du modele : Toyota RAV4 » passe a la ligne plutot que de deborder a 320 px (dans les actions et sous les points forts). */
.wa-root .wa-sactions .wa-fm-btn,.wa-root .wa-fiche-source .wa-fm-btn{max-width:100%;white-space:normal}
.wa-root .wa-sactions .wa-fm-btn span,.wa-root .wa-fiche-source .wa-fm-btn span{min-width:0;white-space:normal}
/* La retouche du 27 septembre, le panneau : les trois gestes de l'achat en vue (WhatsApp, la disponibilite, l'offre),
   en boutons de 10 px d'arrondi ; les autres sous « Inspection, favoris et autres options », dans leurs lignes a fleche
   (le dessin des actions secondaires, wa-enhance.css, vaut pour la liste du repli, une grille comme celle des actions). */
.wa-root .wa-sactions > .wa-btn-wa{min-height:52px;border-radius:10px}
.wa-root .wa-sactions > .wa-ghost-wa{min-height:46px;border-radius:10px}
.wa-root .wa-sactions-plus{margin-top:6px;border-top:1px solid var(--line)}
.wa-root .wa-sactions-liste{display:grid;gap:10px;padding-bottom:4px}
.wa-root .wa-sactions-plus > summary{display:flex;align-items:center;gap:10px;min-height:48px;padding:13px 2px;font-weight:600;line-height:1.35;color:var(--ink);list-style:none;cursor:pointer}
.wa-root .wa-sactions-plus > summary::-webkit-details-marker{display:none}
.wa-root .wa-sactions-plus > summary .chev{flex:none;width:18px;height:18px;margin-left:auto;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--eo,cubic-bezier(.23,1,.32,1))}
.wa-root .wa-sactions-plus[open] > summary .chev{transform:rotate(180deg)}
@media (hover:hover){.wa-root .wa-sactions-plus > summary:hover{color:var(--red-ink)}}
/* Le numero des sections (01, 02...) est pose au-dessus de la ligne sans l'agrandir : un titre sur deux lignes garde son interligne. */
.wa-root .wa-sgrid>div.wa-fiche-principal:first-child .wa-h3{line-height:1.12}
.wa-root .wa-sgrid>div.wa-fiche-principal:first-child .wa-h3::before{vertical-align:baseline;position:relative;top:-.5em}
/* Les accessoires sous l'annonce (la boutique) : une carte seule garde sa largeur de carte. */
@media (min-width:601px){.wa-root .wa-fiche-principal .wa-bq-annonce .wa-bq-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}}
.wa-root .wa-safe .wa-fiche-safe-ic{width:20px;height:20px;flex:none;stroke:var(--red);stroke-width:2;fill:none}
.wa-root .wa-fiche-similaires{padding-bottom:20px}

/* --- la sous-navigation ----------------------------------------------------
   Elle colle sous l'entete (qui colle elle-meme sous la barre utilitaire),
   deborde jusqu'aux bords sur telephone et y defile de cote. L'onglet de la
   section lue est souligne de rouge (aria-current, pose par wa-fiche.js).
   -------------------------------------------------------------------------- */
.wa-root .wa-fiche-nav{position:sticky;top:var(--wa-fi-entete);z-index:25;margin:26px 0 0;background:var(--paper);border-bottom:1px solid var(--line)}
.wa-root .wa-fiche-nav ul{display:flex;gap:2px;margin:0;padding:0;list-style:none;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.wa-root .wa-fiche-nav ul::-webkit-scrollbar{display:none}
.wa-root .wa-fiche-nav li{flex:none}
.wa-root .wa-fiche-nav a{display:block;padding:15px 13px 12px;border-bottom:3px solid transparent;font-size:14.5px;font-weight:600;line-height:1.2;white-space:nowrap;color:var(--ink-soft);text-decoration:none;transition:color .18s var(--eo),border-color .18s var(--eo)}
.wa-root .wa-fiche-nav a:hover{color:var(--ink)}
.wa-root .wa-fiche-nav a[aria-current="true"]{color:var(--ink);border-bottom-color:var(--red)}
.wa-root .wa-fiche-nav a:focus-visible{outline:2px solid var(--red);outline-offset:-3px;border-radius:6px}
@media (max-width:980.98px){
  .wa-root .wa-fiche-nav{margin-inline:calc(-1 * clamp(20px,3.2vw,60px))}
  .wa-root .wa-fiche-nav ul{padding-inline:calc(clamp(20px,3.2vw,60px) - 13px)}
}
/* Une ancre arrive sous l'entete et la sous-navigation, pas dessous. */
.wa-root .wa-fiche-ancre,.wa-root #pourquoi{scroll-margin-top:50px} /* l'entete est deja comptee (html{scroll-padding-top}, 12 px d'air compris) : la sous-navigation */
/* Un ecran court (700 px de haut au plus : un petit telephone, tout telephone couche) ne garde pas quatre barres :
   la sous-navigation ne colle plus et la barre du haut defile avec la page, l'entete collant alors tout en haut. Il
   restait 167 px de fiche lisibles couche (responsive-css#6). */
@media (max-height:700px){
  .wa-root .wa-fiche-nav{position:static}
  body.wa-fiche-page .wa-utile{position:absolute}
  body.wa-fiche-page .wa-header{top:0}
  body.wa-fiche-page.admin-bar .wa-header{top:var(--wp-admin--admin-bar--height,32px)}
}
/* Quand elle colle, la sous-navigation compte dans le calage de ce que le navigateur amene a l'ecran (un champ qui
   prend le focus, le clavier ouvert) : il passait dessous. Les ancres de la fiche n'ajoutent plus que 2 px. */
@media (min-height:701px){
  html.wa-fiche-js{scroll-padding-top:calc(144px + var(--wa-utile-h,0px))}
  html.wa-fiche-js:has(body.admin-bar){scroll-padding-top:calc(176px + var(--wa-utile-h,0px))}
  html.wa-fiche-js .wa-root .wa-fiche-ancre,html.wa-fiche-js .wa-root #pourquoi{scroll-margin-top:2px}
}

/* --- les sections ------------------------------------------------------------ */
.wa-root .wa-fiche-sec{margin-top:clamp(40px,5vw,56px)}
.wa-root .wa-fiche-sec > .wa-h3:first-child{margin-top:0}
.wa-root .wa-fiche-nav + .wa-fiche-sec{margin-top:30px}
.wa-root .wa-fiche-sec .wa-buywell{margin-top:28px}
.wa-root .wa-fiche-sec .wa-fiche-boite + .wa-buywell{margin-top:28px}
.wa-root .wa-fiche-sec > .wa-fiche-averifier:first-child + .wa-buywell,.wa-root .wa-fiche-sec > .wa-buywell:first-child{margin-top:0}

/* La description, au-dessus de la grille comme sur les captures ; longue, elle se replie. */
.wa-root .wa-fiche-desc{margin:0 0 26px}
.wa-root .wa-fiche-desc > :last-child{margin-bottom:0}
.wa-fiche-js .wa-root .wa-fiche-desc[data-long]:not(.ouverte){max-height:calc(1.75em * 7);overflow:hidden;position:relative}
.wa-fiche-js .wa-root .wa-fiche-desc[data-long]:not(.ouverte)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3.5em;background:linear-gradient(to bottom,rgba(248,246,244,0),var(--paper));pointer-events:none}@supports (color:oklch(0 0 0)){.wa-fiche-js .wa-root .wa-fiche-desc[data-long]:not(.ouverte)::after{background:linear-gradient(to bottom,oklch(0.975 0.004 80/0),var(--paper))}}
.wa-root .wa-fiche-suite{display:none}
.wa-fiche-js .wa-root .wa-fiche-suite{display:inline-flex;align-items:center;gap:6px;margin:-12px 0 24px;padding:8px 0;border:0;background:none;font:inherit;font-size:15px;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.wa-root .wa-fiche-suite:hover{color:var(--red-ink)}
.wa-root .wa-fiche-suite:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:4px}

/* --- la grille des caracteristiques : la valeur en gras, le libelle gris dessous, deux colonnes --- */
.wa-root .wa-fiche-carac{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(18px,4vw,46px);margin:0}
.wa-root .wa-fiche-carac .it{display:flex;flex-direction:column;justify-content:flex-start;gap:4px;min-width:0;padding:14px 0 13px;border-bottom:1px solid var(--line)}
.wa-root .wa-fiche-carac dd{order:1;margin:0;font-family:var(--fd);font-weight:600;font-size:16.5px;line-height:1.3;letter-spacing:-.005em;color:var(--ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.wa-root .wa-fiche-carac dt{order:2;font-size:13px;font-weight:500;line-height:1.3;color:var(--muted)}
.wa-root .wa-fiche-carac dd.note{order:3;margin-top:2px;font-family:'Instrument Sans',system-ui,sans-serif;font-size:13px;font-weight:400;line-height:1.45;letter-spacing:0;color:var(--muted)}
.wa-root .wa-fiche-carac .it-vin{grid-column:1/-1}
.wa-root .wa-fiche-vin{letter-spacing:.06em}
.wa-root .wa-fiche-vin .m{color:var(--muted);letter-spacing:.12em}
.wa-root .wa-fiche-verifie{display:inline-flex;align-items:center;gap:4px;margin-left:8px;padding:2px 8px 2px 7px;border-radius:100px;background:#d6f4dd;background:oklch(0.94 0.045 152);color:var(--wa-fi-vert-encre);font-family:'Instrument Sans',system-ui,sans-serif;font-size:12px;font-weight:700;font-style:normal;letter-spacing:.06em;text-transform:uppercase;line-height:1.5;vertical-align:2px;white-space:nowrap}
.wa-root .wa-fiche-verifie::before{content:"";width:9px;height:5px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg) translate(1px,-1px)}
.wa-root .wa-fiche-note{margin:16px 0 0;font-size:14px;line-height:1.55;color:var(--muted);max-width:70ch}
.wa-root .wa-fiche-note .wa-fiche-verifie{margin:0 1px}

/* --- les boites : points forts du modele, equipements les plus apprecies, points a verifier --- */
.wa-root .wa-fiche-boite{background:#fff;border:1px solid var(--line);border-radius:18px;padding:clamp(18px,2.6vw,26px)}
.wa-root .wa-fiche-coches{display:grid;gap:13px;margin:0;padding:0;list-style:none}
.wa-root .wa-fiche-coches li{display:flex;align-items:flex-start;gap:12px;font-size:16px;line-height:1.45;color:var(--ink)}
.wa-root .wa-fiche-coches .ic{flex:none;width:22px;height:22px;margin-top:0;padding:4px;border-radius:50%;background:var(--wa-fi-vert);stroke:#fff;stroke-width:3.2;fill:none}
.wa-root .wa-fiche-source{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.wa-root .wa-fiche-source p{flex:1 1 280px;margin:0;font-size:14px;line-height:1.55;color:var(--muted)}
.wa-root .wa-fiche-source .wa-fm-btn{flex:none;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:1.5px solid rgba(11,13,19,.35);border:1.5px solid oklch(0.16 0.012 265/.35);border-radius:100px;background:#fff;font:inherit;font-size:14.5px;font-weight:600;color:var(--ink);cursor:pointer;transition:border-color .18s var(--eo),color .18s var(--eo)}
.wa-root .wa-fiche-source .wa-fm-btn .ic{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
.wa-root .wa-fiche-source .wa-fm-btn:hover{border-color:var(--red);color:var(--red-ink)}
.wa-root .wa-fiche-source .wa-fm-btn:focus-visible,.wa-root .wa-fiche-source .btn:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.wa-root .wa-fiche-source .btn .ic{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}
.wa-root .wa-fiche-source .btn{line-height:1.25;text-align:center}
.wa-root .wa-fiche-apprecies{margin:0 0 22px;padding:clamp(18px,2.6vw,26px);background:var(--wa-fi-vert-fond);border:1px solid var(--wa-fi-vert-bord);border-radius:18px}
.wa-root .wa-fiche-apprecies h3{margin:0 0 14px;font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.wa-root .wa-fiche-points{display:grid;gap:14px;margin:0;padding:0;list-style:none;counter-reset:wafp}
.wa-root .wa-fiche-points li{counter-increment:wafp;display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:start;font-size:16px;line-height:1.45;color:var(--ink)}
.wa-root .wa-fiche-points li::before{content:counter(wafp);display:grid;place-items:center;width:26px;height:26px;border:1.5px solid var(--red);border-radius:50%;font-size:13px;font-weight:700;color:var(--red-ink);font-variant-numeric:tabular-nums}

/* --- les equipements : un accordeon par categorie, deux colonnes a puces rouges --- */
.wa-root .wa-fiche-accs{border-top:1px solid rgba(11,13,19,.16);border-top:1px solid oklch(0.16 0.012 265/.16)}
/* Une categorie d'equipements n'est pas une etape : pas de numero. Celui des accordeons du site (01, 02...) se
   confondait avec ceux des sections de la fiche : « 04 Exterieur », puis aussitot « 04 A verifier... ». */
.wa-root .wa-fiche-acc summary::before{content:none}
.wa-root .wa-fiche-acc summary .t{min-width:0}
.wa-root .wa-fiche-acc summary .n{margin-left:auto;flex:none;min-width:26px;padding:2px 8px;border-radius:100px;background:var(--paper-2);font-family:'Instrument Sans',system-ui,sans-serif;font-size:13px;font-weight:700;text-align:center;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.wa-root .wa-fiche-acc summary .n + .ic{margin-left:12px}
.wa-root .wa-fiche-acc summary:focus-visible{outline:2px solid var(--red);outline-offset:-2px;border-radius:6px} /* a l'interieur : l'accordeon coupe ce qui depasse (accessibilite#0) */
.wa-root .wa-fiche-liste{margin:0 0 20px;padding:0 2px;list-style:none;columns:2;column-gap:34px}
.wa-root .wa-fiche-liste li{position:relative;padding:6px 0 6px 20px;break-inside:avoid;font-size:15.5px;line-height:1.45;color:var(--ink-soft)}
.wa-root .wa-fiche-liste li::before{content:"";position:absolute;left:2px;top:calc(6px + .72em - 3px);width:6px;height:6px;border-radius:50%;background:var(--red)}
@media (max-width:359px){.wa-root .wa-fiche-liste{columns:1}}

/* Le calendrier de la location : un jour passe ou pris reste lisible (le gris du texte, barre), il n'est seulement plus a choisir. */
.wa-root .wa-rent-cal .cal-d.off,.wa-root .wa-rent-cal .cal-d:disabled{color:var(--muted);opacity:1}

/* --- le carnet, la ou il a perdu ses styles en ligne --- */
.wa-root .wa-fiche-hint{max-width:64ch;margin:12px 0 4px}
.wa-root .wa-fiche-hint + .wa-fiche-hint{margin-top:4px}
.wa-root .wa-fiche-lien{color:var(--red-ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* --- le cout jusqu'a destination : le prix, le statut douanier, la livraison une fois le bareme valide --- */
.wa-root .wa-cost-lignes{margin:0 0 18px;border-top:1px solid var(--line)}
.wa-root .wa-cost-lignes > div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.wa-root .wa-cost-lignes dt{min-width:0;font-size:14px;color:var(--muted)}
.wa-root .wa-cost-lignes dd{margin:0;font-weight:600;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink)}
.wa-root .wa-cost-cities .cc:focus-visible{outline:2px solid var(--red);outline-offset:2px}
@media (pointer:coarse){.wa-root .wa-cost-cities .cc{min-height:44px}}

/* --- la cote : son explication se lit sous la jauge --- */
.wa-root .wa-cote2 .wa-cote-note{margin:10px 0 0;font-size:12.5px;line-height:1.45;color:var(--muted)}

/* --- signaler l'annonce : un lien discret sous les actions, une cible de 44 px --- */
.wa-root .wa-fiche-signaler{display:inline-flex;align-items:center;min-height:44px;margin-top:4px;font-size:13.5px;font-weight:600;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.wa-root .wa-fiche-signaler:hover{color:var(--ink)}
.wa-root .wa-fiche-signaler:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:4px}

/* --- une annonce vendue : la page allegee qui remplace la page introuvable (inc/fiche.php) --- */
.wa-root .wa-fiche-vendue{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:clamp(18px,3vw,32px);align-items:center;padding:clamp(16px,2.4vw,24px);background:#fff;border:1px solid var(--line);border-radius:18px}
.wa-root .wa-fiche-vendue .ph{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:var(--paper-2)}
.wa-root .wa-fiche-vendue .ph img{width:100%;height:100%;object-fit:cover}
.wa-root .wa-fiche-vendue .wa-fiche-sansphoto svg{width:60%}
.wa-root .wa-fiche-vendue-badge{position:absolute;left:12px;top:12px;padding:5px 11px;border-radius:100px;background:var(--ink);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff}
.wa-root .wa-fiche-vendue .tx > .wa-h3{margin:0 0 8px}
.wa-root .wa-fiche-vendue .tx > p{margin:0;font-size:15.5px;line-height:1.55;color:var(--ink-soft)}
.wa-root .wa-fiche-vendue .wa-rboutons{margin-top:18px}
.wa-root .wa-fiche-vendue + .wa-rsec-page{margin-top:clamp(36px,5vw,56px)}
@media (max-width:640.98px){.wa-root .wa-fiche-vendue{grid-template-columns:minmax(0,1fr)}}

/* --- ou voir le vehicule ------------------------------------------------------ */
.wa-root .wa-fiche-vendeur > .eyebrow{display:block;margin-bottom:12px}
.wa-root .wa-fiche-vendeur > .wa-h3{margin-top:0}
.wa-root .wa-fiche-vendeur > p:not(.wa-vitrine-adresse){max-width:62ch;margin:0;font-size:15.5px;line-height:1.6;color:var(--ink-soft)}
.wa-root .wa-fiche-vendeur .wa-rboutons{margin-top:18px}
.wa-root .wa-fiche-vendeur .wa-rboutons .btn .ic{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}
.wa-root .wa-fiche-vendeur .wa-rcarte-carte{margin-top:22px;border:1px solid var(--line);border-radius:18px;background:#fff}

/* --- une question ? ------------------------------------------------------------ */
.wa-root .wa-fiche-question p{margin-bottom:14px}
.wa-root .wa-fiche-puces{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px;padding:0;list-style:none}
.wa-root .wa-fiche-puce{display:inline-flex;align-items:center;min-height:40px;padding:8px 14px;border:1px solid var(--line);border-radius:100px;background:#fff;font-size:14px;font-weight:600;line-height:1.3;color:var(--ink);text-decoration:none;transition:border-color .15s var(--eo),background .15s var(--eo)}
.wa-root .wa-fiche-puce:hover{border-color:var(--wa-fi-vert);background:var(--wa-fi-vert-fond)}
.wa-root .wa-fiche-puce:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.wa-root .wa-fiche-qlabel{display:block;margin:0 0 7px;font-size:14px;font-weight:600;color:var(--ink)}
.wa-root .wa-fiche-question textarea{display:block;width:100%;min-height:86px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;font:inherit;font-size:15px;line-height:1.45;color:var(--ink);resize:vertical}
.wa-root .wa-fiche-question textarea::placeholder{color:var(--muted);opacity:1}
.wa-root .wa-fiche-question textarea:focus{outline:none;border-color:var(--red);box-shadow:var(--focus-halo)}
.wa-root .wa-fiche-question .wa-fiche-qenvoi{width:100%;margin-top:12px;justify-content:center}
.wa-root .wa-fiche-question .wa-fiche-qnote{margin:10px 0 0;font-size:13px;line-height:1.45;color:var(--muted)}
@media (pointer:coarse){.wa-root .wa-fiche-puce{min-height:44px}}

/* Le panneau de cote colle tant qu'il tient dans l'ecran ; plus haut que l'ecran, il defile avec la page
   (wa-fiche.js pose la classe) et la barre du bas prend le relais de ses boutons. */
.wa-root .wa-sside.wa-sside-libre{position:relative;top:auto}
/* La publicite : dans la colonne, espacee comme les panneaux ; sur telephone, dans le fil comme une section. */
.wa-root .wa-sside > .wa-spanel + .wa-fiche-pub{margin-top:16px}
.wa-root .wa-fiche-pub-fil{margin-top:clamp(40px,5vw,56px)}

/* --- la barre de contact fixe --------------------------------------------------
   En bas de l'ecran, a toutes les largeurs, quand les boutons du panneau ont
   quitte l'ecran. Elle ne couvre rien : le pied de page lui garde sa hauteur
   (--wa-fbar-h, mesuree par wa-fiche.js) et la zone sure des telephones.
   -------------------------------------------------------------------------- */
.wa-root .wa-fbar{position:fixed;left:0;right:0;bottom:0;z-index:70;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:rgba(11,13,19,.97);background:oklch(0.16 0.012 265/.97);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;box-shadow:0 -12px 30px -20px rgba(11,13,19,.7);box-shadow:0 -12px 30px -20px oklch(0.16 0.012 265/.7);transform:translateY(110%);visibility:hidden;transition:transform .32s var(--eo,cubic-bezier(.23,1,.32,1)),visibility 0s linear .32s}
.wa-root .wa-fbar.on{transform:none;visibility:visible;transition:transform .32s var(--eo,cubic-bezier(.23,1,.32,1)),visibility 0s}
.wa-root .wa-fbar-in{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px 16px;max-width:1640px;margin:0 auto}
.wa-root .wa-fbar-ph{display:block;width:56px;height:42px;border-radius:8px;overflow:hidden;background:rgba(255,255,255,.12);background:oklch(1 0 0/.12)}
.wa-root .wa-fbar-ph img{display:block;width:100%;height:100%;object-fit:cover}
/* Sans photo, la vignette est le dessin du type du vehicule. */
.wa-root .wa-fbar-ph svg{display:block;width:100%;height:100%;padding:5px;fill:none;stroke:rgba(255,255,255,.72);stroke:oklch(1 0 0/.72);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.wa-root .wa-fbar-tx{min-width:0}
.wa-root .wa-fbar-tx b{display:block;overflow:hidden;font-family:var(--fd,system-ui);font-size:15px;font-weight:600;line-height:1.25;white-space:nowrap;text-overflow:ellipsis;color:#fff}
.wa-root .wa-fbar-tx span{display:block;font-family:var(--fd,system-ui);font-size:17px;font-weight:700;line-height:1.25;font-variant-numeric:tabular-nums;white-space:nowrap;color:#fff}
.wa-root .wa-fbar-tx small{margin-left:3px;font-size:12px;font-weight:700;letter-spacing:.08em;color:rgba(255,255,255,.78);color:oklch(1 0 0/.78)}
.wa-root .wa-fbar-acts{display:flex;align-items:center;gap:10px}
.wa-root .wa-fbar .wa-btn-wa{min-height:44px;padding:11px 20px;font-size:15px;white-space:nowrap}
.wa-root .wa-fbar .wa-btn-wa .ic{width:18px;height:18px}
.wa-root .wa-fbar-dispo{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 18px;border-radius:100px;background:#fff;font-size:15px;font-weight:600;line-height:1.2;white-space:nowrap;color:var(--ink);text-decoration:none;transition:background .15s}
.wa-root .wa-fbar-dispo:hover{background:#edebe7;background:oklch(0.94 0.006 80)}
.wa-root .wa-fbar-tel{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 8px;border-radius:100px;font-size:15px;font-weight:600;white-space:nowrap;color:#fff;text-decoration:none}
.wa-root .wa-fbar-tel .ic{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8}
.wa-root .wa-fbar-tel:hover{background:rgba(255,255,255,.1);background:oklch(1 0 0/.1)}
.wa-root .wa-fbar a:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (max-width:1100.98px){.wa-root .wa-fbar-tel span{display:none}.wa-root .wa-fbar-tel{width:44px;justify-content:center;padding:0;border:1px solid rgba(255,255,255,.34);border:1px solid oklch(1 0 0/.34)}}
@media (max-width:760.98px){
  .wa-root .wa-fbar{padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px))}
  .wa-root .wa-fbar-in{grid-template-columns:40px minmax(0,1fr) minmax(0,1fr) 44px;gap:8px}
  .wa-root .wa-fbar-ph{grid-column:1;width:40px;height:30px;border-radius:6px}
  .wa-root .wa-fbar-tx{grid-column:2/4;display:flex;align-items:baseline;gap:10px}
  .wa-root .wa-fbar-tx b{flex:1 1 auto;min-width:0;font-size:14px}
  .wa-root .wa-fbar-tx span{flex:none;font-size:15px}
  .wa-root .wa-fbar-acts{display:contents}
  /* L'appel garde la cible tactile de la barre : 44 px sur 44. */
  .wa-root .wa-fbar-tel{grid-column:4;grid-row:1;width:44px;min-height:44px;height:44px}
  .wa-root .wa-fbar .wa-btn-wa{grid-column:1/3;grid-row:2;padding:10px 8px;font-size:14px}
  .wa-root .wa-fbar-dispo{grid-column:3/5;grid-row:2;padding:10px 8px;font-size:14px}
}
/* Sous 400 px, le prix passe sous le nom : a cote de lui, le nom n'avait plus que 66 px a 320 px (« Toyota ... »), et
   c'est lui qui dit quel vehicule on contacte (responsive-css#10). */
@media (max-width:399px){.wa-root .wa-fbar-tx{flex-direction:column;align-items:flex-start;gap:0}.wa-root .wa-fbar-tx b{max-width:100%}}
@media (max-width:374px){.wa-root .wa-fbar .wa-btn-wa .ic{display:none}}
@media (prefers-reduced-motion:reduce){.wa-root .wa-fbar,.wa-root .wa-fbar.on{transition:none}}
/* Au telephone, tant qu'un champ a le focus (le clavier est ouvert), la barre de contact et les pastilles se
   retirent : le champ garde l'ecran (html.wa-saisie, pose par wa-fiche.js ; responsive-css#6). */
@media (hover:none) and (pointer:coarse){
  html.wa-saisie .wa-root .wa-fbar.on{visibility:hidden;transform:translateY(110%)}
  html.wa-saisie.wa-fdock .wa-cmpbar,html.wa-saisie.wa-fdock .wa-inspbar,html.wa-saisie.wa-fdock .wa-pcmpbar,html.wa-saisie.wa-fdock .wa-totop{visibility:hidden}
}
/* La page garde la place de la barre sous le pied de page, et celle de la rangee de pastilles au-dessus d'elle
   (--wa-fdock-h, posee par wa-fiche.js) : rien n'est jamais sous elles. */
.wa-fiche-page .wa-ft::after{content:"";display:block;height:calc(var(--wa-fbar-h,0px) + var(--wa-fdock-h,0px) + env(safe-area-inset-bottom,0px))}

/* --- les barres du bas, repliees au-dessus de la barre de contact -----------------
   Sur telephone et tablette, quand la barre de contact est la, le comparateur,
   l'inspection et le comparateur des parcs deviennent des pastilles (l'icone et
   le nombre) sur une rangee juste au-dessus d'elle, a gauche ; le retour en haut
   est a droite de la meme rangee. wa-fiche.js pose html.wa-fdock et la place de
   chacune. Les liens et les boutons restent les memes, avec leur nom complet
   (le texte long reste lu par les lecteurs d'ecran). Ces barres vivent hors de
   .wa-root, dans le corps : les jetons sont ceux de :root.
   -------------------------------------------------------------------------- */
html.wa-fdock .wa-cmpbar,html.wa-fdock .wa-inspbar,html.wa-fdock .wa-pcmpbar{right:auto;width:auto;max-width:none;height:46px;box-sizing:border-box;justify-content:flex-start;transform:translateY(170%);box-shadow:0 12px 28px -10px rgba(11,13,19,.5);box-shadow:0 12px 28px -10px oklch(0.16 0.012 265/.5)}
html.wa-fdock .wa-cmpbar.show,html.wa-fdock .wa-inspbar.show,html.wa-fdock .wa-pcmpbar.show{transform:none}
html.wa-fdock .wa-cmpbar .nb,html.wa-fdock .wa-inspbar .nb{display:inline;font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
/* Le texte long reste lu, hors de l'ecran ; le comparateur des parcs garde « 2 parcs », qui le distingue de celui des vehicules. */
html.wa-fdock .wa-inspbar .lib,html.wa-fdock .wa-pcmpbar .fin{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
html.wa-fdock .wa-inspbar b,html.wa-fdock .wa-pcmpbar b,html.wa-fdock .wa-cmpbar .n,html.wa-fdock .wa-cmpbar .lib{display:none}
html.wa-fdock .wa-inspbar,html.wa-fdock .wa-pcmpbar{gap:7px;padding:0 17px 0 15px}
/* Le comparateur : sa pastille sombre garde ses deux gestes, comparer (l'icone et le nombre) et vider. */
html.wa-fdock .wa-cmpbar{gap:0;padding:3px}
html.wa-fdock .wa-cmpbar .go{height:40px;padding:0 12px 0 13px;gap:7px;background:none;color:#fff}
html.wa-fdock .wa-cmpbar .go .ic{display:block;width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none}
html.wa-fdock .wa-cmpbar .clr{display:grid;place-items:center;width:40px;height:40px;padding:0;border-radius:50%;color:rgba(255,255,255,.8);color:oklch(1 0 0/.8)}
html.wa-fdock .wa-cmpbar .clr .ic{display:block;width:16px;height:16px;stroke:currentColor;stroke-width:2.4;fill:none}
html.wa-fdock .wa-cmpbar .go:hover,html.wa-fdock .wa-cmpbar .clr:hover{background:rgba(255,255,255,.1);background:oklch(1 0 0/.1);color:#fff}
/* Le lien heritait du theme parent une transition de tout, anneau de focus compris : seul le fond change en douceur. */
html.wa-fdock .wa-cmpbar .go,html.wa-fdock .wa-cmpbar .clr{transition:background-color .15s,color .15s}
html.wa-fdock .wa-totop{right:12px}
/* Le focus : un anneau sombre cercle de blanc autour d'une pastille posee sur la page, un anneau blanc dans la pastille sombre. */
html.wa-fdock .wa-inspbar:focus-visible,html.wa-fdock .wa-pcmpbar:focus-visible,html.wa-fdock .wa-totop:focus-visible{outline:2px solid var(--ink);outline-offset:2px;box-shadow:0 0 0 2px #fff}
html.wa-fdock .wa-cmpbar .go:focus-visible,html.wa-fdock .wa-cmpbar .clr:focus-visible{outline:2px solid #fff;outline-offset:-4px;box-shadow:none}
html.wa-fdock .wa-inspbar.show:active,html.wa-fdock .wa-pcmpbar.show:active{transform:scale(.96)}
@media (prefers-reduced-motion:reduce){
  html.wa-fdock .wa-cmpbar,html.wa-fdock .wa-inspbar,html.wa-fdock .wa-pcmpbar{transition:none}
  html.wa-fdock .wa-inspbar.show:active,html.wa-fdock .wa-pcmpbar.show:active{transform:none}
}

/* --- le formulaire d'annonce : « Plus de details » ------------------------------- */
.wa-root .wa-fa-details > summary{list-style:none;cursor:pointer;margin-bottom:0}
.wa-root .wa-fa-details > summary::-webkit-details-marker{display:none}
.wa-root .wa-fa-details[open] > summary{margin-bottom:22px}
.wa-root .wa-fa-details > summary .chev{flex:none;width:20px;height:20px;margin:7px 0 0 8px;stroke:var(--muted);stroke-width:2;fill:none;transition:transform .2s var(--eo)}
.wa-root .wa-fa-details[open] > summary .chev{transform:rotate(180deg)}
.wa-root .wa-fa-details > summary:hover h3{color:var(--red-ink)}
.wa-root .wa-fa-details > summary:focus-visible{outline:2px solid var(--red);outline-offset:6px;border-radius:12px}
.wa-root .wa-fa-details > summary > div{flex:1 1 auto;min-width:0}
.wa-root .wa-fa-details-n:not(:empty){display:inline-block;margin-top:10px;padding:3px 10px;border-radius:100px;background:rgba(223,41,46,.08);background:oklch(0.585 0.215 26/.08);font-size:12.5px;font-weight:700;color:var(--red-ink)}
@media (prefers-reduced-motion:reduce){.wa-root .wa-fa-details > summary .chev{transition:none}}
.wa-root .wa-fa-lbl{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:8px}
.wa-root .wa-fa-lbl .lbl{display:block;font-size:14px;font-weight:600;color:var(--ink)}
.wa-root .wa-fa-lbl .hint{margin:0}
.wa-root .wa-fa-effacer{flex:none;padding:2px 0;border:0;background:none;font:inherit;font-size:13px;font-weight:600;color:var(--ink-soft);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.wa-root .wa-fa-effacer:hover{color:var(--red-ink)}
.wa-root .wa-fa-effacer:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:4px}
.wa-root .wa-fa-couleurs{display:flex;flex-wrap:wrap;gap:8px}
.wa-root .wa-fa-couleurs label{position:relative;display:inline-block;margin:0;cursor:pointer;font-weight:400}
.wa-root .wa-fa-couleurs input{position:absolute;opacity:0;width:1px;height:1px}
.wa-root .wa-fa-couleurs span{display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 9px;border:1px solid var(--line);border-radius:100px;background:#fff;font-size:14px;font-weight:500;color:var(--ink-soft);transition:border-color .15s var(--eo),background .15s var(--eo),color .15s var(--eo)}
.wa-root .wa-fa-couleurs i{flex:none;width:18px;height:18px;border-radius:50%;background:var(--c,var(--paper-2));box-shadow:inset 0 0 0 1px rgba(11,13,19,.2);box-shadow:inset 0 0 0 1px oklch(0.16 0.012 265/.2)}
.wa-root .wa-fa-couleurs label:hover input:not(:checked) + span{border-color:rgba(223,41,46,.5);border-color:oklch(0.585 0.215 26/.5);color:var(--ink)}
.wa-root .wa-fa-couleurs input:checked + span{border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red);background:rgba(223,41,46,.05);background:oklch(0.585 0.215 26/.05);color:var(--red-ink)}
.wa-root .wa-fa-couleurs input:focus-visible + span{outline:2px solid var(--red);outline-offset:2px}
.wa-root .wa-fa-autre{margin-top:10px;max-width:320px}
.wa-root .wa-fa-champ .wa-fa-autre:not([type=radio]){width:100%}
.wa-root .wa-fa-equip{margin-top:26px;padding-top:22px;border-top:1px dashed var(--line)}
.wa-root .wa-fa-equip > .wa-fa-lbl{flex-wrap:wrap;margin-bottom:6px}
.wa-root .wa-fa-equip > .wa-fa-lbl .hint{flex:1 1 100%;font-size:13px;color:var(--muted);line-height:1.45}
.wa-root .wa-fa-equip-cat{margin:18px 0 0;padding:0;border:0;min-width:0}
.wa-root .wa-fa-equip-cat legend{margin:0 0 10px;padding:0;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.wa-root .wa-fa-champ.fam-cache,.wa-root .wa-fa-equip-cat.fam-cache,.wa-root .wa-fa-equip label.fam-cache{display:none}
.wa-root .wa-fa-champ .hint.wa-vin-ko{color:var(--red-press)}

/* Les pastilles des couleurs : la teinte de wa_couleurs(), une classe par couleur (aucun style en ligne). */
.wa-coul-blanc{--c:#f4f4f1}.wa-coul-noir{--c:#17181b}.wa-coul-gris{--c:#7b7f86}.wa-coul-argent{--c:#c2c6cc}.wa-coul-bleu{--c:#1f4f9c}.wa-coul-rouge{--c:#c3262b}.wa-coul-bordeaux{--c:#6b1a2c}.wa-coul-vert{--c:#2d6a3e}.wa-coul-beige{--c:#d9c8a7}.wa-coul-marron{--c:#6a4a31}.wa-coul-jaune{--c:#e7b923}.wa-coul-orange{--c:#df6f1e}
.wa-root .wa-coul-autre i{background:conic-gradient(#c3262b,#e7b923,#2d6a3e,#1f4f9c,#6b1a2c,#c3262b)}

/* --- le comparateur : les lignes des details, les equipements en commun --- */
.wa-root .wa-cmp-liste{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0;padding:0;list-style:none}
.wa-root .wa-cmp-liste li{position:relative;padding-left:14px;font-size:14.5px;color:var(--ink-soft)}
.wa-root .wa-cmp-liste li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--red)}