/* W3CAM 2026-11-13 — Accessoires compatibles dans la fenetre « Produit ajoute »
   et sur la page panier (blocs poses par w3c-accessoires.js).
   Meme vocabulaire que la fiche produit v2 : tuiles grises, rayon 6 px, bouton
   a contour orange #ff6501. Aucune ombre, aucun degrade. */
.w3a{--w3a-orange:#ff6501;--w3a-voile:#fff4ec;--w3a-gris:#f5f5f5;--w3a-titre:#4d4d4d;margin:24px 0 0;padding:0;text-align:left}
.w3a-titre{margin:0 0 12px!important;padding:0;font-size:16px!important;font-weight:600!important;line-height:1.3!important;letter-spacing:0;text-transform:none;color:var(--w3a-titre)!important}
.w3a-liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0!important;padding:0!important;list-style:none}
.w3a--fenetre{margin-top:16px}
.w3a--fenetre .w3a-liste{grid-template-columns:minmax(0,1fr)}
.w3a-carte{display:flex;align-items:center;gap:12px;min-width:0;margin:0;padding:10px 12px;background:var(--w3a-gris);border-radius:6px}
.w3a-img{flex:0 0 56px;display:block;width:56px;height:56px;border-radius:4px;background:#fff;overflow:hidden}
.w3a-img img{display:block;width:56px;height:56px;object-fit:contain}
.w3a-corps{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:2px}
.w3a-nom{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;overflow-wrap:anywhere;font-size:13px;font-weight:400;line-height:1.35;color:var(--w3a-titre)!important;text-decoration:none!important}
.w3a-prix{font-size:14px;font-weight:600;line-height:1.3;color:var(--w3a-orange);font-variant-numeric:tabular-nums;white-space:nowrap}
/* Le theme donne 10 px de marge interieure aux liens de la fenetre « Produit ajoute » :
   l image sortait de son cadre blanc et la 3e ligne du nom apparaissait, rognee. */
.w3a-img,.w3a-nom{margin:0!important;padding:0!important;border:0!important}
.w3a-img img{max-width:none!important;margin:0!important}
.w3a-form{flex:0 0 auto;margin:0}
.w3a-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:44px;padding:0 14px;border:1px solid var(--w3a-orange);border-radius:6px;background:#fff;color:var(--w3a-orange);font:inherit;font-size:14px;font-weight:600;line-height:1;white-space:nowrap;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;transition:background-color .2s ease,transform .16s cubic-bezier(.23,1,.32,1)}
.w3a-btn svg{flex:0 0 auto}
.w3a-btn:active{transform:scale(.97)}
.w3a-btn:focus-visible,.w3a-nom:focus-visible{outline:2px solid var(--w3a-orange);outline-offset:2px}
.w3a-btn--envoi{opacity:.55;pointer-events:none}
.w3a-carte{flex-wrap:wrap}
.w3a-erreur{flex:0 0 100%;margin:0;font-size:13px;line-height:1.4;color:#b3261e}
@media (hover:hover) and (pointer:fine){
  .w3a-btn:hover{background:var(--w3a-voile)}
  .w3a-nom:hover{color:var(--w3a-orange)!important}
}
@media (max-width:767px){
  .w3a-liste{grid-template-columns:minmax(0,1fr)}
}
/* Telephone : le bouton se reduit a son pictogramme (le libelle reste dans aria-label)
   pour laisser la place au nom de l accessoire. */
@media (max-width:480px){
  .w3a-nom{-webkit-line-clamp:3;line-clamp:3}
  .w3a-btn{width:44px;padding:0}
  .w3a-btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .w3a-btn svg{width:18px;height:18px}
}
/* Ecran peu haut : deux accessoires au lieu de trois, pour que la fenetre tienne sans defilement. */
@media (max-height:859px){
  .w3a--fenetre .w3a-carte:nth-child(n+3){display:none}
}
@media (prefers-reduced-motion:reduce){
  .w3a-btn{transition:none}
}
/* Bulle de discussion Smartsupp : son z-index (10000000) la place au-dessus de la fenetre
   « Produit ajoute » (9999999) et elle recouvrait un bouton « + » sur telephone. Tant qu une
   fenetre est ouverte, elle passe derriere le voile ; elle revient a la fermeture. */
body.modal-open #smartsupp-widget-container > div{z-index:1!important}