/* ===================================================================== 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:36px;height:36px}.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:36px;height:36px}}/* ===================================================================== 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 */}}