/*
 * Refonte design jeuxpornoia.fr — dark gaming
 * Chargée par mu-plugins/jpia-design.php APRÈS les styles GeneratePress.
 * CSS uniquement : aucun changement de markup, de contenu ni de SEO.
 * Rollback : supprimer ce fichier + le mu-plugin.
 */

/* ==========================================================================
   1. Palette — surcharge des variables globales GeneratePress
   ========================================================================== */
:root {
  --contrast: #f1f1f8;      /* titres */
  --contrast-2: #c0c1d4;    /* texte courant */
  --contrast-3: #9fa0b8;    /* texte atténué, nav */
  --base: #1c1c30;          /* surfaces élevées (sous-menus) */
  --base-2: #0f0f1b;        /* fond du site */
  --base-3: #151525;        /* cartes, articles */
  --accent: #a855f7;        /* violet néon */

  --jpia-violet: #a855f7;
  --jpia-fuchsia: #d946ef;
  --jpia-violet-soft: #c084fc;
  --jpia-bg-deep: #0a0a13;
  --jpia-border: rgba(255, 255, 255, 0.07);
  --jpia-border-accent: rgba(168, 85, 247, 0.35);
  --jpia-glow: 0 10px 40px -10px rgba(168, 85, 247, 0.45);
}

/* ==========================================================================
   2. Base : fond, typographie, liens
   ========================================================================== */
body {
  background-color: var(--base-2);
  background-image: radial-gradient(ellipse 80% 40% at 50% -5%, rgba(124, 58, 237, 0.18), transparent 70%);
  background-repeat: no-repeat;
  font-family: "Inter", "Heebo", system-ui, sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.7;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Space Grotesk", "Prata", sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

h1.entry-title {
  background: linear-gradient(115deg, #f1f1f8 35%, var(--jpia-violet-soft) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

a {
  color: var(--jpia-violet-soft);
  transition: color 0.2s ease;
}

a:hover, a:focus, a:active {
  color: #e0aaff;
}

::selection {
  background: rgba(168, 85, 247, 0.45);
  color: #fff;
}

:focus-visible {
  outline: 2px solid var(--jpia-violet);
  outline-offset: 2px;
}

/* Scrollbar (WebKit) */
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--jpia-bg-deep); }
::-webkit-scrollbar-thumb {
  background: #2e2e4a;
  border-radius: 6px;
  border: 3px solid var(--jpia-bg-deep);
}
::-webkit-scrollbar-thumb:hover { background: #4c3a78; }

/* ==========================================================================
   3. Header + navigation : verre dépoli, accents violets
   ========================================================================== */
.top-bar {
  background-color: var(--jpia-bg-deep);
  color: var(--contrast-3);
  border-bottom: 1px solid var(--jpia-border);
}
.top-bar a { color: var(--contrast-2); }
.top-bar a:hover { color: var(--jpia-violet-soft); }

.site-header {
  background-color: rgba(15, 15, 27, 0.85);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.main-navigation:not(.slideout-navigation) {
  background-color: rgba(15, 15, 27, 0.88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--jpia-border);
  box-shadow: 0 8px 30px -12px rgba(0, 0, 0, 0.6);
}

.main-navigation a,
.main-navigation .menu-toggle,
.main-navigation .menu-bar-items {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.1em;
}

.main-navigation .main-nav ul li a {
  position: relative;
  transition: color 0.2s ease;
}

.main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a,
.main-navigation .main-nav ul li:not([class*="current-menu-"]):focus > a,
.main-navigation .main-nav ul li.sfHover:not([class*="current-menu-"]) > a {
  color: var(--jpia-violet-soft);
  background-color: transparent;
}

.main-navigation .main-nav ul li[class*="current-menu-"] > a {
  color: var(--jpia-violet-soft);
  background-color: transparent;
}

/* Sous-menus */
.main-navigation ul ul {
  background-color: var(--base);
  border: 1px solid var(--jpia-border);
  border-radius: 10px;
  box-shadow: 0 14px 40px -10px rgba(0, 0, 0, 0.7);
}
.main-navigation .main-nav ul ul li a { color: var(--contrast-2); }
.main-navigation .main-nav ul ul li:not([class*="current-menu-"]):hover > a,
.main-navigation .main-nav ul ul li:not([class*="current-menu-"]):focus > a,
.main-navigation .main-nav ul ul li.sfHover:not([class*="current-menu-"]) > a,
.main-navigation .main-nav ul ul li[class*="current-menu-"] > a {
  color: var(--jpia-violet-soft);
}

/* Menu mobile / slideout */
.slideout-navigation {
  background-color: var(--jpia-bg-deep);
}
.mobile-menu-control-wrapper .menu-toggle,
.mobile-menu-control-wrapper .menu-toggle:hover,
.mobile-menu-control-wrapper .menu-toggle:focus,
.has-inline-mobile-toggle #site-navigation.toggled {
  background-color: rgba(168, 85, 247, 0.08);
}

.main-title a, .main-title a:hover { color: var(--contrast); }
.site-description { color: var(--contrast-3); }

/* ==========================================================================
   4. Cartes de jeux (grille masonry de l'accueil + query loops)
   ========================================================================== */
.masonry-post .gb-block-image,
.gb-query-loop-item .gb-block-image {
  position: relative;
  border-radius: 12px;
}

.masonry-post .gb-block-image img,
.gb-query-loop-item .gb-block-image img {
  border-radius: 12px;
  border: 1px solid var(--jpia-border);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.masonry-post .gb-block-image a:hover img,
.gb-query-loop-item .gb-block-image a:hover img {
  transform: translateY(-5px);
  border-color: var(--jpia-border-accent);
  box-shadow: var(--jpia-glow);
}

/* ==========================================================================
   5. Conteneurs d'articles (fiches) : effet carte
   ========================================================================== */
.separate-containers .inside-article,
.separate-containers .comments-area,
.separate-containers .page-header,
.separate-containers .paging-navigation,
.inside-page-header {
  background-color: var(--base-3);
  border: 1px solid var(--jpia-border);
  border-radius: 16px;
}

.entry-title a { color: var(--contrast); }
.entry-title a:hover { color: var(--jpia-violet-soft); }
.entry-meta { color: var(--contrast-3); font-size: 14px; }

/* Contenu : images et embeds vidéo arrondis */
.entry-content img, .dynamic-entry-content img { border-radius: 12px; }
.entry-content iframe, .dynamic-entry-content iframe { border-radius: 12px; }
.entry-content div[style*="padding-bottom"],
.dynamic-entry-content div[style*="padding-bottom"] {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 16px 50px -16px rgba(0, 0, 0, 0.65);
}

/* Titres de sections des fiches : marqueur violet */
.entry-content h2,
.dynamic-entry-content h2 {
  padding-left: 16px;
  border-left: 4px solid var(--jpia-violet);
  border-image: linear-gradient(180deg, var(--jpia-violet), var(--jpia-fuchsia)) 1;
}

blockquote {
  border-left: 4px solid var(--jpia-violet);
  background: rgba(168, 85, 247, 0.06);
  border-radius: 0 10px 10px 0;
}

hr { border-color: var(--jpia-border); background: var(--jpia-border); }

/* ==========================================================================
   6. Tableaux comparatifs
   ========================================================================== */
.entry-content table,
.dynamic-entry-content table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  border: 1px solid var(--jpia-border);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
}

.entry-content th,
.dynamic-entry-content th {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.28), rgba(217, 70, 239, 0.16));
  color: var(--contrast);
  font-family: "Space Grotesk", sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 14px 16px;
  border: 0;
  border-bottom: 1px solid var(--jpia-border-accent);
  text-align: left;
}

.entry-content td,
.dynamic-entry-content td {
  padding: 12px 16px;
  border: 0;
  border-bottom: 1px solid var(--jpia-border);
}

.entry-content tr:last-child td,
.dynamic-entry-content tr:last-child td { border-bottom: 0; }
.entry-content tbody tr:nth-child(even) td,
.dynamic-entry-content tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.025); }
.entry-content tbody tr:hover td,
.dynamic-entry-content tbody tr:hover td { background: rgba(168, 85, 247, 0.07); }

.wp-block-table { overflow-x: auto; }

/* Sur mobile, les tableaux défilent horizontalement au lieu de s'écraser */
@media (max-width: 600px) {
  .entry-content table,
  .dynamic-entry-content table {
    min-width: 560px;
    table-layout: auto;
  }
}

/* ==========================================================================
   7. Boutons et CTA
   ========================================================================== */
button:not(.menu-toggle),
html input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
a.button,
.wp-block-button .wp-block-button__link,
a.wp-block-button__link:not(.has-background) {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: 14px;
  text-transform: none;
  letter-spacing: 0.02em;
  color: #fff;
  background: linear-gradient(135deg, #8b5cf6, var(--jpia-fuchsia));
  border: 0;
  border-radius: 10px;
  box-shadow: 0 6px 24px -8px rgba(168, 85, 247, 0.55);
  transition: filter 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

button:not(.menu-toggle):hover,
html input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
a.button:hover,
a.button:focus,
a.wp-block-button__link:not(.has-background):hover,
a.wp-block-button__link:not(.has-background):focus,
a.wp-block-button__link:not(.has-background):active {
  color: #fff;
  background: linear-gradient(135deg, #8b5cf6, var(--jpia-fuchsia));
  filter: brightness(1.15);
  transform: translateY(-1px);
  box-shadow: 0 10px 32px -8px rgba(168, 85, 247, 0.7);
}

a.generate-back-to-top {
  background-color: rgba(168, 85, 247, 0.85);
  border-radius: 10px;
}
a.generate-back-to-top:hover,
a.generate-back-to-top:focus {
  background-color: var(--jpia-violet);
}

/* Pagination */
.paging-navigation a,
.paging-navigation span {
  border-radius: 8px;
}

/* ==========================================================================
   8. Formulaires
   ========================================================================== */
input[type="text"], input[type="email"], input[type="url"],
input[type="password"], input[type="search"], input[type="tel"],
input[type="number"], textarea, select {
  color: var(--contrast-2);
  background-color: var(--base);
  border: 1px solid var(--jpia-border);
  border-radius: 10px;
}

input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus,
input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus,
input[type="number"]:focus, textarea:focus, select:focus {
  color: var(--contrast);
  background-color: var(--base);
  border-color: var(--jpia-border-accent);
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.18);
}

/* ==========================================================================
   9. Footer
   ========================================================================== */
footer.gb-container-3731f23d {
  background-color: var(--jpia-bg-deep);
  border-top: 1px solid var(--jpia-border);
}

.footer-widgets { background-color: var(--jpia-bg-deep); }
.footer-widgets .widget-title { color: var(--contrast); }
.sidebar .widget { background-color: var(--base-3); }

.site-info {
  background-color: #08080f;
  color: var(--contrast-3);
}
.site-info a { color: var(--contrast-2); }
.site-info a:hover { color: var(--jpia-violet-soft); }

/* ==========================================================================
   10. Divers
   ========================================================================== */
/* Modale de recherche GP */
:root {
  --gp-search-modal-bg-color: var(--base);
  --gp-search-modal-text-color: var(--contrast);
  --gp-search-modal-overlay-bg-color: rgba(8, 8, 15, 0.7);
}

/* Légendes d'images */
figcaption { color: var(--contrast-3); }

/* Compatibilité : classes de couleur des presets WP sur fond sombre */
.has-black-color { color: var(--contrast) !important; }