/* =====================================================================
   8.2a. HEADER MOBILE (max-width: 600px) — Hamburger + Logo compact
   ===================================================================== */
@media screen and (max-width: 600px) {
    .nav-container {
      grid-template-columns: auto auto 1fr auto;
      grid-template-rows: 1fr;
      gap: 0;
      padding: 0;
      align-items: center;
    }
    .mobile-menu-toggle {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 12px;
      height: 100%;
      border-right: 1px solid rgba(119, 92, 49, 0.2);
      grid-column: 1;
      grid-row: 1;
    }
    .site-branding {
      display: flex;
      padding-left: 10px;
      align-items: center;
      height: 100%;
      grid-column: 2;
      grid-row: 1;
    }
    .tt-logo-full { display: none; }
    .tt-logo-compact {
      display: block;
      height: 32px;
    }
    .nav-buttons {
      position: absolute;
      top: var(--header-height);
      left: 0;
      width: 100%;
      background: var(--color-header);
      flex-direction: column;
      padding: 0;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
      opacity: 0;
      z-index: 1000;
      grid-column: 1 / -1;
      grid-row: 2;
    }
    .search-login-container {
      grid-column: 4;
      grid-row: 1;
    }
    .nav-buttons.active {
      flex-direction: row;
      justify-content: space-evenly;
      align-items: center;
      max-height: none;
      overflow: visible;
      opacity: 1;
      transition: none;
    }
    .nav-buttons.active .nav-button {
      position: relative;
      flex: 0 1 auto;
      width: auto;
      text-align: center;
      padding: 0.625rem 0.9375rem;
      font-size: 0.9375rem;
      line-height: 1.2;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-height: 2.5rem;
    }
    .nav-buttons.active .nav-button::before {
        background:
          linear-gradient(135deg, transparent calc(50% - 1.5px), #775c31 calc(50% - 1.5px), #775c31 calc(50% + 1.5px), transparent calc(50% + 1.5px)) -1px -1px / 8px 8px no-repeat,
          linear-gradient(#775c31, #775c31) 7px 0 / 15% 2px no-repeat,
          linear-gradient(#775c31, #775c31) 0 7px / 2px 15% no-repeat,
          linear-gradient(45deg, transparent calc(50% - 1.5px), #775c31 calc(50% - 1.5px), #775c31 calc(50% + 1.5px), transparent calc(50% + 1.5px)) calc(100% + 1px) -1px / 8px 8px no-repeat,
          linear-gradient(#775c31, #775c31) calc(100% - 7px) 0 / 15% 2px no-repeat,
          linear-gradient(#775c31, #775c31) 100% 7px / 2px 15% no-repeat,
          linear-gradient(135deg, transparent calc(50% - 1.5px), #775c31 calc(50% - 1.5px), #775c31 calc(50% + 1.5px), transparent calc(50% + 1.5px)) calc(100% + 1px) calc(100% + 1px) / 8px 8px no-repeat,
          linear-gradient(#775c31, #775c31) calc(100% - 7px) 100% / 15% 2px no-repeat,
          linear-gradient(#775c31, #775c31) 100% calc(100% - 7px) / 2px 15% no-repeat,
          linear-gradient(45deg, transparent calc(50% - 1.5px), #775c31 calc(50% - 1.5px), #775c31 calc(50% + 1.5px), transparent calc(50% + 1.5px)) -1px calc(100% + 1px) / 8px 8px no-repeat,
          linear-gradient(#775c31, #775c31) 7px 100% / 15% 2px no-repeat,
          linear-gradient(#775c31, #775c31) 0 calc(100% - 7px) / 2px 15% no-repeat;
    }
    .nav-buttons.active .nav-button:hover {
      background-color: rgba(119, 92, 49, 0.2);
    }
    body.menu-active .site-content {
        padding-top: calc(20px + var(--mobile-menu-extra)) !important;
    }
    body.menu-active [data-page="articles"] .pagination-container {
        top: calc(var(--header-height) + var(--mobile-menu-extra));
    }
    body.menu-active .single-post-navigation {
        top: calc(var(--header-height) + var(--mobile-menu-extra));
        z-index: 990;
    }
    .admin-bar.menu-active .single-post-navigation {
        top: calc(var(--header-height) + 46px + var(--mobile-menu-extra));
    }
    .search-button {
        width: 32px;
        height: 32px;
        padding: 6px;
    }
    #settings-toggle {
        width: 32px;
        height: 32px;
        font-size: 13px;
    }
    .settings-panel {
        width: 220px;
        padding: 14px;
        right: 8px;
    }
    .user-avatar {
        width: 32px;
        height: 32px;
    }
    .dropdown-menu {
        min-width: 250px;
        right: -10px;
    }
    .menu-item {
        padding: 0.75rem 0.9375rem;
        font-size: 0.875rem;
    }
    .user-menu-container .dropdown-menu.is-active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    #theme-toggle-button.theme-switch {
        --reactor-cut: 6px;
        --reactor-inner-cut: 4px;
        width: 48px;
        height: 36px;
        padding: 0;
    }
    #theme-toggle-button.theme-switch .theme-switch-label {
        display: none !important;
    }
    #theme-toggle-button.theme-switch .theme-switch-thumb {
        width: 26px;
        height: 26px;
    }
    #theme-toggle-button.theme-switch .hex-border {
        inset: 3px;
    }
    #theme-toggle-button.theme-switch .theme-switch-icon svg {
        width: 11px;
        height: 11px;
    }
    #theme-toggle-button.theme-switch .reactor-glow {
        width: 30px;
        height: 30px;
    }
    #theme-toggle-button.theme-switch.dark-active .theme-switch-thumb {
        left: 4px !important;
    }
    #theme-toggle-button.theme-switch.light-active .theme-switch-thumb {
        left: calc(100% - 26px - 4px) !important;
    }
    #theme-toggle-button.theme-switch.dark-active .reactor-glow {
        left: 0 !important;
    }
    #theme-toggle-button.theme-switch.light-active .reactor-glow {
        left: calc(100% - 30px) !important;
    }
}

/* =====================================================================
   8.2b. TABLETTE HEADER (601px - 900px) — Logo compact + Nav visible
   ===================================================================== */
@media screen and (min-width: 601px) and (max-width: 900px) {
    .nav-container {
        padding: 0 8px;
    }
    .site-branding {
        padding-left: 8px;
    }
    .tt-logo-full { display: none; }
    .tt-logo-compact {
        display: block;
        height: 34px;
    }
    .nav-buttons {
        gap: clamp(8px, 1.8vw, 16px);
    }
    .nav-button {
        padding: clamp(0.375rem, 1vw, 0.5rem) clamp(0.625rem, 1.5vw, 0.875rem);
        font-size: clamp(0.75rem, 1.8vw, 0.875rem);
        min-height: 2.125rem;
    }
    .search-login-container {
        padding-right: 8px;
        gap: 8px;
    }
    #theme-toggle-button.theme-switch {
        --reactor-cut: 6px;
        --reactor-inner-cut: 4px;
        width: 48px;
        height: 36px;
        padding: 0;
    }
    #theme-toggle-button.theme-switch .theme-switch-label {
        display: none !important;
    }
    #theme-toggle-button.theme-switch .theme-switch-thumb {
        width: 26px;
        height: 26px;
    }
    #theme-toggle-button.theme-switch .hex-border {
        inset: 3px;
    }
    #theme-toggle-button.theme-switch .theme-switch-icon svg {
        width: 11px;
        height: 11px;
    }
    #theme-toggle-button.theme-switch .reactor-glow {
        width: 30px;
        height: 30px;
    }
    #theme-toggle-button.theme-switch.dark-active .theme-switch-thumb {
        left: 4px !important;
    }
    #theme-toggle-button.theme-switch.light-active .theme-switch-thumb {
        left: calc(100% - 26px - 4px) !important;
    }
    #theme-toggle-button.theme-switch.dark-active .reactor-glow {
        left: 0 !important;
    }
    #theme-toggle-button.theme-switch.light-active .reactor-glow {
        left: calc(100% - 30px) !important;
    }
    .search-button {
        width: 34px;
        height: 34px;
    }
    .login-button {
        padding: 0.375rem 0.75rem;
        font-size: 0.9em;
    }
    .user-avatar {
        width: 34px;
        height: 34px;
    }
}

/* =====================================================================
   8.2c. CONTENU MOBILE (max-width: 768px) — Posts, pagination, etc.
   ===================================================================== */
@media screen and (max-width: 768px) {
    /* 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;
    }
    .posts-wrapper .post-item.article-deployed .post-header {
        margin: -15px -15px 300px;
        padding: 15px 15px 10px;
        top: calc(var(--header-height) + var(--pagination-bar-height) + var(--mobile-menu-extra));
    }
    .posts-wrapper .post-item.article-deployed .post-content {
        margin-top: -285px;
    }
    .posts-wrapper .post-item.article-deployed {
        padding-bottom: 15px;
    }
    .post-title a {
        font-size: 1.125rem;
    }
    .post-meta {
        flex-direction: column;
        gap: 10px;
        font-size: 0.75rem;
    }
    
    /* Single Post */
    .single-post-wrapper {
        padding: 15px;
        padding-top: var(--pagination-bar-height);
        padding-bottom: 0;
    }
    .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: 1.5rem;
        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: 1rem;
        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: 3.75rem;
        height: auto;
        padding: 0.5rem 0.25rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        font-size: 0.6875rem;
        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 {
        position: absolute;
        inset: 2px;
        width: auto;
        height: auto;
        display: block;
    }
    /* 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: 0.75rem;
        padding: 0.5rem 0.75rem;
        gap: 6px;
        line-height: 1.2;
        height: auto;
        min-height: 2.5rem;
        word-wrap: break-word;
        white-space: normal;
    }
    .pagination-btn i {
        font-size: 0.625rem;
        flex-shrink: 0; /* Empêche l'icône de rétrécir */
    }

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

    /* Pages statiques */
    .page-content-wrapper {
        padding: 20px 15px 0;
    }
    .page-title {
        font-size: 1.5rem;
    }
    .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 */
    }
}