:root {
  --bg: #0b0c0b;
  --panel: #0f1310;
  --text: #f5f5f5;
  --muted: rgba(245,245,245,0.72);

  --accent: #1aff7a;

  --card: #ffffff;
  --card-text: #111;
  --card-muted: #444;

  --radius: 10px;
  --shadow: 0 10px 30px rgba(0,0,0,0.25);

  --container: 1200px;
  --font-title: 'Bebas Neue', sans-serif;
  --font-body: 'Space Grotesque', sans-serif;
}

* { box-sizing: border-box; }

html { 
  scroll-behavior: smooth;
  /* On supprime height: -webkit-fill-available qui peut bloquer le scroll */
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 300; 
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  text-rendering: optimizeLegibility;
  
  display: flex;
  flex-direction: column;
  /* On utilise 100dvh pour s'adapter dynamiquement aux barres des navigateurs mobiles */
  min-height: 100dvh; 
  overflow-x: hidden; 
}

/* 2. LE CONTENU (Pousse le footer) */
main {
  flex: 1 0 auto; /* Indispensable pour que le footer soit poussé en bas */
}

a {
  color: #e4e6eb;
  text-decoration: none;
}
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* HEADER */
.site-header {
  background: var(--panel);
  color: var(--text);
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(8px);
}

.header-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 1rem 1.25rem;
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}

.site-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.site-logo {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 50%;
}

.site-title {
  margin: 0;
  font-family: var(--font-title);
  letter-spacing: 0.08em;
  font-size: clamp(1.05rem, 0.9rem + 0.7vw, 1.4rem);
  text-transform: uppercase;
  font-weight: 800;
}
.site-title::after {
  content: "";
  display: block;
  width: 52px;
  height: 2px;
  background: var(--accent);
  margin-top: 6px;
  opacity: 0.9;
}

/* --- HEADER & NAVIGATION (ZERO SHIFT) --- */
.site-header {
  background: var(--panel);
  color: var(--text);
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(8px);
}

.header-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column; /* Mobile : Empilé */
  gap: 1.25rem;
  align-items: center;
}

.site-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.site-logo {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid var(--accent);
}

.site-title {
  margin: 0;
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 800;
  line-height: 1;
}

/* NAVIGATION DIRECTE */
.main-nav {
  display: flex;
  width: 100%;
  justify-content: space-around; /* Distribution égale sur mobile */
  border-top: 1px solid rgba(255,255,255,0.05);
  padding-top: 0.75rem;
}

.main-nav a {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text);
  opacity: 0.8;
  transition: color 0.2s, opacity 0.2s;
}

.main-nav a:hover {
  color: var(--accent);
  opacity: 1;
  text-decoration: none;
}

/* --- ADAPTATION DESKTOP (Largeur > 850px) --- */
@media (min-width: 850px) {
  .header-inner {
    flex-direction: row; /* Une seule ligne */
    justify-content: space-between;
    padding: 1rem 1.25rem;
  }

  .main-nav {
    width: auto;
    border-top: none;
    padding-top: 0;
    gap: 2rem;
  }

  .main-nav a {
    font-size: 0.85rem;
  }

  .site-title {
    font-size: 1.4rem;
  }
}

/* INTRO */
.intro {
  padding: 1.5rem 0;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.08rem);
  color: var(--muted);
}
.intro a { font-weight: 650; }

/* GRID */
.articles-grid {
  display: grid;
  gap: 1rem;
  padding: 0 0 2rem;
}
@media (min-width: 768px) {
  .articles-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
  }
  .articles-grid > .card { grid-column: span 2; }
  .articles-grid > .card--featured { grid-column: span 3; }
}

/* --- CARDS : L'ESSENCE CHROMATIQUE --- */
.card {
  background: #293928; 
  /*border: 1px solid rgba(26, 255, 122, 0.15); /* Bordure verte très subtile */
  /*border-radius: var(--radius);*/
  overflow: hidden;
  transition: all 0.3s ease;
  /* Un léger halo permanent pour la profondeur */
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5), inset 0 0 10px rgba(26, 255, 122, 0.05);
}

.card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  /* On ne supprime plus la couleur, on la distille */
  filter: saturate(0.45) contrast(1.15) brightness(0.85);
  transition: filter 0.4s ease;
}

/* Sur Mobile, on garde ce look "distillé". 
   Sur Desktop, on peut se permettre de libérer la couleur au hover */
@media (hover: hover) {
  .card:hover {
    border-color: var(--accent);
    box-shadow: 0 0 30px rgba(26, 255, 122, 0.1);
    transform: translateY(-4px);
  }
  .card:hover img {
    filter: saturate(1) contrast(1) brightness(1);
  }
}

.card-content {
  padding: 1.25rem;
  border-top: 1px solid rgba(26, 255, 122, 0.1);
}

.card h2 {
  margin: 0 0 0.5rem 0;
  font-size: 1.1rem;
  text-transform: uppercase;
  color: var(--accent); /* Le vert guide la lecture */
  letter-spacing: 0.05em;
}

.card-teaser {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--muted);
}

.read-more {
  display: block;
  margin-top: 0.5rem;
  color: var(--accent); /* Ton vert Bisley */
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
}

/* Effet au survol de la carte entière */
.card:hover .read-more {
  text-decoration: underline;
  filter: brightness(1.2);
}

/* --- SECTION SOCIAL --- */
.social-feed {
  padding: 4rem 1.25rem;
  text-align: center;
  background: var(--bg);
}

.social-feed h2 {
  font-family: var(--font-title); /* Bebas Neue */
  font-size: 2.2rem;
  color: var(--accent);
  margin-bottom: 2.5rem;
  text-transform: uppercase;
}

.instagram-wrapper {
  max-width: 500px; /* Largeur standard Instagram */
  margin: 0 auto;
  background: #fff; /* On assume le blanc interne mais on le cadre */
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: 0 0 40px rgba(26, 255, 122, 0.2); /* Halo radioactif */
  overflow: hidden;
  line-height: 0; /* Supprime l'espace parasite sous l'iframe */
}

.instagram-wrapper iframe {
  width: 100% !important;
  height: 480px; /* Ajuste selon la hauteur du widget */
  border: none;
  display: block;
}

@media (max-width: 600px) {
  .instagram-wrapper {
    max-width: 100%;
  }
  .instagram-wrapper iframe {
    height: 420px; /* Un peu plus court sur mobile */
  }
}

/* FOOTER */
.site-footer {
  background: #111;
  color: rgba(255,255,255,0.85);
  text-align: center;
  padding: 5rem 1.25rem; /* Espace généreux pour le pouce */
  margin-top: auto;      /* Force le placement au fond */
  font-size: 0.85rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}

/* --- HERO ARTICLE (Réduit sans rognage) --- */
.article-hero {
  width: 100%;
  display: flex;
  justify-content: center; /* Centre l'image si elle est plus petite que le conteneur */
  margin-bottom: 2rem;
}

.article-hero img {
  width: 100%;
  max-width: 850px; /* Limite la largeur sur Desktop pour réduire la hauteur */
  height: auto;     /* Garde les proportions d'origine sans rogner */
  display: block;
  border-radius: 4px;
}

.article-content {
  max-width: 800px; /* Plus étroit pour le confort de lecture */
  margin: 0 auto;
  padding-bottom: 5rem;
}

.article-header {
  margin-bottom: 1.5rem; /* Réduit de 3rem à 1.5rem */
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding-bottom: 1rem; /* Réduit de 2rem à 1rem */
}

/* --- ARTICLE HEADER & INTRO --- */
.article-header h1 {
  font-family: var(--font-title);
  /* Taille massive et impactante sur Desktop, s'adapte sur mobile */
  font-size: clamp(2.8rem, 6vw, 4.5rem); 
  line-height: 0.85;
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 1.5rem 0;
}

.article-intro {
  /* L'intro gagne en présence pour faire le pont avec le texte */
  font-size: 1.4rem; 
  font-weight: 500;
  color: var(--accent);
  line-height: 1.5;
  max-width: 800px;
}

/* --- TEXT CONTENT --- */
.article-body {
  /* On centre et on limite la largeur pour le confort de l'œil */
  max-width: 750px; 
  margin: 0 auto;
}

.article-body h2 {
  font-family: var(--font-title);
  font-size: 2.5rem; 
  color: var(--accent); 
  /* On réduit la marge du haut à 2rem et celle du bas à 0.8rem */
  margin: 2rem 0 0.8rem; 
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.1;
  scroll-margin-top: 100px;
}

.article-body p {
  /* Taille augmentée pour éviter la fatigue visuelle sur portable */
  font-size: 1.2rem; 
  line-height: 1.75; 
  margin-bottom: 1.8rem;
  color: var(--muted);
  font-weight: 300;
  line-height: 1.3;
  /*text-align: justify;*/
}

/* --- QUOTES --- */
blockquote {
  margin: 3.5rem 0;
  padding: 2rem 2.5rem;
  border-left: 5px solid var(--accent);
  background: var(--panel);
  /* La citation devient une pièce centrale du design */
  font-style: italic;
  font-size: 1.4rem; 
  line-height: 1.6;
  color: var(--text);
  border-radius: 0 4px 4px 0;
}

blockquote cite {
  display: block;
  margin-top: 1.2rem;
  font-size: 0.95rem;
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
}

/* IMAGES & FIGURES */
figure {
  margin: 1.5rem 0;
}

/* --- IMAGES CENTRÉES (Format Comics) --- */
.image-centered {
  display: flex;
  flex-direction: column;
  align-items: center; /* Centre l'image et la légende */
  margin: 1.5rem 0;
}

.image-centered img {
  width: 100%;
  max-width: 480px; /* Empêche l'image de devenir trop grande sur Desktop */
  height: auto;
  display: block;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 15px 40px rgba(0,0,0,0.4); /* Ajoute de la profondeur */
}

.image-centered figcaption {
  margin-top: 1.25rem;
  max-width: 480px; /* Aligne la largeur du texte sur celle de l'image */
}

.image-duo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.image-duo-grid img {
  width: 100%;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

figcaption {
  margin-top: 1rem;
  font-size: 0.85rem;
  color: var(--muted);
  text-align: center;
  font-style: italic;
}

/* SOURCES SECTION */
/* --- BASE DES LISTES --- */
.article-body ul {
  list-style: none; /* On supprime les puces standard */
  padding-left: 1rem;
  margin: 2rem 0;
}

.article-body li {
  position: relative;
  padding-left: 2rem; /* Un peu plus d'espace pour l'icône et le halo */
  margin-bottom: 1rem;
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--text); /* Couleur de texte standard par défaut */
}

/* --- NOUVEAU : Liens verts dans les listes (Cohérence UX) --- */
.article-body li a {
  color: var(--accent) !important; /* Force la couleur verte pour le lien */
  text-decoration: none;
  transition: all 0.3s ease;
  border-bottom: 1px solid transparent; /* Prépare un soulignement propre */
}

.article-body li a:hover {
  opacity: 0.8; /* Léger effet de survol */
  border-bottom-color: var(--accent); /* Soulignement vert au survol */
}


/* --- 1. La classe MÉCANIQUE (Clé à molette brute) --- */
/* Note : Pas de halo ici, ça ferait un carré vert bizarre derrière l'émoji */
.article-body .list-wrench li::before {
  content: "🔧" !important;
  position: absolute;
  left: 0;
  top: 0.1rem;
  font-size: 1.2rem;
  /* Nettoyage des styles du losange */
  background-color: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  width: auto !important;
  height: auto !important;
}

/* --- 2. La classe RADICALE (Le losange AVEC HALO) --- */
.article-body .list-default li::before {
  content: "";
  position: absolute;
  left: 0.4rem; /* Centré par rapport au padding-left de 2rem */
  top: 0.7rem;
  width: 8px;
  height: 8px;
  background-color: var(--accent);
  /* LE RETOUR DU HALO RADIOACTIF */
  box-shadow: 0 0 10px var(--accent), 0 0 5px var(--accent); 
  transform: rotate(45deg);
}

/* --- 3. La classe LOBO (Crâne brut) --- */
.article-body .list-skull li::before {
  content: "💀" !important;
  position: absolute;
  left: 0;
  top: 0.1rem;
  font-size: 1.2rem;
  /* Nettoyage */
  background-color: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  width: auto !important;
  height: auto !important;
}

/* --- BOUTON BACK TO TOP RADICAL --- */
#backToTop {
  position: fixed;
  bottom: 40px;
  right: 40px;
  z-index: 1000;
  width: 54px;
  height: 54px;
  
  /* On utilise tes variables pour la pureté */
  background-color: var(--bg);
  color: var(--accent);
  border: 2px solid var(--accent);
  border-radius: 4px;
  
  font-family: var(--font-title);
  font-size: 1.8rem;
  cursor: pointer;
  
  /* État initial : invisible et décalé vers le bas */
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  
  /* Transition soignée avec un effet "ressort" */
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 0 20px rgba(26, 255, 122, 0.15);
}

/* Classe activée par le JavaScript */
#backToTop.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#backToTop:hover {
  background-color: var(--accent);
  color: var(--bg);
  box-shadow: 0 0 35px var(--accent); /* Halo plus intense au survol */
}

/* --- STYLE DES LISTES (UL LI) RADICAL --- */
.article-body ul {
  list-style: none; /* On enlève les puces par défaut */
  padding-left: 1rem;
  margin: 2rem 0;
}

.article-body li {
  position: relative;
  padding-left: 1.8rem;
  margin-bottom: 1rem;
  font-size: 1.2rem; /* Aligné sur tes paragraphes */
  line-height: 1.6;
  color: var(--muted);
}

/* La puce personnalisée : un petit carré vert électrique */
.article-body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6rem; /* Ajuste la hauteur selon la police */
  width: 8px;
  height: 8px;
  background-color: var(--accent);
  box-shadow: 0 0 10px var(--accent); /* Petit halo radioactif */
  transform: rotate(45deg); /* On le tourne pour un look plus agressif */
}

/* --- COMPOSITE GRID (3 Petites + 1 Grande) --- */
.image-composite-grid {
  display: grid;
  gap: 1rem; /* L'espacement entre tes images */
  margin: 3.5rem 0;
  width: 100%;
}

.image-composite-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Important pour que les 3 du haut gardent la même taille */
  display: block;
  border-radius: 4px;
}

/* --- CONFIGURATION DESKTOP --- */
@media (min-width: 768px) {
  .image-composite-grid {
    /* On crée 3 colonnes égales */
    grid-template-columns: repeat(3, 1fr);
  }

  .item-small {
    aspect-ratio: 1 / 1; /* Force un format carré pour les vignettes */
  }

  .item-large {
    /* La grande image prend les 3 colonnes de large */
    grid-column: span 3;
    margin-top: 0.5rem;
  }
}

@media (max-width: 767px) {
  .image-composite-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px; /* Un espacement serré et constant */
    width: 90%; 
    max-width: 420px; /* On limite la taille pour éviter l'effet "trop grand" */
    margin: 2rem auto;
    padding: 0;
  }

  .grid-item {
    /* --- LA CLÉ DU PROBLÈME --- */
    margin: 0 !important; /* Force la suppression des marges par défaut de la balise figure */
    padding: 0;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    position: relative; /* Pour positionner le texte "Jesse" proprement */
  }

  .grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .grid-item figcaption {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  color: white;
  font-size: 0.8rem;
  padding: 10px 0;
  text-align: center;
  pointer-events: none; /* Pour que le clic passe à travers vers l'image */
}
}

/* --- GRILLE 2x2 STABLE (Sans aspect-ratio) --- */
.image-grid-2x2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    /* width: 90%; */
    max-width: 745px;
    /* margin: 3rem auto 4rem auto; */
    overflow: hidden;
}

.image-grid-2x2 figure {
  margin: 0 !important;
  padding: 0;
}

.image-grid-2x2 img {
  width: 100%;
  /* Au lieu de l'aspect-ratio, on fixe une hauteur pour l'uniformité */
  height: 300px; 
  object-fit: cover; /* Recadre l'image pour remplir les 200px sans l'écraser */
  display: block;
  border-radius: 4px;
}

/* Ajustement pour les très petits écrans */
@media (max-width: 480px) {
  .image-grid-2x2 img {
    height: 150px; /* On réduit un peu la hauteur sur petit mobile */
  }
}

/* --- LIGHTBOX (Agrandissement) --- */
.lightbox {
  display: none; 
  position: fixed;
  z-index: 2000; 
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.95); 
  
  /* ON REMPLACE zoom-out PAR pointer ICI */
  cursor: pointer; 
}

.lightbox-content {
  margin: auto;
  display: block;
  max-width: 90%;
  max-height: 90%;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);
  
  /* On s'assure que même sur l'image, on garde le pointeur simple */
  cursor: pointer;
}

.close-lightbox {
  position: absolute;
  top: 20px;
  right: 35px;
  color: var(--accent); /* Ton vert électrique */
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
}

/* On change le curseur sur les images cliquables de l'article */
.article-body img {
  cursor: pointer; /* Un simple pointeur "main", beaucoup plus propre */
}

/* --- CONTENEUR VIDÉO RESPONSIVE --- */
.video-container {
  width: 100%;
  max-width: 850px; /* Aligné sur tes images pour la cohérence visuelle */
  margin: 2.5rem auto; /* On garde un espacement sain mais pas excessif */
  aspect-ratio: 16 / 9; /* Force le format cinéma sans calculs compliqués */
  background: #000;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1); /* Un liseré discret pour le relief */
}

.video-container iframe {
  width: 100%;
  height: 100%;
  display: block;
}

/* Ajustement Mobile */
@media (max-width: 767px) {
  .video-container {
    width: 95%; /* Comme pour tes images, on occupe presque tout l'écran */
    margin: 2rem auto;
  }
}