/* ==========================================================================
   WautoParc, la carte d'annonce et la rangee « Vehicules en vedette ».

   Chargee la ou une carte d'annonce s'affiche (inc/vedette.php,
   wa_cartes_feuille_utile). Le texte pour les lecteurs d'ecran (.wa-sr), la
   gouttiere --wa-gout et la scene « Vendre » de la page Publier servent
   ailleurs : ils vivent a la fin de wautoparc-enrichi.css (seo-perf#2).

   La carte fusionne celle du site et celle du site de reference : une carte
   blanche bordee, la photo 4:3 et ce qui se pose dessus, puis l'annee et la
   marque, le modele, un trait, le prix en rouge, l'ancien prix barre, les
   kilometres, une ligne grise. Le balisage est dans functions.php
   (wa_premium_card), le comportement dans assets/js/wa-cartes.js.

   Les animations d'avant restent, portees par les feuilles d'avant et le pied
   de page : la carte qui monte au survol, la photo qui s'agrandit, le reflet
   qui passe, le degrade du bas, le relief au curseur et son reflet, la
   revelation au defilement et en cascade. Cette feuille, chargee apres les
   autres, ne fait que redessiner la carte ; les anciennes regles qui visaient
   un balisage disparu (.meta-top, .specs, .ovl, .ftag) ne trouvent plus rien.
   ========================================================================== */

/* --- la carte ------------------------------------------------------------- */
.wa-root .wa-car{
  position:relative;display:flex;flex-direction:column;min-width:0;
  background:#fff;border:1px solid var(--line);border-radius:14px;color:var(--ink);
}
@media (hover:hover) and (pointer:fine){
  .wa-root .wa-car{transition:transform .5s var(--eo,cubic-bezier(.16,1,.3,1)),box-shadow .5s var(--eo,cubic-bezier(.16,1,.3,1)),border-color .3s}
  .wa-root .wa-car:hover{box-shadow:0 26px 50px -26px rgba(11,13,19,.42);box-shadow:0 26px 50px -26px oklch(0.16 0.012 265/.42);border-color:#cdcac5;border-color:oklch(0.84 0.008 80)}
  /* la retouche du 27 septembre : la carte d'une rangee monte de 3 px, a peine ombree ; la carte vedette garde son relief */
  .wa-root .wa-car:not(.feat):hover{transform:translateY(-3px);box-shadow:0 12px 24px rgba(21,21,27,.055)}
}
@media (prefers-reduced-motion:reduce){.wa-root .wa-car:not(.feat):hover{transform:none}}

/* la photo : 4:3, les coins du haut arrondis, l'ombre passe a la carte */
.wa-root .wa-car .ph.wa-car-photo{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:13px 13px 0 0;background:var(--paper-2);box-shadow:none;margin:0}
/* Sans aspect-ratio (Chrome et WebView d'Android avant 88), le cadre n'aurait aucune hauteur : tout ce qu'il porte est
   pose en absolu. Un rembourrage de 75 % de la largeur lui rend ses 4/3 (responsive-css#1). */
@supports not (aspect-ratio:1/1){.wa-root .wa-car .ph.wa-car-photo{height:0;padding-top:75%}}
@media (hover:hover) and (pointer:fine){.wa-root .wa-car:hover .ph.wa-car-photo{box-shadow:none}}
/* le degrade sombre du bas servait l'ancien dessin ; le fait du coin a son propre fond, la photo reste nette */
.wa-root .wa-car .ph.wa-car-photo::before{content:none}
.wa-root .wa-car .wa-car-img{position:absolute;top:0;right:0;bottom:0;left:0;display:block;border-radius:inherit;overflow:hidden}
.wa-root .wa-car .ph.wa-car-photo img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;display:block}
.wa-root .wa-car .ph.wa-car-photo[data-gal]{touch-action:pan-y}

/* sans photo : le dessin du type, jamais la photo d'un autre vehicule */
.wa-root .wa-car .wa-car-sansphoto{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:var(--paper-2);color:var(--muted)}
.wa-root .wa-car .wa-car-sansphoto svg{width:46%;max-width:160px;height:auto;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.wa-root .wa-car .wa-car-sansphoto span{font-size:13px;font-weight:600;color:var(--ink-soft)}

/* les badges, en haut a gauche : un rouge (commerce, prix), un sombre (confiance).
   Tout texte pose sur la photo est blanc sur un fond plein, lisible sur
   n'importe quelle photo. Une lettre sombre sur une pastille blanche l'etait
   aussi, mais le banc de rendu, qui releve la carte pendant sa revelation (elle
   monte de 14 px) et la capture a l'arrivee, la mesurait sur la photo. */
.wa-root .wa-car .wa-car-badges{position:absolute;top:10px;left:10px;right:58px;z-index:4;display:flex;flex-wrap:wrap;align-items:flex-start;gap:6px;pointer-events:none}
.wa-root .wa-car .wa-cbadge{
  display:inline-flex;align-items:center;gap:5px;max-width:100%;padding:5px 10px;border-radius:100px;
  background:var(--ink);color:#fff;font-size:12px;font-weight:700;line-height:1.2;white-space:nowrap;
  box-shadow:0 1px 3px rgba(11,13,19,.3);box-shadow:0 1px 3px oklch(0.16 0.012 265/.3);
}
.wa-root .wa-car .wa-cbadge .ic{width:13px;height:13px;flex:none;fill:none;stroke:currentColor;stroke-width:2.4}
.wa-root .wa-car .wa-cbadge .ic use[href="#wa-check"]{color:#77de96;color:oklch(0.82 0.14 152)}
.wa-root .wa-car .wa-cbadge.rouge{background:var(--red);color:#fff}

/* le fait le plus utile, en bas a gauche : l'etat declare */
.wa-root .wa-car .wa-car-fait{
  position:absolute;left:10px;bottom:10px;z-index:4;display:inline-flex;align-items:center;gap:6px;
  max-width:calc(100% - 66px);padding:6px 11px 6px 9px;border-radius:100px;
  background:var(--ink);color:#fff;font-size:12.5px;font-weight:600;line-height:1.2;pointer-events:none;
}
/* L'etat se lit en entier : il tient sur une ligne a toutes les largeurs, et passe a la ligne plutot que d'etre coupe quand le texte s'elargit (acces#8). */
.wa-root .wa-car .wa-car-fait > span{min-width:0;overflow-wrap:anywhere}
.wa-root .wa-car .wa-car-fait .ic{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2}
.wa-root .wa-car .wa-car-fait.e-neuf .ic{color:#77de96;color:oklch(0.82 0.14 152)}
.wa-root .wa-car .wa-car-fait.e-a-reparer .ic{color:#fac053;color:oklch(0.84 0.14 80)}

/* les points de la galerie : au survol sur un ordinateur, toujours sur un telephone (on y fait glisser) */
.wa-root .wa-car .wa-cgal-points{position:absolute;left:50%;bottom:52px;z-index:4;display:flex;gap:5px;transform:translateX(-50%);pointer-events:none;transition:opacity .2s}
.wa-root .wa-car .wa-cgal-points i{display:block;width:6px;height:6px;border-radius:100px;background:rgba(255,255,255,.62);background:oklch(1 0 0/.62);box-shadow:0 0 0 1px rgba(11,13,19,.28);box-shadow:0 0 0 1px oklch(0.16 0.012 265/.28);transition:width .2s,background .2s}
.wa-root .wa-car .wa-cgal-points i.on{width:15px;background:#fff}
@media (hover:hover) and (pointer:fine){
  .wa-root .wa-car .wa-cgal-points{opacity:0}
  .wa-root .wa-car .ph:hover .wa-cgal-points,.wa-root .wa-car .ph:focus-within .wa-cgal-points{opacity:1}
}

/* les fleches de la galerie : des ronds blancs, au survol ou au clavier */
.wa-root .wa-car .wa-cgal-prec,.wa-root .wa-car .wa-cgal-suiv{
  position:absolute;top:50%;z-index:5;width:34px;height:34px;margin-top:-17px;padding:0;display:grid;place-items:center;
  border:0;border-radius:50%;background:rgba(255,255,255,.94);background:oklch(1 0 0/.94);color:var(--ink);cursor:pointer;
  box-shadow:0 3px 12px rgba(0,0,0,.2);box-shadow:0 3px 12px oklch(0 0 0/.2);opacity:0;transition:opacity .2s,background .2s,color .2s;
}
.wa-root .wa-car .wa-cgal-prec{left:10px}
.wa-root .wa-car .wa-cgal-suiv{right:10px}
.wa-root .wa-car .wa-cgal-prec svg,.wa-root .wa-car .wa-cgal-suiv svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
/* Deux regles : un navigateur sans :focus-visible (Safari avant 15.4) jetterait la liste entiere, et les fleches ne
   paraitraient plus au survol (responsive-css#1). */
.wa-root .wa-car .ph:hover .wa-cgal-prec,.wa-root .wa-car .ph:hover .wa-cgal-suiv{opacity:1}
.wa-root .wa-car .wa-cgal-prec:focus-visible,.wa-root .wa-car .wa-cgal-suiv:focus-visible{opacity:1}
.wa-root .wa-car .wa-cgal-prec:focus-visible,.wa-root .wa-car .wa-cgal-suiv:focus-visible{outline:2px solid var(--red)}
@media (hover:hover){.wa-root .wa-car .wa-cgal-prec:hover,.wa-root .wa-car .wa-cgal-suiv:hover{background:var(--red);color:#fff}}
@media (hover:none){.wa-root .wa-car .wa-cgal-prec,.wa-root .wa-car .wa-cgal-suiv{display:none}}

/* le coeur en haut a droite, le menu en bas a droite : les deux dans .wa-cardacts (leurs clics ne menent pas a la fiche) */
.wa-root .wa-car .ph > .wa-cardacts{position:absolute;left:auto;right:10px;z-index:6;display:block;gap:0;opacity:1;transform:none}
.wa-root .wa-car .ph > .wa-cardacts.wa-car-coeur{top:10px;bottom:auto}
.wa-root .wa-car .ph > .wa-cardacts.wa-car-menu{top:auto;bottom:10px}
.wa-root .wa-car .wa-car-coeur .wa-fav{box-shadow:0 1px 4px rgba(11,13,19,.2);box-shadow:0 1px 4px oklch(0.16 0.012 265/.2)}
.wa-root .wa-car .wa-cmenu-btn{
  position:relative;width:36px;height:36px;padding:0;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:50%;background:rgba(255,255,255,.94);background:oklch(1 0 0/.94);color:var(--ink);cursor:pointer;
  box-shadow:0 1px 4px rgba(11,13,19,.2);box-shadow:0 1px 4px oklch(0.16 0.012 265/.2);transition:transform .16s var(--eo,cubic-bezier(.23,1,.32,1)),background .18s,color .18s,border-color .18s;
}
.wa-root .wa-car .wa-cmenu-btn svg{width:18px;height:18px;fill:currentColor}
.wa-root .wa-car .wa-cmenu-btn:hover{border-color:var(--ink)}
.wa-root .wa-car .wa-cmenu-btn:active{transform:scale(.94)}
.wa-root .wa-car .wa-cmenu-btn[aria-expanded="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.wa-root .wa-car .wa-cmenu-btn:focus-visible{outline:2px solid var(--red)}
/* Sur la photo, le focus des boutons blancs est un double anneau, rouge contre le bouton puis blanc : il se voit sur une photo claire
   comme sombre (accessibilite#0). */
.wa-root .wa-car .wa-cmenu-btn:focus-visible,.wa-root .wa-car .wa-car-coeur .wa-fav:focus-visible,.wa-root .wa-car .wa-cgal-prec:focus-visible,.wa-root .wa-car .wa-cgal-suiv:focus-visible{outline-offset:0;box-shadow:0 0 0 4px #fff}
/* le vehicule est au comparateur ou dans l'inspection : un point rouge sur le menu */
.wa-root .wa-car .wa-cmenu-btn.on::after{content:"";position:absolute;top:0;right:0;width:9px;height:9px;border-radius:50%;background:var(--red);box-shadow:0 0 0 2px #fff}
@media (hover:none){.wa-root .wa-car .wa-cmenu-btn{width:40px;height:40px}}

/* le menu : pose par le script dans la carte, ancre sur son bouton, au-dessus de la photo */
.wa-root .wa-car .wa-cmenu{
  position:absolute;z-index:8;min-width:208px;margin:0;padding:6px;list-style:none;
  background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:0 18px 40px -14px rgba(11,13,19,.38);box-shadow:0 18px 40px -14px oklch(0.16 0.012 265/.38);transform-origin:100% 100%;
  animation:wa-cmenu-in .16s var(--eo,cubic-bezier(.23,1,.32,1));
}
.wa-root .wa-car .wa-cmenu[hidden]{display:none}
.wa-root .wa-car .wa-cmenu [role="menuitem"]{
  display:flex;align-items:center;gap:10px;width:100%;min-height:36px;padding:7px 10px;margin:0;
  border:0;border-radius:8px;background:none;color:var(--ink);font:inherit;font-size:14px;font-weight:500;line-height:1.2;
  text-align:left;text-decoration:none;white-space:nowrap;cursor:pointer;
}
.wa-root .wa-car .wa-cmenu [role="menuitem"]:hover,.wa-root .wa-car .wa-cmenu [role="menuitem"]:focus{background:var(--paper-2);outline:none}
.wa-root .wa-car .wa-cmenu [role="menuitem"]:focus-visible{outline:2px solid var(--red);outline-offset:-2px}
.wa-root .wa-car .wa-cmenu [role="menuitem"].on{color:var(--red-ink);font-weight:600}
.wa-root .wa-car .wa-cmenu .ic{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:2}
.wa-root .wa-car.wa-cmenu-ouvert{z-index:8}
@keyframes wa-cmenu-in{from{opacity:0;scale:.94}to{opacity:1;scale:1}}
/* le lien copie se dit une seconde et demie */
.wa-root .wa-car .wa-ctoast{position:absolute;z-index:8;left:50%;top:12px;padding:7px 12px;border-radius:100px;background:var(--ink);color:#fff;font-size:13px;font-weight:600;white-space:nowrap;transform:translateX(-50%);pointer-events:none;animation:wa-cmenu-in .16s var(--eo,cubic-bezier(.23,1,.32,1))}

/* --- le corps : l'annee et la marque, le modele, un trait, le prix, les kilometres, la ligne grise --- */
.wa-root .wa-car .wa-car-corps{position:relative;display:flex;flex-direction:column;flex:1 1 auto;min-width:0;padding:14px 16px 15px}
.wa-root .wa-car .wa-car-corps .wa-car-titre{
  display:block;margin:0 0 12px;overflow:visible;-webkit-line-clamp:unset;
  font-family:var(--fd);font-size:inherit;font-weight:inherit;line-height:1.22;letter-spacing:-.01em;
}
.wa-root .wa-car .wa-car-an{display:block;font-size:14.5px;font-weight:500;color:var(--ink-soft);letter-spacing:0}
.wa-root .wa-car .wa-car-mo{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin-top:2px;font-size:18px;font-weight:600;color:var(--ink)}
.wa-root .wa-car .wa-car-lien{color:inherit;text-decoration:none}
.wa-root .wa-car .wa-car-lien::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;border-radius:0 0 13px 13px}
.wa-root .wa-car .wa-car-lien:focus-visible{outline:none}
.wa-root .wa-car .wa-car-lien:focus-visible::after{outline:2px solid var(--red);outline-offset:-3px}
@media (hover:hover){.wa-root .wa-car:hover .wa-car-mo{color:var(--red-ink)}}
.wa-root .wa-car .wa-car-parc{display:inline-flex;align-items:center;gap:6px;margin:-4px 0 14px;font-size:14px;font-weight:600;color:var(--ink-soft)}
.wa-root .wa-car .wa-car-parc .ic{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}
.wa-root .wa-car .wa-car-prixrang{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:4px 12px;margin-top:auto;padding-top:12px;border-top:1px solid var(--line)}
.wa-root .wa-car .wa-car-prix{display:flex;flex-direction:column;min-width:0}
.wa-root .wa-car .wa-car-prix b{font-family:var(--fd);font-size:19px;font-weight:700;line-height:1.15;color:var(--red-ink);letter-spacing:-.015em;font-variant-numeric:tabular-nums;white-space:nowrap}
.wa-root .wa-car .wa-car-prix b small{margin-left:2px;font-size:12px;font-weight:700;letter-spacing:.03em}
.wa-root .wa-car .wa-car-avant{margin-top:3px;color:var(--muted);font-size:13px;font-weight:500;text-decoration-thickness:1.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.wa-root .wa-car .wa-car-adiscuter{font-size:15px;font-weight:600;line-height:1.3;color:var(--ink-soft)}
.wa-root .wa-car .wa-car-km{flex:none;padding-top:2px;font-size:14px;font-weight:500;line-height:1.3;color:var(--ink-soft);font-variant-numeric:tabular-nums;white-space:nowrap}
.wa-root .wa-car .wa-car-faits{margin:9px 0 0;font-size:13px;line-height:1.4;color:var(--muted);overflow-wrap:anywhere}
.wa-root .wa-car .wa-car-note{font-weight:600;color:var(--ink-soft)}

/* --- la grande carte de l'inventaire : sur deux colonnes (des 681 px, comme sa largeur), la photo a gauche --- */
@media (min-width:681px){
  .wa-root .wa-car.feat{flex-direction:row}
  .wa-root .wa-car.feat .ph.wa-car-photo{flex:0 0 55%;aspect-ratio:auto;min-height:280px;border-radius:13px 0 0 13px}
  @supports not (aspect-ratio:1/1){.wa-root .wa-car.feat .ph.wa-car-photo{height:auto;padding-top:0}}
  .wa-root .wa-car.feat .wa-car-corps{padding:22px 24px 20px}
  .wa-root .wa-car.feat .wa-car-lien::after{border-radius:0 13px 13px 0}
  .wa-root .wa-car.feat .wa-car-an{font-size:16px}
  .wa-root .wa-car.feat .wa-car-mo{font-size:clamp(22px,2vw,28px);-webkit-line-clamp:3}
  .wa-root .wa-car.feat .wa-car-prix b{font-size:24px}
}

/* --- le relief au curseur (pied de page) : chaque couche garde sa profondeur --- */
@media (hover:hover) and (pointer:fine){
  .wa-root .wa-tilt .wa-car-corps{transform:translateZ(16px)}
  .wa-root .wa-tilt .wa-cmenu,.wa-root .wa-tilt .wa-ctoast{transform:translateZ(60px)}
}

/* --- les grilles de cartes --------------------------------------------------- */
/* L'inventaire : des rangees egales, dans l'ordre ; une publicite (.wa-adcard) y prend
   exactement une cellule, de la hauteur d'une carte. */
.wa-root .wa-results .wa-cars{grid-auto-flow:row;grid-auto-rows:1fr;gap:24px}
.wa-root .wa-results .wa-cars > .wa-adcard{grid-column:auto / span 1;grid-row:auto / span 1;min-width:0;height:100%;box-sizing:border-box;margin:0;border-radius:14px;padding:24px 22px}
.wa-root .wa-results .wa-cars > .wa-adcard .btn{margin-top:auto}

/* L'accueil : quatre par rangee, deux sous 1100 px, et sur un telephone une rangee qui glisse. */
.wa-root .wa-cars.wa-cars-4{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
@media (max-width:1100.98px){.wa-root .wa-cars.wa-cars-4{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* --- la rangee qui glisse : « Vehicules en vedette », et « En ligne en ce moment » sur un telephone --- */
.wa-root .wa-vedette-piste{
  --wa-vg:20px;list-style:none;margin:0;padding:10px 0 20px;
  display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc((100% - 3 * var(--wa-vg)) / 4);gap:var(--wa-vg);
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;
}
.wa-root .wa-vedette-piste::-webkit-scrollbar{display:none}
.wa-root .wa-vedette-piste > li{display:flex;min-width:0;scroll-snap-align:start}
.wa-root .wa-vedette-piste > li > .wa-car{flex:1 1 auto}
@media (max-width:1100.98px){.wa-root .wa-vedette-piste{grid-auto-columns:calc((100% - 2 * var(--wa-vg)) / 2.3)}}
@media (max-width:720px){
  .wa-root .wa-vedette-piste,
  .wa-root .wa-cars.wa-cars-4{
    --wa-vg:14px;margin-inline:calc(-1 * var(--wa-gout));padding:10px var(--wa-gout) 20px;scroll-padding-inline:var(--wa-gout);
    display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc((100% - var(--wa-vg)) / 1.2);gap:var(--wa-vg);
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;
  }
  .wa-root .wa-cars.wa-cars-4::-webkit-scrollbar{display:none}
  .wa-root .wa-cars.wa-cars-4 > .wa-car{scroll-snap-align:start}
}
/* sous 360 px, la carte prend presque toute la largeur : l'etat du vehicule, sur la photo, tient en entier */
@media (max-width:359px){
  .wa-root .wa-vedette-piste,.wa-root .wa-cars.wa-cars-4{grid-auto-columns:calc((100% - var(--wa-vg)) / 1.1)}
}

/* la tete de la rangee : le surtitre, le titre, et les fleches carrees a droite */
.wa-root .wa-vedette-tete{flex-wrap:nowrap}
.wa-root .wa-vedette-nav{display:flex;gap:8px;flex:none}
.wa-root .wa-vedette-nav[hidden]{display:none}
.wa-root .wa-vedette-nav button{
  width:44px;height:44px;padding:0;display:grid;place-items:center;
  border:1px solid rgba(11,13,19,.32);border:1px solid oklch(0.16 0.012 265/.32);border-radius:8px;background:#fff;color:var(--ink);cursor:pointer;
  transition:background .2s,color .2s,border-color .2s,opacity .2s;
}
.wa-root .wa-vedette-nav button[hidden]{display:none}
.wa-root .wa-vedette-nav button:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.wa-root .wa-vedette-nav button:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.wa-root .wa-vedette-nav button[aria-disabled="true"],.wa-root .wa-vedette-nav button[aria-disabled="true"]:hover{opacity:.35;cursor:default;background:#fff;color:var(--ink);border-color:rgba(11,13,19,.32);border-color:oklch(0.16 0.012 265/.32)}
/* Estompe, il reste atteignable au clavier : au focus, il se montre en entier, son anneau aussi (accessibilite#0). */
.wa-root .wa-vedette-nav button[aria-disabled="true"]:focus-visible{opacity:1}
.wa-root .wa-vedette-nav .ic{width:18px;height:18px}
.wa-root .wa-vedette-nav svg{width:18px;height:18px}
.wa-root .wa-vedette-prec .ic{transform:rotate(180deg)}
.wa-root .wa-vedette-lecture svg{fill:currentColor}
.wa-root .wa-vedette-lecture .lire,.wa-root .wa-vedette-lecture.arrete .pause{display:none}
.wa-root .wa-vedette-lecture.arrete .lire{display:block}
/* sur un telephone, les fleches montent sur la ligne du surtitre et le titre prend toute la largeur dessous :
   a 390 px, serre a cote des fleches, il tombait sur trois lignes (« en » seul sur la deuxieme) */
@media (max-width:720px){
  .wa-root .wa-vedette-tete{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:12px;row-gap:6px}
  .wa-root .wa-vedette-tete > div:first-child{display:contents}
  .wa-root .wa-vedette-tete .eyebrow{grid-column:1;grid-row:1;font-size:12px;letter-spacing:.12em;line-height:1.5}
  .wa-root .wa-vedette-tete .wa-vedette-nav{grid-column:2;grid-row:1}
  .wa-root .wa-vedette-tete h2{grid-column:1 / -1;grid-row:2}
  .wa-root .wa-vedette-nav button{width:40px;height:40px}
}

@media (prefers-reduced-motion:reduce){
  .wa-root .wa-car .wa-cmenu,.wa-root .wa-car .wa-ctoast{animation:none}
  .wa-root .wa-vedette-piste{scroll-behavior:auto}
  .wa-root .wa-car .wa-cgal-points i{transition:none}
}