:root {
       --noir: #0f0e0c;
       --blanc: #f9f7f2;
       --gris: #6b6860;
       --border: #2a2825;
       --card: #1a1917;
       --accent: #0078D4;
       --win: #0078D4;
       --win-bg: #0d2540;
       --net: #2E7D32;
       --net-bg: #0d2010;
       --cyber: #AD1457;
       --cyber-bg: #2d0a1a;
       --bur: #E65100;
       --bur-bg: #2d1200;
       --form: #6A1B9A;
       --form-bg: #1a0828;
       --dep: #455A64;
       --dep-bg: #111c20;
   }

   *,
   *::before,
   *::after {
       box-sizing: border-box;
       margin: 0;
       padding: 0
   }

   html {
       scroll-behavior: smooth
   }

   body {
       font-family: 'Outfit', sans-serif;
       background: var(--noir);
       color: var(--blanc);
       min-height: 100vh
   }

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

   /* ── HEADER ── */
   .site-header {
       background: rgba(15, 14, 12, 0.95);
       backdrop-filter: blur(12px);
       padding: 0 2rem;
       position: sticky;
       top: 0;
       z-index: 100;
       border-bottom: 1px solid var(--border)
   }

   .header-inner {
       max-width: 1280px;
       margin: 0 auto;
       display: flex;
       align-items: center;
       justify-content: space-between;
       height: 64px;
       gap: 2rem
   }

   .logo {
       font-family: 'Syne', sans-serif;
       font-size: 1.4rem;
       font-weight: 800;
       color: #fff;
       letter-spacing: -.02em
   }

   .logo span {
       color: #0078D4
   }

   nav {
       display: flex;
       gap: .25rem
   }

   nav a {
       color: rgba(255, 255, 255, .55);
       font-size: .88rem;
       font-weight: 500;
       padding: .4rem .85rem;
       border-radius: 6px;
       transition: all .2s
   }

   nav a:hover {
       background: rgba(255, 255, 255, .08);
       color: #fff
   }

   nav a.active {
       background: rgba(255, 255, 255, .1);
       color: #fff
   }

   /* ── HERO COMPACT ── */
   .page-hero {
       background: var(--noir);
       padding: 3rem 2rem 2rem;
       border-bottom: 1px solid var(--border);
       position: relative;
       overflow: hidden
   }

   .page-hero::before {
       content: '';
       position: absolute;
       top: -100px;
       right: -100px;
       width: 500px;
       height: 500px;
       background: radial-gradient(circle, rgba(46, 125, 50, .12) 0%, transparent 65%);
       pointer-events: none
   }

   .hero-inner {
       max-width: 1280px;
       margin: 0 auto
   }

   .breadcrumb {
       display: flex;
       align-items: center;
       gap: .5rem;
       font-size: .8rem;
       color: rgba(255, 255, 255, .4);
       margin-bottom: 1rem
   }

   .breadcrumb a {
       color: rgba(255, 255, 255, .4);
       transition: color .2s
   }

   .breadcrumb a:hover {
       color: #fff
   }

   .breadcrumb span {
       color: rgba(255, 255, 255, .2)
   }

   .page-hero h1 {
       font-family: 'Syne', sans-serif;
       font-size: clamp(1.8rem, 4vw, 3rem);
       font-weight: 800;
       letter-spacing: -.03em;
       margin-bottom: .75rem
   }

   .page-hero h1 em {
       font-style: normal;
       color: var(--net)
   }

   .hero-meta {
       display: flex;
       align-items: center;
       gap: 1.5rem;
       flex-wrap: wrap
   }

   .hero-count {
       display: inline-flex;
       align-items: center;
       gap: .4rem;
       background: rgba(46, 125, 50, .15);
       border: 1px solid rgba(46, 125, 50, .3);
       color: #81c784;
       font-size: .82rem;
       font-weight: 600;
       padding: .3rem .8rem;
       border-radius: 50px
   }

   .hero-desc {
       color: rgba(255, 255, 255, .5);
       font-size: .95rem;
       max-width: 600px;
       margin-top: .5rem
   }

   /* ── TOOLBAR ── */
   .toolbar {
       background: rgba(26, 25, 23, .8);
       backdrop-filter: blur(8px);
       border-bottom: 1px solid var(--border);
       padding: 1rem 2rem;
       position: sticky;
       top: 64px;
       z-index: 90
   }

   .toolbar-inner {
       max-width: 1280px;
       margin: 0 auto;
       display: flex;
       align-items: center;
       gap: 1rem;
       flex-wrap: wrap
   }

   .search-wrap {
       position: relative;
       flex: 1;
       min-width: 220px;
       max-width: 360px
   }

   .search-wrap input {
       width: 100%;
       background: rgba(255, 255, 255, .06);
       border: 1px solid var(--border);
       border-radius: 8px;
       padding: .6rem 1rem .6rem 2.5rem;
       color: #fff;
       font-size: .9rem;
       font-family: 'Outfit', sans-serif;
       outline: none;
       transition: border-color .2s
   }

   .search-wrap input::placeholder {
       color: rgba(255, 255, 255, .3)
   }

   .search-wrap input:focus {
       border-color: rgba(255, 255, 255, .3)
   }

   .search-icon {
       position: absolute;
       left: .75rem;
       top: 50%;
       transform: translateY(-50%);
       color: rgba(255, 255, 255, .3);
       font-size: .9rem;
       pointer-events: none
   }

   .filters {
       display: flex;
       gap: .4rem;
       flex-wrap: wrap
   }

   .filter-btn {
       background: transparent;
       border: 1px solid var(--border);
       color: rgba(255, 255, 255, .5);
       font-family: 'Outfit', sans-serif;
       font-size: .8rem;
       font-weight: 600;
       padding: .35rem .85rem;
       border-radius: 50px;
       cursor: pointer;
       transition: all .2s;
       white-space: nowrap
   }

   .filter-btn:hover {
       border-color: rgba(255, 255, 255, .3);
       color: #fff
   }

   .filter-btn.active {
       color: #fff;
       border-color: transparent
   }

   .filter-btn[data-cat="all"].active {
       background: #fff;
       color: var(--noir)
   }

   .filter-btn[data-cat="bases"].active {
       background: var(--net);
       border-color: var(--net)
   }

   .filter-btn[data-cat="protocoles"].active {
       background: #00695C;
       border-color: #00695C
   }

   .filter-btn[data-cat="vlan"].active {
       background: #1565C0;
       border-color: #1565C0
   }

   .filter-btn[data-cat="vpn"].active {
       background: #6A1B9A;
       border-color: #6A1B9A
   }

   .filter-btn[data-cat="serveurs"].active {
       background: #E65100;
       border-color: #E65100
   }

   .sort-select {
       background: rgba(255, 255, 255, .06);
       border: 1px solid var(--border);
       color: rgba(255, 255, 255, .7);
       font-family: 'Outfit', sans-serif;
       font-size: .82rem;
       padding: .4rem .8rem;
       border-radius: 8px;
       outline: none;
       cursor: pointer;
       margin-left: auto
   }

   .sort-select option {
       background: #1a1917
   }

   .results-count {
       color: rgba(255, 255, 255, .35);
       font-size: .82rem;
       margin-left: .5rem;
       white-space: nowrap
   }

   /* ── GRILLE ── */
   .catalogue {
       max-width: 1280px;
       margin: 0 auto;
       padding: 2rem
   }

   .grid {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
       gap: 1.25rem
   }

   .tuto-card {
       background: var(--card);
       border: 1px solid var(--border);
       border-radius: 14px;
       overflow: hidden;
       display: flex;
       flex-direction: column;
       transition: transform .25s, border-color .25s, box-shadow .25s;
       cursor: pointer;
       position: relative
   }

   .tuto-card:hover {
       transform: translateY(-5px);
       border-color: rgba(255, 255, 255, .12);
       box-shadow: 0 16px 48px rgba(0, 0, 0, .4)
   }

   /* Thumbnail */
   .card-thumb {
       position: relative;
       aspect-ratio: 16/9;
       background: #111;
       overflow: hidden;
       flex-shrink: 0
   }

   .card-thumb img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       transition: transform .4s
   }

   .tuto-card:hover .card-thumb img {
       transform: scale(1.04)
   }

   .thumb-placeholder {
       width: 100%;
       height: 100%;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 2.5rem;
       background: linear-gradient(135deg, rgba(46, 125, 50, .3), rgba(46, 125, 50, .05))
   }

   .play-overlay {
       position: absolute;
       inset: 0;
       display: flex;
       align-items: center;
       justify-content: center;
       background: rgba(0, 0, 0, .35);
       opacity: 0;
       transition: opacity .25s
   }

   .tuto-card:hover .play-overlay {
       opacity: 1
   }

   .play-btn {
       width: 52px;
       height: 52px;
       background: rgba(255, 255, 255, .9);
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 1.2rem;
       padding-left: 3px
   }

   .card-duration {
       position: absolute;
       bottom: .5rem;
       right: .5rem;
       background: rgba(0, 0, 0, .85);
       color: #fff;
       font-size: .72rem;
       font-weight: 600;
       padding: .15rem .45rem;
       border-radius: 4px
   }

   /* Badge niveau */
   .card-level {
       position: absolute;
       top: .6rem;
       left: .6rem;
       font-size: .68rem;
       font-weight: 700;
       padding: .2rem .55rem;
       border-radius: 50px;
       text-transform: uppercase;
       letter-spacing: .06em
   }

   .level-debutant {
       background: rgba(46, 125, 50, .9);
       color: #fff
   }

   .level-intermediaire {
       background: rgba(230, 101, 0, .9);
       color: #fff
   }

   .level-avance {
       background: rgba(173, 20, 87, .9);
       color: #fff
   }

   /* Corps carte */
   .card-body {
       padding: 1.1rem;
       display: flex;
       flex-direction: column;
       gap: .6rem;
       flex: 1
   }

   .card-cat {
       font-size: .72rem;
       font-weight: 700;
       text-transform: uppercase;
       letter-spacing: .07em;
       color: var(--net)
   }

   .card-title {
       font-family: 'Syne', sans-serif;
       font-size: 1rem;
       font-weight: 700;
       line-height: 1.3;
       color: #fff
   }

   .card-desc {
       font-size: .85rem;
       color: rgba(255, 255, 255, .45);
       line-height: 1.6;
       flex: 1
   }

   .card-footer {
       display: flex;
       align-items: center;
       justify-content: space-between;
       margin-top: .25rem;
       padding-top: .75rem;
       border-top: 1px solid rgba(255, 255, 255, .06)
   }

   .card-date {
       font-size: .75rem;
       color: rgba(255, 255, 255, .3)
   }

   .card-link {
       font-size: .8rem;
       font-weight: 600;
       color: var(--net);
       display: flex;
       align-items: center;
       gap: .3rem;
       transition: gap .2s
   }

   .tuto-card:hover .card-link {
       gap: .55rem
   }

   /* Pastille "Nouveau" */
   .card-new {
       position: absolute;
       top: .6rem;
       right: .6rem;
       background: #FF6D00;
       color: #fff;
       font-size: .65rem;
       font-weight: 800;
       padding: .15rem .45rem;
       border-radius: 4px;
       letter-spacing: .05em;
       text-transform: uppercase
   }

   /* ── ÉTAT VIDE ── */
   .empty-state {
       text-align: center;
       padding: 4rem 2rem;
       color: rgba(255, 255, 255, .3)
   }

   .empty-state p {
       font-size: 1.1rem;
       margin-top: .5rem
   }

   /* ── PAGINATION ── */
   .pagination {
       display: flex;
       justify-content: center;
       align-items: center;
       gap: .5rem;
       padding: 2rem
   }

   .page-btn {
       background: transparent;
       border: 1px solid var(--border);
       color: rgba(255, 255, 255, .5);
       font-family: 'Outfit', sans-serif;
       font-size: .9rem;
       width: 38px;
       height: 38px;
       border-radius: 8px;
       cursor: pointer;
       transition: all .2s;
       display: flex;
       align-items: center;
       justify-content: center
   }

   .page-btn:hover {
       border-color: rgba(255, 255, 255, .3);
       color: #fff
   }

   .page-btn.active {
       background: #fff;
       color: var(--noir);
       border-color: #fff;
       font-weight: 700
   }

   /* ── FOOTER ── */
   .site-footer {
       background: #070706;
       border-top: 1px solid var(--border);
       text-align: center;
       padding: 2rem;
       font-size: .82rem;
       color: rgba(255, 255, 255, .3)
   }

   .site-footer a {
       color: rgba(255, 255, 255, .4)
   }

   @media(max-width:768px) {
       nav {
           display: none
       }

       .toolbar-inner {
           gap: .75rem
       }

       .sort-select {
           margin-left: 0
       }

       .catalogue {
           padding: 1rem
       }

       .grid {
           grid-template-columns: 1fr
       }
   }