/* ============================================
   NIVEAU 18 — CSS GRID
   Styles spécifiques aux démonstrations Grid
   ============================================ */

/* ---------- GRID BASICS DEMOS ---------- */
.demo-grid-basics {
  display: grid;
  gap: 1.5rem;
  padding: 1.5rem;
  background: var(--couleur-blanc);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
}

.grid-basic-box {
  display: grid;
  gap: 0.5rem;
  padding: 1rem;
  background: #f8fafc;
  border: 2px dashed var(--couleur-bordure);
  border-radius: var(--rayon);
  min-height: 100px;
}

.grid-item {
  padding: 0.75rem;
  background: linear-gradient(135deg, var(--couleur-primaire), var(--couleur-secondaire));
  color: white;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.85rem;
  text-align: center;
}

.grid-item-alt {
  background: linear-gradient(135deg, #16a34a, #06b6d4);
}

/* ---------- GRID TEMPLATE COLUMNS/ROWS DEMOS ---------- */
.demo-template-cols {
  display: grid;
  gap: 1.5rem;
  padding: 1.5rem;
  background: var(--couleur-blanc);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
}

.template-demo {
  text-align: center;
}

.template-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--couleur-texte-clair);
  font-family: var(--police-code);
  background: #f1f5f9;
  padding: 0.2em 0.6em;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 0.5rem;
}

.template-box {
  display: grid;
  gap: 0.5rem;
  padding: 1rem;
  background: #f8fafc;
  border: 2px dashed var(--couleur-bordure);
  border-radius: var(--rayon);
}

.template-box.cols-3 {
  grid-template-columns: 1fr 1fr 1fr;
}

.template-box.cols-2-1 {
  grid-template-columns: 2fr 1fr;
}

.template-box.cols-1-2 {
  grid-template-columns: 1fr 2fr;
}

.template-box.cols-200 {
  grid-template-columns: 200px 1fr 200px;
}

.template-box.rows-3 {
  grid-template-rows: auto 1fr auto;
}

.template-box.mixed {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 1fr auto;
}

/* ---------- GRID TEMPLATE AREAS DEMOS ---------- */
.demo-grid-areas {
  padding: 1.5rem;
  background: var(--couleur-blanc);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
}

.area-box {
  display: grid;
  gap: 0.5rem;
  padding: 1rem;
  background: #f8fafc;
  border: 2px dashed var(--couleur-bordure);
  border-radius: var(--rayon);
  min-height: 250px;
}

.area-box.layout-blog {
  grid-template-areas:
    "header  header  header"
    "sidebar content content"
    "footer  footer  footer";
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: auto 1fr auto;
}

.area-box.layout-dashboard {
  grid-template-areas:
    "nav    header  header"
    "nav    stats   stats"
    "nav    chart   chart"
    "nav    footer  footer";
  grid-template-columns: 60px 1fr 1fr;
  grid-template-rows: 40px auto 1fr auto;
}

.area-box.layout-holy-grail {
  grid-template-areas:
    "header  header  header"
    "nav     main    aside"
    "footer  footer  footer";
  grid-template-columns: 150px 1fr 200px;
  grid-template-rows: auto 1fr auto;
}

.area-item {
  padding: 0.5rem;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.area-item.area-header {
  background: var(--couleur-primaire);
  grid-area: header;
}

.area-item.area-nav {
  background: #1e293b;
  grid-area: nav;
}

.area-item.area-sidebar {
  background: #7c3aed;
  grid-area: sidebar;
}

.area-item.area-aside {
  background: #7c3aed;
  grid-area: aside;
}

.area-item.area-content {
  background: #16a34a;
  grid-area: content;
}

.area-item.area-main {
  background: #16a34a;
  grid-area: main;
}

.area-item.area-stats {
  background: #f59e0b;
  grid-area: stats;
}

.area-item.area-chart {
  background: #06b6d4;
  grid-area: chart;
}

.area-item.area-footer {
  background: #475569;
  grid-area: footer;
}

/* ---------- GRID ITEM PLACEMENT DEMOS ---------- */
.demo-item-placement {
  display: grid;
  gap: 1.5rem;
  padding: 1.5rem;
  background: var(--couleur-blanc);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
}

.placement-box {
  display: grid;
  gap: 0.5rem;
  padding: 1rem;
  background: #f8fafc;
  border: 2px dashed var(--couleur-bordure);
  border-radius: var(--rayon);
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 60px);
}

/* ---------- GAP DEMOS ---------- */
.demo-grid-gap {
  display: grid;
  gap: 1.5rem;
  padding: 1.5rem;
  background: var(--couleur-blanc);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
}

/* ---------- ALIGNMENT DEMOS ---------- */
.demo-grid-align {
  display: grid;
  gap: 1.5rem;
  padding: 1.5rem;
  background: var(--couleur-blanc);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
}

.align-demo {
  text-align: center;
}

.align-box {
  display: grid;
  gap: 0.5rem;
  padding: 1rem;
  background: #f8fafc;
  border: 2px dashed var(--couleur-bordure);
  border-radius: var(--rayon);
  min-height: 150px;
}

.align-box.justify-start { justify-items: start; }
.align-box.justify-end { justify-items: end; }
.align-box.justify-center { justify-items: center; }
.align-box.justify-stretch { justify-items: stretch; }

.align-box.align-start { align-items: start; }
.align-box.align-end { align-items: end; }
.align-box.align-center { align-items: center; }
.align-box.align-stretch { align-items: stretch; }

.align-child {
  padding: 0.5rem 1rem;
  background: linear-gradient(135deg, #7c3aed, #ec4899);
  color: white;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.8rem;
  text-align: center;
  width: fit-content;
}

/* ---------- REPEAT, MINMAX, AUTO-FIT DEMOS ---------- */
.demo-auto-fit {
  display: grid;
  gap: 1.5rem;
  padding: 1.5rem;
  background: var(--couleur-blanc);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
}

.auto-fit-box {
  display: grid;
  gap: 0.75rem;
  padding: 1rem;
  background: #f8fafc;
  border: 2px dashed var(--couleur-bordure);
  border-radius: var(--rayon);
}

.auto-fit-box.responsive-cards {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.auto-fit-box.responsive-cards-fit {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.auto-fit-box.minmax-demo {
  grid-template-columns: repeat(3, minmax(100px, 1fr));
}

.auto-fit-box.minmax-fluid {
  grid-template-columns: minmax(100px, 1fr) 2fr minmax(100px, 1fr);
}

.auto-fit-card {
  background: white;
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  padding: 1rem;
  text-align: center;
}

.auto-fit-card .card-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.5rem;
  color: white;
  font-weight: 700;
  font-size: 1.1rem;
}

.auto-fit-card h4 {
  font-size: 0.9rem;
  margin-bottom: 0.3rem;
}

.auto-fit-card p {
  font-size: 0.8rem;
  color: #64748b;
  line-height: 1.4;
}

/* ---------- CHEAT SHEET GRID ---------- */
.cheat-sheet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  padding: 1.5rem;
  background: var(--couleur-blanc);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
}

.cheat-category-grid {
  padding: 1rem;
  background: #f8fafc;
  border-radius: var(--rayon);
  border-left: 4px solid var(--couleur-primaire);
}

.cheat-category-grid h4 {
  margin-bottom: 0.5rem;
  color: var(--couleur-primaire);
}

.cheat-category-grid ul {
  list-style: none;
  padding: 0;
}

.cheat-category-grid li {
  padding: 0.3rem 0;
  font-size: 0.85rem;
}

.cheat-category-grid code {
  background: #e2e8f0;
  padding: 0.1em 0.4em;
  border-radius: 4px;
  font-size: 0.8rem;
}

/* ---------- GRID VS FLEXBOX COMPARISON ---------- */
.demo-comparison {
  display: grid;
  gap: 1.5rem;
  padding: 1.5rem;
  background: var(--couleur-blanc);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  grid-template-columns: 1fr 1fr;
}

.comparison-box {
  text-align: center;
}

.comparison-preview {
  min-height: 120px;
  background: #f8fafc;
  border: 2px dashed var(--couleur-bordure);
  border-radius: var(--rayon);
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  overflow: hidden;
}

.comparison-preview.flex-demo {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}

.comparison-preview.grid-demo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.comparison-preview .comp-item {
  padding: 0.5rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* ---------- PROJECT DEMOS ---------- */

/* Projet 1: Masonry/Pinterest */
.demo-masonry {
  display: grid;
  gap: 1rem;
  padding: 1.5rem;
  background: var(--couleur-blanc);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  grid-auto-rows: 10px;
  margin-bottom: 1.5rem;
}

.masonry-item {
  border-radius: var(--rayon);
  display: flex;
  align-items: flex-end;
  padding: 0.75rem;
  color: white;
  font-weight: 600;
  font-size: 0.8rem;
}

.masonry-item.span-10 { grid-row: span 10; }
.masonry-item.span-15 { grid-row: span 15; }
.masonry-item.span-20 { grid-row: span 20; }
.masonry-item.span-25 { grid-row: span 25; }
.masonry-item.span-30 { grid-row: span 30; }
.masonry-item.span-12 { grid-row: span 12; }
.masonry-item.span-18 { grid-row: span 18; }

/* Projet 2: Dashboard Grid */
.demo-dash-grid {
  display: grid;
  gap: 1rem;
  padding: 1rem;
  background: #f1f5f9;
  border-radius: var(--rayon);
  grid-template-columns: 60px 1fr 1fr;
  grid-template-rows: 50px auto 1fr auto;
  grid-template-areas:
    "dash-nav   dash-header  dash-header"
    "dash-nav   dash-stats   dash-stats"
    "dash-nav   dash-chart   dash-sidebar"
    "dash-nav   dash-footer  dash-footer";
  min-height: 350px;
  margin-bottom: 1.5rem;
}

.dash-nav {
  background: #1e293b;
  grid-area: dash-nav;
  border-radius: var(--rayon);
  padding: 0.75rem 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.dash-nav .nav-icon {
  width: 32px;
  height: 32px;
  background: #334155;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  font-size: 0.7rem;
}

.dash-nav .nav-icon.active {
  background: var(--couleur-primaire);
  color: white;
}

.dash-header {
  background: white;
  grid-area: dash-header;
  border-radius: var(--rayon);
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dash-stats {
  grid-area: dash-stats;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

.dash-stat {
  background: white;
  border-radius: var(--rayon);
  padding: 0.75rem;
  text-align: center;
}

.dash-stat .stat-val {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--couleur-primaire);
}

.dash-stat .stat-lbl {
  font-size: 0.7rem;
  color: #64748b;
}

.dash-chart {
  background: white;
  grid-area: dash-chart;
  border-radius: var(--rayon);
  padding: 1rem;
  display: flex;
  align-items: flex-end;
  gap: 0.4rem;
}

.dash-bar {
  flex: 1;
  border-radius: 4px 4px 0 0;
  min-height: 10px;
}

.dash-sidebar-widget {
  background: white;
  grid-area: dash-sidebar;
  border-radius: var(--rayon);
  padding: 1rem;
}

.dash-footer {
  background: white;
  grid-area: dash-footer;
  border-radius: var(--rayon);
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Projet 3: Image Gallery Grid */
.demo-img-gallery {
  display: grid;
  gap: 0.75rem;
  padding: 1.5rem;
  background: var(--couleur-blanc);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 120px;
  margin-bottom: 1.5rem;
}

.gallery-cell {
  border-radius: var(--rayon);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 0.8rem;
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
  position: relative;
  overflow: hidden;
}

.gallery-cell:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 25px -5px rgba(0,0,0,0.2);
  z-index: 1;
}

.gallery-cell.span-2 {
  grid-column: span 2;
}

.gallery-cell.span-2row {
  grid-row: span 2;
}

.gallery-cell.span-both {
  grid-column: span 2;
  grid-row: span 2;
}

/* Projet 4: Portfolio */
.demo-portfolio {
  display: grid;
  gap: 1.5rem;
  padding: 1.5rem;
  background: var(--couleur-blanc);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  margin-bottom: 1.5rem;
}

.portfolio-card {
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.2s;
}

.portfolio-card:hover {
  box-shadow: 0 8px 25px -5px rgba(0,0,0,0.1);
  transform: translateY(-4px);
}

.portfolio-thumb {
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 0.85rem;
}

.portfolio-info {
  padding: 1rem;
}

.portfolio-info h3 {
  font-size: 1rem;
  margin-bottom: 0.3rem;
}

.portfolio-info p {
  font-size: 0.8rem;
  color: #64748b;
  line-height: 1.4;
  margin-bottom: 0.5rem;
}

.portfolio-tags {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.portfolio-tag {
  padding: 0.15rem 0.5rem;
  background: #f1f5f9;
  border-radius: 20px;
  font-size: 0.7rem;
  color: #64748b;
}

/* Projet 5: Admin Panel */
.demo-admin {
  display: grid;
  gap: 0;
  min-height: 350px;
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  overflow: hidden;
  grid-template-columns: 220px 1fr;
  grid-template-rows: 50px 1fr;
  grid-template-areas:
    "admin-sidebar admin-topbar"
    "admin-sidebar admin-content";
  margin-bottom: 1.5rem;
}

.admin-sidebar {
  background: #1e293b;
  grid-area: admin-sidebar;
  padding: 1rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.admin-sidebar .sidebar-brand {
  color: white;
  font-weight: 700;
  font-size: 1rem;
  padding: 0.5rem 0.5rem 1rem;
  border-bottom: 1px solid #334155;
  margin-bottom: 0.5rem;
}

.admin-sidebar .sidebar-link {
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  color: #94a3b8;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s;
}

.admin-sidebar .sidebar-link:hover,
.admin-sidebar .sidebar-link.active {
  background: #334155;
  color: white;
}

.admin-topbar {
  background: white;
  grid-area: admin-topbar;
  border-bottom: 1px solid var(--couleur-bordure);
  padding: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.admin-content {
  grid-area: admin-content;
  padding: 1rem;
  background: #f8fafc;
  overflow: auto;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border-radius: var(--rayon);
  overflow: hidden;
  font-size: 0.85rem;
}

.admin-table th,
.admin-table td {
  padding: 0.6rem 1rem;
  text-align: left;
  border-bottom: 1px solid #f1f5f9;
}

.admin-table th {
  background: #f8fafc;
  font-weight: 600;
  font-size: 0.8rem;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.admin-table tr:hover td {
  background: #f8fafc;
}

.admin-status {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
}

.admin-status.active {
  background: #dcfce7;
  color: #16a34a;
}

.admin-status.pending {
  background: #fef3c7;
  color: #d97706;
}

.admin-status.inactive {
  background: #fee2e2;
  color: #dc2626;
}

/* Projet 6: Blog Layout */
.demo-blog {
  display: grid;
  gap: 1.5rem;
  padding: 1.5rem;
  background: var(--couleur-blanc);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  grid-template-columns: 1fr 300px;
  margin-bottom: 1.5rem;
}

.blog-main {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.blog-post {
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  overflow: hidden;
  transition: box-shadow 0.2s;
}

.blog-post:hover {
  box-shadow: 0 4px 12px -2px rgba(0,0,0,0.08);
}

.blog-post-image {
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
}

.blog-post-body {
  padding: 1rem;
}

.blog-post-body .post-meta {
  font-size: 0.75rem;
  color: #64748b;
  margin-bottom: 0.5rem;
}

.blog-post-body h3 {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.blog-post-body p {
  font-size: 0.85rem;
  color: #475569;
  line-height: 1.5;
}

.blog-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.blog-widget {
  background: #f8fafc;
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  padding: 1rem;
}

.blog-widget h4 {
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--couleur-bordure);
}

.blog-widget .widget-tag-list {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.blog-widget .widget-tag {
  padding: 0.2rem 0.6rem;
  background: white;
  border: 1px solid var(--couleur-bordure);
  border-radius: 20px;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.2s;
}

.blog-widget .widget-tag:hover {
  background: var(--couleur-primaire);
  color: white;
  border-color: var(--couleur-primaire);
}

.blog-widget .widget-post-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.blog-widget .widget-post {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.blog-widget .widget-post-thumb {
  flex: 0 0 50px;
  height: 50px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 0.7rem;
  font-weight: 600;
}

.blog-widget .widget-post-info h5 {
  font-size: 0.8rem;
  margin-bottom: 0.15rem;
}

.blog-widget .widget-post-info span {
  font-size: 0.7rem;
  color: #64748b;
}

/* Projet 7: Magazine Layout */
.demo-magazine {
  display: grid;
  gap: 1rem;
  padding: 1.5rem;
  background: var(--couleur-blanc);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 100px;
  margin-bottom: 1.5rem;
}

.magazine-item {
  border-radius: var(--rayon);
  display: flex;
  align-items: flex-end;
  padding: 0.75rem;
  color: white;
  font-weight: 600;
  font-size: 0.8rem;
  position: relative;
  overflow: hidden;
}

.magazine-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 60%);
  pointer-events: none;
}

.magazine-item span {
  position: relative;
  z-index: 1;
}

.magazine-item.hero-mag {
  grid-column: span 3;
  grid-row: span 2;
  font-size: 1.1rem;
}

.magazine-item.side-mag {
  grid-row: span 2;
}

.magazine-item.wide-mag {
  grid-column: span 2;
}

/* Projet 8: Responsive Card Grid */
.demo-responsive-cards {
  display: grid;
  gap: 1.5rem;
  padding: 1.5rem;
  background: var(--couleur-blanc);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  margin-bottom: 1.5rem;
}

.resp-card {
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  padding: 1.5rem;
  text-align: center;
  transition: box-shadow 0.2s, transform 0.2s;
}

.resp-card:hover {
  box-shadow: 0 8px 25px -5px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}

.resp-card .card-icon-lg {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  color: white;
  font-weight: 700;
  font-size: 1.5rem;
}

.resp-card h3 {
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
}

.resp-card p {
  font-size: 0.85rem;
  color: #64748b;
  line-height: 1.5;
}

/* ---------- GRID OVERLAY ---------- */
.grid-overlay-container {
  position: relative;
  padding: 1.5rem;
  background: var(--couleur-blanc);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
}

.grid-overlay-visual {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 80px);
  position: relative;
  padding: 1rem;
  background: #f8fafc;
  border-radius: var(--rayon);
}

.grid-overlay-visual .grid-cell {
  border: 2px dashed rgba(37, 99, 235, 0.3);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  color: #94a3b8;
  background: rgba(37, 99, 235, 0.05);
}

.grid-overlay-visual .grid-cell.highlight {
  background: rgba(37, 99, 235, 0.15);
  border-color: rgba(37, 99, 235, 0.6);
  color: var(--couleur-primaire);
  font-weight: 600;
}

.grid-line-v {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(239, 68, 68, 0.4);
  z-index: 1;
}

.grid-line-h {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(239, 68, 68, 0.4);
  z-index: 1;
}

.grid-line-label {
  position: absolute;
  background: rgba(239, 68, 68, 0.85);
  color: white;
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  font-size: 0.65rem;
  font-weight: 600;
  z-index: 2;
}

/* ---------- RESPONSIVE OVERRIDES ---------- */
@media (max-width: 768px) {
  .demo-comparison {
    grid-template-columns: 1fr;
  }

  .demo-blog {
    grid-template-columns: 1fr;
  }

  .demo-admin {
    grid-template-columns: 1fr;
    grid-template-areas:
      "admin-topbar"
      "admin-content";
  }

  .admin-sidebar {
    display: none;
  }

  .demo-magazine {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 80px;
  }

  .magazine-item.hero-mag {
    grid-column: span 2;
    grid-row: span 2;
  }

  .magazine-item.side-mag {
    grid-row: span 1;
  }

  .demo-img-gallery {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 100px;
  }

  .gallery-cell.span-2 {
    grid-column: span 2;
  }

  .gallery-cell.span-both {
    grid-column: span 2;
  }

  .demo-dash-grid {
    grid-template-columns: 1fr;
    grid-template-rows: 40px auto 1fr;
    grid-template-areas:
      "dash-header"
      "dash-stats"
      "dash-chart";
  }

  .dash-nav,
  .dash-sidebar-widget,
  .dash-footer {
    display: none;
  }

  .dash-stats {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .demo-masonry {
    grid-template-columns: 1fr;
  }

  .demo-responsive-cards {
    grid-template-columns: 1fr;
  }
}