/*
Theme Name: SleekDev
Theme URI: https://www.jschristophe.fr
Author: Jean-Sébastien Christophe & Antigravity
Author URI: https://www.jschristophe.fr
Description: Un thème WordPress FSE (Full Site Editing) premium, épuré et minimaliste pour les développeurs passionnés de Symfony et DevOps. Doté d'un dark mode profond, d'effets glassmorphism et d'un affichage de code haut de gamme.
Version: 1.1.0
Requires at least: 6.2
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sleekdev
Tags: block-theme, full-site-editing, one-column, dark, micro-formats, editor-style, post-formats

SleekDev - Un thème premium conçu pour l'élégance technique.
*/

/* importation de Google Fonts pour une typographie futuriste ultra-premium */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;700&display=swap');

/* importation directe des styles officiels de Swiper.js pour éviter les blocages de rendu */
@import url('https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css');

:root {
  --wp--preset--font-family--sans: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  --wp--preset--font-family--heading: 'Outfit', sans-serif !important;
  --font-mono: 'JetBrains Mono', Courier, monospace;
}

/* Application des typographies globales */
body, p, li, a {
  font-family: var(--wp--preset--font-family--sans) !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--wp--preset--font-family--heading) !important;
}

/* Arrière-plan ultra-premium avec Grille Technique & Mesh Gradients (blobs colorés floutés) */
body {
  position: relative;
  background-color: #080c14 !important;
  background-image: 
    radial-gradient(circle at 0% 0%, rgba(59, 130, 246, 0.08) 0%, transparent 40%),
    radial-gradient(circle at 100% 100%, rgba(16, 185, 129, 0.05) 0%, transparent 45%),
    linear-gradient(rgba(255, 255, 255, 0.007) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.007) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 48px 48px, 48px 48px;
  background-attachment: fixed;
  overflow-x: hidden;
}

/* Scrollbar premium standardisée et WebKit fallback */
html {
  --scrollbar-thumb: #3b82f6;
  --scrollbar-track: #080c14;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  scrollbar-width: thin;
}

@supports not (scrollbar-color: auto) {
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  ::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 10px;
  }
  ::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
  }
}

/* Cartes d'articles haut de gamme : verre dépoli sombre avec glow au survol */
div.wp-block-post {
  border-radius: 20px !important;
  background: rgba(17, 24, 39, 0.5) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
  padding: 2.5rem !important;
  box-shadow: 0 10px 40px -15px rgba(0, 0, 0, 0.4) !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
              border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  margin-bottom: 2.5rem !important;
  position: relative;
  overflow: hidden;
}

/* Ligne néon subtile sur le côté gauche au survol */
div.wp-block-post::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, #3b82f6, #10b981);
  opacity: 0;
  transition: opacity 0.3s ease;
}

div.wp-block-post:hover {
  transform: translateY(-5px) scale(1.005) !important;
  border-color: rgba(59, 130, 246, 0.25) !important;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6), 
              0 0 30px 0 rgba(59, 130, 246, 0.08) !important;
}

div.wp-block-post:hover::before {
  opacity: 1;
}

/* Effets de verre (glassmorphism) sur le Header */
.glass-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  padding-top: 1.25rem !important;
  padding-bottom: 1.25rem !important;
  padding-left: 2rem !important;
  padding-right: 2rem !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: rgba(8, 12, 20, 0.75) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Blocs de code premium : Simule une fenêtre macOS avec points de couleur */
pre.wp-block-code {
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5) !important;
  background-color: #0b0f19 !important;
  border-radius: 12px !important;
  position: relative;
  padding-top: 2.8rem !important; /* Laisse la place pour les boutons macOS */
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}

pre.wp-block-code::before {
  content: '';
  position: absolute;
  top: 1rem;
  left: 1.25rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ff5f56;
  box-shadow: 20px 0 0 #ffbd2e, 40px 0 0 #27c93f;
}

/* Ajout d'une étiquette monospace indiquant le langage à droite du bloc de code */
pre.wp-block-code::after {
  content: 'PHP // SOURCE';
  position: absolute;
  top: 0.8rem;
  right: 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.25);
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* Style des liens avec soulignement progressif moderne */
a {
  transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

/* Pill de statut geek pour le Hero */
.geek-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 9999px;
  padding: 6px 14px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  color: #10b981;
  margin-bottom: 1.5rem;
}

.geek-status-dot {
  width: 8px;
  height: 8px;
  background-color: #10b981;
  border-radius: 50%;
  box-shadow: 0 0 10px #10b981;
  animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

/* Alignement en Grille ultra-pro pour les listes d'articles */
.wp-block-post-template {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
  gap: 2rem !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

/* Corrections FSE pour enlever les puces de liste */
.wp-block-post-template li {
  list-style: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Sidebar Card Styling */
.sidebar-card {
  background: rgba(17, 24, 39, 0.4) !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
  border-radius: 16px !important;
  padding: 1.75rem !important;
  margin-bottom: 2rem !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.sidebar-title {
  font-family: var(--wp--preset--font-family--heading) !important;
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  color: var(--wp--preset--color--foreground) !important;
  text-transform: uppercase !important;
  margin-top: 0 !important;
  margin-bottom: 1.25rem !important;
  border-left: 3px solid #3b82f6;
  padding-left: 0.75rem;
}

/* Badges technologiques */
.tech-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 6px;
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.15);
  color: #3b82f6;
  margin: 0.25rem;
  text-transform: uppercase;
  transition: all 0.2s ease;
}

.tech-badge:hover {
  background: rgba(59, 130, 246, 0.15);
  transform: translateY(-1px);
}

.tech-badge.devops {
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.15);
  color: #10b981;
}

.tech-badge.devops:hover {
  background: rgba(16, 185, 129, 0.15);
}

.tech-badge.geek {
  background: rgba(139, 92, 246, 0.08);
  border: 1px solid rgba(139, 92, 246, 0.15);
  color: #8b5cf6;
}

.tech-badge.geek:hover {
  background: rgba(139, 92, 246, 0.15);
}

/* Responsive fixes pour les colonnes de la page d'accueil */
@media (max-width: 960px) {
  .wp-block-columns {
    flex-direction: column !important;
  }
  .wp-block-column {
    flex-basis: 100% !important;
    width: 100% !important;
  }
}

/* Container de logo de l'en-tête (Gutenberg FSE Clean) */
.header-logo-container {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
}

/* Badge DEV de l'en-tête */
.header-dev-badge {
  padding-top: 2px !important;
  padding-bottom: 2px !important;
  padding-left: 6px !important;
  padding-right: 6px !important;
  border-radius: 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: 0.75rem !important;
}

.header-dev-badge-text {
  font-family: var(--font-mono) !important;
  font-size: 0.7rem !important;
  font-weight: 800 !important;
  color: #0b0f19 !important;
  letter-spacing: 0.05em !important;
  line-height: 1 !important;
}

/* ==========================================================================
   3. SWIPER.JS PREMIUM STYLES (DÉFILEMENT HORIZONTAL CONTINU / MARQUEE TICKER)
   ========================================================================== */
.articles-swiper {
  width: 100% !important;
  max-width: 100% !important;
  padding-top: 1rem !important;
  padding-bottom: 2rem !important;
  margin-bottom: 2.5rem !important; /* Ajoute de l'espace vertical respirant entre les carrousels thématiques */
  overflow: hidden !important; /* Cache proprement les articles débordant de la ligne */
  position: relative !important;
}

/* Force l'écrasement de la grille Gutenberg par un conteneur Flexbox horizontal pour Swiper */
.articles-swiper .wp-block-post-template.swiper-wrapper {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  height: 100% !important;
  list-style: none !important;
  /* Défilement linéaire ultra-fluide pour le mode Marquee */
  transition-timing-function: linear !important;
}

/* Formatage des slides en colonnes de largeur fixe adaptative (pour en avoir 1 à 5 sur une ligne) */
.articles-swiper .wp-block-post-template > li.swiper-slide {
  width: 468px !important; /* 420px de largeur de carte + 48px de padding-right pour l'espacement garanti */
  flex-shrink: 0 !important;
  margin-top: 0 !important;
  margin-left: 0 !important;
  margin-bottom: 0 !important;
  margin-right: 0 !important; /* On annule toute marge Swiper pour laisser le padding gérer l'espacement à 100% */
  padding-top: 0 !important;
  padding-left: 0 !important;
  padding-bottom: 0 !important;
  padding-right: 48px !important; /* Force l'espacement horizontal physique et stable de 48px entre les cartes */
  list-style: none !important;
  box-sizing: border-box !important;
  height: auto !important;
  transition: transform 0.3s ease !important;
}

@media (max-width: 1200px) {
  .articles-swiper .wp-block-post-template > li.swiper-slide {
    width: 408px !important; /* 360px de largeur de carte + 48px d'espacement */
  }
}

@media (max-width: 768px) {
  .articles-swiper .wp-block-post-template > li.swiper-slide {
    width: 348px !important; /* 300px de largeur de carte + 48px d'espacement (mobile) */
  }
}

/* Annule les marges Gutenberg par défaut et gère l'aspect de la carte d'article */
.articles-swiper .wp-block-post-template > li.swiper-slide > .wp-block-post {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important; /* Écrase le margin-bottom par défaut */
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: 2rem !important; /* Légère réduction du padding interne pour maximiser l'espace des tickers */
}

/* Titres de section premium pour les tickers */
.section-ticker-title {
  font-family: var(--wp--preset--font-family--heading) !important;
  font-size: 1.25rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #f8fafc !important;
  margin-top: 3.5rem !important;
  margin-bottom: 1.5rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  padding-bottom: 0.75rem;
}

.pulse-decor {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.pulse-decor.blue {
  background-color: #3b82f6;
  box-shadow: 0 0 10px #3b82f6;
  animation: pulse-decor-blue 2s infinite;
}

.pulse-decor.purple {
  background-color: #8b5cf6;
  box-shadow: 0 0 10px #8b5cf6;
  animation: pulse-decor-purple 2s infinite;
}

.pulse-decor.green {
  background-color: #10b981;
  box-shadow: 0 0 10px #10b981;
  animation: pulse-decor-green 2s infinite;
}

@keyframes pulse-decor-blue {
  0% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); }
  70% { transform: scale(1.1); box-shadow: 0 0 0 6px rgba(59, 130, 246, 0); }
  100% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}

@keyframes pulse-decor-purple {
  0% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.7); }
  70% { transform: scale(1.1); box-shadow: 0 0 0 6px rgba(139, 92, 246, 0); }
  100% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(139, 92, 246, 0); }
}

@keyframes pulse-decor-green {
  0% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { transform: scale(1.1); box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* ==========================================================================
   4. TIROIR COULISSANT (OFF-CANVAS SIDEBAR DRAWER) & BOUTON FLOTTANT
   ========================================================================== */
/* Bouton flottant de déclenchement (Pill radar-glow) */
.drawer-toggle {
  position: fixed !important;
  bottom: 2rem !important;
  right: 2rem !important;
  z-index: 99999 !important;
  background: linear-gradient(135deg, #3b82f6 0%, #10b981 100%) !important;
  color: #080c14 !important;
  font-family: var(--font-mono) !important;
  font-size: 0.75rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 14px 28px !important;
  border-radius: 9999px !important;
  box-shadow: 0 10px 30px rgba(59, 130, 246, 0.4) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.drawer-toggle:hover {
  transform: translateY(-5px) scale(1.03) !important;
  box-shadow: 0 20px 45px rgba(59, 130, 246, 0.6), 
              0 0 20px rgba(16, 185, 129, 0.3) !important;
  letter-spacing: 0.1em !important;
}

.drawer-toggle-pulse {
  width: 8px;
  height: 8px;
  background-color: #080c14;
  border-radius: 50%;
  animation: pulse-dark 1.8s infinite;
}

@keyframes pulse-dark {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(8, 12, 20, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 8px rgba(8, 12, 20, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(8, 12, 20, 0);
  }
}

/* Le Tiroir Coulissant */
.sidebar-drawer {
  position: fixed !important;
  top: 0 !important;
  right: -450px !important; /* Caché à droite */
  width: 420px !important;
  max-width: 90% !important;
  height: 100vh !important;
  background: rgba(8, 12, 20, 0.9) !important;
  backdrop-filter: blur(25px) !important;
  -webkit-backdrop-filter: blur(25px) !important;
  border-left: 1px solid rgba(255, 255, 255, 0.05) !important;
  box-shadow: -20px 0 50px rgba(0, 0, 0, 0.6) !important;
  z-index: 1000000 !important;
  transition: right 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
  padding: 3rem 2.5rem !important;
  overflow-y: auto !important; /* Permet le scroll interne */
  display: flex !important;
  flex-direction: column !important;
}

.sidebar-drawer.active {
  right: 0 !important;
}

/* Bouton Fermer du tiroir */
.drawer-close {
  align-self: flex-end !important;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.4) !important;
  font-family: var(--font-mono) !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  margin-bottom: 2.5rem !important;
  transition: all 0.3s ease !important;
  text-transform: uppercase;
}

.drawer-close:hover {
  border-color: #ff5f56 !important;
  color: #ff5f56 !important;
  background: rgba(255, 95, 86, 0.05) !important;
}

/* Overlay sombre en arrière-plan */
.drawer-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(4, 6, 10, 0.7) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  z-index: 999999 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.4s ease !important;
}

.drawer-overlay.active {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* ==========================================================================
   5. REFONTE DU MENU MOBILE DE WORDPRESS GUTENBERG (FSE)
   ========================================================================== */
/* Bouton d'ouverture du menu mobile */
.wp-block-navigation__responsive-container-open {
  background: rgba(17, 24, 39, 0.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  color: #f8fafc !important;
  transition: all 0.3s ease !important;
}

.wp-block-navigation__responsive-container-open:hover {
  border-color: var(--wp--preset--color--primary) !important;
  background: rgba(59, 130, 246, 0.08) !important;
}

/* Conteneur plein écran du menu mobile ouvert */
.wp-block-navigation__responsive-container.is-menu-open {
  background: rgba(8, 12, 20, 0.96) !important;
  backdrop-filter: blur(25px) !important;
  -webkit-backdrop-filter: blur(25px) !important;
  padding: 4rem 3rem !important;
  z-index: 100000 !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Alignement vertical pro des liens */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2.5rem !important;
}

/* Styling des liens du menu mobile */
.wp-block-navigation__responsive-container.is-menu-open a {
  font-family: var(--wp--preset--font-family--heading) !important;
  font-size: 1.75rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: #f8fafc !important;
  text-transform: uppercase !important;
  transition: color 0.3s ease !important;
  background: transparent !important;
  position: relative;
}

.wp-block-navigation__responsive-container.is-menu-open a:hover {
  color: var(--wp--preset--color--primary) !important;
}

/* Bouton de fermeture du menu mobile */
.wp-block-navigation__responsive-container-close {
  top: 1.5rem !important;
  right: 1.5rem !important;
  color: rgba(255, 255, 255, 0.6) !important;
}

.wp-block-navigation__responsive-container-close:hover {
  color: #ff5f56 !important;
}

/* ==========================================================================
   6. OPTIMISATIONS PLEIN ÉCRAN (ALIGNFULL) & BLOC SEO TERMINAL
   ========================================================================== */
/* Formule mathématique pour casser les limites de conteneurs et forcer le plein écran absolu */
.wp-block-group.alignfull .articles-swiper {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  position: relative !important;
  left: 0 !important;
}

/* Bloc SEO - Console Observabilité macOS */
.seo-manifesto-card {
  border-radius: 16px !important;
  background: rgba(17, 24, 39, 0.3) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
  box-shadow: 0 10px 40px -15px rgba(0, 0, 0, 0.4) !important;
  overflow: hidden;
  margin-top: 1rem !important;
}

.seo-terminal-header {
  background: rgba(11, 15, 25, 0.8) !important;
  padding: 10px 18px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
}

.seo-terminal-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #ffbd2e; /* Dot jaune style avertissement terminal */
  box-shadow: 0 0 8px #ffbd2e;
}

.seo-terminal-title {
  font-family: var(--font-mono) !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  color: rgba(255, 255, 255, 0.4) !important;
  letter-spacing: 0.05em !important;
}

.seo-manifesto-content {
  padding: 2rem !important;
}