.background-img-toner {
  background-image: url('https://www.toner.fr/img/cms/photo_telephone.jpg');
  border-radius: 12px;
  box-shadow: 0 0 60px rgba(64, 64, 64, 0.39);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.background-img-eclair {
  background-color: #009dfe !important;
  background-image: url('https://www.toner.fr/img/cms/loge-ts-transparent.png');
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
}

.simple-pro-button {
  border-radius: 5px;
  background-color: #009DFE;
  color: white;
  padding: 1rem 2.5rem;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.125rem;
  display: inline-block;
  transition: all 0.3s ease;
}

.simple-pro-button:hover {
  background-color: #007cc3;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.animated-hero {
  background: linear-gradient(-45deg, #00263d, #3b7494, #00334f, #00263d);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
  border-radius: 12px;
  padding-top: 8rem;
  padding-bottom: 8rem;
}
.hero-title-opacity {
  font-size: 3.5rem;
  font-weight: bold;
  color: white;
  opacity: 0;
  animation: fadeInOpacity 2s ease forwards;
}
@keyframes fadeInOpacity {
  from { opacity: 0; }
  to { opacity: 1; }
}

-----------

/* style.css — Page Prix anti‑gaspi */
:root{
  --txt:#404040;--bg:#fff;--muted:#f9f9f9;--line:#ddd;--brand:#39d86e;--brand-2:#009dfe;--cta:#fe8700;--dark:#00263d;--hover:#535353;
  --container: min(1486px, 92vw);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--txt);font:16px/1.5 Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial}
a{color:var(--brand-2);text-decoration:none}
a:hover{text-decoration:underline}
.container{margin-inline:auto}
.btn{display:inline-flex;align-items:center;gap:.5rem;background:var(--brand);border:0;color:#fff;padding:.9rem 1.25rem;border-radius:.75rem;font-weight:600;cursor:pointer;transition:background .2s ease}
.btn:hover{background:#36cc68}
.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--txt)}
header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)}
.topbar{display:flex;align-items:center;gap:1rem;padding:.75rem 0}
.brand{display:flex;align-items:center;gap:.75rem;font-weight:700}
.pillnav{display:flex;gap:.5rem;flex-wrap:wrap}
.pillnav a{padding:.5rem .8rem;border:1px solid var(--line);border-radius:999px}
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#f9f9f9,transparent)}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:2rem;align-items:center;padding:clamp(1.2rem,3vw,2.5rem) 0}
.eyebrow{letter-spacing:.12em;font-size:.9rem;color:var(--dark);text-transform:uppercase;font-weight:800}
h1{font-size:clamp(2rem,5.2vw,4.2rem);line-height:1.05;margin:.4rem 0 1rem}
.sub{font-size:1.1rem;max-width:52ch;color:#333}
.video{border:8px solid #fff;border-radius:1rem;box-shadow:0 10px 30px rgba(0,0,0,.08);aspect-ratio:16/9;background:#000 url('data:image/svg+xml;utf8,') center/40% no-repeat}
/* Bloc comparaison */
.compare{padding:3rem 0;background:var(--muted)}
.compare h2{font-size:clamp(1.6rem,3.5vw,2.4rem);margin:0 0 1rem}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem}
.card{background:#fff;border:1px solid var(--line);border-radius:1.2rem;padding:1.25rem;box-shadow:0 4px 20px rgba(0,0,0,.04)}
.card header{border:0;position:static;background:transparent;padding:0}
.badge{display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:#ffe7cc;color:#a24d00;border:1px solid #ffcf99;padding:.35rem .6rem;border-radius:.5rem}
.price{display:flex;align-items:baseline;gap:.4rem;margin:.5rem 0 1rem}
.price .amount{font-size:1.8rem;font-weight:800}
.specs{display:grid;grid-template-columns:1fr;gap:.35rem;font-size:.95rem}
.specs li{display:flex;gap:.5rem;align-items:center}
.specs li:before{content:"\2713";font-weight:900;color:var(--brand)}
.fine{font-size:.8rem;color:#666;margin-top:.75rem}
.cta-row{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1rem}
/* Vérification compat */
.check{padding:2.25rem 0}
.check .panel{display:grid;gap:1rem;background:#fff;border:1px solid var(--line);border-radius:1rem;padding:1.25rem}
.selects{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}
select,input{width:100%;border:1px solid var(--line);border-radius:.6rem;padding:.8rem}
/* Bénéfices */
.benefits{padding:2.5rem 0;background:var(--muted)}
.benefits h3{font-size:1.5rem;margin:.25rem 0 1rem}
.benefit-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.benefit{background:#fff;border:1px solid var(--line);border-radius:1rem;padding:1rem}
/* Stats section */
.stats{padding:2.75rem 0}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.stat{background:#fff;border:1px solid var(--line);border-radius:1rem;padding:1.25rem;text-align:center}
.stat .num{font-size:2rem;font-weight:900}
/* Footer */
footer{border-top:1px solid var(--line);}
.footgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.footgrid ul{list-style:none;margin:0;padding:0}
.footgrid li{margin:.4rem 0}
/* Responsif */
@media (max-width: 1000px){
  .hero-grid{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .selects{grid-template-columns:1fr}
  .benefit-grid,.stats-grid,.footgrid{grid-template-columns:1fr}
}