:root {
  --brand1:#ff7b00;--brand2:#00c2ff;--ink:#111;--bg:#fff;--line:#e5e7eb;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:#333}
.container{max-width:1200px;margin:0 auto;padding:30px 16px}

/* HEADER */
.site-header{position:relative;min-height:68px;background:linear-gradient(90deg,var(--brand1),var(--brand2));color:#fff}
.hero{display:flex;align-items:center;gap:14px;padding:10px 16px}
.logo{width:80px;height:80px;border-radius:10px}
h1{font-size:clamp(18px,2vw,22px);font-weight:700;margin:0}
.sub{font-size:.95rem;opacity:.95;margin:4px 0 0}
.btn{margin-left:auto}

/* BOUTONS */
.btn{background:#fff;color:var(--brand1);border:none;padding:10px 18px;border-radius:999px;font-weight:700;cursor:pointer;box-shadow:0 6px 16px rgba(0,0,0,.16);transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-1px) scale(1.01)}
.btn.commander{background:linear-gradient(90deg,var(--brand1),var(--brand2));color:#fff;font-weight:700;padding:16px 40px;font-size:1.2rem;border-radius:999px;text-decoration:none;display:inline-block;margin-top:30px;box-shadow:0 6px 16px rgba(0,0,0,.15);transition:transform .2s,box-shadow .2s}
.btn.commander:hover{transform:scale(1.05);box-shadow:0 8px 20px rgba(0,0,0,.25)}
.contact-cta {
    text-align: center;
    margin: 40px 0;
}
.contact-cta .btn {
    display: inline-block;
}

/* INTRO */
.intro{text-align:center;margin:10px auto 6px}
.intro-logo{width:250px;max-width:60%;margin-bottom:10px}

.intro-heading {
  position: relative;
  font-family: 'Rubik Wet Paint', cursive;
  font-size: 3rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-align: center;
  margin: 0 0 18px;

  /* Fumée colorée mouvante */
  background:
    radial-gradient(60% 80% at 20% 30%, rgba(255,0,123,0.9), transparent 70%),
    radial-gradient(70% 60% at 80% 20%, rgba(0,194,255,0.9), transparent 70%),
    radial-gradient(50% 70% at 30% 80%, rgba(255,255,0,0.9), transparent 70%),
    radial-gradient(80% 80% at 70% 70%, rgba(0,255,136,0.9), transparent 70%),
    radial-gradient(90% 90% at 50% 50%, rgba(255,123,0,0.8), transparent 70%),
    radial-gradient(100% 100% at 10% 90%, rgba(123,0,255,0.9), transparent 70%);
  background-size: 200% 200%;
  background-position: 0% 0%, 100% 100%, 50% 0%, 0% 50%, 100% 0%, 50% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  border-inline-color: transparent;
  animation: smokeChaos 10s ease-in-out infinite;
  filter: saturate(150%) brightness(110%) drop-shadow(0 0 6px rgba(0,0,0,0.3));
}

@keyframes smokeChaos {
  0% {
    background-position: 0% 0%, 100% 100%, 50% 0%, 0% 50%, 100% 0%, 50% 100%;
  }
  25% {
    background-position: 30% 70%, 70% 20%, 80% 60%, 20% 40%, 60% 90%, 40% 10%;
    transform: rotate(1deg) scale(1.02);
  }
  50% {
    background-position: 80% 0%, 10% 80%, 30% 40%, 70% 60%, 40% 20%, 90% 80%;
    transform: rotate(-1deg) scale(1.03);
  }
  75% {
    background-position: 60% 80%, 0% 40%, 90% 20%, 10% 70%, 80% 30%, 20% 90%;
    transform: rotate(2deg) scale(1.01);
  }
  100% {
    background-position: 0% 0%, 100% 100%, 50% 0%, 0% 50%, 100% 0%, 50% 100%;
    transform: rotate(0deg) scale(1);
  }
}

/* CARTES PRODUITS */
.grid{display:grid;grid-template-columns:repeat(4,minmax(240px,1fr));gap:24px;align-items:stretch;justify-items:stretch;margin-top:24px}
.card{width:100%;background:#fff;border:1px solid #eee;border-radius:20px;padding:24px;text-align:center;box-shadow:0 2px 10px rgba(0,0,0,.06);position:relative;transition:transform .2s ease,box-shadow .2s ease}
.card:hover{transform:translateY(-6px);box-shadow:0 12px 28px rgba(0,0,0,.18)}
.card h3{font-size:1.3rem;margin:8px 0}
.mini{opacity:.8;margin-bottom:12px}
.price{margin-bottom:12px;font-weight:600;color:#222}
.price strong{color:#2d6f38}
.opt{list-style:disc;margin:0 auto 10px;padding-left:18px;text-align:left;line-height:1.55}
.peek{background:transparent;border:1px solid var(--brand1);color:var(--brand1);padding:8px 14px;border-radius:14px;font-weight:600;cursor:pointer;transition:all .2s}
.card-img{width:100%;border-radius:12px;margin-bottom:12px;box-shadow:0 20px 10px rgba(0,0,0,.1)}
.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 20px;
  padding: 24px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  position: relative;
  transition: transform .2s ease, box-shadow .2s ease;
}
.card ul.opt {flex-grow: 1;}
.peek {
  align-self: center;
  background: transparent;
  border: 1px solid var(--brand1);
  color: var(--brand1);
  padding: 8px 14px;
  border-radius: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
  margin-top: 10px;}


/* AVIS CLIENTS */
.avis-block{text-align:center;margin:36px auto 10px}
.avis-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;justify-items:center}
.avis-card{
  width:100%;
  max-width:340px;
  background:#fff;
  border:1px solid #eee;
  border-radius:16px;
  padding:20px;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
  text-align:left;
  transition: transform .25s ease, box-shadow .25s ease;
}
.avis-card:hover{transform:translateY(-6px);box-shadow:0 12px 28px rgba(0,0,0,.18);border-color:var(--brand1)}
.stars{color:#ffb400;font-size:18px;letter-spacing:2px;margin-bottom:8px}
.emoji{font-size:1rem;margin-left:4px;vertical-align:middle}
.avis-txt{line-height:1.55;margin:0 0 10px}
.avis-meta{font-size:.9rem;opacity:.75}

.avis-block h2 {
  text-align: center;
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 24px;
  letter-spacing: 0.5px;
}

/* PRIX CATALOGUE */
.price {
            font-size: 1.5em;
            color: #2e3792;
            font-weight: bold;
            margin: 10px 0;
            padding: 5px 0;
            border-top: 1px dashed #eee;
            border-bottom: 1px dashed #eee;
            text-align: center;
        }
        .price small { /* Nouveau style pour la mention "À partir de" */
            display: block;
            font-size: 0.5em;
            color: #6c757d;
            font-weight: normal;
        }

/* FAQ */
.faq{max-width:1000px;margin:50px auto 10px;padding:0 10px}
.faq h2{font-size:2rem;text-align:center;margin-bottom:10px}
.faq-sub{opacity:.85;text-align:center;margin-bottom:20px}
.faq-list{display:flex;flex-direction:column;gap:12px}
.faq-item{border-radius:14px;background:#fff;color:#000;border:1px solid #156922;overflow:hidden}
.faq-q{width:100%;text-align:left;background:transparent;color:inherit;border:0;padding:18px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;font-weight:600}
.caret{width:24px;height:24px;border:1px solid #000;border-radius:999px;display:grid;place-items:center;font-size:14px;opacity:.8}
.faq-a{display:none;padding:0 18px 18px;line-height:1.6;color:#000}
.faq-item.open .faq-a{display:block}
.faq-item.open .caret{background:#19f800}

/* Styles pour le tableau de remises dégressives */
        .discount-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
            margin-bottom: 20px;
            background-color: #f0f8ff; /* Couleur de fond plus claire */
            border: 2px solid #0056b3;
        }
        .discount-table th, .discount-table td {
            border: 1px solid #cce5ff;
            padding: 10px;
            text-align: center;
        }
        .discount-table th {
            background-color: #007bff;
            color: white;
            font-weight: bold;
        }
        .discount-table td:last-child {
            color: #28a745; /* Vert pour les remises */
            font-weight: 700;
            font-size: 1.1em;
        }

/* FOOTER */
.site-footer{margin:32px 0 12px;text-align:center;font-size:.9rem;opacity:.8}

/* RESPONSIVE */
@media (max-width:1200px){.grid{grid-template-columns:repeat(3,minmax(220px,1fr))}}
@media (max-width:900px){.grid{grid-template-columns:repeat(2,minmax(200px,1fr))}}
@media (max-width:640px){.grid{grid-template-columns:1fr}}
@media (max-width:480px){.avis-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion: reduce){.avis-card{transition:none;}}