/* Sections */
.ww-section { padding: 1.2rem 0 1.6rem; }
.ww-strip { background:#fff5f5; border:1px solid #ffe0e0; border-radius:14px; padding:1rem; display:flex; gap:.8rem; align-items:center; justify-content:space-between; flex-wrap:wrap; }

.ww-card { background:#fff; border:1px solid #eee; border-radius:18px; padding:1.2rem; box-shadow:0 2px 12px rgba(0,0,0,.04); }
.ww-card-style {display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between; }

/* Marques */
.ww-brands { display:flex; gap:.6rem; flex-wrap:wrap; }
.ww-brand { background:#fff; border:1px solid #eee; border-radius:10px; padding:.45rem .6rem; }


.ww-btn { display:inline-block; padding:.85rem 1.1rem; border-radius:12px; border:0; text-decoration:none; font-weight:700; cursor:pointer; }
.ww-btn-red, a.ww-btn-red:visited  { background:#e02929; color:#fff; }
.ww-btn-ghost, a.ww-btn-ghost:visited { background:#fff; border:1px solid #ddd;  }
a.ww-btn-red:hover  { text-decoration:none; background:#fff; color:#e02929;border:1px solid #e02929; border-radius:12px; box-shadow:0 6px 16px rgba(0,0,0,.05); }
a.ww-btn-ghost:hover {text-decoration:underline;  color:red; }


/* CTA visibles */
.ww-cta{display:inline-flex;align-items:center;justify-content:center;background:#16a34a;color:#fff;border:none;border-radius:9999px;padding:.9rem 1.3rem;font-weight:800;font-size:1.05rem;cursor:pointer;box-shadow:0 6px 16px rgba(22,163,74,.25);transition:transform .06s ease, box-shadow .2s ease}
.ww-cta:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(22,163,74,.28)}
.ww-cta--ghost{background:#0ea5e9} /* Réserver */
.ww-cta:active{transform:translateY(0)}




.ww-contact-submit {
  background-color: #0078D7;
  color: white;
  padding: 0.8rem 1.5rem;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s;
}

.ww-contact-submit:hover {
  background-color: #005fa3;
}
 

@media (max-width: 600px) {
  .ww-contact-submit {
    width: 100%;
    box-sizing: border-box;
  }
}




/* A11y */
.ww-sr-only{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }


/* button */
.ww-btn-coo {
  display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    background-color: transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    font-family: inherit;
    box-sizing: border-box; 
} 
.ww-btn-coo-blue
{
    color: #007bff;
    border: 2px solid #007bff;
}
.ww-btn-coo-blue:hover
{
  background-color: #007bff;
  color: #FFF;
}
.ww-btn-coo-green
{
      color: #28a745;
    border: 2px solid #28a745;
}
.ww-btn-coo-green:hover
{
  background-color: #28a745;
  color: #FFF;
}
.ww-btn-coo-red
{
      color: #dc3545;
    border: 2px solid #dc3545;
}
.ww-btn-coo-red:hover
{
  background-color: #dc3545;
  color: #FFF;
}

.ww-btn-coo-grey
{
      color: #999;
    
}
.ww-btn-coo-grey:hover
{
  background-color: #999;
  color: #000;
}




.ww-button {
  display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    background-color: transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    font-family: inherit;
    box-sizing: border-box; 
}

.ww-button-green
{
      color: #28a745;
    border: 2px solid #28a745;
}
.ww-button-green:hover
{
  background-color: #28a745;
  color: #FFF;
}
.ww-button-red
{
      color: #dc3545;
    border: 2px solid #dc3545;
}
.ww-button-red:hover
{
  background-color: #dc3545;
  color: #FFF;
}

.ww-button-grey
{
      color: #999;
    
}
.ww-button-grey:hover
{
  background-color: #999;
  color: #000;
}



button.ww-add {
  padding:.55rem .9rem; border-radius:8px; border:1px solid #0078b4; background:#0078b4; color:#fff; cursor:pointer;
}
button.ww-add:disabled { opacity:.55; cursor:not-allowed; }





/* Onglets "rappelez-moi" / "favori" sous le CTA */
.ww-mini-tabs{
  display:flex; gap:.5rem; justify-content:center; align-items:center; margin-top:.6rem;
}
.ww-mini-tab{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.4rem .6rem; border:1px solid #e5e7eb; border-radius:9999px;
  background:#fff; color:#0f172a; font-size:.92rem; text-decoration:none;
  transition:background .15s, border-color .15s, transform .06s;
}
.ww-mini-tab:hover{ background:#f8fafc; border-color:#cbd5e1; transform:translateY(-1px); }
.ww-mini-tab:active{ transform:translateY(0); }
.ww-mini-tab svg{ display:block; }
/* Onglets actions rapides */
.ww-mini-tabs{display:flex;gap:.5rem;justify-content:center;align-items:center;margin-top:.6rem}
.ww-mini-tab{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.4rem .6rem;border:1px solid #e5e7eb;border-radius:9999px;
  background:#fff;color:#0f172a;font-size:.92rem;text-decoration:none;
  transition:background .15s,border-color .15s,transform .06s;
}
.ww-mini-tab:hover{background:#f8fafc;border-color:#cbd5e1;transform:translateY(-1px)}
.ww-mini-tab:active{transform:translateY(0)}
/* Favori actif (coeur plein + teinte) */
.ww-mini-tab--fav.is-active{background:#fff1f2;border-color:#fecaca;color:#7f1d1d}
.ww-mini-tab--fav.is-active .ww-ico-heart path{fill:#be123c}


 

.ww-badges{ display:flex; flex-wrap:wrap; gap:.35rem; }
.ww-badge-k{ display:inline-block; padding:.28rem .6rem;  background:#eef2ff; color:#1e3a8a; border:1px solid #e0e7ff; border-radius:999px; }
.ww-badge-k .ww-x{ margin-left:.45rem; text-decoration:none; font-weight:800; color:#1f2937; border-radius:6px; padding:0 .2rem; }
.ww-badge-k .ww-x:hover{ color:#b91c1c; background:rgba(185,28,28,.08); }
.ww-badge--promo{display:inline-block;background:#fee2e2;color:#b91c1c;border:1px solid #fecaca;border-radius:9999px;padding:.12rem .36rem;font-size:.75rem;line-height:1;font-weight:700}


.ww-desc{ margin:.25rem 0 0 0; font-size:.9rem; color:#555; }
@media (prefers-color-scheme: dark){
.ww-desc{ color:#cbd5e1; }
}






/* ====== Cartes produits (dc-) ====== */
.ww-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1rem; margin:1rem 0 2rem 0; }
.ww-card{ border:1px solid #e5e7eb; border-radius:12px; padding:16px; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.04); transition:box-shadow .2s, transform .2s; }
.ww-card:hover{ box-shadow:0 6px 18px rgba(0,0,0,.08); transform:translateY(-2px); }
.ww-card a{ text-decoration:none; color:inherit; display:block; }
.ww-img{ width:100%; aspect-ratio:4/3; object-fit:contain; background:#f9fafb; border-radius:8px; }
.ww-title{ margin:.6rem 0 0 0; font-weight:700; font-size:1rem; line-height:1.25rem; }
.ww-desc{ margin:.25rem 0 0 0; font-size:.9rem; color:#555; }
.ww-price{ margin:.75rem 0 0 0; font-weight:800; font-size:1.05rem; }
.ww-badge{ display:inline-block; margin-left:.5rem; font-size:.75rem; line-height:1; color:#b91c1c; background:#fee2e2; border:1px solid #fecaca; border-radius:999px; padding:2px 8px; vertical-align:middle; }
.ww-card a:focus{ outline:3px solid #60a5fa; outline-offset:2px; border-radius:12px; }
/* ww-card__body 
ww-card-link
*/
@media (prefers-color-scheme: dark){
  .ww-card{ background:#0b0b0c; border-color:#1f2937; box-shadow:0 1px 2px rgba(0,0,0,.6); }
  .ww-img{ background:#0f172a; } .ww-desc{ color:#cbd5e1; }
}



/* Bloc encadré “pièces détachées” plus léger */
.ww-piece-panel{
  border:1px solid #fecaca; background:#fff1f2;
  border-radius:10px; padding:.65rem .85rem;
  margin:.75rem 0 1.5rem 0; font-size:.9rem; line-height:1.35;
}
.ww-piece-panel h2{
  margin:.25rem 0 .5rem 0; font-size:1.05rem; font-weight:600; color:#991b1b;
}
/* lien interne prend toute la carte */
.ww-card-link-pd { display:block; text-decoration:none; color:inherit; height:100%; }
.ww-card-link-pd{ display:block; text-decoration:none; color:inherit; height:100%; }



/* ===== Styles spécifiques "pièces détachées" (compact) ===== */
.ww-grid-pd {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 par ligne */
  gap: 0.6rem;
  align-items: start;
}

/* carte compacte */
.ww-card-pd {
  background: #fff;
  border-radius: 8px;
  border: 1px solid rgba(153,27,27,0.08);
  overflow: hidden;
  min-height: 96px;    /* hauteur minimale */
  max-height: 120px;   /* empêche trop grand */
  display: block;
}

/* lien interne prend toute la carte */
.ww-card-link-pd { display:block; text-decoration:none; color:inherit; height:100%; }

/* inner flex : image gauche, texte droite, alignement centré verticalement */
.ww-card-inner-pd {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  padding: 0.5rem;
}

/* zone image : fixe et centrée */
.ww-card-media-pd {
  flex: 0 0 120px;        /* fixe la largeur de l'image */
  height: 100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 0.25rem;
}

/* image responsive, pas plus haute que la carte */
.ww-img-pd {
  max-height: 96px;
  max-width: 100%;
  object-fit: contain;
  display:block;
  border-radius:6px;
}

/* corps texte : occupe le reste */
.ww-card-body-pd {
  flex: 1 1 auto;
  min-width: 0; /* pour ellipsis */
}

/* titre compact */
.ww-title-pd {
  font-size: 0.95rem;
  line-height:1.2;
  font-weight:600;
  color:#331515;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* limite le texte à 3 lignes */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* style spécifique pour la vignette "voir tout" */
.ww-card-more {
  background: #fff6f6;
  border: 1px dashed #f5c6cb;
  color: #991b1b;
}
.ww-card-more .dc-card-more-media { display:flex; align-items:center; justify-content:center; padding:0.2rem; }
.ww-more-cta { margin-top:0.35rem; font-size:0.9rem; font-weight:700; color:#991b1b; }
.ww-more-count { font-size:0.85rem; color:#6b3030; margin-top:0.25rem; }

/* responsive : 2 colonnes sur les écrans étroits */
@media (max-width: 900px) {
  .ww-grid-pd { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .ww-grid-pd { grid-template-columns: 1fr; }
  .ww-card-media-pd { flex: 0 0 88px; }
  .ww-img-pd { max-height:72px; }
}


/* ===== Grilles compactes pièces détachées : colonnes variables ===== */
.ww-grid-pd{ display:grid; gap:.6rem; align-items:start; }
.ww-grid-pd.cols-1{ grid-template-columns: repeat(1, minmax(0,1fr)); }
.ww-grid-pd.cols-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.ww-grid-pd.cols-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.ww-grid-pd.cols-4{ grid-template-columns: repeat(4, minmax(0,1fr)); }

/* Responsive : on replie proprement en dessous de certaines largeurs */
@media (max-width: 1100px){ .ww-grid-pd.cols-4{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 900px) { .ww-grid-pd.cols-3,
                             .ww-grid-pd.cols-4{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px) { .ww-grid-pd{ grid-template-columns: 1fr; } }

/* Cartes compactes : forcer l’étirement vertical homogène */
.ww-card-pd{ background:#fff; border-radius:8px; border:1px solid rgba(153,27,27,0.08); overflow:hidden; display:block; }
.ww-card-link-pd{ display:block; text-decoration:none; color:inherit; height:100%; }
.ww-card-inner-pd{ display:flex; gap:.6rem; align-items:center; padding:.5rem; height:100%; }
.ww-card-media-pd{ flex:0 0 120px; display:flex; align-items:center; justify-content:center; padding:.25rem; }
.ww-img-pd{ max-height:96px; max-width:100%; object-fit:contain; display:block; border-radius:6px; }
.ww-card-body-pd{ flex:1 1 auto; min-width:0; }
.ww-title-pd{ font-size:.95rem; line-height:1.2; font-weight:600; color:#331515; margin:0;
              display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; }



.ww-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem;margin:1rem 0 2rem 0;}
.ww-tile{border:1px solid #e5e7eb;border-radius:12px;padding:1rem;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.04);}
.ww-tile h3{margin:0 0 .65rem 0;font-size:1.05rem}
.ww-duo{display:inline-flex;align-items:center;border:1px solid #e5e7eb;border-radius:9999px;overflow:hidden;background:#fff;}
.ww-duo a{display:inline-block;padding:.45rem .8rem;text-decoration:none;font-size:.95rem;line-height:1;border-right:1px solid #e5e7eb;color:#334155;}
.ww-duo a:last-child{border-right:none;}
.ww-duo a.main{background:#f8fafc;}
.ww-duo a.pieces{background:#fff;}
.ww-duo a:hover{background:#eef2ff;color:#1e3a8a;}
@media (prefers-color-scheme: dark){
  .ww-tile{background:#0b0b0c;border-color:#1f2937}
  .ww-duo{border-color:#1f2937;background:#0b0b0c}
  .ww-duo a{border-color:#1f2937;color:#d1d5db}
  .ww-duo a:hover{background:#1f2937;color:#93c5fd}
}












/* ====== ILS PARLENT DE NOUS (DESIGN BLEU) ====== */
.ww-review-sources{ max-width:1024px; margin:1.5rem auto 2rem auto; }
.ww-review-sources h2{ font-size:1.8rem; margin-bottom:.8rem; text-align:center; color:#0f172a; }
.ww-review-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px; margin:1rem 0 2rem 0;}

@media (min-width: 768px){ .review-grid{ grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px){ .review-grid{ grid-template-columns: 1fr 1fr 1fr; } }

.ww-review-card{
  border:1px solid #cfe8ff; background:#f7fbff; border-radius:10px;
  padding:1rem 1.2rem; display:grid; grid-template-columns:auto 1fr auto; gap:.8rem 1rem; align-items:center;
}
.ww-review-card .ww-review-logo{
  width:36px; height:36px; border-radius:6px; border:1px solid #cfe8ff; background:#fff;
  display:flex; align-items:center; justify-content:center; color:#0b78d1; font-size:1.1rem; font-weight:700;
}
.ww-review-card .ww-review-infos{ display:flex; flex-direction:column; }
.ww-review-card .ww-review-title{ font-weight:700; font-size:1.05rem; color:#0f172a; }
.ww-review-card .ww-review-desc{ font-size:.95rem; color:#3b5268; }
.ww-review-card .ww-review-cta{ text-align:right; font-weight:700; color:#0b78d1; }










/* ====== GRILLE « + de 20 ans d'avis favorables » ====== */
/* ====== GRILLE « + de 20 ans d'avis favorables » ====== */
.ww-years-grid{ max-width:1024px; margin:1.5rem auto 0 auto; }
.ww-years-grid h2{ margin:0 0 .6rem 0; }

/* 1 colonne mobile */
.ww-years-grid .grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:12px;
}

/* 2 colonnes tablette */
@media (min-width: 768px){
  .ww-years-grid .grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 4 colonnes desktop */
@media (min-width: 1024px){
  .ww-years-grid .grid{
    grid-template-columns: repeat(4, 1fr);
  }
}

.ww-year-card{ border:1px solid #e5e7eb; background:#fff; border-radius:12px; padding:.7rem .85rem; display:grid; gap:.45rem; }
.ww-year-card a{ color:inherit; text-decoration:none; display:grid; gap:.45rem; }
.ww-year-card-head{ display:flex; justify-content:space-between; align-items:center; gap:.6rem; }
.ww-year-card-year{ font-size:1.6rem; font-weight:800; letter-spacing:.5px; color:#0f172a; line-height:1; }
.ww-year-card-meta{ display:flex; align-items:baseline; gap:.4rem; color:#0f172a; font-weight:700; }
.ww-year-card-star{ color:#0b78d1; }
.ww-year-card-name{ font-size:.95rem; }
.ww-year-card-place{ opacity:.7; font-size:.85rem; }
.ww-year-card-body{ color:#334155; line-height:1.35; font-size:.98rem; }











/* ====== BANDEAU TICKER CARDS ====== */
.ww-brand-ticker{
  max-width: 1024px; margin: 0 auto .5rem auto;
  display:grid; grid-template-columns: 1fr; gap:14px; align-items:center;
}
.ww-brand-ticker .ww-cards-wrap{
  overflow:hidden; border:1px solid #e5e7eb; background:#fff; border-radius:12px;
  box-shadow:0 1px 6px rgba(0,0,0,.04);
}
.ww-cards-track{
  display:flex; gap:.75rem; padding:.6rem; align-items:stretch;
  animation: cards-marquee 40s linear infinite; will-change: transform;
}
.ww-cards-track:hover{ animation-play-state: paused; }
/* Cartes : pas de 1fr qui étire la 2e ligne */
/*
ww-card-chip{
  min-width: 260px;
  max-width: 340px;

  display: grid;
  grid-template-rows: auto auto;    
  gap: .35rem;                         
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: .55rem .7rem;               
  background: #f8fafc;
}
 */.ww-card-chip{
  flex: 0 0 clamp(280px, 32vw, 420px); /* mini 280px, idéal 32vw, max 420px */
  min-width: clamp(280px, 32vw, 420px);
  display:grid; grid-template-rows:auto auto; gap:.35rem;
  border:1px solid #e5e7eb; border-radius:12px; padding:.55rem .7rem; background:#f8fafc;
}

/* En-tête serrée */
.ww-card-chip .head{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .5rem;
  margin: 0;                           /* pas de marge parasite */
}

/* Version "body2" que tu utilises dans ton HTML */
.ww-card-chip .body2{
  color: #334155;
  font-size: .95rem;
  line-height: 1.28;
  margin: 0;                           /* supprime marges par défaut */
}

/* Optionnel : encore plus compact + coupe élégante à 2 lignes */
.ww-card-chip .body2{
  display: -webkit-box;
  -webkit-line-clamp: 2;               /* 2 lignes max */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ww-card-chip .meta{ display:flex; align-items:baseline; gap:.45rem; font-weight:700; color:#0f172a; }
.ww-card-chip .meta .star{ color:#0b78d1; }
.ww-card-chip .meta .name{ font-size:.95rem; }
.ww-card-chip .meta .place{ opacity:.7; font-size:.85rem; }
.ww-card-chip .date-badge{
  display:inline-block; padding:.15rem .5rem; border:1px solid #cfe8ff; border-radius:999px; background:#f7fbff; font-size:.85rem; color:#124b72;
}
.ww-card-chip .body{ color:#334155; font-size:.98rem; line-height:1.35; }
@keyframes cards-marquee { 0%{ transform: translateX(0); } 100%{ transform: translateX(-50%); } }







.ww-cg-card-style { display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between; }
.ww-cg-card{ border:1px solid #e5e7eb; border-radius:12px; padding:16px; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.04); transition:box-shadow .2s, transform .2s; }
.ww-cg-card:hover{ box-shadow:0 6px 18px rgba(0,0,0,.08); transform:translateY(-2px); }
.ww-cg-card a{ text-decoration:none; color:inherit; display:block; }

/* On garde l'effet grisé au survol (pour ne pas ressembler aux produits) */
.ww-cg-img{
  filter: grayscale(100%) contrast(1.05) brightness(0.96);
}
.ww-cg-pill-rayon{
  display:inline-block; margin-top:.3rem; font-size:.75rem; 
  color:#334155; background:#eef2ff; border:1px solid #e0e7ff; 
  border-radius:9999px; padding:2px 8px;
}
/* Rayons (sous-catégories) : différenciation visuelle claire */
.ww-cg-img{
  /* image plus petite + marges */
  max-height: 120px;
  margin-bottom: .65rem;

  /* grisage renforcé */
  filter: grayscale(100%) brightness(0.82) contrast(1.12) saturate(0.85);
  transition: filter .2s ease;
}

/* on conserve l'effet grisé au survol (ne pas "coloriser" comme un produit) */
.ww-cg-img:hover{
  filter: grayscale(100%) brightness(0.8) contrast(1.15) saturate(0.8);
}

/* Titre rayon : plus grand + plus d'espace */
.ww-cg-title{
  font-size: 1.2rem;        /* + lisible */
  line-height: 1.3;
  margin-top: .4rem;        /* espace net avec l'image */
  letter-spacing: .2px;
}

/* Optionnel : sous-texte légèrement atténué */
.ww-cg-desc{
  color: #556070;
  opacity: .95;
}
.ww-badge--promo{display:inline-block;background:#fee2e2;color:#b91c1c;border:1px solid #fecaca;border-radius:9999px;padding:.12rem .36rem;font-size:.75rem;line-height:1;font-weight:700}