* { margin:0; padding:0; box-sizing:border-box; font-family:Segoe UI,sans-serif; }
body { background:#f4f6f8; color:#0f172a; }

.top-bar { background:#0f172a; padding:16px 40px; display:flex; justify-content:space-between; }
.logo { color:white; font-weight:bold; }
nav a { color:#e5e7eb; margin-left:20px; text-decoration:none; }
nav a.active, nav a:hover { color:#38bdf8; }

.hero { height:45vh; background:url("./images/ING.jpg") center/cover no-repeat; position:relative; display:flex; align-items:center; justify-content:center; }
.overlay { position:absolute; inset:0; background:rgba(0,0,0,.6); }
.hero-content { position:relative; color:white; text-align:center; }

.catalogue { padding:50px 40px; }
.filters { text-align:center; margin-bottom:30px; }
.filter { padding:10px 20px; margin:5px; border-radius:20px; border:1px solid #ccc; cursor:pointer; }
.filter.active, .filter:hover { background:#38bdf8; color:white; }

.products { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; }

.product-card {
  background:white;
  border-radius:12px;
  box-shadow:0 5px 15px rgba(0,0,0,.1);
  overflow:hidden;
  text-align:center;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.product-card img { width:100%; height:180px; object-fit:cover; }
.product-card h3 { margin:10px 0 5px; font-size:1.1rem; }
.product-card p { color:#475569; font-size:0.9rem; margin-bottom:10px; }
.product-card .price { font-weight:bold; margin-bottom:10px; }

.add-cart-btn {
  margin-bottom:15px;
  padding:10px;
  border:none;
  border-radius:20px;
  background:#2563eb;
  color:white;
  cursor:pointer;
  font-weight:bold;
}
.add-cart-btn:hover { background:#1e40af; }

.cart-floating {
  position:fixed; bottom:20px; right:20px;
  background:#2563eb; color:white;
  padding:18px 24px; border-radius:50px;
  cursor:pointer; font-size:1.3rem;
}

#cart { position:fixed; right:-360px; top:0; width:350px; height:100%; background:white; box-shadow:-4px 0 20px rgba(0,0,0,.2); transition:.3s; display:flex; flex-direction:column; z-index:9999; }
#cart.active { right:0; }

.cart-header { background:#0f2a44; color:white; padding:15px; display:flex; justify-content:space-between; }
#cart-items { flex:1; padding:15px; overflow:auto; }
.cart-item { border-bottom:1px solid #ddd; padding:10px 0; font-size:0.9rem; }
.cart-item button { background:red; color:white; border:none; padding:5px 8px; border-radius:6px; cursor:pointer; }

.cart-footer { padding:15px; }
.cart-total { font-weight:bold; margin-bottom:10px; text-align:center; }
.cart-footer button { width:100%; padding:10px; border:none; border-radius:20px; background:#25d366; color:white; cursor:pointer; }

.cta { background:#0f172a; color:white; text-align:center; padding:60px 20px; }
.cta button { margin-top:15px; padding:12px 25px; border:none; border-radius:25px; background:#25d366; color:white; cursor:pointer; font-weight:bold; }

#toast { position:fixed; top:20px; right:20px; background:#22c55e; color:white; padding:12px 20px; border-radius:10px; display:none; z-index:9999; }

.modal { position:fixed; inset:0; background:rgba(0,0,0,.6); display:none; align-items:center; justify-content:center; z-index:10000; }
.modal.active { display:flex; }
.modal-content { background:white; padding:25px; border-radius:16px; width:90%; max-width:350px; }
.modal-content input { width:100%; padding:10px; margin-bottom:10px; border-radius:8px; border:1px solid #ccc; }
.modal-actions { display:flex; gap:10px; }
.modal-actions button { flex:1; padding:10px; border:none; border-radius:20px; cursor:pointer; font-weight:bold; }
#cancelModal { background:#e5e7eb; }
#confirmSend { background:#25d366; color:white; }

/* FOOTER PROFESSIONNEL */
.footer {
  background: #0f172a;
  color: #e5e7eb;
  font-family: "Segoe UI", sans-serif;
  padding: 60px 20px 30px;
  line-height: 1.6;
}

.footer a {
  color: #38bdf8;
  text-decoration: none;
  transition: color 0.3s;
}

.footer a:hover {
  color: #60a5fa;
  text-decoration: underline;
}

.footer-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 40px;
}

.footer-section {
  flex: 1 1 220px;
}

.footer-section h4 {
  font-size: 1.2rem;
  margin-bottom: 15px;
  color: #ffffff;
  position: relative;
}

.footer-section h4::after {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background: #38bdf8;
  margin-top: 5px;
  border-radius: 2px;
}

.footer-section p,
.footer-section ul li {
  margin-bottom: 10px;
  font-size: 0.95rem;
  color: #cbd5e1;
}

.footer-section ul {
  list-style: none;
  padding: 0;
}

.socials {
  margin-top: 10px;
}

.socials a {
  margin-right: 10px;
  display: inline-block;
  transition: transform 0.2s;
}

.socials a:hover {
  transform: scale(1.2);
}

.socials img {
  width: 28px;
  height: 28px;
}

.footer-bottom {
  border-top: 1px solid #475569;
  padding-top: 20px;
  text-align: center;
  font-size: 0.85rem;
  color: #94a3b8;
}

.footer-bottom a {
  margin: 0 5px;
  color: #38bdf8;
}

.footer-bottom a:hover {
  color: #60a5fa;
}

/* ===============================
   MEDIA QUERY GLOBALE - MOBILE
=============================== */
@media screen and (max-width: 768px) {

  /* Top-bar : menu empilé + padding réduit */
  .top-bar {
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 20px;
  }
  .top-bar nav {
    width: 100%;
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  /* Hero : texte centré + taille réduite */
  .hero {
    height: 35vh;
    padding: 0 10px;
  }
  .hero-content h1 { font-size: 1.5rem; }
  .hero-content p { font-size: 0.9rem; }

  /* Catalogue : padding réduit */
  .catalogue { padding: 20px 10px; }

  /* Grille produits : 1 colonne */
  .products { grid-template-columns: 1fr; gap: 15px; }

  /* Product-card : texte plus petit, image auto */
  .product-card img { height: auto; }
  .product-card h3 { font-size: 1rem; }
  .product-card p { font-size: 0.85rem; }
  .product-card .price { font-size: 0.9rem; }

  /* Buttons : padding réduit */
  .add-cart-btn, .cta button, .cart-footer button {
    padding: 8px 15px;
    font-size: 0.9rem;
  }

  /* Cart : largeur adaptative, modal sur mobile */
  #cart { width: 90%; right: -100%; }
  #cart.active { right: 5%; }

  /* Toast : réduit taille et padding */
  #toast { padding: 8px 15px; font-size: 0.85rem; top: 10px; right: 10px; }

  /* Modal : largeur réduite */
  .modal-content { width: 90%; padding: 15px; }
  .modal-content input { font-size: 0.9rem; padding: 8px; }

  /* Footer : colonne unique */
  .footer-top { flex-direction: column; gap: 20px; }
}