: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; }

/* BOUTON CATALOGUE MULTICOLORE (Anciennement inline) */
.catalogue-btn {
    display: inline-block;
    padding: 12px 25px; 
    color: white; 
    text-align: center;
    text-decoration: none;
    border: none;
    border-radius: 8px; 
    font-size: 16px; 
    cursor: pointer;
    font-weight: bold;
    text-transform: uppercase; 
    transition: background-color 0.3s, box-shadow 0.3s, background-position 0.5s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); 
    background-image: linear-gradient(to right, #ff7e5f, #feb47b, #86a8e7, #91eac4);
}

/* 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;
  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 {
  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: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}
.card ul.opt {flex-grow: 1; list-style:disc;margin:0 auto 10px;padding-left:18px;text-align:left;line-height:1.55}
.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;
}
.card-img{width:100%;border-radius:12px;margin-bottom:12px;box-shadow:0 20px 10px rgba(0,0,0,.1)}

/* 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 { 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; 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; 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;}}