/*
Theme Name: Astra Child ArchitecteAI
Theme URI: https://architecte.ai
Description: Thème enfant personnalisé basé sur Astra
Author: ArchitecteAI
Template: astra
Version: 1.0.0
*/

@import url("../astra/style.css");



.categories-grid {
  display: flex;
  flex-wrap: wrap;
  //background: #fff;
  gap: 10px;
  justify-content: space-between;
}
.category-card {
  width: 48%;
  background: #fff;
  padding: 10px;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  box-sizing: border-box;
}
@media screen and (max-width: 768px) {
  .category-card {
    width: 100%;
  }
}


.category-header { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; }
.category-header h2 { font-size: 1.4em; margin: 10px 0 5px; }
.category-header h3 { font-size: 0.8em; margin: 10px 0 5px; }

.category-icon { width: 40px; height: 40px; object-fit: contain; }



.outil-grid { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; }

.outil-grid-3 {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.outil-grid-3 .outil-card {
  width: calc(33.33% - 13.34px);
  background: #fff;
  border: 1px solid #eee;
  padding: 20px;
  text-align: center;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  box-sizing: border-box;
}

@media screen and (max-width: 768px) {
  .outil-grid-3 .outil-card {
    width: 100%;
  }
}



.outil-card { background: #fff; border: 1px solid #e0e0e0; padding: 20px; width: 250px; text-align: center; border-radius: 12px; box-shadow: 0 2px 6px rgba(0,0,0,0.05); transition: transform 0.2s ease; }
.outil-card:hover { transform: translateY(-5px); }
.outil-logo-wrapper { width: 150px; height: 150px; margin: 0 auto 15px; display: flex; align-items: center; justify-content: center; background: #fafafa; border-radius: 8px; overflow: hidden; }
.outil-logo { max-width: 100%; max-height: 100%; object-fit: contain; }
.outil-card h3 { font-size: 1.1em; margin: 10px 0 5px; }
.outil-card .note { color: #0a7e7e; font-weight: bold; margin-top: 5px; }




a.menu-button {
  padding: 8px 16px;
  background-color: #0a7e7e;
  color: white;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 500;
  margin-left: auto;
}

.burger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
  }
  .burger span {
    width: 25px;
    height: 3px;
    background: #333;
    display: block;
    transition: all 0.3s ease;
  }

  .main-nav {
    display: flex;
  }
  .nav-links {
    display: flex;
    list-style: none;
    gap: 20px;
    margin: 0;
  }

  @media (max-width: 768px) {
    .burger {
      display: flex;
    }
    .main-nav {
      position: absolute;
      top: 60px;
      left: 0;
      width: 100%;
      background: white;
      transform: translateY(-100%);
      transition: transform 0.3s ease;
      z-index: 999;
      padding: 20px 0;
    }
    .main-nav ul {
      flex-direction: column;
      align-items: center;
      gap: 15px;
    }
    body.menu-open .main-nav {
      transform: translateY(0);
    }
  }