/* === Thème sombre global - ESTHÉTIQUE === */
:root {
  --bg: #070709;
  --panel: #0f1114;
  --muted: #9aa0a6;
  --accent: #ff6b00;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  background: linear-gradient(0deg,#2C020A,var(--bg));
  color: #e6e6e6;
}

/* === Header === */
.site-header {
  background: linear-gradient(90deg,#0d0f12,#0b0c10); /* garde ton style */
  border-bottom: 1px solid rgba(255,255,255,0.03);
}

.header-inner {
  background: transparent !important;
}
.site-title {
  color: var(--accent);
}
.main-nav a {
  color: var(--muted);
  text-decoration: none;
}
.main-nav a:hover {
  color: #fff;
  background: rgba(255,255,255,0.02);
}


/* === Bouton menu mobile === */
#menu-toggle {
  background: var(--accent);
  color: #111;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
  transition: background 0.3s ease;
}
#menu-toggle:hover { background: #ff8533; }

/* === Sidebar === */
.sidebar {
  background: var(--panel);
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.05);
  transition: transform 0.4s ease, opacity 0.4s ease;
}

/* 🔧 Correction ici : .sidebar (avec le point) */
.sidebar ul li.menu-title {
  color: var(----accent);
  transition: all 0.25s ease-in-out;
  /*background: rgba(255,255,255,0.04);*/
}

/* Pour désactiver l’effet hover sur les titres */
.sidebar ul li.menu-title:hover {
  background: rgba(255,255,255,0.04);
  color: var(--muted);
  transform: none;
  text-shadow: none;
}

.sidebar h3 {
  color: var(--accent);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.sidebar ul li a {
  color: var(--muted);
  transition: all 0.25s ease-in-out;
}

.sidebar ul li a:hover {
  background: rgba(255,255,255,0.08);
  color: var(--accent);
  transform: translateX(4px);
  text-shadow: 0 0 6px rgba(255,107,0,0.3);
}
/* Scrollbar uniquement pour la sidebar */
.sidebar::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.05);  /* couleur du fond de la barre */
}

.sidebar::-webkit-scrollbar-thumb {
    background: rgba(255,107,0,0.4);    /* couleur du "curseur" */
}

.sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(255,107,0,0.6);    /* couleur au survol */
}
/* Firefox */
.sidebar {
    scrollbar-color: rgba(255,107,0,0.4) rgba(255,255,255,0.05);
}

/* === Cards === */
.card {
  background: var(--panel);
  box-shadow: 0 6px 18px rgba(0,0,0,0.6);
}
.meta { color: var(--muted); }
.btn {
  background: var(--accent);
  color: #071217;
}

/* === Footer === */
.site-footer {
  background: #070708;
  color: var(--muted);
  border-top: 1px solid rgba(255,255,255,0.02);
}
.footer-links a { color: var(--accent); }
.footer-links a:hover { text-decoration: underline; }

/* === Pagination === */
.pagination a, .pagination span {
  transition: all 0.2s ease;
}
.pagination a {
  background: rgba(255,255,255,0.08);
  color: #ddd;
}
.pagination a:hover { background: #357edd; color: #fff; }
.pagination .current { background: #285bb5; color: white; font-weight: bold; }
.pagination .dots { color: #888; }

/* === Nuage de tags === */
#tags h2 {
  color: var(--accent);
  text-shadow: 0 0 8px rgba(255,107,0,0.4);
}
.tag-cloud a {
  color: #9ea3aa;
  transition: all 0.3s ease;
  opacity: 0.85;
  animation: floaty 6s ease-in-out infinite;
}
.tag-cloud a:hover {
  color: #ff6b00;
  opacity: 1;
  transform: scale(1.15) rotateY(6deg);
  text-shadow: 0 0 10px rgba(255,107,0,0.6);
}
@keyframes floaty {
  0%,100% { transform: translateY(0px) rotateY(0deg); }
  25% { transform: translateY(-4px) rotateY(2deg); }
  50% { transform: translateY(2px) rotateY(-2deg); }
  75% { transform: translateY(-3px) rotateY(1deg); }
}

/* === Hero / Catégories === */
.categories-hero {
  background: linear-gradient(180deg, #0a0b0d 0%, #111317 100%);
}
.hero-card {
  background: linear-gradient(160deg, #131518 0%, #0e0f11 100%);
  box-shadow: 0 6px 18px rgba(0,0,0,0.6), inset 0 0 6px rgba(255,107,0,0.05);
  border: 1px solid rgba(255,255,255,0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  animation: fadeUp 0.6s ease both;
}
.hero-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.75), 0 0 10px rgba(255,107,0,0.2);
}
.hero-card figure { background: #15171a; }
.hero-content {
  background: linear-gradient(to top, #0f1114 0%, #121416 100%);
  color: #e0e0e0;
}
.hero-content h3.cat-name { color: var(--accent); text-shadow: 0 0 6px rgba(255,107,0,0.3); }
.hero-content h4 { color: #bbb; }
.hero-content p { color: #999; }
.hero-content .btn {
  background: linear-gradient(135deg, var(--accent), #ff8533);
  color: #111;
  box-shadow: 0 3px 10px rgba(255,107,0,0.3);
  transition: all 0.3s ease;
}
.hero-content .btn:hover {
  background: linear-gradient(135deg, #ff8c33, #ffb566);
  transform: scale(1.05);
  box-shadow: 0 4px 14px rgba(255,107,0,0.4);
}
@keyframes fadeUp { from { opacity:0; transform:translateY(15px);} to { opacity:1; transform:translateY(0);} }

/* === Responsive général === */
@media (max-width: 768px) {
  .card { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07); box-shadow:0 4px 16px rgba(0,0,0,0.45); transition:transform 0.3s ease, box-shadow 0.3s ease; }
}

/* === Sections Catégorie === */
.category-title { text-shadow:0 1px 4px rgba(0,0,0,0.2); }
.no-article { color:#777; }
/* === Formulaire de contact – harmonisé avec le thème sombre === */
.contact {
  background: linear-gradient(160deg, #121416, #0d0e10);
  border: 1px solid rgba(255,255,255,0.05);
  box-shadow: 0 6px 18px rgba(0,0,0,0.6),
              inset 0 0 6px rgba(255,107,0,0.05);
  color: #ddd;
}

.contact h2 {
  color: var(--accent);
}

.contact input:focus,
.contact textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 8px rgba(255,107,0,0.4);
  outline: none;
}
.contact h2,
.category-title {
  color: var(--accent);
  text-shadow: 0 0 8px rgba(255,107,0,0.25);
}

/* Captcha */
.contact .captcha img {
  background: #fff;
}

.contact .captcha a {
  color: var(--muted);
}

.contact .captcha a:hover {
  color: var(--accent);
}

/* Bouton d’envoi */
.contact button {
  background: linear-gradient(135deg, var(--accent), #ff8c33);
  color: #111;
  transition: background 0.3s, transform 0.2s;
}

.contact button:hover {
  background: linear-gradient(135deg, #ff9a4d, #ffb066);
  transform: scale(1.05);
  box-shadow: 0 4px 14px rgba(255,107,0,0.4);
}

/* Messages de feedback */
.contact .feedback-success {
  color: #5cff87;
}

.contact .feedback-error {
  color: #ff4c4c;
}
form {
  background: linear-gradient(160deg, #131518 0%, #0e0f11 100%);
  box-shadow: 0 6px 18px rgba(0,0,0,0.6),
              inset 0 0 6px rgba(255,107,0,0.05);
  border: 1px solid rgba(255,255,255,0.05);
}

label {
  color: #f5f5f5;
  text-shadow: 0 0 4px rgba(255,107,0,0.25);
}

input[type="text"],
input[type="email"],
textarea {
  background: #0c0d0f;
  color: #eee;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

input:focus,
textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 8px rgba(255,107,0,0.4);
  outline: none;
}

button[type="submit"] {
  background: linear-gradient(135deg, var(--accent), #ff8c33);
  color: #111;
  box-shadow: 0 3px 10px rgba(255,107,0,0.3);
  transition: background 0.3s ease, transform 0.2s ease;
}

button[type="submit"]:hover {
  background: linear-gradient(135deg, #ff9a4d, #ffb066);
  transform: scale(1.05);
  box-shadow: 0 4px 14px rgba(255,107,0,0.4);
}

section.contact form p.info-rgpd {
  color: #aaa;
}
/* === ARTICLE HERO-LIKE CENTRÉ === */
.article-full {
    background: var(--panel);      /* couleur inchangée */
    border-radius: 10px;        /* arrondi existant */
}

/* --- fond léger derrière l'article --- */
.article-full::before {
    background: linear-gradient(135deg, rgba(255,107,0,0.05), rgba(0,0,0,0.05));
}

/* --- image centrée dans l’article --- */
/* --- image centrée dans l’article --- */
.article-photo img {
    border-radius: 8px;
}

/* --- vidéo centrée dans l’article --- */
.article-video-block img {
    border-radius: 8px;
}

.article-video-block .video-container {
    border-radius: 8px;    /* arrondi similaire aux photos */
}

.article-video-block .video-container iframe {
    border-radius: 8px;
}



/* --- texte et métadonnées inchangés --- */
article .result-meta {
    color: var(--muted);
}

.article-link {
    background: #f9f9f9;
    border-radius: 8px;
}

.article-link .link-comment {
    color: #555;
}

.article-link .link-item a {
    color: #0044cc;
}

.article-link .link-item a:hover {
    text-decoration: underline;
}

.article-content p {
    color: #ddd;
}

.social-share a {
  color: white;
  background-color: #555;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.social-share a:hover {
  transform: scale(1.1);
}

.facebook:hover { background-color: #3b5998; }
.twitter:hover  { background-color: #000; }
.linkedin:hover { background-color: #0077b5; }
.instagram:hover { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }