/* Page « Trouver le broyeur équivalent » - styles limités au bloc .itd-eq */
.itd-eq{
  --eq-ink:#172033; --eq-muted:#5b6578; --eq-line:#dfe5ee; --eq-bg:#f4f7fb;
  --eq-accent:#3f6db5; --eq-accent-strong:#2f5596; --eq-accent-soft:#eef3fb; --eq-ok:#1f8a54;
  color:var(--eq-ink); font-size:16px; line-height:1.55; text-align:left; margin:8px 0 32px;
  display:flex; flex-direction:column; gap:24px; container-type:inline-size;
}
.itd-eq *{box-sizing:border-box}
.itd-eq p,.itd-eq h2{margin:0}
.itd-eq [hidden]{display:none !important}

/* En-tête */
.itd-eq .eq-top{display:flex;flex-direction:column;gap:14px;max-width:820px}
.itd-eq .eq-title{font-size:clamp(26px,4vw,38px);font-weight:800;letter-spacing:-.025em;line-height:1.12;color:var(--eq-ink);text-wrap:balance}
.itd-eq .eq-title span{display:block;color:var(--eq-accent)}
.itd-eq .eq-lead{font-size:17px;color:var(--eq-muted);max-width:68ch}
.itd-eq .eq-trust{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.itd-eq .eq-trust li{display:inline-flex;align-items:center;gap:7px;margin:0;font-size:14px;font-weight:600;color:var(--eq-ink);background:var(--eq-bg);border:1px solid var(--eq-line);border-radius:999px;padding:6px 14px}
.itd-eq .eq-trust svg{color:var(--eq-ok)}

/* Indication */
.itd-eq .eq-hint{font-size:14px;color:var(--eq-muted);margin-bottom:-8px}


/* Grille */
.itd-eq .eq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@container (min-width:600px){ .itd-eq .eq-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@container (min-width:900px){ .itd-eq .eq-grid{grid-template-columns:repeat(4,minmax(0,1fr))} }

.itd-eq .eq-tile{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;padding:16px 12px 18px;background:#fff;border:1px solid var(--eq-line);border-radius:16px;text-decoration:none !important;color:var(--eq-ink) !important;transition:border-color .2s,box-shadow .25s,transform .25s}
.itd-eq .eq-tile:hover{border-color:var(--eq-accent);box-shadow:0 14px 30px rgba(23,32,51,.12);transform:translateY(-4px)}
.itd-eq .eq-tile:focus-visible{outline:3px solid var(--eq-accent);outline-offset:3px}

/* Photos : l'ancien laisse place au nouveau au survol */
.itd-eq .eq-pics{position:relative;display:block;width:100%;max-width:200px;aspect-ratio:1;margin-bottom:10px}
.itd-eq .eq-pics::before{content:"";position:absolute;inset:8%;border-radius:50%;background:radial-gradient(circle,rgba(63,109,181,.18),rgba(63,109,181,0) 70%);opacity:0;transform:scale(.7);transition:opacity .35s,transform .45s}
.itd-eq .eq-tile:hover .eq-pics::before{opacity:1;transform:scale(1.05)}
.itd-eq .eq-pics > img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .35s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
.itd-eq .eq-img-new{display:none}
.itd-eq .eq-tile:hover .eq-img-old{transform:scale(1.04)}
/* Écrans tactiles : petite vignette du remplaçant en permanence */
.itd-eq .eq-mini{display:block;position:absolute;right:-4px;bottom:-4px;width:42%;aspect-ratio:1;background:#fff;border:1.5px solid var(--eq-accent);border-radius:12px;padding:4px;box-shadow:0 4px 12px rgba(23,32,51,.12)}
.itd-eq .eq-mini img{width:100%;height:100%;object-fit:contain}
.itd-eq .eq-mini{transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.itd-eq .eq-tile:hover .eq-mini{transform:scale(1.12);box-shadow:0 8px 20px rgba(23,32,51,.18)}

.itd-eq .eq-old{font-size:17px;font-weight:700}
.itd-eq .eq-by{font-size:12px;color:var(--eq-muted);margin-top:6px;text-transform:uppercase;letter-spacing:.06em}
.itd-eq .eq-new{display:inline-flex;align-items:center;gap:6px;font-size:15px;font-weight:700;color:var(--eq-accent)}
.itd-eq .eq-new svg{transition:transform .25s}
.itd-eq .eq-tile:hover .eq-new{color:var(--eq-accent-strong)}
.itd-eq .eq-tile:hover .eq-new svg{transform:translateX(4px)}

/* Bouton « Voir le produit » qui glisse au survol */
.itd-eq .eq-tile{overflow:hidden;padding-bottom:22px}
.itd-eq .eq-go{position:absolute;left:12px;right:12px;bottom:12px;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--eq-accent);color:#fff;font-size:14px;font-weight:700;border-radius:999px;padding:10px 12px;opacity:0;transform:translateY(130%);transition:opacity .25s,transform .3s cubic-bezier(.2,.8,.2,1)}
.itd-eq .eq-tile:hover .eq-go,.itd-eq .eq-tile:focus-visible .eq-go{opacity:1;transform:none}
.itd-eq .eq-tile:hover .eq-by,.itd-eq .eq-tile:hover .eq-new{opacity:0}
.itd-eq .eq-by,.itd-eq .eq-new{transition:opacity .2s}
@media (hover:none){ .itd-eq .eq-go{display:none} }

/* Apparition en cascade */
@keyframes eqUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.itd-eq.eq-ready .eq-tile,.itd-eq .eq-tile.eq-in{animation:eqUp .45s ease-out both;animation-delay:calc(var(--i,0) * 35ms)}
@media (prefers-reduced-motion:reduce){
  .itd-eq .eq-tile,.itd-eq .eq-pics > img,.itd-eq .eq-new svg,.itd-eq .eq-go,.itd-eq .eq-pics::before{animation:none !important;transition:none !important}
}

/* Contact */
.itd-eq .eq-contact{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;background:var(--eq-bg);border-radius:16px;padding:22px}
.itd-eq .eq-contact-txt{flex:1 1 300px;display:flex;flex-direction:column;gap:4px}
.itd-eq .eq-contact strong{font-size:18px}
.itd-eq .eq-contact p{font-size:15px;color:var(--eq-muted)}
.itd-eq .eq-actions{display:flex;flex-wrap:wrap;gap:10px}
.itd-eq .eq-cta,.itd-eq .eq-ghost{display:inline-flex;align-items:center;font-weight:700;font-size:15px;padding:11px 22px;border-radius:999px;text-decoration:none !important}
.itd-eq .eq-cta{background:var(--eq-accent);color:#fff !important;border:2px solid var(--eq-accent)}
.itd-eq .eq-cta:hover{background:var(--eq-accent-strong);border-color:var(--eq-accent-strong)}
.itd-eq .eq-ghost{background:#fff;color:var(--eq-accent) !important;border:2px solid var(--eq-accent)}