body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: #0a0a0a;
    color: white;
}

/* HEADER */
.header {
    background: black;
    padding: 20px;
    text-align: center;
}

.logo {
    font-size: 28px;
    font-weight: 800;
}

.menu {
    margin-top: 10px;
}

.menu a {
    color: #00c8ff;
    margin: 0 15px;
    text-decoration: none;
    font-weight: bold;
}

/* HERO */
.hero {
    padding: 60px 20px;
    background: linear-gradient(135deg, #00111c, #003b55);
    text-align: center;
    animation: fadeIn 1.5s;
}

.hero h2 {
    font-size: 32px;
    margin-bottom: 10px;
}

.hero p {
    font-size: 18px;
    opacity: 0.9;
}

/* SECTIONS */
.section {
    padding: 30px 20px;
}

.section h2 {
    font-size: 26px;
    margin-bottom: 15px;
}

/* OFFRES */
.offer {
    background: #111;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 15px;
    border: 1px solid #00c8ff;
}

.offer h3 {
    font-size: 22px;
}

.btn {
    display: inline-block;
    margin-top: 10px;
    padding: 12px 18px;
    background: #00c8ff;
    color: black;
    border-radius: 6px;
    font-weight: bold;
    text-decoration: none;
}

/* COMMENTAIRES */
.client-comment,
.user-comment {
    background: #111;
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 10px;
    border-left: 4px solid #00c8ff;
}

textarea {
    width: 100%;
    height: 70px;
    margin-top: 10px;
    border-radius: 6px;
    padding: 10px;
}

#sendComment {
    margin-top: 10px;
    padding: 10px 15px;
    background: #00c8ff;
    border: none;
    border-radius: 6px;
    font-weight: bold;
}

.deleteBtn {
    margin-top: 5px;
    padding: 6px 10px;
    background: red;
    color: white;
    border: none;
    border-radius: 5px;
    float: right;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
/* --- FONCTIONNALITÉS PREMIUM --- */

.features-premium {
    text-align: center;
}

.features-premium h2 {
    font-size: 28px;
    margin-bottom: 25px;
    color: #00c8ff;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 15px;
}

.feature-card {
    background: #0f0f0f;
    border: 1px solid #00c8ff55;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 0 15px #00c8ff33;
    transition: transform 0.2s, box-shadow 0.2s;
}

.feature-card:hover {
    transform: scale(1.05);
    box-shadow: 0 0 25px #00c8ffbb;
}

.feature-card .icon {
    font-size: 35px;
    display: block;
    margin-bottom: 10px;
}

.feature-card h3 {
    font-size: 18px;
    margin-bottom: 6px;
    color: #00c8ff;
}

.feature-card p {
    font-size: 14px;
    opacity: 0.8;
}

/* === Commentaires : style propre & responsive === */
.comment-section { padding: 36px 18px; max-width: 900px; margin: 0 auto; }
.comment-section h2 { font-size: 28px; margin-bottom: 18px; color: #fff; text-align: left; }

/* Form */
.comment-form { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.comment-form input, .comment-form textarea {
  width: 100%; padding: 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.08);
  background: #0f1622; color: #fff; font-size: 15px;
}
.comment-form button {
  width: 160px; padding: 10px 14px; border-radius: 10px; border: none;
  background: linear-gradient(90deg,#00c8ff,#00e676); color: #000; font-weight:700; cursor:pointer;
}

/* Rating (étoiles) */
.rating { display:flex; gap:8px; align-items:center; }
.rating span { font-size:28px; color: #4b5563; cursor: pointer; transition: transform .12s, color .12s; }
.rating span:hover { transform: translateY(-4px); }
.rating span.active { color: gold !important; text-shadow: 0 2px 8px rgba(255,215,0,0.25); }

/* Comments list */
.comments-list { display:flex; flex-direction:column; gap:12px; margin-top:12px; }
.comment-item {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  padding: 14px; border-radius: 10px; border-left: 6px solid #00c8ff; position: relative;
}
.comment-item .meta { display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.comment-item .meta .name { font-weight:700; color:#fff; }
.comment-item .meta .date { font-size:12px; color:#b9c0c8; margin-left:auto; }
.comment-stars { color: gold; font-size:16px; margin-right:8px; }

/* Delete button - hidden by default (admin only) */
.delete-btn {
  position: absolute; right: 12px; top: 12px;
  background: #ff5252; color: #fff; border:none; padding:6px 8px; border-radius:6px; cursor:pointer;
  display: none;
}

/* admin visible */
.comment-item.admin-visible .delete-btn { display: inline-block; }

/* responsive */
@media (max-width:600px){
  .comment-form button { width: 100%; }
  .rating span { font-size:24px; }
}

.comments-section {
  margin-top: 40px;
  padding: 20px;
}

.comment-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rating span {
  font-size: 28px;
  cursor: pointer;
  color: #ccc;
}

.rating span.active {
  color: gold;
}

.comments-list .comment-box {
  background: #111;
  padding: 12px 15px;
  border-radius: 10px;
  margin-top: 12px;
  border-left: 4px solid #00c8ff;
}

.comment-name {
  font-weight: bold;
  color: white;
  margin-bottom: 3px;
}

.comment-stars {
  color: gold;
  font-size: 20px;
  margin-bottom: 5px;
}

.comment-text {
  color: #ccc;
}

.img {
  width: 100%;
  max-width: 400px;
  border-radius: 10px;
  display: block;
  margin: 20px auto;
}