/*
Theme Name:   Mon Theme Enfant
Description:  Version Finale (Correction Fond Noir & Liens)
*/

/* 1. VARIABLES */
:root {
    --wp--preset--color--base: #f8fafc;
    --wp--preset--color--contrast: #0f172a;
    --wp--preset--color--accent: #f59e0b;
    --wp--preset--color--teal: #0d9488;
    --wp--preset--color--terra: #e11d48;
    --wp--preset--color--kids-bg: #fde047;
    --wp--preset--color--kids-primary: #9333ea;
    --wp--preset--color--gray-light: #e2e8f0;
    --wp--preset--shadow--soft: 0 10px 30px -10px rgba(0, 0, 0, 0.1);
}
.wp-site-blocks,
header.wp-block-template-part,
header.wp-block-group.abd-header {
  overflow: visible !important;
}
/* 2. HEADER STICKY */
.abd-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: rgba(255, 255, 255, 0.85); /* Opacité légèrement réduite pour un flou plus visible */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--wp--preset--color--gray-light);
    width: 100%;
    padding: 1rem 0 0.5rem 0;
    transition: background-color 0.3s;
    /* Optionnel : un peu d’ombre pour mieux détacher le header */
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
.abd-logo-container { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; color: var(--wp--preset--color--contrast); }
.abd-logo-icon { width: 32px; height: 32px; background: linear-gradient(to top right, #f59e0b, #ea580c); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 18px; }

/* NAV */
.abd-nav-scroll { overflow-x: auto; white-space: nowrap; padding-bottom: 0.5rem; margin-top: 0.5rem; -ms-overflow-style: none; scrollbar-width: none; }
.abd-nav-scroll::-webkit-scrollbar { display: none; }
.abd-nav-list { display: flex; align-items: center; gap: 0.8rem; list-style: none; padding: 0; margin: 0; }
.abd-nav-link { text-decoration: none; padding: 0.4rem 1rem; border-radius: 99px; border: 1px solid var(--wp--preset--color--gray-light); color: #64748b; font-size: 0.85rem; font-weight: 600; background: white; transition: all 0.2s; }
.abd-nav-link:hover, .abd-nav-link.active { background: var(--wp--preset--color--contrast); color: white; border-color: var(--wp--preset--color--contrast); }
.abd-nav-link.kids-btn { background: #f3e8ff; color: #9333ea; border-color: #d8b4fe; font-weight: 800; display: flex; align-items: center; gap: 6px; }

/* 3. GRILLE BENTO */
.complex-bento-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-top: 2rem;
    margin-bottom: 8rem;
}

@media (min-width: 1024px) {
    .complex-bento-grid {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: 250px 250px 200px; 
    }
    .area-featured { grid-column: span 2; grid-row: span 2; }
    .area-short    { grid-column: span 1; grid-row: span 2; }
    .area-stat-1   { grid-column: span 1; grid-row: span 1; }
    .area-stat-2   { grid-column: span 1; grid-row: span 1; }
    .area-video    { grid-column: span 2; grid-row: span 1; }
    .area-small-1  { grid-column: span 1; grid-row: span 1; }
    .area-small-2  { grid-column: span 1; grid-row: span 1; }
}

/* 4. CARTES & IMAGE FILL */
.bento-card {
    border-radius: 16px !important;
    overflow: hidden;
    position: relative;
    background-color: white;
    height: 100%;
    width: 100%;
    box-shadow: 0 4px 6px rgba(0,0,0,0.04);
}
.bento-card:hover { transform: translateY(-4px); box-shadow: var(--wp--preset--shadow--soft); z-index: 5; }

/* CORRECTION : Fond noir par défaut pour les zones visuelles */
.area-featured, .area-short, .area-video {
    background-color: #0f172a !important; /* Slate 900 */
}

/* FORCE IMAGE FILL */
.bento-card .wp-block-query,
.bento-card .wp-block-post-template,
.bento-card .wp-block-group,
.bento-card figure.wp-block-post-featured-image {
    height: 100% !important;
    margin: 0 !important;
    display: block !important;
}

.bento-card img { 
    width: 100% !important; 
    height: 100% !important; 
    object-fit: cover !important; 
    display: block !important;
    transition: transform 0.5s ease;
}
.bento-card:hover img { transform: scale(1.05); }

.card-overlay { background: linear-gradient(to top, rgba(15, 23, 42, 0.9) 0%, rgba(15, 23, 42, 0.1) 60%, transparent 100%); position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.card-content { position: absolute; bottom: 0; left: 0; width: 100%; padding: 1.5rem; z-index: 3; }
.card-stat { display: flex; flex-direction: column; justify-content: center; padding: 1.5rem; border: 1px solid var(--wp--preset--color--gray-light); background-color: white !important; }

/* 5. SECTION KIDS */
.bg-kids-pattern {
    background-color: var(--wp--preset--color--kids-bg) !important;
    background-image: radial-gradient(#fff 2px, transparent 2px);
    background-size: 20px 20px;
    margin-top: 4rem; 
}
.btn-kids { background-color: var(--wp--preset--color--kids-primary) !important; color: white !important; padding: 1rem 2rem; border-radius: 12px; font-weight: bold; text-decoration: none; display: inline-block; }

/* FORCE le sticky peu importe les conteneurs */
header.wp-block-group.abd-header,
header.wp-block-template-part,
.wp-site-blocks > header.wp-block-template-part {
  position: sticky !important;
  top: 0;
  z-index: 1000 !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(255,255,255,0.92) !important;
  width: 100vw !important;
  margin-left: calc(-1 * (100vw - 100%) / 2) !important; /* Pour déborder les max-width WordPress si besoin */
}

.category-archive-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.2rem;
}
@media (max-width: 992px) {
    .category-archive-grid {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 600px) {
    .category-archive-grid {
        grid-template-columns: 1fr;
        gap: 1.4rem;
    }
}

/* Cartes catégorie */
.archive-cards-wrap {
  max-width: 3000px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.category-archive-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.4rem;
  width: 100%;
  min-width: 0;
}
@media (max-width: 992px) {
  .category-archive-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 700px) {
  .archive-cards-wrap { padding-left: 0.5rem; padding-right: 0.5rem; }
  .category-archive-grid {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }
}
.bento-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 32px -8px #64748b22;
  transition: box-shadow 0.2s, transform 0.2s;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
}
.bento-card img, .bento-card .wp-block-post-featured-image img {
  border-radius: 16px 16px 0 0 !important;
  object-fit: cover;
  width: 100%;
  min-height: 200px;
  max-height: 250px;
}
.bento-card:hover {
  box-shadow: 0 14px 38px -10px #6366f146;
  transform: translateY(-5px) scale(1.02);
  z-index: 10;
}
.wp-block-query-pagination {
  margin-top: 3rem !important;
}
.wp-block-query-title {
  text-align: center !important;
}

.single-main-block {
    width: 100vw !important;
    background: #f8fafc;
    margin: 0 !important;
    padding: 0 !important;
}
.single-article-content {
    background: white;
    margin: 0 auto !important;
    border-radius: 18px;
    padding: 2.2rem 2vw;
    box-shadow: 0 8px 32px -10px #cbd5e146;
    max-width: 800px;
}
.related-articles-block .related-grid {
    margin-top: 2rem;
    padding-bottom: 2rem;
}
.bento-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 20px -6px #64748b22;
    overflow: hidden;
    transition: box-shadow 0.15s, transform 0.15s;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
}
.bento-card:hover {
    box-shadow: 0 10px 38px -16px #64748b44;
    transform: translateY(-3px) scale(1.01);
}
@media (max-width: 900px) {
    .related-articles-block .related-grid {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 640px) {
    .related-articles-block .related-grid {
        grid-template-columns: 1fr;
    }
.single-article-content {
        padding: 1.1rem 2vw;
    }
}

/* Kisds nav css */

.kids-main-block {
    background: #fffde7 !important;
    font-family: 'Comic Sans MS', 'Poppins', cursive, sans-serif;
}
.kids-header {
    background: #fde047 !important;
    border-radius: 22px;
    text-align: center;
    font-family: 'Comic Sans MS', 'Poppins', cursive, sans-serif;
    margin-bottom: 2rem;
    box-shadow: 0 6px 32px -16px #fde04780;
}
.kids-archive-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.1rem;
    width: 100%;
    min-width: 0;
    font-family: 'Comic Sans MS', 'Poppins', cursive, sans-serif;
}
@media (max-width: 900px) {
    .kids-archive-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
    .kids-archive-grid { grid-template-columns: 1fr; }
}
.kids-bento-card {
    background: #fde047;
    border-radius: 17px;
    overflow: hidden;
    box-shadow: 0 4px 18px -6px #facc15cc;
    transition: box-shadow 0.18s, transform 0.18s;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    border: 2.5px solid #ca8a04;
    font-family: 'Comic Sans MS', 'Poppins', cursive, sans-serif;
}
.kids-bento-card:hover {
    box-shadow: 0 12px 32px -10px #fbbf24bd;
    transform: translateY(-4px) scale(1.027);
    z-index: 3;
}
.kids-img img, .kids-bento-card img {
    border-radius: 16px 16px 0 0 !important;
    object-fit: cover;
    width: 100%;
    min-height: 130px;
    max-height: 200px;
}
.kids-card-content {
    padding: 1rem 1.2rem;
    font-family: 'Comic Sans MS', 'Poppins', cursive, sans-serif;
    background: #fef9c3;
    border-radius: 0 0 16px 16px;
}
.kids-card-content h3, .kids-card-content .wp-block-post-title {
    font-family: 'Comic Sans MS', 'Poppins', cursive;
    color: #a21caf !important;
}

.kids-header {
  background: #fffde7 !important;
  font-family: 'Comic Sans MS', 'Poppins', cursive, sans-serif;
}
.kids-badge {
  background: #fde047;
  color: #a21caf;
  border-radius: 14px;
  padding: 5px 14px;
  font-weight: 900;
  font-size: 1.1rem;
  letter-spacing: 1.2px;
  margin-left: 0.5rem;
  display: inline-block;
}
.btn-exit:hover {
  background: #facc15;
  color: #a21caf !important;
}
.kids-nav-link:hover {
  color: #f59e0b;
}

/* style du bandeau services-cta*/


.services-b2b-cta h2 {
  font-family: 'Poppins', sans-serif;
  margin-bottom: 0.4rem;
  font-weight: 900;
  letter-spacing: -2px;
}
.services-b2b-btn:hover {
  background: #fde047;
  color: #a21caf;
}
@media (max-width:700px) {
  .services-b2b-cta {
    flex-direction: column;
    padding: 1.3rem 2vw;
    gap: 1.2rem;
    text-align: center;
  }
}


/* Styles page services */
.service-card {
  transition:transform 0.15s,box-shadow 0.15s;
}
.service-card:hover {
  transform: translateY(-7px) scale(1.03);
  box-shadow: 0 8px 40px -8px #ab99da55,0 2px 12px #facc1588;
}
@media (max-width: 800px) {
  .services-main-block section {
    padding: 1.5rem 0.4rem;
  }
  .service-card {
    padding: 1.2rem 0.7rem;
  }
}

.subscription-main-block section {
  animation: fadein 0.7s;
}
@keyframes fadein {
  from { opacity:0; transform:translateY(30px);}
  to   { opacity:1; transform:translateY(0);}
}