/* ==========================================================================
   1. Variables & Configuration de Base (Mobile First)
   ========================================================================== */
:root {
   --transparent-white: rgba(255, 255, 255, 0.2);
}

/* Règle globale pour un calcul de taille prévisible */
*, *::before, *::after {
   box-sizing: border-box;
   zoom: 98%;
}


body {
   background: #590000;
   background: linear-gradient(90deg,rgb(89, 0, 74) 0%, rgba(0, 34, 79, 1) 100%);
   color: white;
   margin: 0;
   font-family: "Roboto", sans-serif;
   letter-spacing: 1px;
   font-size: 16px;
   line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
   font-family: "Bebas Neue", sans-serif;
   font-weight: normal;
   letter-spacing: 3px;
   margin: 0.6em 0;
}

a {
   text-decoration: none; 
   color: white;
}

/* Supprime le contour bleu au clic (focus), mais le conserve pour la navigation au clavier */
:focus:not(:focus-visible) {
   outline: none;
   box-shadow: none;
}

/* ==========================================================================
   2. Header
   ========================================================================== */
header {
   font-family: "Bebas Neue", sans-serif;
   letter-spacing: 3px;
   font-size: 100%; /* Taille de base réduite pour les mobiles */
   align-items: center;
   display: flex;
   flex-wrap: wrap; /* Permet aux éléments de passer à la ligne sur mobile */
   justify-content: space-between;
   padding: 15px;
   background-color: rgba(0, 0, 0, 0.3);
}

header div a{
   margin: 5px 10px; /* Marges réduites pour mobile */
   text-decoration: underline 3px transparent;
   transition: ease-in-out 300ms;
   text-underline-offset: 4px;
}

header button {
   background-color: transparent;
   color: white;
   border: white solid 2px;
   border-radius: 20px;
   padding: 5px 15px;
   font-size: 90%;
   box-shadow: 0 0 10px rgba(255, 255, 255, 0.3); /* Ajoute un effet de halo */
   font-family: "Bebas Neue", sans-serif;
   letter-spacing: 3px;
}

/* ==========================================================================
   3. Layout Principal & Sections
   ========================================================================== */

.author-card {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   top: 55%; /* Ajusté pour laisser plus de place au header */
   transform: translate(-50%, -50%); 
   max-width: 800px; /* Ajouté pour limiter la largeur */
   display: flex;
   flex-direction: column;
   align-items: center;
}

.author-image{
   border-radius: 100%;
   width: 200px;
}

.social-links {
   display: flex;
   justify-content: start;
   margin-block: 0;
   column-gap: 5px; /* Espace réduit entre les icônes */
   list-style-type: none; /* Supprime les puces de liste */
   padding: 0;
}

.social-links img {
   width: 40px;
   transition: transform 0.2s ease-in-out;
}

video {
   width: 50%;
   height: auto;
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-98%, -50%);
}

.twitch-sumup {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(20%, -50%);
}

.author-card h1, .author-card h3, .author-card li {
   margin: 10px;
}

/* Conteneur principal pour le contenu de la page */
.content {
   padding: 20px 15px; /* Padding réduit pour mobile */
   padding-bottom: 80px; /* Espace pour le footer */
}

/* ==========================================================================
   4. Galerie & Lightbox
   ========================================================================== */

.gallery {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
}

.gallery-item {
   transition: ease-in-out 0.2s;
   width: 98%; /* Prend 98% de la largeur, laissant 1% de marge de chaque côté */
   aspect-ratio: 1;
   object-fit: cover;
   border: 4px solid var(--transparent-white);
   border-bottom-width: 20px;
   border-radius: 8px;
   margin: 1%;
}
 
.lightbox {
   position: fixed;
   z-index: 9999;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0,0,0,0.8);
   display: flex; /* Toujours en flex pour le centrage */
   justify-content: center;
   align-items: center;
   opacity: 0; /* Invisible par défaut */
   visibility: hidden; /* Non-interactif et non-visible par les lecteurs d'écran */
   transition: opacity 0.3s ease, visibility 0s 0.3s; /* L'astuce est ici: on retarde le "visibility: hidden" */
}

.lightbox.active {
   opacity: 1;
   visibility: visible;
   transition: opacity 0.3s ease; /* Transition simple à l'ouverture */
}
 
.lightbox img {
max-width: 95vw; /* Utilise 95% de la largeur de la vue */
max-height: 95vh; /* Utilise 95% de la hauteur de la vue */
border-radius: 10px;
box-shadow: 0 0 20px rgba(255,255,255,0.2);
}

/* ==========================================================================
   5. Page d'Accueil (Index)
   ========================================================================== */
.hero-section {
    display: flex;
    align-items: center;
    justify-content: center; /* Center content horizontally */
    padding: 30px 15px;
    box-sizing: border-box;
    position: relative;
}

.hero-content {
    display: flex;
    flex-direction: column; /* Empilé verticalement sur mobile */
    align-items: center;
    text-align: center;
    gap: 30px;
    position: relative;
    z-index: 1;
}

.hero-image-wrapper {
    width: 180px; /* Taille encore réduite pour mobile */
    height: 180px;
    border-radius: 50%; /* Make it circular */
    overflow: hidden;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
    flex-shrink: 0; /* Prevent image from shrinking */
}

.hero-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-text-wrapper {
    max-width: 600px; /* Limit width of the text block */
    text-align: center; /* Centré sur mobile */
}

/* Override global author-card styles for the index page hero */
.hero-text-wrapper .author-card {
    position: static; /* Remove absolute positioning */
    transform: none; /* Remove transform */
    top: auto;
    left: auto;
    max-width: none; /* Remove max-width constraint */
    align-items: center; /* Centré sur mobile */
    margin: 0; /* Remove default margins */
    padding: 0; /* Remove default padding */
}

.hero-text-wrapper .author-card h1 {
    font-size: 3em; /* Taille encore réduite pour mobile */
    margin-bottom: 10px;
}

.hero-text-wrapper .author-card h3 {
    font-size: 1.3em; /* Taille encore réduite pour mobile */
    margin-bottom: 20px;
    color: #ccc;
}

.hero-text-wrapper .social-links {
    justify-content: center; /* Centré sur mobile */
}

/* --- Latest Sections --- */
.latest-section {
    margin-top: 60px;
    padding: 0;
}

.latest-section h2 {
    text-align: center;
    margin-bottom: 40px;
    font-size: 2.2em;
}

.latest-gallery-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 0;
}

.latest-gallery-item {
    width: 250px; /* Fixed width for consistency */
    height: 250px; /* Fixed height */
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease-in-out;
}

.latest-gallery-item:hover {
    transform: translateY(-5px);
}

.latest-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block; /* Remove extra space below image */
}

/* ==========================================================================
   6. Filtres & Tags
   ========================================================================== */
.tag-filters {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   gap: 10px;
   margin-bottom: 40px;
}

.tag-filter {
   background-color: rgba(0, 0, 0, 0.2);
   color: var(--tag-color, white);
   border: 1px solid var(--tag-color, rgba(255, 255, 255, 0.5));
   border-radius: 20px;
   padding: 8px 18px;
   font-family: "Roboto", sans-serif;
   letter-spacing: 1px;
   font-weight: bold;
   cursor: pointer;
   transition: background-color 0.3s, color 0.3s;
   box-shadow: 0 0 8px var(--tag-color, rgba(255, 255, 255, 0.5)); /* Ajoute un effet de halo */
}

/* Style pour le filtre actif, s'applique sur TOUS les appareils */
.tag-filter.active {
   background-color: var(--transparent-white);
   color: white;
}

/* ==========================================================================
   7. Posts (Grille & Page unique)
   ========================================================================== */
.page-title {
   text-align: center;
   font-size: 2.2em;
   margin-bottom: 40px;
}

.posts-grid {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 20px;
   padding: 0;
}

.post-card {
   background-color: var(--transparent-white);
   border-radius: 8px;
   width: 100%; /* Prend toute la largeur sur mobile */
   min-height: 300px; /* Hauteur minimale pour la cohérence */
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   transition: background-color 0.3s, transform 0.3s;
   color: white; /* Pour s'assurer que le texte reste blanc */
}

.post-card-illustration {
   width: 100%;
   height: 180px;
   object-fit: cover; /* Recadre l'image pour remplir l'espace */
   border-radius: 4px;
   margin-bottom: 15px;
}

.post-card h2 {
   margin: 0 0 10px 0;
   font-size: 1.8em;
   color: #fff;
}

.post-card p {
   margin: 0 0 10px 0;
   color: #ddd;
   letter-spacing: 0.5px;
   flex-grow: 1; /* Permet au paragraphe de prendre l'espace restant */
}

.post-card small {
   color: #aaa;
   letter-spacing: 0.5px;
}

.post-card-content {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
   padding: 20px;
}

.post-card-footer {
   margin-top: auto; /* Pousse le pied de page en bas de la carte */
   padding-top: 15px;
}

.post-card-tags {
   display: flex;
   flex-wrap: wrap;
   gap: 5px;
   margin-top: 10px;
}

.post-card-tag {
   background-color: var(--tag-color, #888);
   color: #000;
   font-weight: bold;
   padding: 3px 8px;
   border-radius: 12px;
   font-size: 0.8em;
   font-family: "Roboto", sans-serif;
   letter-spacing: 0.5px;
   text-transform: uppercase;
   box-shadow: 0 0 5px var(--tag-color, #888); /* Ajoute un effet de halo */
}

.post-card {
   padding: 0; /* Le padding est maintenant dans post-card-content */
}


.post-full-illustration {
   width: 100%;
   height: auto;
   object-fit: cover;
   aspect-ratio: 16 / 9; /* Force un ratio large (type 16:9) */
   object-fit: cover; /* Assure que l'image remplit l'espace sans être déformée */
   border-radius: 8px;
   margin-bottom: 30px;
}

.post-full .post-meta {
   color: #ccc;
   margin-top: -20px; /* Remonte un peu la date sous le titre */
   margin-bottom: 30px;
}

.post-full-tags {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin-bottom: 30px;
}

.post-tag {
   background-color: var(--tag-color, #888);
   color: #000;
   font-weight: bold;
   padding: 4px 12px;
   border-radius: 15px;
   font-size: 0.9em;
   font-family: "Roboto", sans-serif;
   letter-spacing: 0.5px;
   text-transform: uppercase;
   box-shadow: 0 0 5px var(--tag-color, #888); /* Ajoute un effet de halo */
}

/* Styles pour le contenu Markdown */
.post-content {
   font-size: 1.1em;
   line-height: 1.6;
   letter-spacing: 0.5px;
}

/* ==========================================================================
   8. Footer
   ========================================================================== */
footer {
   position: static; /* Comportement normal, ne flotte pas */
   width: 100%;
   text-align: center;
   padding: 20px 0;
   margin-top: 60px;
   opacity: 0.7;
   font-size: 70%;
}

/* ==========================================================================
   9. Effets de survol (uniquement pour les appareils non-tactiles)
   ========================================================================== */
@media (hover: hover) and (pointer: fine) {
   header div a:hover {
      text-decoration: underline 3px white;
   }

   .social-links img:hover {
      transform: scale(1.1);
   }

   .gallery-item:hover {
      transform: scale(1.05);
   }

   .tag-filter:hover {
      background-color: var(--transparent-white);
   }

   .post-card:hover {
      transform: scale(1.05);
   }
}

/* ==========================================================================
   10. Media Queries (Responsive Design)
   ========================================================================== */

/* --- Tablette (768px et plus) --- */
@media (min-width: 768px) {

   header {
      font-size: 110%; /* Police légèrement plus grande sur tablette */
   }

   /* Page d'accueil */
   .hero-section {
      min-height: calc(80vh - 100px);
   }

   .hero-content {
      flex-direction: row; /* Côte à côte sur tablette */
      text-align: left;
      gap: 50px;
   }

   .hero-image-wrapper {
      width: 280px;
      height: 280px;
   }

   .hero-text-wrapper {
      text-align: left;
   }

   .hero-text-wrapper .author-card {
      align-items: flex-start;
   }

   .hero-text-wrapper .author-card h1 {
      font-size: 4.5em;
   }

   .hero-text-wrapper .author-card h3 {
      font-size: 1.8em;
   }

   .hero-text-wrapper .social-links {
      justify-content: flex-start;
   }

   .latest-section {
      padding: 0 40px;
   }

   /* Grilles */
   .posts-grid {
      justify-content: center;
   }

   .post-card {
      width: calc(50% - 20px); /* 2 cartes par ligne */
      max-width: 350px;
   }

   .gallery-item {
      width: calc(50% - 2%); /* 2 images par ligne avec marge */
      max-width: 300px; /* On rétablit une taille max pour la cohérence */
   }
}

/* --- Bureau (1024px et plus) --- */
@media (min-width: 1024px) {

   * {
      zoom: 100%;;
   }

   header {
      font-size: 120%; /* Police plus grande sur bureau */
   }

   .hero-section {
      min-height: calc(100vh - 100px);
   }

   .hero-image-wrapper {
      width: 350px;
      height: 350px;
   }

   .hero-text-wrapper .author-card h1 {
      font-size: 5em;
   }

   .hero-text-wrapper .author-card h3 {
      font-size: 2.2em;
   }

   /* --- Page de post unique --- */
   .post-full-illustration {
      height: 500px; /* Hauteur fixe pour l'illustration sur PC */
   }

   .post-card {
      width: calc(33.333% - 20px); /* 3 cartes par ligne */
   }

   .gallery-item {
      width: calc(33.333% - 2%); /* 3 images par ligne */
   }
}

.footer-login-link {
   color: transparent; /* Rend le point invisible */
}