/* ==========================================================================
   LA BOUTIQUE WAUTOPARC : des accessoires auto vendus par WautoParc.

   Ecrite dans le langage du theme : .wrap, .wa-rhead, .wa-rcarte, .wa-spanel,
   .wa-fa, .wa-empty, .wa-notice, et les jetons de wautoparc-theme.css et
   wa-enhance.css (--ink --ink-soft --paper --paper-2 --muted --line --red
   --red-ink --red-press --fd --focus-halo --shadow-panel --eo). Tout est sous
   .wa-root. Chargee apres wautoparc-enrichi.css, la ou la boutique s'affiche
   (inc/boutique.php, wa_bq_feuille_utile) : ses pages, la fiche d'une annonce
   (les accessoires du vehicule), un article qui en porte, l'espace d'un compte
   (ses commandes), une page qui pose une grille [wa_produits]. L'icone du
   panier de l'entete, l'annonce du pied de page, les etapes, les statuts et
   les champs en erreur servent partout : ils vivent a la fin de
   wautoparc-enrichi.css (seo-perf#2). Les pages suivent OSSATURE.md ; le choix fait est rouge.
   ========================================================================== */

/* --- la carte d'un produit ------------------------------------------------ */
.wa-root .wa-bq-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.wa-root .wa-bq-carte{position:relative;display:flex;flex-direction:column;min-width:0;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:border-color .2s var(--eo),box-shadow .25s var(--eo)}
@media (hover:hover) and (pointer:fine){.wa-root .wa-bq-carte:hover{border-color:var(--ink);box-shadow:var(--shadow-panel)}}
.wa-root .wa-bq-carte .ph{position:relative;display:block;aspect-ratio:4/3;background:var(--paper-2);overflow:hidden}
.wa-root .wa-bq-carte .ph img{width:100%;height:100%;object-fit:cover}
/* Sans aspect-ratio (Chrome et WebView d'Android avant 88) : le rembourrage tient les 4/3 et la photo se pose dessus ;
   sinon le cadre sans photo tomberait a 0 px (responsive-css#1). */
@supports not (aspect-ratio:1/1){.wa-root .wa-bq-carte .ph{height:0;padding-top:75%}.wa-root .wa-bq-carte .ph img{position:absolute;top:0;left:0}}
.wa-root .wa-bq-carte .ph-vide{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;color:var(--muted)}
.wa-root .wa-bq-dessin{width:64px;height:64px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.wa-root .wa-bq-carte .badges{position:absolute;top:10px;left:10px;display:flex;flex-wrap:wrap;gap:6px}
.wa-root .wa-bq-carte .badge{display:inline-flex;align-items:center;padding:5px 10px;border-radius:100px;font-size:12px;font-weight:600;background:var(--ink);color:#fff}
.wa-root .wa-bq-carte .badge.promo{background:var(--red)}
.wa-root .wa-bq-carte .badge.rupture{background:#fff;color:var(--ink);border:1px solid var(--line)}
.wa-root .wa-bq-carte .bd{display:flex;flex-direction:column;gap:6px;flex:1;padding:14px 16px 16px}
.wa-root .wa-bq-carte .rayon{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.wa-root .wa-bq-carte h3{margin:0;font-size:16.5px;line-height:1.28;letter-spacing:-.01em}
.wa-root .wa-bq-carte h3 a{color:var(--ink)}
.wa-root .wa-bq-carte h3 a:hover{color:var(--red-ink)}
.wa-root .wa-bq-carte .compat{margin:0;font-size:13.5px;line-height:1.4;color:var(--ink-soft)}
.wa-root .wa-bq-carte .compat.ok,.wa-root .wa-bq-carte .compat.ko{display:flex;gap:6px;align-items:flex-start;font-weight:600}
.wa-root .wa-bq-carte .compat.ok{color:#005f29;color:oklch(0.42 0.12 152)}
.wa-root .wa-bq-carte .compat.ko{color:var(--muted)}
.wa-root .wa-bq-carte .compat .ic{width:15px;height:15px;margin-top:2px;stroke-width:2.4}
.wa-root .wa-bq-carte .prix{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;margin-top:auto;padding-top:6px}
.wa-root .wa-bq-carte .prix b{font-family:var(--fd);font-size:20px;font-weight:700;letter-spacing:-.01em;color:var(--ink);font-variant-numeric:tabular-nums}
.wa-root .wa-bq-carte .prix small{font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--muted)}
.wa-root .wa-bq-carte .prix .barre{font-size:13.5px;color:var(--muted)}
.wa-root .wa-bq-carte .act{margin-top:6px;display:grid;gap:6px}
.wa-root .wa-bq-carte .act .btn,.wa-root .wa-bq-carte .act .wa-btn-wa{width:100%;justify-content:center}
.wa-root .wa-bq-carte .act .wa-btn-wa{padding:9px 16px;font-size:13.5px}
.wa-root .wa-bq-carte .act .wa-btn-wa .ic{width:17px;height:17px}
/* sur telephone, deux cartes par rangee : on compare d'un coup d'oeil, comme dans un rayon */
@media (max-width:600.98px){
  .wa-root .wa-bq-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .wa-root .wa-bq-carte{border-radius:14px}
  .wa-root .wa-bq-carte .badges{top:8px;left:8px;gap:4px}
  .wa-root .wa-bq-carte .badge{padding:4px 8px;font-size:12px}
  .wa-root .wa-bq-carte .bd{gap:4px;padding:10px 11px 12px}
  .wa-root .wa-bq-carte .rayon{font-size:12px;letter-spacing:.03em}
  .wa-root .wa-bq-carte h3{font-size:14.5px}
  .wa-root .wa-bq-carte .compat{font-size:12.5px}
  .wa-root .wa-bq-carte .prix{gap:2px 6px}
  .wa-root .wa-bq-carte .prix b{font-size:17px}
  .wa-root .wa-bq-carte .prix .barre{font-size:12px}
  .wa-root .wa-bq-carte .act .btn,.wa-root .wa-bq-carte .act .wa-btn-wa{padding:9px 8px;font-size:13px;line-height:1.2;white-space:normal;text-align:center}
  .wa-root .wa-bq-carte .act .ic{display:none}
  .wa-root .wa-bq-carte .ph-vide .wa-bq-dessin{width:48px;height:48px}
}

/* --- l'accueil de la boutique : a droite du menu des rayons, chercher d'abord (la demande d'un
   accessoire introuvable dans un encart, juste dessous), puis le vehicule (facultatif), l'un sous
   l'autre ; la carte du vehicule se met en deux colonnes des que la place le permet : ce qu'elle sert
   a faire a gauche, le formulaire a droite. ------------------------------------------------------ */
.wa-root .wa-bq-planche{position:absolute;width:0;height:0;overflow:hidden}
.wa-root .wa-bq-hub{align-content:start}
.wa-root .wa-bq-avec-menu .wa-rprincipal{grid-template-columns:minmax(0,1fr);gap:18px}
@media (min-width:761px){
  .wa-root .wa-bq-avec-menu .wa-bq-principal > aside > .wa-bq-veh{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);grid-template-rows:auto auto 1fr;column-gap:clamp(24px,3vw,44px);align-content:start}
  .wa-root .wa-bq-avec-menu .wa-bq-principal > aside > .wa-bq-veh > :not(form){grid-column:1}
  .wa-root .wa-bq-avec-menu .wa-bq-principal > aside > .wa-bq-veh > form{grid-column:2;grid-row:1 / span 3}
}
@media (min-width:1280px){
  .wa-root .wa-bq-avec-menu .wa-bq-veh .wa-bq-veh-champs{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,150px)}
  .wa-root .wa-bq-avec-menu .wa-bq-veh .wa-bq-veh-champs > :last-child{grid-column:auto}
}
.wa-root .wa-bq-chercher{margin:0}
.wa-root .wa-bq-chercher label{display:block;font-family:var(--fd);font-weight:600;font-size:clamp(21px,2vw,27px);letter-spacing:-.015em;line-height:1.15;margin-bottom:14px;color:var(--ink)}
.wa-root .wa-bq-champ{display:flex;gap:10px;align-items:stretch}
.wa-root .wa-bq-champ input[type=search]{flex:1 1 auto;min-width:0;font-size:16.5px;padding:15px 18px;-webkit-appearance:none;appearance:none}
.wa-root .wa-bq-champ .btn{flex:none;justify-content:center}
.wa-root .wa-bq-hub-demande{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px}
.wa-root .wa-bq-chercher + .wa-bq-hub-demande{padding:18px 20px;border-radius:14px;background:var(--paper)}
.wa-root .wa-bq-hub-demande p{flex:1 1 320px;margin:0;font-size:15px;line-height:1.5;color:var(--ink-soft)}
.wa-root .wa-bq-hub-demande p b{color:var(--ink)}
.wa-root .wa-bq-hub-demande .btn{flex:none}
/* le vehicule, dans l'aparte : les champs a deux, les boutons en pleine largeur */
.wa-root .wa-bq-veh h3,.wa-root .wa-bq-veh h2{margin:0 0 6px}
.wa-root .wa-bq-veh .wa-bq-veh-aide{margin:0 0 14px}
.wa-root .wa-bq-veh .wa-fa-seg{margin:0 0 12px;border-radius:22px}
.wa-root .wa-bq-veh .wa-fa-seg span{padding:9px 10px;font-size:13.5px}
.wa-root .wa-bq-veh-champs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,150px);gap:12px}
.wa-root .wa-bq-veh .wa-bq-veh-champs{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.wa-root .wa-bq-veh .wa-bq-veh-champs > :last-child{grid-column:1/-1}
.wa-root .wa-bq-veh .wa-rboutons{display:grid;gap:10px;margin-top:14px}
.wa-root .wa-bq-veh .wa-rboutons .btn{width:100%;justify-content:center}
.wa-root .wa-bq-veh .hint{margin:12px 0 0;font-size:13px;color:var(--muted)}
.wa-root .wa-bq-veh [hidden]{display:none}
/* Sur l'accueil de la boutique, le rappel « Il reste enregistre sur cet appareil » est le pied du formulaire. */
.wa-root .wa-bq-principal > aside > .wa-bq-veh .wa-rboutons{margin-bottom:12px}
.wa-root .wa-bq-principal > aside > .wa-bq-veh .hint{padding-top:14px;border-top:1px solid var(--line)}
@media (max-width:720px){
  .wa-root .wa-bq-veh-champs{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .wa-root .wa-bq-veh-champs > :last-child{grid-column:1/-1}
}
/* sur telephone, le bouton de la recherche et celui de la demande passent en pleine largeur */
@media (max-width:600.98px){
  .wa-root .wa-bq-champ{flex-wrap:wrap}
  .wa-root .wa-bq-champ .btn{flex:1 1 100%}
  .wa-root .wa-bq-hub-demande .btn{width:100%;justify-content:center;padding-left:16px;padding-right:16px}
  .wa-root .wa-bq-chercher + .wa-bq-hub-demande{padding:16px 14px}
}
.wa-root .wa-bq-vide .wa-rboutons{justify-content:center;margin-top:6px}
.wa-root .wa-bq-vide p{max-width:52ch}

/* --- le menu lateral des rayons : la page Boutique, le catalogue, un rayon, une marque ----------------------
   A l'ecran (1 024 px et plus), une colonne collee sous l'entete fixe, qui defile seule si elle depasse ; au
   telephone et a la tablette, un volet que le bouton « Rayons » ouvre (wa-boutique.js, menuRayons). Sans
   script, le menu reste une liste dans la page. Les entrees sont des boites de rayon (.wa-rboite) mises en
   ligne : l'icone, le nom, le nombre de produits en ligne ; le rayon courant (aria-current) prend le rouge. */
.wa-root .wa-bq-avec-menu,.wa-root .wa-bq-contenu{min-width:0}
.wa-root .wa-bq-lateral{background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px 10px 10px}
.wa-root .wa-bq-lateral-tete{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:2px 10px 8px}
.wa-root .wa-bq-lateral-t{margin:0;font-family:inherit;font-size:13px;font-weight:600;line-height:1.3;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.wa-root .wa-bq-lateral-x{display:none;align-items:center;gap:6px;min-height:44px;padding:8px 16px 8px 12px;border:1px solid var(--line);border-radius:100px;background:#fff;color:var(--ink);font:inherit;font-size:14.5px;font-weight:600;cursor:pointer}
.wa-root .wa-bq-lateral-x .ic{width:18px;height:18px;stroke-width:2.2;stroke-linecap:round}
.wa-root .wa-bq-lateral .wa-bq-rayons{display:block}
.wa-root .wa-bq-lateral ul{list-style:none;margin:0;padding:0}
.wa-root .wa-bq-lateral li{margin:0;padding:0}
.wa-root .wa-bq-lateral ul.wa-bq-lateral-plus{margin:8px 0 0;padding:8px 0 0;border-top:1px solid var(--line)}
.wa-root .wa-bq-lateral .wa-bq-rayons a{display:flex;align-items:center;justify-content:flex-start;gap:10px;min-height:44px;padding:8px 10px;border:0;border-radius:10px;background:none;color:var(--ink);font-family:inherit;font-size:14.5px;font-weight:500;line-height:1.25;text-align:left;text-decoration:none;transform:none;transition:background-color .2s var(--eo),color .2s var(--eo)}
.wa-root .wa-bq-lateral .wa-bq-rayons a .ic{width:20px;height:20px;flex:none;color:var(--ink-soft);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wa-root .wa-bq-lateral .wa-bq-rayons .nom{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.wa-root .wa-bq-lateral .wa-bq-rayons .n{flex:none;margin-left:auto;padding-left:6px;font-size:13px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.wa-root .wa-bq-lateral .wa-bq-rayons .wa-bq-tous{font-weight:600}
.wa-root .wa-bq-lateral .wa-bq-rayons a:hover{background:var(--paper-2);transform:none}
.wa-root .wa-bq-lateral .wa-bq-rayons a:hover .ic{color:var(--red)}
.wa-root .wa-bq-lateral .wa-bq-rayons a[aria-current]{background:rgba(223,41,46,.08);background:oklch(0.585 0.215 26/.08);color:var(--red-ink);font-weight:600;box-shadow:inset 3px 0 0 var(--red)}
.wa-root .wa-bq-lateral .wa-bq-rayons a[aria-current] .ic,.wa-root .wa-bq-lateral .wa-bq-rayons a[aria-current] .n{color:var(--red-ink)}
.wa-root .wa-bq-lateral a:focus-visible,.wa-root .wa-bq-lateral-x:focus-visible,.wa-root .wa-bq-menu-bouton:focus-visible{outline:2px solid var(--red);outline-offset:2px}
/* le bouton « Rayons », en tete du contenu : la pilule du bouton « Filtres » */
.wa-root .wa-bq-menu-bouton{display:none;align-items:center;gap:8px;min-height:44px;padding:10px 20px 10px 16px;border:1px solid var(--line);border-radius:100px;background:#fff;color:var(--ink);font:inherit;font-size:15px;font-weight:600;cursor:pointer}
.wa-root .wa-bq-menu-bouton .ic{width:18px;height:18px;stroke-width:1.9}
.wa-root .wa-bq-contenu > .wa-bq-menu-bouton{margin:0 0 18px}
/* le voile du volet, pose par le script a cote du menu : jamais dans la grille de l'ecran large */
.wa-root .wa-bq-voile{display:none}
@media (min-width:1024px){
  .wa-root .wa-bq-avec-menu{display:grid;grid-template-columns:minmax(0,264px) minmax(0,1fr);gap:clamp(24px,2.4vw,40px);align-items:start}
  .wa-root .wa-bq-lateral{position:sticky;top:calc(var(--wa-entete-bas) + 16px);max-height:calc(100vh - var(--wa-entete-bas) - 32px);overflow-y:auto;overscroll-behavior:contain}
  .wa-root .wa-bq-catalogue .wa-bq-lateral{margin-top:10px}
}
@media (min-width:1024px) and (max-width:1279.98px){
  /* Le catalogue : a cote du menu, les filtres passent dans leur panneau, ouvert par « Filtres », comme sur la tablette. */
  .wa-root .wa-bq-avec-menu .wa-results{grid-template-columns:minmax(0,1fr)}
  .wa-root .wa-bq-avec-menu .wa-fside{display:none;position:static}
  .wa-root .wa-bq-avec-menu .wa-fside.open{display:block}
  .wa-root .wa-bq-avec-menu .wa-mobtoggle{display:inline-flex;align-items:center;gap:8px;min-height:44px;border:1px solid var(--line);border-radius:100px;padding:11px 20px;font:inherit;font-weight:600;font-size:15px;cursor:pointer;background:#fff;color:var(--ink)}
  .wa-root .wa-bq-avec-menu .wa-mobtoggle .ic{width:17px;height:17px}
}
@media (min-width:1280px){.wa-root .wa-bq-avec-menu .wa-results{grid-template-columns:250px minmax(0,1fr);gap:28px}}
@media (max-width:1023.98px){
  /* Sans script : la liste, avant le contenu (sur deux colonnes des 600 px). */
  .wa-root .wa-bq-lateral{margin:0 0 24px}
  /* Avec script : le bouton en tete du contenu, le menu en volet sur la gauche, par-dessus un voile. */
  html.wa-bq-menu-js .wa-root .wa-bq-menu-bouton{display:inline-flex}
  html.wa-bq-menu-js .wa-root .wa-bq-lateral{display:none}
  html.wa-bq-menu-js .wa-root .wa-bq-lateral.ouvert{display:block;position:fixed;z-index:90;top:0;bottom:0;left:0;width:min(360px,88vw);margin:0;padding:14px 12px calc(20px + env(safe-area-inset-bottom,0px));border:0;border-radius:0 18px 18px 0;box-shadow:0 0 60px rgba(11,13,19,.35);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  html.wa-bq-menu-js .wa-root .wa-bq-lateral.ouvert .wa-bq-lateral-tete{padding:0 0 10px 10px}
  html.wa-bq-menu-js .wa-root .wa-bq-lateral.ouvert .wa-bq-lateral-x{display:inline-flex}
  html.wa-bq-menu-js .wa-root .wa-bq-lateral.ouvert .wa-bq-rayons a{min-height:48px}
  .wa-root .wa-bq-voile.on{display:block;position:fixed;z-index:89;top:0;right:0;bottom:0;left:0;background:rgba(11,13,19,.55);background:oklch(0.16 0.012 265/.55);touch-action:none}
  html.wa-bq-menu-ouvert,html.wa-bq-menu-ouvert body{overflow:hidden}
}
@media (min-width:601px) and (max-width:1023.98px){
  html:not(.wa-bq-menu-js) .wa-root .wa-bq-lateral .wa-bq-rayons > ul:first-child{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px}
}
@media (max-width:1023.98px) and (prefers-reduced-motion:no-preference){
  html.wa-bq-menu-js .wa-root .wa-bq-lateral.ouvert{animation:wa-bq-volet .26s var(--eo)}
  @keyframes wa-bq-volet{from{transform:translateX(-24px);opacity:0}}
}

/* --- le catalogue ------------------------------------------------------------ */
.wa-root .wa-bq-catalogue .wa-results{padding-top:10px}
.wa-root .wa-bq-catalogue #wa-rescol{min-width:0}
.wa-root .wa-bq-catalogue .wa-fside .wa-fcard{padding-top:16px}
.wa-root .wa-bq-catalogue .wa-fsearch-main{margin:0 16px 14px}
.wa-root .wa-bq-catalogue .wa-fb .wa-chk.enfant{padding-left:22px;font-size:14px}
.wa-root .wa-bq-catalogue .wa-rtop .wa-bq-vehchip{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:100px;background:var(--paper-2);font-size:13.5px;font-weight:600;color:var(--ink)}
.wa-root .wa-bq-catalogue .wa-rtop .wa-bq-vehchip a{color:var(--red-ink);text-decoration:underline;text-underline-offset:3px}
.wa-root .wa-bq-catalogue .wa-rtop .wa-bq-vehchip[hidden]{display:none}
.wa-root .wa-bq-catalogue .wa-rtop .wa-mobtoggle .ic{stroke:currentColor;fill:none}
.wa-root .wa-bq-catalogue .wa-fhead h3 .ic{stroke:currentColor;fill:none}
/* « Filtres » est le h2 de sa colonne (accessibilite#4), dessine comme l'etait son h3 (wautoparc-theme.css, wa-enhance.css) ; la classe h3 lui garde en production la hauteur de ligne du theme parent. Le h2 des filtres de l'inventaire (.wa-flt-tete) a les siennes. */
.wa-root .wa-bq-catalogue .wa-fhead h2{display:flex;align-items:center;gap:9px;margin:0;font-weight:600;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase}
.wa-root .wa-bq-catalogue .wa-fhead h2 .ic{display:none;width:18px;height:18px;stroke-width:2;stroke:currentColor;fill:none}
.wa-root .wa-bq-catalogue .wa-fhead h2 .fcount{background:var(--red);color:#fff;font-size:12px;font-weight:700;min-width:20px;height:20px;padding:0 6px;border-radius:100px;display:inline-grid;place-items:center;margin-left:2px}
.wa-root .wa-bq-catalogue .wa-fsearch-main svg{stroke:currentColor;fill:none;width:18px;height:18px}
.wa-root .wa-bq-catalogue .wa-fapply .btn{justify-content:center}
.wa-root .wa-bq-catalogue .wa-empty{margin-top:4px}
.wa-root .wa-bq-catalogue .wa-bq-reinit{margin-top:14px;text-align:center}
.wa-root .wa-bq-catalogue .wa-pag{margin-top:34px}
.wa-root .wa-bq-catalogue .rcount strong{color:var(--ink)}
/* Le nombre d'accessoires est un h2 (accessibilite#4) : il garde le dessin de la ligne qu'il etait. */
.wa-root .wa-bq-catalogue .wa-rtop h2.rcount{margin-top:0;margin-bottom:0;font-family:inherit;font-weight:inherit;font-style:inherit;letter-spacing:inherit;line-height:inherit;text-align:inherit}
/* le script applique chaque filtre sur ordinateur ; le panneau du telephone garde son bouton */
.wa-root .wa-bq-catalogue.wa-bq-auto .wa-fapply{display:none}
.wa-root .wa-bq-catalogue.wa-bq-auto .wa-fside.open .wa-fapply{display:grid}

/* --- la fiche produit --------------------------------------------------------- */
.wa-root .wa-bq-fiche .wa-gal .main{display:grid;place-items:center}
.wa-root .wa-bq-fiche .wa-thumbs img{width:100%;height:auto}
/* Chaque vignette est un bouton (accessibilite#8), dessine comme sur la fiche d'un vehicule : 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-bq-fiche .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-bq-fiche .wa-thumbs .wa-thumb img{display:block}
.wa-root .wa-bq-fiche .wa-thumbs .wa-thumb[aria-pressed="true"] img{opacity:1}.wa-root .wa-bq-fiche .wa-thumbs .wa-thumb:focus-visible img{opacity:1}
.wa-root .wa-bq-fiche .wa-thumbs .wa-thumb[aria-pressed="true"] img{border-color:var(--red)}
.wa-root .wa-bq-fiche .wa-gal .ph-vide{display:grid;place-items:center;width:100%;height:100%;color:var(--muted);background:var(--paper-2)}
.wa-root .wa-bq-fiche .wa-gal .ph-vide .wa-bq-dessin{width:110px;height:110px;stroke-width:1.2}
.wa-root .wa-bq-compat-etat{display:flex;gap:12px;align-items:flex-start;margin:0 0 14px;padding:14px 16px;background:#fff;border:1px solid var(--line);border-left:3px solid var(--ink);border-radius:12px}
.wa-root .wa-bq-compat-etat[hidden]{display:none}
.wa-root .wa-bq-compat-etat .ic{width:22px;height:22px;flex:none;margin-top:1px}
.wa-root .wa-bq-compat-etat p{margin:0;font-size:15px;line-height:1.5;color:var(--ink-soft)}
.wa-root .wa-bq-compat-etat b{color:var(--ink)}
.wa-root .wa-bq-compat-etat a{color:var(--red-ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.wa-root .wa-bq-compat-etat.ok{border-left-color:#0ea053;border-left-color:oklch(0.62 0.16 152)}
.wa-root .wa-bq-compat-etat.ok .ic{color:#007938;color:oklch(0.5 0.14 152)}
.wa-root .wa-bq-compat-etat.ko{border-left-color:var(--red)}
.wa-root .wa-bq-compat-etat.ko .ic{color:var(--red)}
.wa-root .wa-bq-regles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.wa-root .wa-bq-regles li{padding:10px 14px;background:#fff;border:1px solid var(--line);border-radius:10px;font-size:14.5px;font-weight:600;color:var(--ink)}
/* le tableau des caracteristiques : un libelle, une valeur, par ligne */
.wa-root .wa-bq-carac{width:100%;border-collapse:separate;border-spacing:0;margin:0;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;font-size:15px}
.wa-root .wa-bq-carac th,.wa-root .wa-bq-carac td{padding:12px 16px;text-align:left;vertical-align:middle;font-family:inherit;font-size:15px;line-height:1.45;border:0;border-bottom:1px solid var(--line)}
.wa-root .wa-bq-carac tr:last-child th,.wa-root .wa-bq-carac tr:last-child td{border-bottom:0}
.wa-root .wa-bq-carac th{width:38%;font-weight:600;color:var(--ink-soft);background:var(--paper)}
.wa-root .wa-bq-carac td{color:var(--ink);overflow-wrap:anywhere}
@media (max-width:480px){.wa-root .wa-bq-carac th,.wa-root .wa-bq-carac td{padding:10px 12px;font-size:14px}.wa-root .wa-bq-carac th{width:42%}}
.wa-root .wa-bq-fiche .wa-rnote{margin:0 0 6px}
.wa-root .wa-bq-fiche .wa-desc{margin-top:26px}
.wa-root .wa-bq-fiche .wa-desc p{margin:0 0 12px}
.wa-root .wa-bq-tarifs{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.wa-root .wa-bq-tarifs li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:14.5px;line-height:1.45;color:var(--ink-soft)}
.wa-root .wa-bq-tarifs li b{flex:none;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.wa-root .wa-bq-fiche .wa-rcartes .wa-rcarte .hint{font-size:13.5px;color:var(--muted);margin:12px 0 0}
.wa-root .wa-bq-fiche .wa-rcoches li b{color:var(--ink)}
.wa-root .wa-bq-fiche .wa-sbadges .wa-sbadge.promo{color:var(--red-ink)}
.wa-root .wa-bq-meme{margin-top:clamp(40px,5vw,64px)}
/* l'achat, dans l'aparte */
.wa-root .wa-bq-avant{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:0 0 4px;font-size:14px;color:var(--muted)}
.wa-root .wa-bq-avant s{font-variant-numeric:tabular-nums}
.wa-root .wa-bq-remise{padding:2px 8px;border-radius:6px;background:var(--red);color:#fff;font-size:12.5px;font-weight:700}
.wa-root .wa-bq-fin{flex-basis:100%;font-size:13px}
.wa-root .wa-bq-achat{display:grid;gap:10px;margin-top:16px}
.wa-root .wa-bq-achat .wa-bq-stock{margin-bottom:2px}
.wa-root .wa-bq-achat-ligne{display:flex;gap:10px;align-items:stretch}
.wa-root .wa-bq-achat-ligne .btn{flex:1 1 auto;justify-content:center;min-width:0}
.wa-root .wa-bq-achat .btn,.wa-root .wa-bq-achat .wa-btn-wa,.wa-root .wa-bq-achat .wa-ghost-wa{justify-content:center;width:100%}
.wa-root .wa-bq-achat-ligne .btn{width:auto;padding-left:16px;padding-right:16px;white-space:nowrap}
.wa-root .wa-bq-achat .wa-bq-qte button{width:40px}
.wa-root .wa-bq-achat .wa-bq-qte input{width:40px}
.wa-root .wa-bq-titre-prix{display:none;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-top:12px}
.wa-root .wa-bq-titre-prix b{font-family:var(--fd);font-size:26px;font-weight:700;letter-spacing:-.01em;color:var(--ink);font-variant-numeric:tabular-nums}
.wa-root .wa-bq-titre-prix small{font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--muted)}
.wa-root .wa-bq-titre-prix s{font-size:14px;color:var(--muted)}
.wa-root .wa-bq-titre-prix .wa-bq-stock{margin-left:auto;font-size:14px}
@media (max-width:980.98px){.wa-root .wa-bq-titre-prix{display:flex}}
.wa-root .wa-bq-achat .wa-notice{margin:0;font-size:14px}
.wa-root .wa-bq-vendeur .wa-rcoches{margin-top:12px}
@media (max-width:430px){.wa-root .wa-bq-achat-ligne{flex-wrap:wrap}.wa-root .wa-bq-achat-ligne .btn{width:100%}}
/* la barre d'achat du telephone */
.wa-root .wa-bq-fiche + .wa-buybar .btn,.wa-buybar#wa-bq-buybar .btn{padding:11px 18px;font-size:15px;flex:none}

/* --- le stock, la quantite -------------------------------------------------------- */
.wa-root .wa-bq-stock{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600}
.wa-root .wa-bq-stock::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.wa-root .wa-bq-stock.ok{color:#005f29;color:oklch(0.42 0.12 152)}
.wa-root .wa-bq-stock.bas{color:#864900;color:oklch(0.47 0.11 60)}
.wa-root .wa-bq-stock.rupture{color:var(--red-ink)}
.wa-root .wa-bq-qte{display:inline-flex;align-items:stretch;flex:none;height:46px;background:#fff;border:1px solid var(--line);border-radius:100px;overflow:hidden}
.wa-root .wa-bq-qte button{width:44px;padding:0;border:0;background:none;color:var(--ink);font:inherit;font-size:20px;font-weight:600;line-height:1;cursor:pointer}
.wa-root .wa-bq-qte button:hover{background:var(--paper-2)}
.wa-root .wa-bq-qte button:disabled{color:var(--muted);cursor:not-allowed;background:none;opacity:1;filter:none}
.wa-root .wa-bq-qte button:focus-visible{outline:2px solid var(--red);outline-offset:-2px}
.wa-root .wa-bq-qte input{width:46px;padding:0;border:0;background:transparent;text-align:center;font:inherit;font-size:16px;font-weight:600;color:var(--ink);-moz-appearance:textfield;appearance:textfield}
.wa-root .wa-bq-qte input::-webkit-inner-spin-button,.wa-root .wa-bq-qte input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.wa-root .wa-bq-qte input:focus{outline:none;box-shadow:inset 0 0 0 2px var(--red)}
.wa-root .wa-bq-qte.petit{height:40px}
.wa-root .wa-bq-qte.petit button{width:40px;font-size:18px}
.wa-root .wa-bq-qte.petit input{width:40px;font-size:15px}

/* --- une colonne de cartes : l'espace entre ce qui se voit ------------------------------ */
.wa-root .wa-bq-colonne{min-width:0}
.wa-root .wa-bq-colonne > :not([hidden]) ~ :not([hidden]){margin-top:18px}
.wa-root .wa-bq-colonne > .wa-notice{margin-bottom:0}
.wa-root .wa-bq-colonne > .wa-notice a{font-weight:600;text-decoration:underline;text-underline-offset:3px}
/* Dans le bloc principal, la derniere carte de la colonne descend jusqu'au bas de l'aparte : sur le suivi
   d'une commande, la carte de recherche finissait 38 px plus haut et ouvrait un trou avant la section. */
.wa-root .wa-rprincipal > .wa-bq-colonne{display:flex;flex-direction:column}
.wa-root .wa-rprincipal > .wa-bq-colonne > .wa-rcarte:last-child{flex-grow:1}

/* --- le panier ------------------------------------------------------------------------ */
.wa-root .wa-bq-panier{display:grid;gap:12px;min-width:0}
.wa-root .wa-bq-panier[hidden],.wa-root .wa-bq-panier-vide[hidden],.wa-root .wa-bq-recap [hidden]{display:none}
.wa-root .wa-bq-lien-bouton{padding:0;border:0;background:none;color:var(--red-ink);font:inherit;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.wa-root .wa-bq-panier .wa-notice{margin:0}
.wa-root .wa-bq-ligne{display:flex;gap:14px;align-items:flex-start;min-width:0;padding:12px 14px;background:#fff;border:1px solid var(--line);border-radius:16px}
.wa-root .wa-bq-ligne .ph{flex:none;display:grid;place-items:center;width:76px;height:76px;border-radius:12px;background:var(--paper-2);color:var(--muted);overflow:hidden}
.wa-root .wa-bq-ligne .ph img{width:100%;height:100%;object-fit:cover}
.wa-root .wa-bq-ligne .ph .wa-bq-dessin{width:40px;height:40px}
.wa-root .wa-bq-ligne .corps{flex:1;min-width:0}
.wa-root .wa-bq-ligne .haut{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.wa-root .wa-bq-ligne .nom{font-weight:600;line-height:1.3;color:var(--ink);overflow-wrap:anywhere}
.wa-root .wa-bq-ligne .nom:hover{color:var(--red-ink)}
.wa-root .wa-bq-ligne .total{flex:none;font-family:var(--fd);font-size:17px;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--ink)}
.wa-root .wa-bq-ligne .meta{display:block;margin-top:3px;font-size:13px;color:var(--muted)}
.wa-root .wa-bq-ligne .meta s{margin-left:4px}
.wa-root .wa-bq-ligne .bas{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-top:10px}
.wa-root .wa-bq-ligne .x{padding:8px 4px;border:0;background:none;color:var(--ink-soft);font:inherit;font-size:14px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.wa-root .wa-bq-ligne .x:hover{color:var(--red-ink)}
.wa-root .wa-bq-ligne.retire{opacity:.6}
.wa-root .wa-bq-squelette{height:102px;border-radius:16px;background:linear-gradient(90deg,var(--paper-2),#fff,var(--paper-2));background-size:200% 100%;animation:wa-bq-luit 1.2s linear infinite}
@keyframes wa-bq-luit{from{background-position:200% 0}to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.wa-root .wa-bq-squelette{animation:none}}
@media (max-width:430px){.wa-root .wa-bq-ligne{padding:12px;gap:12px}.wa-root .wa-bq-ligne .ph{width:60px;height:60px}}
/* le recapitulatif, a cote du panier et de la commande */
.wa-root .wa-bq-recap h3,.wa-root .wa-bq-recap h2{margin:0 0 12px}
.wa-root .wa-bq-recap-lignes{list-style:none;margin:0 0 4px;padding:0;display:grid;gap:8px}
.wa-root .wa-bq-recap-lignes li{display:flex;justify-content:space-between;gap:12px;font-size:14px;line-height:1.4;color:var(--ink-soft)}
.wa-root .wa-bq-recap-lignes li b{color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.wa-root .wa-bq-recap-lignes li.vide{color:var(--muted)}
.wa-root .wa-bq-totaux{display:grid;gap:8px;margin:14px 0 16px}
.wa-root .wa-bq-totaux > div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:15px;color:var(--ink-soft)}
.wa-root .wa-bq-totaux b{color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.wa-root .wa-bq-totaux .total{padding-top:10px;border-top:1px solid var(--line);font-size:16px;font-weight:600;color:var(--ink)}
.wa-root .wa-bq-totaux .total b{font-family:var(--fd);font-size:22px;letter-spacing:-.01em}
.wa-root .wa-bq-recap > .btn + .wa-btn-wa,.wa-root .wa-bq-recap > .btn + .btn{margin-top:10px}
/* un bouton inactif reste lisible : grise, pas efface (le panier vide, la commande sans panier) */
.wa-root .wa-bq-recap .btn[aria-disabled="true"],.wa-root .wa-bq-commande .wa-fa-envoi .btn:disabled:not([aria-busy="true"]){opacity:1;filter:none;background:var(--paper-2);border-color:var(--line);color:var(--ink-soft);box-shadow:none}
.wa-root .wa-bq-recap .hint{margin:12px 0 0;font-size:13.5px;color:var(--muted);text-align:center}
.wa-root .wa-bq-recap .wa-rlink{display:inline-block;margin-top:14px}
.wa-root .wa-bq-franco{margin:-6px 0 14px;font-size:13.5px;line-height:1.5;color:var(--ink-soft)}
.wa-root .wa-bq-franco b{color:var(--ink)}
.wa-root .wa-bq-recap .wa-bq-note{margin:-6px 0 14px;font-size:13.5px;line-height:1.5;color:var(--ink-soft)}
.wa-root .wa-bq-recap .wa-bq-note[hidden],.wa-root .wa-bq-franco[hidden]{display:none}
@media (min-width:961px){.wa-root .wa-bq-recap{position:sticky;top:calc(110px + var(--wa-utile-h,0px))}}

/* --- la commande ---------------------------------------------------------------------- */
.wa-root .wa-bq-commande .wa-fa-seg{margin-bottom:4px;border-radius:22px}
.wa-root .wa-bq-commande .wa-fa-seg + .wa-bq-err{margin:6px 0 0}
.wa-root .wa-bq-commande .wa-fa-seg + .wa-fa-grille,.wa-root .wa-bq-demande .wa-fa-seg + .wa-fa-grille{margin-top:16px}
.wa-root .wa-bq-demande .wa-fa-bloc > .wa-fa-champ ~ .wa-fa-champ,.wa-root .wa-bq-commande .wa-fa-bloc > .wa-fa-champ ~ .wa-fa-champ{margin-top:16px}
.wa-root .wa-bq-total-envoi{flex-basis:100%;margin:0;font-size:16px;color:var(--ink-soft)}
.wa-root .wa-bq-total-envoi b{font-family:var(--fd);font-size:20px;color:var(--ink);font-variant-numeric:tabular-nums}
@media (min-width:961px){.wa-root .wa-bq-total-envoi{display:none}}
.wa-root .wa-bq-mode{margin-top:18px}
.wa-root .wa-bq-mode .wa-fa-champ + .wa-fa-champ{margin-top:16px}
.wa-root .wa-bq-mode p.wa-bq-info{margin:0;padding:12px 14px;background:var(--paper);border:1px solid var(--line);border-radius:12px;font-size:14.5px;line-height:1.55;color:var(--ink-soft)}
.wa-root .wa-bq-mode p.wa-bq-info b{color:var(--ink)}
.wa-root .wa-bq-paie-aide{display:flex;gap:9px;align-items:flex-start;margin:12px 0 0;font-size:14px;line-height:1.5;color:var(--ink-soft)}
.wa-root .wa-bq-paie-aide .ic{width:18px;height:18px;margin-top:1px;color:var(--red)}
.wa-root .wa-bq-paie-aide:empty{display:none}
.wa-root .wa-bq-err{display:block;margin-top:6px;font-size:13px;line-height:1.4;color:var(--red-press)}
.wa-root .wa-bq-err[hidden]{display:none}
.wa-root .wa-bq-commande .wa-fa-envoi .wa-notice{flex-basis:100%;margin:0}
.wa-root .wa-bq-commande .wa-fa-envoi .wa-notice[hidden]{display:none}
.wa-root .wa-bq-ferme .wa-rboutons{margin-top:14px}
.wa-root .wa-bq-commande .cf-turnstile{margin:0}
@media (max-width:640.98px){.wa-root .wa-bq-commande .wa-fa-envoi .btn{width:100%;min-width:0}}

/* --- le recu et le suivi ---------------------------------------------------------------- */
.wa-root .wa-bq-afaire > h3,.wa-root .wa-bq-afaire > h2{margin-bottom:4px}
.wa-root .wa-bq-afaire .wa-rboutons{margin-top:6px}
.wa-root .wa-bq-afaire .wa-retapes > li{align-items:center}
.wa-root .wa-bq-recu-tete h1 em{white-space:nowrap}
.wa-root .wa-bq-suivi-bloc{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.wa-root .wa-rcarte > .wa-bq-suivi-bloc:first-child{margin-top:0;padding-top:0;border-top:0}
.wa-root .wa-bq-suivi-tete{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.wa-root .wa-bq-suivi-no{font-size:14px;color:var(--ink-soft)}
.wa-root .wa-bq-suivi-no b{color:var(--ink)}
/* La frise d'une commande : chaque etape a son pictogramme ; la ligne rouge court jusqu'a l'etape en cours, qui
   bat doucement ; les etapes faites prennent la coche. A l'ouverture, la ligne se trace d'une etape a l'autre. */
.wa-root .wa-bq-suivi{list-style:none;margin:20px 0 18px;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
.wa-root .wa-bq-suivi li{position:relative;margin:0;padding:50px 4px 0;text-align:center;font-size:13.5px;line-height:1.35;color:var(--muted)}
.wa-root .wa-bq-suivi li::before{content:"";position:absolute;top:16.5px;left:0;right:0;height:3px;background:var(--line)}
.wa-root .wa-bq-suivi li:first-child::before{left:50%}
.wa-root .wa-bq-suivi li:last-child::before{right:50%}
.wa-root .wa-bq-suivi .pt{position:absolute;z-index:1;top:0;left:50%;display:grid;place-items:center;width:36px;height:36px;margin-left:-18px;border-radius:50%;background:#fff;border:2px solid var(--line);color:var(--muted)}
.wa-root .wa-bq-suivi .pt .ic{width:16px;height:16px}
.wa-root .wa-bq-suivi b{display:block;font-weight:600;color:inherit}
.wa-root .wa-bq-suivi small{display:block;margin-top:2px;font-size:12px;color:var(--ink-soft)}
.wa-root .wa-bq-suivi li.fait{color:var(--ink)}
.wa-root .wa-bq-suivi li.fait::before{background:var(--red)}
.wa-root .wa-bq-suivi li.fait .pt{background:var(--red);border-color:var(--red);color:#fff}
.wa-root .wa-bq-suivi li.fait .pt .ic{stroke-width:2.6}
.wa-root .wa-bq-suivi li.encours{color:var(--ink)}
.wa-root .wa-bq-suivi li.encours .pt{border-color:var(--red);color:var(--red-ink);box-shadow:0 0 0 5px rgba(223,41,46,.13);box-shadow:0 0 0 5px oklch(0.585 0.215 26/.13)}
.wa-root .wa-bq-suivi li.encours b{color:var(--red-ink)}
@media (prefers-reduced-motion:no-preference){
  .wa-root .wa-bq-suivi .pt{animation:wa-bq-point .45s cubic-bezier(.3,1.5,.5,1) backwards;animation-delay:calc(var(--i,0) * .2s + .1s)}
  .wa-root .wa-bq-suivi li.fait::before{transform-origin:0 50%;animation:wa-bq-trait .45s cubic-bezier(.65,0,.35,1) backwards;animation-delay:calc(var(--i,0) * .2s + .25s)}
  .wa-root .wa-bq-suivi li.encours .pt::after{content:"";position:absolute;top:-2px;left:-2px;right:-2px;bottom:-2px;border-radius:50%;border:2px solid var(--red);opacity:0;animation:wa-bq-pouls 2.4s cubic-bezier(.2,.6,.3,1) 1.2s infinite}
}
@keyframes wa-bq-point{from{transform:scale(.4);opacity:0}}
@keyframes wa-bq-trait{from{transform:scaleX(0)}}
@keyframes wa-bq-trait-v{from{transform:scaleY(0)}}
@keyframes wa-bq-pouls{from{transform:scale(1);opacity:.55}to{transform:scale(1.8);opacity:0}}
@media (max-width:640.98px){
  .wa-root .wa-bq-suivi{grid-auto-flow:row;grid-auto-columns:auto;gap:0}
  .wa-root .wa-bq-suivi li{min-height:36px;padding:7px 0 18px 50px;text-align:left}
  .wa-root .wa-bq-suivi li::before{top:0;bottom:0;left:16.5px;right:auto;width:3px;height:auto}
  .wa-root .wa-bq-suivi li:first-child::before{left:16.5px;top:18px}
  .wa-root .wa-bq-suivi li:last-child::before{right:auto;bottom:auto;height:18px}
  .wa-root .wa-bq-suivi .pt{left:0;margin-left:0}
  .wa-root .wa-bq-suivi li.fait::before{transform-origin:50% 0;animation-name:wa-bq-trait-v}
}
.wa-root .wa-bq-cmd-lignes{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.wa-root .wa-bq-cmd-lignes li{display:flex;justify-content:space-between;gap:12px;font-size:14.5px;line-height:1.45;color:var(--ink-soft)}
.wa-root .wa-bq-cmd-lignes li b{color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.wa-root .wa-bq-cmd-lignes small{color:var(--muted);font-size:12.5px;margin-left:4px}
.wa-root .wa-bq-cmd-infos{display:grid;gap:10px;margin:0;padding:14px 0 0;border-top:1px solid var(--line)}
.wa-root .wa-bq-cmd-infos div{display:grid;grid-template-columns:90px 1fr;gap:12px;font-size:14.5px;line-height:1.5}
.wa-root .wa-bq-cmd-infos dt{margin:0;font-weight:600;color:var(--ink)}
.wa-root .wa-bq-cmd-infos dd{margin:0;color:var(--ink-soft);overflow-wrap:anywhere}
.wa-root .wa-bq-lien{display:flex;gap:8px;margin:0 0 12px}
.wa-root .wa-bq-lien input{flex:1;min-width:0;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:var(--paper);font:inherit;font-size:13px;color:var(--ink-soft)}
.wa-root .wa-bq-lien .btn{flex:none;padding:11px 16px;font-size:14px}
.wa-root .wa-bq-copie{margin:-4px 0 12px;font-size:13px;color:#005f29;color:oklch(0.42 0.12 152)}
.wa-root .wa-bq-copie[hidden]{display:none}
.wa-root .wa-bq-suivi-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;margin-top:6px}
.wa-root .wa-bq-suivi-form .wa-rboutons{grid-column:1/-1;margin-top:2px}
@media (max-width:640.98px){.wa-root .wa-bq-suivi-form{grid-template-columns:1fr}.wa-root .wa-bq-suivi-form .btn{width:100%;justify-content:center}}
.wa-root .wa-bq-suivi-form + .wa-warn{margin-top:16px}

.wa-root .wa-bq-drow .m{overflow-wrap:anywhere}

/* --- l'accessoire sur demande --------------------------------------------------------------- */
.wa-root .wa-bq-photo .lbl small{font-weight:500;color:var(--muted)}
.wa-root .wa-bq-photo .wa-fa-photos-boutons{margin:2px 0 4px}
.wa-root .wa-bq-photo-choix{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:8px 0 0;font-size:14px;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.wa-root .wa-bq-photo-x{padding:4px 2px;border:0;background:none;color:var(--red-ink);font:inherit;font-size:13.5px;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.wa-root .wa-bq-demande .wa-notice{flex-basis:100%;margin:0}
.wa-root .wa-bq-demande .wa-notice[hidden]{display:none}
.wa-root .wa-bq-demande .wa-notice .wa-btn-wa{margin-top:10px}

/* --- les blocs poses ailleurs : la fiche d'une annonce, un article ------------------------------ */
.wa-root .wa-bq-annonce,.wa-root .wa-bq-article{margin-top:42px}
.wa-root .wa-bq-annonce .wa-bq-grid,.wa-root .wa-bq-article .wa-bq-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.wa-root .wa-bq-annonce .wa-rhead h2,.wa-root .wa-bq-article .wa-rhead h2,.wa-root .wa-bq-meme .wa-rhead h2{font-size:clamp(22px,2.4vw,30px);letter-spacing:-.018em;line-height:1.12}
.wa-root .wa-bq-annonce > .btn{margin-top:16px}
@media (max-width:600.98px){.wa-root .wa-bq-annonce .wa-bq-carte:nth-child(n+3){display:none}}

/* --- l'annonce d'un ajout, la barre du panier sur telephone ------------------------------------ */
.wa-root .wa-bq-bar{display:none}
@media (max-width:920.98px){
  .wa-root .wa-bq-bar{position:fixed;z-index:60;left:0;right:0;margin:0 auto;width:max-content;bottom:calc(14px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:12px;max-width:calc(100vw - 32px);padding:8px 8px 8px 18px;border-radius:100px;background:var(--ink);color:#fff;box-shadow:0 18px 50px rgba(11,13,19,.45);box-shadow:0 18px 50px oklch(0.16 0.012 265/.45);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(170%);transition:transform .38s var(--eo),opacity .3s var(--eo),visibility 0s linear .38s}
  .wa-root .wa-bq-bar.show{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:transform .38s var(--eo),opacity .3s var(--eo),visibility 0s}
  .wa-root .wa-bq-bar .n{font-size:14px;font-weight:500;white-space:nowrap}
  .wa-root .wa-bq-bar a{padding:10px 16px;border-radius:100px;background:var(--red);color:#fff;font-size:14px;font-weight:600;white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){.wa-root .wa-bq-bar{transition:none}}

/* --- le focus, partout dans la boutique ----------------------------------------------------------- */
.wa-root .wa-bq-carte a:focus-visible,.wa-root .wa-bq-ligne a:focus-visible,.wa-root .wa-bq-ligne .x:focus-visible,.wa-root .wa-bq-bar a:focus-visible{outline:2px solid var(--red);outline-offset:2px}

/* --- la barre d'achat d'un accessoire et les barres du bas ------------------------------------------------------
   Montree (sous 900 px), la barre d'achat couvrait celles du comparateur et de l'inspection : la pile monte de sa
   hauteur, mesuree par wa-boutique.js (html.wa-bq-achat, --wa-bq-achat-h), comme la fiche le fait avec html.wa-fdock
   (responsive-css#5). */
@media (max-width:900.98px){
  html.wa-bq-achat .wa-inspbar{bottom:calc(var(--wa-bq-achat-h,68px) + 12px)}
  html.wa-bq-achat .wa-cmpbar{bottom:calc(var(--wa-bq-achat-h,68px) + 64px)}
  html.wa-bq-achat .wa-pcmpbar{bottom:calc(var(--wa-bq-achat-h,68px) + 110px)}
  html.wa-bq-achat .wa-totop{bottom:calc(var(--wa-bq-achat-h,68px) + 86px)}
  html.wa-bq-achat.wa-cmp-on .wa-totop{bottom:calc(var(--wa-bq-achat-h,68px) + 132px)}
  /* Montree des l'arrivee (ux#19), elle laisse passer le bas de la page au-dessus d'elle : le corps garde sa hauteur en dessous. */
  html.wa-bq-achat body{padding-bottom:var(--wa-bq-achat-h,68px)}
}
/* Un ecran court (700 px de haut au plus) : sur la fiche d'un accessoire, la barre du haut defile avec la page et
   l'entete colle tout en haut ; couche, la barre du haut, l'entete et la barre d'achat prenaient 43 % de l'ecran
   (responsive-css#6, comme la fiche d'un vehicule). */
@media (max-height:700px){
  body.single-wa_produit .wa-utile{position:absolute}
  body.single-wa_produit .wa-header{top:0}
  body.single-wa_produit.admin-bar .wa-header{top:var(--wp-admin--admin-bar--height,32px)}
}