:root{
  --bg:#1a1a1a;
  --card:#2c2c2c;
  --muted:#c0c0c0;
  --accent:#e25822;
  --accent-2:#f2f2f2;
  --glass: rgba(255,255,255,0.05);
  --max-width:1100px;
  --radius:14px;
  --shadow: 0 6px 24px rgba(0,0,0,0.4);
  font-family: 'Segoe UI', Roboto, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body {
  margin:0;
  height:100%;
  background: linear-gradient(rgba(26,26,26,0.95), rgba(26,26,26,0.95)),
              url('assets/img/background.jpg') no-repeat center center;
  background-size: cover;
  background-attachment: fixed;
  color: var(--accent-2);
  line-height:1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.wrap{max-width:var(--max-width);margin:0 auto;padding:28px}

/* Header */
.site-header {
  background: rgba(44,44,44,0.85);
  position: sticky;
  top: 0;
  z-index: 30;
  backdrop-filter: blur(10px);
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  border-radius: 0 0 14px 14px;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.site-header:hover {
  background: rgba(44,44,44,0.95);
  box-shadow: 0 6px 16px rgba(0,0,0,0.6);
}

.site-header .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.brand{
  display:flex;
  align-items:center;
  gap:0.5rem;
  text-decoration:none;
  font-weight:700;
  color:var(--accent-2);
  font-size:18px;
  letter-spacing:0.6px;
}
.brand img{height:60px;width:auto}

.main-nav a{
  margin-left:14px;
  color:var(--accent-2);
  text-decoration:none;
  font-weight:600;
  opacity:0.9;
}
.main-nav a:hover{color:var(--accent)}

/* Hero */
.hero{padding:40px 0}
.hero-grid{display:grid;grid-template-columns:1fr 420px;gap:32px;align-items:center}
.hero h1{font-size:38px;margin:0 0 10px;color:#f2f2f2;text-shadow:1px 1px 4px #000}
.lead{color:var(--muted);font-size:18px;margin-bottom:16px}
.btn-primary{
  background:linear-gradient(180deg,var(--accent),#b03a17);
  color:white;
  padding:12px 20px;
  border-radius:12px;
  font-weight:700;
  border:none;
  cursor:pointer;
  box-shadow:0 4px 16px rgba(0,0,0,0.5);
  transition: transform 0.2s, box-shadow 0.2s;
}
.btn-primary:hover{
  transform: translateY(-3px);
  box-shadow:0 8px 24px rgba(0,0,0,0.6);
}

.hero-art img{
  width:100%;
  max-width:350px;
  border-radius:16px;
  box-shadow:0 8px 32px rgba(0,0,0,0.6);
  display:block;
}

/* Products */
.section-products{padding:40px 0 20px}
.section-products h2{margin-top:0;color:var(--accent-2);text-shadow:0 1px 3px #000}
.muted{color:var(--muted)}

.product-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
  margin-top:20px;
}

.card{
  background:var(--card);
  border-radius:var(--radius);
  padding:20px;
  box-shadow:0 6px 24px rgba(0,0,0,0.6);
  transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.3s ease;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.card:hover{
  transform: translateY(-6px);
  box-shadow:0 16px 40px rgba(0,0,0,0.7);
}
.card .thumb{
  height:160px;
  border-radius:12px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(180deg,#3a3a3a,#1a1a1a);
}
.card .thumb img{max-width:100%;max-height:100%;display:block}
.card h3{margin:0;font-size:20px;color:#f2f2f2}
.card p.price{margin:0;font-weight:700;color:var(--accent)}
.card .meta{display:flex;justify-content:space-between;align-items:center}

/* About */
.section-about{padding:36px 0}
.about-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.section-about h3{color:var(--accent)}
.section-about p{color:var(--muted)}

/* ------------------------------------- */
/* ⭐ Nouvelle section avec image        */
/* ------------------------------------- */

.section-image-break {
  padding: 40px 0;
  text-align: center;
}

.image-break {
  max-width: 90vw;     /* ✔ limite la largeur */
  max-height: 60vh;    /* ✔ limite la hauteur */
  width: auto;
  height: auto;
  border-radius: 16px;
  object-fit: contain;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
}

.image-break-text {
  margin-top: 14px;
  font-size: 1.25rem;
  color: var(--accent-2);
  opacity: 0.9;
}

@media (max-width:980px) {
  .image-break-text {
    color: #222;
  }
}

/* Contact */
.section-contact{padding:36px 0}
.contact-form label{display:block;margin-bottom:10px;color:var(--accent-2)}
.contact-form input, .contact-form textarea{
  width:100%;
  padding:12px;
  border-radius:10px;
  border:1px solid #555;
  background:#2c2c2c;
  color:#f2f2f2;
}
.contact-form input::placeholder, .contact-form textarea::placeholder{color:#888}
.form-actions{margin-top:12px}

/* Footer */
.site-footer{padding:18px 0;color:var(--muted);font-size:14px;border-top:1px solid rgba(255,255,255,0.1);background:transparent}
.footer-links a{color:var(--muted);text-decoration:none}
.footer-links a:hover{color:var(--accent)}

/* Modal */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(0,0,0,0.6)}
.modal[aria-hidden="false"]{display:flex}
.modal-panel{background:var(--card);width:100%;max-width:980px;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,0.8);overflow:hidden;position:relative}
.modal-close{position:absolute;right:20px;top:20px;background:none;border:0;font-size:28px;cursor:pointer;color:#000;z-index:50}

/* Modal content */
.modal-body{display:flex;gap:20px;padding:24px;align-items:flex-start}
.modal-body .gallery{
  flex:0 0 auto;
  display:flex;
  overflow:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  gap:10px;
  width:500px;
  max-width:100%;
}
.modal-body .gallery img,
.modal-body .gallery video{
  width:100%;
  max-width:400px;
  max-height:400px;
  flex-shrink:0;
  scroll-snap-align:center;
  object-fit:contain;
  border-radius:12px;
  box-shadow:0 4px 20px rgba(0,0,0,0.6);
}
.modal-body aside.details{flex:1 1 100%}
.modal-body h3{margin-top:0;color:var(--accent)}
.feature-list{margin:8px 0;padding-left:18px;color:var(--muted)}

.gallery .arrow {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  font-size:28px;
  color:#fff;
  background: rgba(0,0,0,0.4);
  border:none;
  border-radius:50%;
  width:40px;
  height:40px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:10;
}
.gallery .arrow.left{left:10px}
.gallery .arrow.right{right:10px}
.gallery .arrow:hover{background: rgba(0,0,0,0.6)}

.details button.show-gallery { margin-top: 12px; }
@media (min-width:981px){
  .details button.show-gallery { display: none; }
}

/* Mobile styles */
@media (max-width:980px){
  body {
    background: linear-gradient(rgba(245,245,245,0.95), rgba(245,245,245,0.95)),
                url('assets/img/background.jpg') no-repeat center center;
    background-size: cover;
    color: #222;
  }
  .site-header {
    background: rgba(255,255,255,0.9);
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  }
  .site-header:hover { background: rgba(255,255,255,0.95); }
  .brand, .main-nav a { color: #333; }

  .main-nav a {
    font-size: 16px;
    padding: 8px 12px;
    border-radius:8px;
    transition: background 0.2s;
  }
  .main-nav a:hover { background: rgba(226,88,34,0.15); }

  .hero h1{font-size:28px;}
  .lead{font-size:16px; color:#444;}

  .hero-art {
      display: flex;
      justify-content: center;
      width: 100%;
  }
  .hero-art img { margin: 0 auto; }

  .card {
    background: #f8f8f8;
    color: #222;
  }
  .card h3{font-size:18px; color:#222;}
  .card p, .card .muted{color:#333;}
  .card .thumb { background: linear-gradient(180deg,#ddd,#bbb); }

  .section-about h3, .section-about p { color: #333; font-size: 16px; }
  .section-contact label { color: #333; font-size: 16px; }
  .contact-form input, .contact-form textarea { background: #e8e8e8; color:#222; border:1px solid #ccc; }
  .contact-form input::placeholder, .contact-form textarea::placeholder { color: #666; }

  .modal-panel{background:#f8f8f8;}
  .modal-body h3, .modal-body p, .feature-list{color:#222;}
}

@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr; text-align:center}
  .hero-art{order:-1}
  .product-grid{grid-template-columns:repeat(2,1fr)}
  .modal-body{flex-direction:column;align-items:center;padding:16px;gap:16px}
  .modal-body .gallery{width:100%; max-width:100%; display:none; margin-bottom:12px;}
  .modal-body .gallery img,
  .modal-body .gallery video{max-height:300px}
}

@media (max-width:640px){
  .product-grid{grid-template-columns:1fr}
  .about-grid{grid-template-columns:1fr}
  .modal-panel{max-width:90%;max-height:90vh;padding:12px;overflow-y:auto}
  .modal-body{flex-direction:column;align-items:center;gap:12px;padding:12px}
  .site-header .wrap{padding-left:16px;padding-right:16px}
}

@media (max-width:980px){
  #products p.muted { color: #000000; }
}

a[href^="tel"] {
  color: inherit;
  text-decoration: none;
  font-weight: inherit;
}