/*
Theme Name: Theme Tutorial.Win
Theme URI: https://tutorial.win
Author: Soufiane S.
Author URI: https://tutorial.win
Description: Theme of site Tutorial.Win
Version: 1
Text Domain: tutorialwin
*/

/* ============================================================
   TABLE OF CONTENTS
   1.  CSS Variables
   2.  Base & Reset
   3.  Layout
   4.  Navigation
   5.  Hero / Search Section
   6.  Post Cards (.box-tutoriel)
   7.  Home Page
   8.  Article / Single Post
   9.  Comments
   10. Sidebar
   11. Category Page
   12. Footer
   13. Components
   14. Animations
   15. Dark Mode Overrides
   16. Media Queries
   17. Support Notice (ad slots)
   ============================================================ */


/* ============================================================
   1. CSS VARIABLES
   ============================================================ */

/* --- Light Theme --- */
:root,
[data-bs-theme="light"] {
  --tw-filter-logo: none;
  --tw-title-color1: #005495;
  --tw-title-color2: #3799ff;
  --tw-author-bg1: #004c87;
  --tw-author-bg2: #3796f9;
  --tw-footer-bg1: #005392;
  --tw-footer-bg2: #006dc1;
  --tw-gradient-bg-1: #006dc1;
  --tw-gradient-bg-2: #005392;
  --tw-footer-bg: #005597;
  --tw-contrast-bg: #fff;
  --tw-badge-bg: #515151;
  --tw-badge-bg-hover: #2e2e2e;
  --tw-post-gray-bg: #fbfbfb;
  --tw-post-gray-color: #353535;
  --tw-post-gray-border-color: #cdd6dc;
  --tw-copy-btn-bg: #cfd9e2;
  --tw-tip-bg: #f7faff;
  --tw-tip-border-color: #2071f4;
  --tw-alert-bg: #fffaed;
  --tw-alert-border-color: #f4ca4a;
  --tw-color-code: #fff;
  --tw-color-author: #fff;
  --tw-author-bg: #006dc1;
  --tw-kbd-bg: #d2e3f5;
  --tw-kbd-border-color: #adb5bd;
  --tw-kbd-color: #000000;
  --tw-kbd-shadow-color: #ffffff;
  --tw-primarydarker: #00508f;
  --tw-primary-light: #3799ff;

  /* --- Unified design tokens (light) ---
     Single source of truth for elevation, radii, neutrals and accents.
     Existing --tw-* names above stay untouched so no template breaks;
     new components/hovers below reference these instead. */
  /* Deep brand blue (hero/footer gradients) */
  --tw-primary-deep: #005392;
  /* Neutral text/border greys (replaces the 9 scattered shades) */
  --tw-muted: #757575;
  --tw-muted-2: #9a9a9a;
  --tw-border-soft: #cfd8e0;
  /* Semantic accents */
  --tw-success: #10b981;
  --tw-warn: #e07400;
  /* Radius ladder */
  --tw-radius-sm: 6px;
  --tw-radius-md: 10px;
  --tw-radius-lg: 16px;
  --tw-radius-pill: 50px;
  /* Elevation scale */
  --tw-shadow-sm: 0 1px 2px rgba(16, 42, 67, 0.10), 0 0 1px rgba(16, 42, 67, 0.14);
  --tw-shadow-md: 0 6px 18px rgba(16, 42, 67, 0.14), 0 0 1px rgba(16, 42, 67, 0.10);
  --tw-shadow-lg: 0 16px 40px rgba(16, 42, 67, 0.18), 0 0 1px rgba(16, 42, 67, 0.12);
}

/* --- Dark Theme --- */
[data-bs-theme="dark"] {
  --tw-filter-logo: invert(1) hue-rotate(180deg) brightness(1.2);
  --tw-title-color1: #77dbff;
  --tw-title-color2: #4db8ff;
  --tw-author-bg1: #002040;
  --tw-author-bg2: #0058b0;
  --tw-footer-bg1: #003a70;
  --tw-footer-bg2: #001e40;
  --tw-primary: #77dbff;
  --tw-secondary: #b0c8e0;
  --tw-gradient-bg-1: #002252;
  --tw-gradient-bg-2: #003a70;
  --tw-footer-bg: #001e40;
  --tw-contrast-bg: #0f1623;
  --tw-badge-bg: #112240;
  --tw-badge-bg-hover: #0a1628;
  --tw-post-gray-bg: #0d1828;
  --tw-post-gray-color: #b8cfe0;
  --tw-post-gray-border-color: #1a3050;
  --tw-copy-btn-bg: #162a44;
  --tw-tip-bg: #081a38;
  --tw-tip-border-color: #1a6abf;
  --tw-alert-bg: #2a1e00;
  --tw-alert-border-color: #5a4200;
  --tw-color-code: #000;
  --tw-color-author: #fff;
  --tw-author-bg: #003d7a;
  --tw-kbd-bg: #0f2040;
  --tw-kbd-border-color: #1e3a5f;
  --tw-kbd-color: #cce4ff;
  --tw-kbd-shadow-color: #000000;
  --tw-primarydarker: #3aaed4;
  --tw-primary-light: #77DBFF;

  /* --- Unified design tokens (dark) --- */
  --tw-primary-deep: #002252;
  --tw-muted: #8fa8c0;
  --tw-muted-2: #6b84a0;
  --tw-border-soft: #22354f;
  --tw-success: #3ddc84;
  --tw-warn: #f2a24b;
  --tw-radius-sm: 6px;
  --tw-radius-md: 10px;
  --tw-radius-lg: 16px;
  --tw-radius-pill: 50px;
  --tw-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.55), 0 0 1px rgba(0, 0, 0, 0.65);
  --tw-shadow-md: 0 6px 20px rgba(0, 0, 0, 0.60), 0 0 1px rgba(0, 0, 0, 0.55);
  --tw-shadow-lg: 0 18px 46px rgba(0, 0, 0, 0.65), 0 0 1px rgba(0, 0, 0, 0.60);
}
[data-bs-theme="dark"] .btn-secondary {
  --tw-btn-bg: #112240;
}


/* ============================================================
   2. BASE & RESET
   ============================================================ */

/* --- Document & Body --- */
html {
  scroll-behavior: smooth;
}
body {
  padding-top: 57px;
}
[data-bs-theme="light"] body {
  background-color: #f0f4f9;
}

/* --- Typography --- */
h1,
h2,
h3,
h4,
h5 {
  font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  font-style: normal;
  word-break: break-word;
}
body,
.navbar,
h6,
.title,
.btn,
input,
.card-header {
  font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}
h1 span {
  color: var(--tw-muted-2);
  font-size: 0.7em;
}
b,
strong {
  font-weight: 600;
}
span.grey {
  color: var(--tw-muted-2);
}
span.hot {
  color: var(--tw-warn) !important;
}

/* --- Links --- */
a {
  color: var(--tw-primary);
  text-decoration: none;
}
a:hover {
  text-decoration: none;
}
#content a {
  font-weight: 600;
}

/* --- Lists --- */
ol > li:before,
ul > li:before {
  color: var(--tw-secondary);
}
ol li {
  list-style: decimal outside;
}
li span.count {
  color: var(--tw-muted-2);
  font-size: 13px;
}

/* --- Images --- */
img {
  overflow: hidden;
}
p img {
  height: auto;
  max-width: 100%;
  padding: 0;
}
img.alignright {
  display: inline;
  margin: 0 0 2px 7px;
}
img.alignleft {
  display: inline;
  margin: 0 7px 2px 0;
}

/* --- Forms & Inputs --- */
.form-control,
.form-control:focus {
  background-color: var(--tw-contrast-bg);
}
label {
  font-weight: 600;
  font-style: normal;
}
.form-group {
  margin-bottom: 10px;
}
#searchform {
  margin: 10px auto;
  padding: 5px 3px;
  text-align: center;
}

/* --- Keyboard (kbd) --- */
kbd {
  background-color: var(--tw-kbd-bg);
  border: 1px solid var(--tw-kbd-border-color);
  border-radius: var(--tw-radius-sm);
  box-shadow: inset 0 0 0 2px var(--tw-kbd-shadow-color);
  color: var(--tw-kbd-color);
  white-space: nowrap;
}
kbd svg {
  fill: var(--tw-kbd-color);
}

/* --- Scrollbar --- */
@supports (scrollbar-color: var(--tw-primary) transparent) {
  * {
    scrollbar-color: var(--tw-primary) transparent;
  }
}

/* --- HR / Dividers --- */
hr {
  border-color: var(--tw-border-soft) !important;
}
.categories-main hr,
.download-center hr,
.home-sidebar hr,
.sidebar hr {
  border-top: 1px solid var(--tw-border-soft);
}
.hr,
.text hr {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--tw-border-soft);
  height: 0;
}
.hr.featured {
  margin-bottom: 20px;
  margin-top: 20px;
}

/* --- Alignment Utilities --- */
.aligncenter,
img.centered {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.alignleft {
  float: left;
}
#av,
.alignright {
  float: right;
}
.overflow-hidden {
  overflow: hidden;
  padding: 4px 0;
}
.clear,
.group:after {
  clear: both;
}

/* --- Accessibility --- */
a.nav-link:focus-visible,
span.nav-link:focus-visible {
  border: 1px solid var(--tw-emphasis-color);
  border-radius: 5px;
}
#content:focus-visible {
  border: 1px solid var(--tw-emphasis-color);
}


/* ============================================================
   3. LAYOUT
   ============================================================ */

/* --- Page Wrapper --- */
#page {
  margin: 0 auto;
  width: 100%;
}
#header {
  margin: 0 auto;
  padding: 15px 0;
  position: relative;
}
section.middle.row {
  margin-bottom: 20px;
}

/* --- Content Area --- */
#content {
  background: var(--tw-contrast-bg);
  border: 1px solid var(--tw-border-soft);
  border-radius: var(--tw-radius-lg);
  box-shadow: var(--tw-shadow-sm);
  overflow: hidden;
  padding: 24px;
}

/* --- Ad Placements --- */
.placement {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1rem auto;
  overflow: hidden;
  text-align: center;
}
.placement.place1 {
  min-width: 300px;
  min-height: 250px;
  overflow: hidden;
  text-align: center;
}
.placement.place3 {
  min-width: 100px;
  min-height: 250px;
  overflow: hidden;
  text-align: center;
}
.placement.place4 {
  min-width: 300px;
  min-height: 250px;
  overflow: hidden;
  text-align: center;
}

/* --- Responsive Video --- */
.tw-responsive-video {
  height: 0;
  margin: 0 auto 1rem;
  max-width: 1200px;
  overflow: hidden;
  padding-bottom: 56.25%;
  position: relative;
}
.tw-responsive-video embed,
.tw-responsive-video iframe,
.tw-responsive-video object,
.tw-responsive-video video {
  height: 100%;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
}


/* ============================================================
   4. NAVIGATION
   ============================================================ */

/* --- Navbar --- */
.navbar-brand {
  display: flex;
  justify-content: center;
  align-items: center;
}
.navbar-brand img {
  filter: var(--tw-filter-logo);
  vertical-align: sub;
}
.text-brand {
  color: var(--tw-emphasis-color);
  font-size: 20px;
  white-space: nowrap;
}
.text-brand strong {
  font-weight: 600;
  font-style: normal;
}
.navbartop {
  background-color: var(--tw-contrast-bg);
}
.navbartop a:hover {
  color: var(--tw-primary);
}
nav.navbartop {
  border: 0 !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
  z-index: 5;
  --webkit-background-clip: padding-box;
  background-clip: padding-box;
  box-shadow: 0.25rem 0.25rem 1.25rem rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important;
}
.svg-category {
  height: 21px;
  width: 21px;
}
nav.navbartop .svg-category {
  height: 21px;
  margin-right: 10px;
  width: 21px;
}
svg.svg-category .path-primary {
  fill: var(--tw-primary);
}
svg.svg-category .path-secondary {
  fill: var(--tw-secondary);
}
.nav-item a.nav-link {
  color: var(--tw-emphasis-color);
}
.navbar-toggler {
  will-change: transform, opacity;
}
@media (min-width: 768px) {
  .navbar-sticky {
    background-color: var(--tw-contrast-bg);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1030;
  }
  .admin-bar .navbar-sticky {
    top: 32px;
  }
}
/* Glassmorphism */
.navbar-sticky {
  backdrop-filter: blur(16px) saturate(1.6);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  border-bottom: 1px solid rgba(0, 109, 193, 0.12);
}
[data-bs-theme="light"] .navbar-sticky {
  background-color: rgba(255, 255, 255, 0.93) !important;
}

/* --- Dropdown Menu --- */
.dropdown .dropdown-menu {
  display: none;
  margin-top: 0 !important;
}
/* Hover opens for pointer users; .tw-open (set by js/menu-bs.js) opens for
   click and touch users. Two separate selectors because :hover doesn't fire
   reliably on touch and shouldn't conflict with explicit open state. */
.dropdown:hover > .dropdown-menu,
.dropend:hover > .dropdown-menu,
.dropdown.tw-open > .dropdown-menu,
.dropend.tw-open > .dropdown-menu {
  display: block;
}
.dropdown-menu .dropdown-menu {
  left: 100%;
  top: 0;
}
.dropdown-menu {
  display: none;
}
.dropdown-menu.show {
  display: block;
}
.dropdown-item:active {
  color: var(--tw-contrast-bg) !important;
}
.dropdown-item:active .svg-category path {
  fill: var(--tw-contrast-bg);
}
.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--tw-primary);
}
li.divider {
  margin-left: 4px;
  margin-right: 4px;
  padding: 14px 0;
}
li.divider:hover {
  background-color: transparent;
}
li.divider:before {
  content: "|";
}

/* --- Collapse (mobile menu) --- */
.collapse {
  display: none;
}
/* INP painting hint: the open mobile menu overlays the page with its own
   background; telling the engine the collapser content can't paint outside
   its box lets mobile Chrome keep it on its own composited layer while the
   rest of the page repaints underneath the sticky navbar.
   MOBILE ONLY: on desktop (>=992px) the .navbar-collapse becomes statically
   positioned inline content, while its child .dropdown-menu switches to
   position:absolute (Bootstrap rule). contain:paint would then clip the
   dropdown to the collapse box and the menu would never be visible. This was
   the desktop "dropdown doesn't open" bug. */
@media (max-width: 991.98px) {
  .navbar-collapse {
    contain: paint;
  }
}
.collapse.show {
  display: block;
}
.collapsing {
  height: 0;
  overflow: hidden;
  position: relative;
}

/* --- Render-cost containment (INP / paint work) ---
   content-visibility: auto lets the browser skip layout+paint for the
   comments region until it approaches the viewport. On long tutorial
   articles the comment list is a heavy re-render target after a tap
   (dark-mode toggle, like, comment reply); skipping it off-screen cuts the
   presentation-delay half of INP. contain-intrinsic-size keeps the
   scrollbar length stable while the region is skipped.
   (Sidebar is deliberately excluded: it relies on position:sticky for the
   ad slot, which content-visibility would break.) */
.comments-post {
  content-visibility: auto;
  contain-intrinsic-size: auto 800px;
}
/* Footer is plain-flow content at the bottom of every page — same win. */
#footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 320px;
}

/* Defer rendering of below-the-fold tutoring cards (LCP win on listing pages).
   The first card in each grid is excluded — it's the LCP candidate and hiding
   it behind content-visibility would delay the largest paint. Later cards
   become cheap placeholders until scrolled near. contain-intrinsic-size keeps
   the grid layout stable while their real height is computed off-screen. */
.home-main .box:nth-of-type(n+2) .box-tutoriel,
#categories-articles .box-tutoriel,
.home-sidebar .box-tutoriel,
.search-main .box-tutoriel,
.tax-download_category .box-tutoriel {
  content-visibility: auto;
  contain-intrinsic-size: auto 420px;
}

/* --- Skip Link (Accessibility) --- */
.skip {
  position: absolute;
  top: -1000em;
  left: 6px;
  height: auto;
  width: auto;
  display: block;
  font-size: 14px;
  font-weight: 600;
  padding: 15px 23px 14px;
  background: var(--tw-contrast-bg);
  color: var(--tw-emphasis-color);
  z-index: 100000;
  line-height: normal;
  text-decoration: none;
}
.skip:focus {
  top: 7px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
}

/* --- Dark Mode Toggle --- */
.dark-mode-switch {
  cursor: pointer;
  will-change: transform, background;
}
.dark-mode-switch svg {
  will-change: transform, background;
}
.dark-mode-switch svg,
.nav-link svg,
.searchx svg.search-icon {
  fill: var(--tw-emphasis-color);
}

/* --- Search Bar (Navbar) --- */
.search-navbar {
  flex: 1;
  max-width: 380px;
}
@media screen and (max-width: 991px) {
  .search-navbar {
    margin-top: 0.5rem;
    max-width: 100%;
  }
}


/* ============================================================
   5. HERO / SEARCH SECTION
   ============================================================ */

/* --- Hero Container --- */
.search-height {
  background-color: var(--tw-gradient-bg-2);
  background-image:
    radial-gradient(circle at 50% 35%, var(--tw-gradient-bg-1) 0, transparent 60%),
    linear-gradient(160deg, var(--tw-gradient-bg-1) 0%, var(--tw-gradient-bg-2) 85%);
  border-bottom: 2px solid var(--tw-gradient-bg-2);
  box-shadow: 0.25rem 0.25rem 1.25rem rgba(0, 0, 0, 0.1);
  padding: 4vh 0;
  position: relative;
  overflow: hidden;
}
.searchx {
  box-shadow: var(--tw-shadow-md);
  border-radius: var(--tw-radius-pill);
  position: relative;
}
.search-title h1 {
  color: #fff;
  font-size: 1.7rem;
  margin-bottom: 15px;
}
.searchx input {
  background-color: var(--tw-contrast-bg);
  border: 2px solid var(--tw-gradient-bg-2);
  border-radius: var(--tw-radius-pill);
  height: 60px;
  text-indent: 25px;
}
.searchx input:focus {
  border: 2px solid var(--tw-emphasis-color);
  box-shadow: none;
}
.searchx .search-icon {
  left: 10px;
  position: absolute;
  top: 18px;
}
.searchx button {
  border-radius: var(--tw-radius-pill);
  height: 50px;
  position: absolute;
  right: 5px;
  top: 5px;
  width: 110px;
}

/* --- Grid Overlay --- */
.hero-grid-overlay {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  z-index: 1;
}
.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
}

/* --- Hero Badge --- */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 500;
  padding: 6px 16px;
  border-radius: 2rem;
  margin-bottom: 18px;
  letter-spacing: 0.03em;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hero-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tw-success);
  flex-shrink: 0;
  animation: hero-pulse 2s ease-in-out infinite;
}

/* --- Hero Stats --- */
.hero-stats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 32px;
  margin-top: 28px;
}
.hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: rgba(255, 255, 255, 0.92);
}
.hero-stat-num {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.1;
  color: #fff;
}
.hero-stat-label {
  font-size: 0.73rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-top: 2px;
}


/* ============================================================
   6. POST CARDS (.box-tutoriel)
   ============================================================ */

.box-tutoriel {
  background-color: var(--tw-contrast-bg);
  border: 1px solid var(--tw-border-soft);
  border-radius: var(--tw-radius-lg);
  box-shadow: var(--tw-shadow-sm);
  display: flex;
  flex-direction: column;
  font-size: small;
  overflow: visible;
  position: relative;
  text-decoration: none !important;
  width: 100%;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  animation: fadeUp 0.4s ease both;
}
a.box-tutoriel:focus-visible {
  border: 1px solid var(--tw-emphasis-color);
}
.box-tutoriel:hover {
  border-color: var(--tw-primary);
  box-shadow: var(--tw-shadow-md);
  /* !important is required: fadeUp's fill-mode keeps its final keyframe
     transform applied after the animation ends, which would otherwise
     override this hover lift. */
  transform: translateY(-3px) !important;
  will-change: transform;
}
.box-tutoriel:hover .title a {
  color: var(--tw-primary);
  display: block;
  text-decoration: none;
}
.box-tutoriel:hover .title {
  color: var(--tw-primary);
}
.box-tutoriel:hover .thumb {
  border-bottom: 2px solid var(--tw-primary);
}
.box-tutoriel .bottom {
  border-top: 1px solid var(--tw-border-soft);
  display: block;
  line-height: 1.2;
  margin: 0 10px;
  padding: 10px 0;
}
.box-tutoriel a {
  display: block;
  text-decoration: none;
}
.box-tutoriel .title a {
  color: var(--tw-emphasis-color);
  text-decoration: none;
}
.box-tutoriel a.thumb-link {
  width: 100%;
}

/* Thumbnail */
.box-tutoriel .thumb {
  display: block;
  overflow: hidden;
  /* keep card radius -1px so the cover meets the border frame, not the bg */
  border-radius: calc(var(--tw-radius-lg) - 1px) calc(var(--tw-radius-lg) - 1px) 0 0;
  aspect-ratio: 16 / 9;
  background: #0a1628;
}
.box-tutoriel .thumb img {
  border: 0;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  vertical-align: middle;
  width: 100%;
}

/* Category Badge */
.box-tutoriel .cat-zone {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  display: block;
}
.box-tutoriel .cat-ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}
.box-tutoriel .cat-ul li {
  line-height: 1;
}
.box-tutoriel .cat-name {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  padding: 0.8125rem 1rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  z-index: 1;
}
.box-tutoriel .cat-name::after {
  content: "";
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  right: 0.5rem;
  bottom: 0.5rem;
  background-color: var(--tw-badge-bg);
  border-radius: var(--tw-radius-pill);
  z-index: -1;
}
.box-tutoriel .cat-name:hover::after {
  background-color: var(--tw-badge-bg-hover);
}

/* Card Title */
.box-tutoriel .title {
  color: var(--tw-emphasis-color);
  display: flex;
  flex-direction: column;
  font-weight: 600;
  font-style: normal;
  font-size: 0.97rem;
  line-height: 1.4;
  margin: 10px 14px 10px;
  min-height: 52px;
  overflow: hidden;
  padding: 0;
  text-align: center;
}
.box-tutoriel .title a {
  color: var(--bs-body-color);
  text-decoration: none;
}
.box-tutoriel .title a:hover {
  color: var(--tw-primary);
}
.box-tutoriel .right {
  color: var(--tw-muted);
  display: block;
  font-size: 1em;
  line-height: 1.2;
  text-align: right;
}
.box-tutoriel .right span {
  display: block;
}
.box-tutoriel .left {
  color: var(--tw-muted) !important;
  display: block;
  float: left;
  white-space: nowrap;
}
.top-div,
.top-div-sec {
  margin-top: 30px;
}


/* ============================================================
   7. HOME PAGE
   ============================================================ */

.home-main h2 {
  text-align: center;
  color: var(--tw-primary);
}
.home-main h2:after {
  border-bottom: 3px solid var(--tw-primary);
  border-radius: var(--tw-radius-pill);
  content: "";
  display: block;
  margin: 14px auto 0;
  width: 48px;
}
#categories-articles h2 {
  margin: 25px 0;
}
#categories-articles h2 a {
  color: var(--tw-primary);
}
h2.text-center {
  text-align: center;
  margin-bottom: 1.5rem;
}


/* ============================================================
   8. ARTICLE / SINGLE POST
   ============================================================ */

/* --- Post Wrapper --- */
.post {
  position: relative;
  width: 100%;
}
.post-image {
  display: inline-block;
  margin-bottom: 15px;
  position: relative;
  width: 100%;
}
.post-image img {
  border-radius: var(--tw-radius-lg);
  height: auto;
  width: 100%;
  box-shadow: var(--tw-shadow-md);
  display: block;
}
.thumbnail-copyright {
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 10px;
  bottom: 10px;
  color: #fff;
  font-size: 12px;
  padding: 2px 5px;
  position: absolute;
  right: 10px;
}

/* --- Post Title & Meta --- */
.article-meta,
.post-title {
  text-align: center;
}
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  align-items: center;
  margin: 8px 0 16px;
  text-align: left;
}
.article-meta a:hover {
  text-decoration: underline;
}
.article-meta br {
  flex-basis: 100%;
  width: 100%;
  height: 0;
}
.article-meta > span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background-color: var(--tw-post-gray-bg);
  border: 1px solid var(--tw-border-soft);
  border-radius: var(--tw-radius-pill);
  padding: 3px 12px;
  font-size: 0.83rem;
  color: var(--tw-post-gray-color);
  white-space: nowrap;
  line-height: 1.4;
}
.article-meta > span a {
  color: var(--tw-primary);
  font-weight: 600;
  font-style: normal;
}
svg.left-svg {
  fill: var(--tw-post-gray-color);
  height: 13px;
  vertical-align: baseline;
  width: 13px;
}

/* --- Article Content (.text) --- */
.text {
  font-size: 1.125rem;
  line-height: 1.56;
}
.text a {
  font-weight: 600;
  font-style: normal;
  text-decoration: underline;
  /* Hover accent follows --tw-primary in BOTH themes (color-mix) — degrades
     gracefully to plain underline on older browsers, so maximum
     compatibility is kept without any media query. */
  text-decoration-color: color-mix(in srgb, var(--tw-primary) 35%, transparent);
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.text a:hover {
  text-decoration-color: var(--tw-primary);
  background: color-mix(in srgb, var(--tw-primary) 12%, transparent);
}
.text,
.text h1 {
  color: var(--tw-emphasis-color);
}
.text h2 {
  color: var(--tw-primary);
  padding-left: 0;
}
.text h3,
h3.respond_title {
  color: var(--tw-secondary);
}
.text h3 {
  padding-left: 0;
}
.text h4 {
  color: var(--tw-emphasis-color);
}
.text h2,
.text h3 {
  margin: 32px 0 16px;
}
.text h4 {
  margin: 10px 0 16px;
}
.text ol li,
.text ul li {
  font-size: 1em;
  line-height: 25px;
}
.text ol,
.text ul {
  line-height: 10px;
  margin-bottom: 20px;
}
.text ul > li {
  list-style: none;
  margin: 14px 0;
  position: relative;
}
.text ol {
  counter-reset: et;
}
.text ol > li {
  line-height: 30px;
  list-style: none;
  position: relative;
}
.text ol > li:before {
  content: counter(et);
  counter-increment: et;
  font-size: 1.1em;
  text-align: center;
}
.text ol > li:before,
.text ul > li:before {
  -moz-box-sizing: border-box;
  --webkit-box-sizing: border-box;
  box-sizing: border-box;
  float: left;
  font-weight: 600;
  font-style: normal;
  margin-right: 10px;
}
.text ul > li:before {
  content: "\2022";
  display: inline-block;
  font-size: 1.5em;
  line-height: 0.9;
}
.table-responsive .text li:before {
  content: "";
  padding: 0;
}
.url-site {
  color: var(--tw-primary);
}

/* --- Article Headings --- */
.entry-content h2 {
  border-bottom: 2px solid var(--tw-primary-light);
  padding-bottom: 8px;
  margin-bottom: 1.1rem;
}

/* --- Table of Contents (TOC) --- */
.toc {
  background-color: var(--tw-post-gray-bg);
  border: 1px solid var(--tw-border-soft);
  border-left: 3px solid var(--tw-primary);
  border-radius: var(--tw-radius-md);
  box-shadow: var(--tw-shadow-sm);
  font-size: 90%;
  margin: 1rem auto;
  padding: 14px 18px;
  max-width: 620px;
  width: 80%;
}
.toc .toc-title {
  color: var(--tw-emphasis-color);
  display: block;
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0;
  text-align: center;
}
.toc ul {
  margin: 0 !important;
  padding: 0 !important;
}
.toc li {
  margin: 6px 0 !important;
}
.toc .h3 {
  padding-left: 15px;
}
.toc .h4 {
  padding-left: 30px;
}
.toc .h5 {
  padding-left: 45px;
}
#toc a::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tw-primary);
  margin-right: 8px;
  flex-shrink: 0;
  transition: background 0.15s;
}
#toc a {
  display: flex;
  align-items: center;
}
#toc a:hover::before {
  /* --tw-primarydarker is always defined for both themes; the fallback was
     legacy redundancy left over from an older split. */
  background: var(--tw-primarydarker);
}
.print-button {
  display: flex;
  float: right;
}

/* --- Reading Progress Bar --- */
.tutorial.win-reading-meter {
  position: fixed;
  top: 0;
  z-index: 1111;
  width: 100%;
}
.admin-bar .tutorial.win-reading-meter {
  top: 32px;
}
.tutorial.win-progress {
  width: 100%;
  height: 5px;
  z-index: 1111;
}
.progress-bar {
  height: 4px;
  background-color: var(--tw-primary);
  width: 0%;
}
.tutorial.win-reading-meter .progress-bar {
  background: linear-gradient(90deg, var(--tw-primary), var(--tw-primary-light)) !important;
}

/* --- Like Section --- */
.like-container {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  flex-direction: row;
  justify-content: center;
}
.like-button {
  background: none;
  border: none;
  cursor: pointer;
  outline: none;
  display: flex;
  align-items: center;
}
.like-button:focus-visible {
  border: 1px solid var(--tw-emphasis-color);
  border-radius: 15px;
  opacity: 0.8;
}
.like-button:hover {
  opacity: 0.8;
}
.like-button svg {
  width: 48px;
  height: 48px;
}
.like-button:disabled {
  cursor: default;
  opacity: 0.6;
}
.like-count {
  font-size: 24px;
  font-weight: 600;
  margin-left: 10px;
  color: var(--tw-success);
}
.like-phrase {
  font-size: 16px;
}

/* --- PDF Download Widget (JS-gated, Bootstrap 5 utilities for layout) --- */
.tw-pdf-widget {
  max-width: 420px;
}
/* Bootstrap's .d-flex etc. use display:*!important, which beats the
   browser's default [hidden]{display:none} rule. Force it back with a
   higher-specificity selector so steps actually hide/show one at a time. */
.tw-pdf-step[hidden] {
  display: none !important;
}
.download-pdf-button {
  background-color: transparent;
  color: #c40000;
  text-decoration: none;
  font-weight: bold;
  font-size: 16px;
  border: 2px solid #c40000;
  padding: 10px 18px;
  border-radius: var(--tw-radius-md);
  transition: background 0.3s, color 0.3s, transform 0.15s;
}
.download-pdf-button:hover {
  background-color: #c40000;
  color: #fff;
  transform: translateY(-1px);
}
.download-pdf-button:hover svg path {
  fill: currentColor;
}
.tw-pdf-start-button {
  background-color: #c40000;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  font-size: 16px;
  border: 2px solid #c40000;
  padding: 10px 18px;
  border-radius: var(--tw-radius-md);
  transition: background 0.3s, color 0.3s, transform 0.15s;
}
.tw-pdf-start-button:hover {
  background-color: #a20000;
  border-color: #a20000;
  color: #fff;
  transform: translateY(-1px);
}
.tw-pdf-start-button svg path {
  fill: #fff;
}
.tw-pdf-noscript {
  color: var(--tw-emphasis-color);
  font-size: 14px;
}
.tw-pdf-error {
  color: #c40000;
  font-size: 14px;
}
.tw-pdf-wait-text {
  font-size: 15px;
}
.tw-pdf-countdown {
  display: inline-block;
  min-width: 1.2em;
  font-weight: bold;
  color: var(--tw-primary);
}

/* --- Social Sharing --- */
a.social-link-anchor svg {
  color: white;
  fill: white;
}
a.social-link-anchor.facebook  { background-color: #005acb; }
a.social-link-anchor.twitter   { background-color: #444444; }
a.social-link-anchor.linkedin  { background-color: #0d66c2; }
a.social-link-anchor.pinterest { background-color: #e60122; }
a.social-link-anchor.email     { background-color: #444444; }
a.social-link-anchor.whatsapp  { background-color: #17c242; }
a.social-link-anchor {
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--tw-radius-md);
  color: #fff;
  text-decoration: none;
  padding: 0.4rem;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
a.social-link-anchor:hover {
  transform: scale(1.1);
  opacity: 0.9;
}
li.social-link {
  list-style: none !important;
  margin: 0 !important;
}
li.social-link::before {
  content: "" !important;
}
ul.end-post-layout {
  display: flex;
  gap: 15px;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0 auto;
  align-items: center;
  justify-content: center;
  padding: 0;
}

/* --- Google Source Section --- */
.google-source-section {
  padding: 6px 0;
}
.google-source-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 22px;
  border-radius: var(--tw-radius-md);
  border: none;
  background: #111;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.15s ease;
}
.google-source-btn:hover {
  background: #333;
  color: #fff;
  transform: translateY(-2px);
  text-decoration: none;
}
[data-bs-theme="dark"] .google-source-btn {
  background: #1e2a3a;
}
[data-bs-theme="dark"] .google-source-btn:hover {
  background: #2a3a50;
  color: #fff;
}

/* --- Post Tags --- */
.post-tags span {
  font-size: 1em;
}
.post-tags .badge {
  background-color: var(--tw-badge-bg);
  font-weight: 400;
  padding: 6px 12px;
  font-size: 0.85rem;
  border-radius: var(--tw-radius-pill);
  transition: background 0.15s;
}
.post-tags .badge:hover {
  background-color: var(--tw-badge-bg-hover);
}

/* --- Author Box --- */
.author-desc {
  background: linear-gradient(
    45deg,
    var(--tw-author-bg1),
    var(--tw-author-bg2)
  );
  border-radius: 0;
  color: var(--tw-color-author);
  margin: 0 -24px;
  padding: 20px;
}
.author-desc .author-name {
  margin: 0 0 15px;
}
.author-desc .author-name,
.author-desc a {
  color: var(--tw-color-author);
}
.author-desc .author-avatar {
  float: left;
  margin-right: 20px;
}
.author-box {
  border-radius: var(--tw-radius-lg);
  padding: 1rem 2rem;
  position: relative;
}
.author-box:before {
  background-color: var(--tw-contrast-bg);
  border: 1px solid var(--tw-border-soft);
  border-radius: var(--tw-radius-lg);
  bottom: 0;
  box-shadow: var(--tw-shadow-sm);
  content: "";
  left: 0;
  opacity: 0.6;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -2;
}
.author-box p {
  opacity: 0.7;
}
.author-header h2 {
  font-size: 1.4rem;
  margin: 15px 0 5px;
}
.author-description p {
  margin: 0;
}
.author-social-link svg {
  fill: var(--tw-emphasis-color);
}

/* --- Related Posts / Extras --- */
.extras h3 {
  font-size: 1.4rem;
  color: var(--tw-secondary);
}


/* ============================================================
   9. COMMENTS
   ============================================================ */

h2#comments {
  color: var(--tw-secondary);
  font-size: 1.7em;
  margin-top: 25px;
}

/* --- Comments list & cards (moved from comments.php inline style; tokens applied) --- */
ul#comments-list {
  margin: 0;
  padding: 0;
}
li.comment {
  list-style: none;
  border-radius: var(--tw-radius-md);
}
.hidden-comment {
  display: none !important;
}
.children {
  list-style: none;
  margin-left: 1.25rem;
  padding-left: 1.25rem;
  margin-top: 0.5rem;
  border-left: 2px solid var(--tw-border-soft);
}
.comment-body {
  margin-bottom: 1rem;
  padding: 1rem;
  border: 1px solid var(--tw-border-soft);
  background-color: var(--tw-post-gray-bg);
  border-radius: var(--tw-radius-lg) !important;
  transition: border-color 0.15s ease;
}
[data-bs-theme="dark"] .comment-body {
  background-color: #0e1e33;
  border-color: #1a3050;
}
.comment-body:hover,
[data-bs-theme="dark"] .comment-body:hover {
  border-color: var(--tw-primary);
}
.comment-body:hover .comment-avatar,
[data-bs-theme="dark"] .comment-body:hover .comment-avatar {
  border-color: var(--tw-primary);
}
.comment-meta {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  color: var(--tw-muted);
}
.comment-avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--tw-border-soft);
  transition: border-color 0.15s ease;
}
.comment-body:hover .comment-avatar {
  border-color: var(--tw-primary);
}
.comment-author {
  min-width: 0;
}
.comment-author-name {
  font-weight: 600;
  color: var(--tw-emphasis-color);
  font-size: 1.1rem;
  font-style: normal;
}
.comment-author-name a {
  color: var(--tw-link-color);
  text-decoration: none;
}
.comment-author-name a:hover {
  color: var(--tw-link-hover-color);
  text-decoration: underline;
}
.says {
  color: var(--tw-muted);
  font-weight: normal;
  font-style: italic;
  font-size: 0.9em;
}
.comment-content {
  margin: 0.75rem 0;
  line-height: 1.6;
  color: var(--tw-body-color);
}
.comment-content p:last-child {
  margin-bottom: 0;
}
.comment-content a {
  color: var(--tw-link-color);
}
.comment-content a:hover {
  color: var(--tw-link-hover-color);
}
.reply {
  text-align: end;
  margin-top: 0.75rem;
}
.comment-reply-link {
  font-size: 0.875em;
  color: var(--tw-muted);
  text-decoration: none;
  padding: 0.25rem 0.5rem;
  border-radius: var(--tw-radius-sm);
  transition: background 0.15s ease, color 0.15s ease;
}
.comment-reply-link:hover {
  background-color: var(--tw-secondary-bg);
  color: var(--tw-emphasis-color);
}
.comment-awaiting-moderation {
  color: var(--tw-warning-text-emphasis);
  font-style: italic;
  background-color: var(--tw-warning-bg-subtle);
  padding: 0.5rem;
  border-radius: var(--tw-radius-md);
  border-left: 3px solid var(--tw-warning-border-subtle);
  margin-bottom: 0.75rem;
}
#comments-list .badge.bg-primary {
  font-size: 0.7em;
  margin-left: 0.25rem;
}

/* --- Load More Button --- */
#load-more-comments:hover:not(:disabled) {
  transform: translateY(-1px);
}

/* --- Comment Form --- */
#respond {
  background-color: var(--tw-post-gray-bg);
  padding: 1.5rem;
  border-radius: var(--tw-radius-lg);
  border: 1px solid var(--tw-border-soft);
  margin-top: 2rem;
}
[data-bs-theme="dark"] #respond {
  background-color: #0a1628;
  border-color: #1a3050;
}
#reply-title.respond_title {
  color: var(--tw-emphasis-color);
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--tw-primary);
}
.cancel-comment-reply {
  margin-bottom: 1rem;
}
.cancel-comment-reply a {
  color: var(--tw-muted);
  text-decoration: none;
  font-size: 0.875em;
}
.cancel-comment-reply a:hover {
  color: var(--tw-emphasis-color);
  text-decoration: underline;
}
.required {
  margin-left: 0.125rem;
}
[data-bs-theme="dark"] #respond .form-control {
  background-color: var(--tw-contrast-bg);
  border-color: var(--tw-border-soft);
  color: var(--tw-body-color);
}
[data-bs-theme="dark"] #respond .form-control:focus {
  background-color: var(--tw-contrast-bg);
  border-color: var(--tw-primary);
  color: var(--tw-body-color);
}
@media (max-width: 768px) {
  .children {
    margin-left: 0.75rem;
    padding-left: 0.75rem;
  }
  .comment-body {
    padding: 0.75rem;
  }
  #respond {
    padding: 1rem;
  }
}
.nocomments {
  margin: 0;
  padding: 0;
  text-align: center;
}
#respond {
  margin: 40px 0 0;
  padding-bottom: 10px;
}
h3.respond_title {
  border-bottom: 1px solid var(--tw-secondary);
  font-size: 1.7em;
  margin: 20px 0;
  padding: 0 0 7px;
}
#commentform small {
  font-size: 1.2em;
  position: relative;
  top: -1px;
}
#commentform input#submit {
  /* Old rule stripped ALL button styling (background:0; border:0) leaving a
     bare browser control. Harmonize with .btn-primary instead. */
  background-color: var(--tw-primary);
  border: 1px solid var(--tw-primary);
  border-radius: var(--tw-radius-pill);
  color: var(--tw-color-code);
  padding: 8px 20px;
  transition: background 0.15s ease;
}
#commentform input#submit:hover {
  background-color: var(--tw-primarydarker);
  border-color: var(--tw-primarydarker);
}
#commentform p {
  margin: 10px 0;
}
p.emojis-box {
  background-color: var(--tw-post-gray-bg);
  border: 1px solid var(--tw-border-soft);
  border-radius: var(--tw-radius-md);
  font-size: 1.2rem;
  margin: 10px 0 !important;
  padding: 10px;
}
#commentform a,
#respond a {
  color: var(--tw-muted);
}
.avatar {
  background-color: var(--tw-body-bg);
  border-radius: 50%;
}


/* ============================================================
   10. SIDEBAR
   ============================================================ */

/* --- Sidebar Cards --- */
.card {
  background-color: var(--tw-contrast-bg);
  border-color: var(--tw-border-soft);
}
.card-tutorial.win {
  border: 1px solid var(--tw-border-soft);
  box-shadow: var(--tw-shadow-sm);
  border-radius: var(--tw-radius-lg);
}
.card-tutorial.win .card-header,
.card-tutorial.win > .card-header {
  background-color: var(--tw-primary);
  color: var(--tw-color-code);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--tw-primary);
  border-radius: calc(var(--tw-radius-lg) - 1px) calc(var(--tw-radius-lg) - 1px) 0 0 !important;
}
.list-group-flush > .list-group-item {
  background-color: var(--tw-contrast-bg);
}
.list-group a {
  color: var(--tw-emphasis-color);
}
.list-group a:hover {
  color: var(--tw-primary);
}
.list-group-item {
  padding: 10px;
}

/* --- Popular Posts --- */
.popular-posts-list {
  margin-bottom: 15px !important;
}
.popular-posts-list .list-group-item {
  background-color: var(--tw-contrast-bg);
}
.popular-posts-list .post-thumbnail {
  width: 60px;
  height: 60px;
  object-fit: cover;
  margin-right: 1rem;
  flex-shrink: 0;
  border-radius: var(--tw-radius-sm);
}
.popular-posts-list .post-t {
  font-size: 1rem;
  margin-bottom: 0.25rem;
}
.popular-posts-list .post-meta {
  font-size: 0.875rem;
  color: var(--tw-primary);
}

/* --- Category List --- */
span.cat-item {
  display: block;
}
span.cat-item a {
  background-color: var(--tw-contrast-bg);
  border: 1px solid var(--tw-border-soft);
  border-radius: var(--tw-radius-md);
  box-shadow: var(--tw-shadow-sm);
  color: var(--tw-emphasis-color);
  display: block;
  padding: 6px 10px;
  transition: background 0.15s ease, border-color 0.15s ease;
}
span.cat-item a:hover {
  color: var(--tw-primary);
  border-color: var(--tw-primary);
  background-color: var(--tw-list-group-action-hover-bg);
}
.list-categories .current-cat {
  background-color: rgba(0, 109, 193, 0.08);
  color: var(--tw-primary);
  font-weight: 600;
  border-left: 3px solid var(--tw-primary);
}


/* ============================================================
   11. CATEGORY PAGE
   ============================================================ */

h1.cat-title {
  font-size: 1.7rem;
  color: var(--tw-emphasis-color);
}
h1.cat-title svg {
  height: 32px;
  vertical-align: sub;
  width: 32px;
}
/* Category/search/404 titles: subtle accent underline (one shared rule) */
h1.cat-title,
.search-title h1,
.error-404 h3 {
  position: relative;
}
h1.cat-title:after,
.search-title h1:after,
.error-404 h3:after {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  margin: 10px auto 0;
  background: var(--tw-primary);
  border-radius: var(--tw-radius-pill);
}
/* Hero title sits on the blue gradient — use a translucent white underline */
.search-title h1:after {
  background: rgba(255, 255, 255, 0.55);
}


/* ============================================================
   12. FOOTER
   ============================================================ */

#footer {
  background-color: var(--tw-footer-bg);
  border-top: 1px solid var(--tw-gradient-bg-2);
  color: #fff;
  display: block;
  margin-bottom: 0;
  margin-top: 30px;
  padding: 0 !important;
  position: relative;
  width: 100%;
  background-image:
    radial-gradient(circle at 12% 20%, var(--tw-footer-bg2) 0, transparent 40%),
    radial-gradient(circle at 88% 70%, var(--tw-footer-bg2) 0, transparent 35%),
    linear-gradient(160deg, var(--tw-footer-bg1) 0%, var(--tw-footer-bg2) 90%);
}
#footer,
#footer li {
  font-size: 1em;
  vertical-align: baseline;
}
#footer li {
  display: list-item;
  font-style: inherit;
  line-height: 30px;
  margin: 0;
  padding: 0;
}
#footer hr {
  border-color: rgba(255, 255, 255, 0.12);
}
#footer .h-space {
  height: 10px;
}
#footer a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: color 0.15s ease, padding-left 0.15s ease;
}
#footer li a:hover {
  color: #fff;
  padding-left: 4px;
}
#footer h3 {
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-top: 0;
}
#footer a:hover {
  color: #fff;
}


/* ============================================================
   13. COMPONENTS
   ============================================================ */

/* --- Buttons --- */
.btn {
  text-decoration: none !important;
}
.btn.disabled,
.btn:disabled,
fieldset:disabled .btn {
  color: var(--tw-btn-disabled-color) !important;
}

/* --- Badges --- */
.badge.bg-primary {
  background: var(--tw-primary);
  color: var(--tw-color-code);
  font-weight: 400;
}

/* --- Blockquote --- */
blockquote {
  background-color: var(--tw-primary);
  border-radius: 0 var(--tw-radius-md) var(--tw-radius-md) 0;
  border-style: solid;
  border-width: 0 0 0 4px;
  border-color: rgba(0, 0, 0, 0.25);
  color: var(--tw-color-code);
  font-size: 1.1em;
  margin: 17px 0;
  padding: 18px 20px;
  position: relative;
}
blockquote p {
  margin: 0;
}

/* --- Code Blocks --- */
code {
  background-color: var(--tw-primary);
  border-radius: 5px;
  padding: 2px 4px;
}
a > code,
code {
  color: var(--tw-color-code);
}
.code {
  display: block;
  font-family: Monaco, Menlo, Consolas, Courier New, monospace;
  font-size: 13px;
  line-height: 20px;
  word-break: break-all;
  word-wrap: break-word;
  border-radius: var(--tw-radius-md);
  position: relative;
  white-space: pre-wrap;
  background-color: var(--tw-post-gray-bg);
  border: 1px solid var(--tw-border-soft);
  color: var(--tw-emphasis-color);
  direction: ltr;
  margin-bottom: 20px;
  min-width: 130px;
  padding: 10px 73px 10px 15px;
  text-align: left;
}
.code.nomarge {
  margin: 0;
}
.code.center {
  font-size: 1.2rem;
  margin: 0 auto 20px;
  width: 30%;
}
.code.center-w {
  font-size: 1.2rem;
  margin: 0 auto 20px;
  width: 65%;
}
.code.large {
  font-size: 1.2rem;
}
.code .copy-btn {
  background-color: var(--tw-copy-btn-bg);
  border: 0;
  border-radius: var(--tw-radius-sm);
  color: var(--tw-emphasis-color);
  cursor: pointer;
  padding: 5px 10px;
  position: absolute;
  right: 5px;
  top: 5px;
}
.code.lang .copy-btn {
  top: 35px;
}
.code code {
  background-color: transparent !important;
  border-radius: 0 !important;
  color: inherit !important;
  padding: 0 !important;
}
.code.lang {
  padding: 39px 15px 10px !important;
  position: relative;
}
.code.lang[rel]:before {
  content: attr(rel);
  font-style: normal;
  font-weight: 600;
  left: 0;
  padding: 5px 0;
  position: absolute;
  text-indent: 15px;
  top: 0;
  width: 100%;
  --webkit-border-radius: var(--tw-radius-md) var(--tw-radius-md) 0 0;
  border-radius: var(--tw-radius-md) var(--tw-radius-md) 0 0;
}
pre.lang[rel]:before {
  background-color: var(--tw-primary);
  color: var(--tw-color-code);
}

/* --- Alerts & Tips --- */
.tip {
  background-color: var(--tw-tip-bg);
  border: 1px solid var(--tw-tip-border-color);
  border-radius: var(--tw-radius-md);
}
.alert {
  background-color: var(--tw-alert-bg);
  border: 1px solid var(--tw-alert-border-color);
  border-radius: var(--tw-radius-md);
}
.alert,
.tip {
  margin-bottom: 1rem;
  align-items: center;
  display: block;
  overflow: hidden;
  padding: 20px;
  position: relative;
  width: 100%;
}
.tip br,
.alert br {
  display: block;
  content: "";
  margin-bottom: 1rem;
}

/* --- Collapsible Content --- */
.collapsible-button {
  margin: 5px 0;
  padding: 10px;
}
.collapsible-content {
  border: 1px solid var(--tw-success);
  margin-top: 5px;
  padding: 10px;
}

/* --- Pagination --- */
.pagination {
  gap: 6px;
}
/* Specificity raised (.pagination .page-item) so Bootstrap's first/last-child
   corner-radius rules can't break the pill shape at the ends. */
.pagination .page-item .page-link,
.pagination .page-item span.page-link {
  background-color: var(--tw-contrast-bg);
  border: 1px solid var(--tw-border-soft);
  border-radius: var(--tw-radius-pill);
  color: var(--tw-emphasis-color);
  padding: 8px 14px;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.pagination .page-item a.page-link:hover {
  background-color: color-mix(in srgb, var(--tw-primary) 12%, transparent);
  border-color: var(--tw-primary);
  color: var(--tw-emphasis-color);
}
.pagination .page-item span.page-link.current {
  background-color: var(--tw-primary);
  border-color: var(--tw-primary);
  color: var(--tw-contrast-bg);
}

/* --- Scroll To Top (moved from footer.php inline style) --- */
.scroll-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  background-color: var(--tw-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  border: none;
  box-shadow: var(--tw-shadow-md);
  z-index: 1000;
  transition: opacity 0.2s ease, transform 0.15s ease;
}
.scroll-to-top.visible {
  opacity: 1;
  visibility: visible;
}
.scroll-to-top:hover {
  transform: translateY(-2px);
  box-shadow: var(--tw-shadow-lg);
}
.scroll-to-top svg {
  width: 22px;
  height: 22px;
  fill: #fff;
}
@media screen and (max-width: 767px) {
  .scroll-to-top {
    display: none;
  }
}

/* --- Tables --- */
.table,
table {
  --tw-table-bg: var(--tw-contrast-bg);
  background-color: var(--tw-contrast-bg);
}
table.table thead th {
  background-color: var(--tw-primary);
  color: var(--tw-color-code);
}
.table thead {
  color: var(--tw-white);
}
table thead tr th {
  text-align: center;
  vertical-align: middle;
}
table thead a {
  color: #fff;
}
table .text-muted {
  color: #c40000;
  font-weight: 600;
}

/* --- WP Caption & Image Post --- */
.image-post,
.wp-caption,
.wp-email p {
  overflow: hidden;
  width: 100%;
}
.image-post,
.wp-caption {
  background-color: var(--tw-post-gray-bg);
  border: 1px solid var(--tw-border-soft);
  border-radius: var(--tw-radius-md);
  font-size: 0.8em;
  font-style: italic;
  margin: 2rem auto;
  padding: 20px;
  text-align: center;
}
.image-post img,
.wp-caption img {
  background: var(--tw-body-bg);
  height: auto;
  max-width: 100%;
}
.wp-caption p.wp-caption-text {
  font-size: 11px;
  line-height: 17px;
  margin: 0;
  padding: 0 4px 5px;
}
.wp-smiley {
  border: none !important;
  display: inline !important;
  height: auto !important;
  margin: 0 !important;
  max-height: 1.5em !important;
  padding: 0 !important;
}

/* --- Profile Cover --- */
.cover-profile-top {
  border-radius: var(--tw-radius-lg);
  box-shadow: var(--tw-shadow-md);
  background-position: 50%;
  background-size: cover;
  border-bottom: 1px solid hsla(0, 0%, 8%, 0.2);
  max-height: 200px;
  min-height: 200px;
  padding: 80px 0;
}
.profile-avatar {
  margin-top: -145px;
  z-index: 4;
}

/* --- Slogan --- */
.slogan span {
  color: var(--tw-muted-2);
}


/* ============================================================
   14. ANIMATIONS
   ============================================================ */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes hero-pulse {
  /* rgba(16,185,129) = --tw-success #10b981 */
  0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); }
  50%       { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
}

/* Respect reduced-motion: animations already GPU-light, but honor the OS
   preference so motion-sensitive users get a static site. */
@media (prefers-reduced-motion: reduce) {
  .box-tutoriel,
  .hero-dot {
    animation: none;
  }
  .box-tutoriel,
  .box-tutoriel:hover {
    transition: none;
  }
}


/* ============================================================
   15. DARK MODE OVERRIDES
   ============================================================ */

[data-bs-theme="dark"] body {
  background-color: #080e1a;
}
[data-bs-theme="dark"] nav.navbartop {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
[data-bs-theme="dark"] .navbar-sticky {
  background-color: rgba(15, 23, 42, 0.93) !important;
  border-bottom-color: rgba(119, 219, 255, 0.12);
}
[data-bs-theme="dark"] .hero-badge {
  background: rgba(0, 30, 70, 0.5);
  border-color: rgba(119, 219, 255, 0.35);
}
[data-bs-theme="dark"] #content {
  box-shadow: var(--tw-shadow-sm);
}
[data-bs-theme="dark"] .box-tutoriel {
  background: #0e1827;
  border-color: #22354f;
  box-shadow: var(--tw-shadow-sm);
}
[data-bs-theme="dark"] .box-tutoriel:hover {
  border-color: var(--tw-primary);
  box-shadow: var(--tw-shadow-md);
}
[data-bs-theme="dark"] .box-tutoriel .title a {
  color: rgba(210, 235, 255, 0.92);
}
[data-bs-theme="dark"] .card {
  border-color: var(--tw-border-soft);
}
[data-bs-theme="dark"] .card-tutorial.win {
  box-shadow: var(--tw-shadow-sm);
}
[data-bs-theme="dark"] .card-tutorial.win > .card-header {
  border-bottom-color: #77dbff;
  background-color: #0a1828;
  color: #cce8ff;
}
[data-bs-theme="dark"] blockquote {
  border-color: rgba(80, 180, 255, 0.3);
}
[data-bs-theme="dark"] hr {
  border-color: rgba(80, 160, 255, 0.15) !important;
}
[data-bs-theme="dark"] .copy-btn {
  background-color: #162a44;
  color: #7dc8f0;
  border: 1px solid #1e3a5f;
}
[data-bs-theme="dark"] .copy-btn:hover {
  background-color: #1e3a5f;
  color: #a8deff;
  border-color: #2a5080;
}
[data-bs-theme="dark"] .entry-content h2 {
  border-bottom-color: rgba(119, 219, 255, 0.45);
}
[data-bs-theme="dark"] #toc a::before {
  background: #77dbff;
}
[data-bs-theme="dark"] .list-categories .current-cat {
  background-color: rgba(119, 219, 255, 0.1);
  color: #77dbff;
  border-left-color: #77dbff;
}


/* ============================================================
   16. MEDIA QUERIES
   ============================================================ */

@media screen and (max-width: 782px) {
  .admin-bar .tutorial.win-reading-meter {
    top: 0;
  }
}
@media screen and (min-width: 769px) {
  .dropend:hover > .dropdown-menu {
    left: 100%;
    position: absolute;
    top: 0;
  }
  .dropend .dropdown-toggle {
    margin-left: 0.5em;
  }
}
@media (max-width: 768px) {
  .navbar-sticky {
    position: relative;
    top: 0;
  }
  .admin-bar .navbar-sticky {
    margin-top: 0;
  }
  body {
    padding-top: 0;
  }
}
@media screen and (max-width: 768px) {
  #content .placement {
    margin-left: -24px;
    margin-right: -24px;
  }
  .post-page {
    padding: 0 !important;
  }
  #content .image-post,
  .wp-caption {
    border: 0;
    border-radius: 0;
    margin-left: -24px;
    margin-right: -24px;
    padding: 0 !important;
    width: auto !important;
  }
  #content {
    border-radius: 0;
  }
  nav.toc {
    width: 100%;
  }
  .print-area {
    text-align: center;
  }
  .print-button {
    display: inline-block;
    float: none;
    margin: 5px auto !important;
    width: 37%;
  }
  .top-div {
    margin-top: 0px !important;
  }
  .search-height,
  .top-.page,
  .top-.post {
    margin-top: 0 !important;
  }
  .article-meta .hide-mobile {
    display: none !important;
  }
  a.page.larger,
  a.page.smaller,
  span.extend {
    display: none;
  }
  .search-title h1 {
    font-size: 1.4rem;
  }
  .code.center,
  .code.center-w {
    width: 100%;
  }
}

/* --- INP: navbar blur override (mobile only) ---
   Placed at the END of the file so these rules win the source-order tie
   against the [data-bs-theme] .navbar-sticky backgrounds defined above.
   backdrop-filter forces Chrome to re-sample and blur everything painted
   under the sticky navbar on every frame while the collapse changes layout
   (the menu pushes all page content down). On a mid-tier mobile GPU that
   re-sample alone can exceed the 200ms INP presentation budget. Removing
   the blur on small screens turns the tap into a cheap composited change;
   a solid background keeps the bar readable. Desktop keeps the glassmorphism
   (its INP is already good and its GPUs can afford the blur). */
@media (max-width: 991.98px) {
  .navbar-sticky {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  [data-bs-theme="light"] .navbar-sticky {
    background-color: #ffffff !important;
  }
  [data-bs-theme="dark"] .navbar-sticky {
    background-color: #0f1623 !important;
  }
}

/* ============================================================
   REVIEW INVITE (Trustpilot + Facebook, after article)
   Two large side-by-side buttons (lecrabeinfo-style).
   ============================================================ */
.tw-review-invite {
  margin: 24px 0;
  text-align: center;
}
.tw-review-heading {
  margin: 0 0 14px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--tw-title-color1);
}
.tw-review-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.tw-review-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px 16px;
  min-height: 92px;
  border-radius: var(--tw-radius-lg);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  color: #fff;
  box-shadow: var(--tw-shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.tw-review-btn strong { font-weight: 700; }
.tw-review-btn svg { flex: 0 0 auto; }
.tw-review-btn:hover,
.tw-review-btn:focus {
  color: #fff;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: var(--tw-shadow-md);
  filter: brightness(1.06);
}
.tw-review-trustpilot { background: #00b67a; }
.tw-review-facebook  { background: #1877f2; }

@media (max-width: 576px) {
  .tw-review-actions { grid-template-columns: 1fr; }
  .tw-review-btn { min-height: 0; }
}