/* 8.2. @media screen and (max-width: 768px) (Tablettes et Mobiles) */
@media screen and (max-width: 768px) {
    /* Header & Navigation */
    .nav-container {
      grid-template-columns: auto 1fr auto;
      gap: 10px;
      padding: 0;
    }
    .site-branding {
      display: none;
    }
    .mobile-menu-toggle {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 20px;
      height: 100%;
      border-right: 1px solid rgba(119, 92, 49, 0.2);
      order: -1; /* Place le burger à gauche */
    }
    .nav-buttons { /* Conteneur des boutons de nav devient le menu mobile */
      position: absolute;
      top: var(--header-height);
      left: 0;
      width: 100%;
      background: var(--color-header);
      flex-direction: column; /* Initialement caché et vertical */
      padding: 0;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
      opacity: 0;
      z-index: 1000; /* Au-dessus du contenu */
    }
.nav-buttons.active {
  flex-direction: row;
  justify-content: space-evenly; /* <- C'est la ligne clé ! */
  align-items: center;
  max-height: none;
  overflow: visible;
  opacity: 1;
  transition: none;
}
.nav-buttons.active .nav-button {
  position: relative;
  flex: 0 1 auto; /* Empêche le bouton de s'étirer */
  width: auto; /* La largeur s'adapte au contenu */
  text-align: center;
  padding: 10px 15px; /* J'ai légèrement augmenté le padding pour un meilleur rendu */
  font-size: 15px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 40px;
}
    .nav-buttons.active .nav-button::before { /* Bordures pour boutons dans menu mobile actif */
        background:
          linear-gradient(to right, #775c31 50%, transparent 50%) top left/30% 2px no-repeat,
          linear-gradient(to bottom, #775c31 50%, transparent 50%) top left/2px 30% no-repeat,
          linear-gradient(to left, #775c31 50%, transparent 50%) top right/30% 2px no-repeat,
          linear-gradient(to bottom, #775c31 50%, transparent 50%) top right/2px 30% no-repeat,
          linear-gradient(to right, #775c31 50%, transparent 50%) bottom left/30% 2px no-repeat,
          linear-gradient(to top, #775c31 50%, transparent 50%) bottom left/2px 30% no-repeat,
          linear-gradient(to left, #775c31 50%, transparent 50%) bottom right/30% 2px no-repeat,
          linear-gradient(to top, #775c31 50%, transparent 50%) bottom right/2px 30% no-repeat;
    }
    .nav-buttons.active .nav-button:hover {
      background-color: rgba(119, 92, 49, 0.2);
    }
    body.menu-active .site-content { /* Décalage du contenu quand menu mobile ouvert */
        padding-top: calc(var(--header-height) + 60px + var(--mobile-menu-extra)) !important; /* 60px est la hauteur du menu mobile ouvert */
    }
    body.menu-active [data-page="articles"] .pagination-container { /* Pagination liste articles avec menu ouvert */
        top: calc(var(--header-height) + 60px + var(--mobile-menu-extra));
    }
     body.menu-active .single-post-navigation { /* Pagination article unique avec menu ouvert */
        top: calc(var(--header-height) + 60px + var(--mobile-menu-extra));
        z-index: 990; 
    }
    .admin-bar.menu-active .single-post-navigation { /* Spécifique admin bar + menu ouvert */
        top: calc(var(--header-height) + 46px + 60px + var(--mobile-menu-extra)); /* 46px pour admin bar mobile */
    }


    /* Recherche & Login */
    .search-button {
        width: 32px;
        height: 32px;
        padding: 6px;
    }
    .user-avatar {
        width: 32px;
        height: 32px;
    }
    .dropdown-menu { /* Menu utilisateur dropdown */
        min-width: 250px;
        right: -10px; /* Ajustement position */
    }
    .menu-item {
        padding: 12px 15px;
        font-size: 14px;
    }
    .user-menu-container .dropdown-menu.is-active { /* Affichage menu user via JS sur mobile */
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    
    /* Theme Switcher Mobile */
    #theme-toggle-button.theme-switch {
        width: 50px; 
        height: 40px;
        padding: 0;  
    }
    #theme-toggle-button.theme-switch .theme-switch-label {
        display: none !important;
    }
    #theme-toggle-button.theme-switch.dark-active .theme-switch-thumb {
        left: 5px !important; 
    }
    #theme-toggle-button.theme-switch.light-active .theme-switch-thumb {
        left: 15px !important; /* 50px (width) - 30px (thumb) - 5px (padding) */
    }
    #theme-toggle-button.theme-switch .theme-switch-icon {
        font-size: 14px; 
    }

    /* Articles & Posts */
    .post-layout {
        flex-direction: column;
    }
    .post-thumbnail {
        flex: 0 0 auto; /* Reset flex-basis */
    }
    .posts-wrapper { /* Liste d'articles */
        padding-top: 20px; /* Réduire padding car pagination est fixed */
    }
    .post-item {
        padding: 15px;
        margin-bottom: 15px;
    }
    .post-title a {
        font-size: 18px;
    }
    .post-meta {
        flex-direction: column;
        gap: 10px;
        font-size: 12px;
    }
    
    /* Single Post */
    .single-post-wrapper {
        padding: 15px;
        padding-top: calc(var(--header-height) + 60px + var(--mobile-menu-extra)); /* Pour la nav fixe */
    }
    .single-post .post-layout { /* Redondant si .post-layout est déjà column */
        flex-direction: column;
    }
    .single-post .post-thumbnail {
        margin-bottom: 20px;
    }
    .single-post .post-content-wrapper {
        width: 100%;
    }
    .single-post .post-title {
        font-size: 24px;
        text-align: center;
    }
    .single-post .post-meta {
        align-items: center;
        text-align: center;
        margin-bottom: 20px;
    }
    .single-post .post-content {
        margin-top: 10px;
        font-size: 16px;
        padding: 0 15px; /* Optionnel, si contenu interne n'a pas de padding */
    }
    .single-post .post-meta-details {
        margin: 20px 15px;
        padding: 15px;
    }
    .single-post .meta-details-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .single-post .cat-links, 
    .single-post .tags-links {
        margin-bottom: 10px;
        display: block; /* Pour centrage si text-align est hérité */
    }
    .single-post-navigation { /* Nav article Précédent/Suivant */
        position: fixed;
        top: calc(var(--header-height) + var(--mobile-menu-extra));
        left: 0;
        right: 0;
        transform: none;
        width: 100%;
    }
    .single-post-navigation a, /* Boutons dans la nav article */
    .single-post-navigation div { /* Pour les placeholders si un bouton manque */
        flex: 1;
        margin: 0 2px;
    }
    .single-post-navigation .btn-animated-read-more { /* Styles spécifiques pour ces boutons en mobile */
        position: relative;
        width: 100%;
        min-height: 60px;
        height: auto;
        padding: 8px 4px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        font-size: 11px;
        white-space: normal;
        line-height: 1.2;
        word-wrap: break-word;
        overflow: hidden;
    }
    .single-post-navigation .btn-animated-read-more i {
        margin-bottom: 4px;
        vertical-align: middle;
    }
    .single-post-navigation .btn-animated-read-more::after { /* Forçage de hauteur pour flex */
        content: "";
        width: 0;
        height: 0;
        display: inline-block;
        flex-basis: 100%;
    }
    .single-post-navigation .btn-animated-read-more span { /* Animation des bordures */
        position: absolute;
    }
    .single-post-navigation .btn-animated-read-more span:nth-child(1),
    .single-post-navigation .btn-animated-read-more span:nth-child(3) { /* top & bottom borders */
        left: 0;
        right: 0;
        height: 3px;
    }
    .single-post-navigation .btn-animated-read-more span:nth-child(2),
    .single-post-navigation .btn-animated-read-more span:nth-child(4) { /* right & left borders */
        top: 0;
        bottom: 0;
        width: 3px;
    }

    /* Pagination (liste d'articles) */
    .pagination-container { /* Sticky/Fixed pour mobile */
        position: fixed; /* Répété mais ok pour s'assurer */
        top: calc(var(--header-height) + var(--mobile-menu-extra));
        /* Autres styles déjà définis globalement, ici pour s'assurer ou surcharger */
        overflow: visible; /* Nécessaire si des éléments internes doivent déborder (tooltips, etc.) */
        padding: 0px 0px;
    }
    .pagination-inner {
        position: relative;
        /* Autres styles déjà définis */
        overflow: visible;
    }
    .pagination-btn {
        width: 48%; /* Deux boutons par ligne */
        min-width: 0;
        margin: 0;
        font-size: 12px;
        padding: 8px 12px;
        gap: 6px;
        line-height: 1.2;
        height: auto;
        min-height: 40px;
        word-wrap: break-word;
        white-space: normal;
    }
    .pagination-btn i {
        font-size: 10px;
        flex-shrink: 0; /* Empêche l'icône de rétrécir */
    }

    /* Bouton Retour à la liste */
    .back-to-list-btn {
        margin-bottom: 15px;
        width: 100%;
        justify-content: center;
    }

    /* Pages statiques */
    .page-content-wrapper {
        padding: 20px 15px;
    }
    .page-title {
        font-size: 24px;
    }
    .page-content {
        padding: 20px;
    }
    .page-template-page-empty .site-main-empty-content { /* Modèle contenu vide */
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Footer */
    .footer-menu {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    /* Page 404 */
    .error-page {
        min-height: 100vh; /* Prend toute la hauteur */
        padding-top: 150px; /* Augmenter le padding pour centrer le contenu */
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .error-page svg { /* L'animation SVG */
        position: relative; /* Retirer position absolute */
        top: auto;
        left: auto;
        transform: none;
        width: 90%; /* Rendre responsive */
        height: auto;
        margin-bottom: 30px;
    }
    .error-page h2 { /* Titre "Page non trouvée" */
        position: absolute; /* Peut rester absolute pour superposition */
        top: 50%;
        left: 50%;
        margin-top: 150px; /* Ajuster ce décalage pour le positionnement vertical */
        transform: translate(-50%, -50%);
        width: 100%;
        text-align: center;
    }
    .error-content { /* Conteneur du texte et bouton */
        position: absolute; /* Peut rester absolute */
        top: 50%;
        left: 50%;
        margin-top: 30px; /* Ajuster pour position sous le SVG ou le H2 */
        transform: translate(-50%, -50%);
        width: 100%;
        text-align: center;
    }
    .error-content p { /* Masquer le paragraphe de description sur mobile */
        display: none;
    }
    .back-home-btn { /* Bouton retour accueil sur 404 */
        display: inline-block; /* Assurer affichage correct */
        margin-top: 0; /* Ajuster si besoin */
    }
}