/************************************
 * AGJ – CSS OPTIMISÉ v2
 * Fix : Home + Blog + Gutenberg/Astra
 ************************************/

/* ===========================
   VARIABLES DE MARQUE
   =========================== */
:root {
  --agi-green: #04373D;
  --agi-rose: #EC4770;
  --agi-text: #222831;
  --agi-grey: #6B7A86;
  --agi-bg-rose: #FFEFF4;
  --agi-bg-blue: #E9F5F8;
  --agi-border-rose: #F9C7DA;
  --agi-border-blue: #C5E3EC;
}

/* ===========================
   HOME – BASE TYPO
   =========================== */
.agi {
  color: var(--agi-text);
}

.agi p {
  margin-bottom: 20px;
}

@media (max-width: 1024px) {
  .agi p {
    margin-bottom: 18px;
  }
}

@media (max-width: 767px) {
  .agi p {
    margin-bottom: 16px;
  }
}

/* ===========================
   HOME – TITRES H2 + SÉPARATEUR
   =========================== */
.agi h2 {
  color: var(--agi-green);
  line-height: 1.2;
  margin: 0 0 12px 0;
}

.agi .agi-sep {
  display: block;
  height: 4px;
  width: 120px;
  background: var(--agi-rose);
  margin: 8px 0 0 0;
}

/* ===========================
   HOME – BLOC MANIFESTE
   =========================== */
.agi .agi-manifeste {
  background: #FFF8F9;
  border-left: 4px solid var(--agi-rose);
  padding: 24px;
  border-radius: 14px;
  margin-top: 8px;
}

/* ===========================
   HOME – LISTE D'ENGAGEMENTS
   =========================== */
.engagement-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  transition: .25s ease;
}

.engagement-item:hover {
  transform: translateX(6px);
}

.engagement-item i {
  transition: .25s ease;
}

.engagement-item:hover i {
  transform: scale(1.08);
}

.engagement-item .icon {
  color: var(--agi-rose);
}

/* ===========================
   HOME – DUO "JE FAIS / JE NE FAIS PAS"
   =========================== */
.agi-duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

.wp-block-uagb-container.agi-duo,
div[class*="uagb-block"].agi-duo {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 32px !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 900px) {
  .agi-duo,
  .wp-block-uagb-container.agi-duo,
  div[class*="uagb-block"].agi-duo {
    grid-template-columns: 1fr !important;
  }
}

.agi-duo .card {
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  padding: 32px 28px;
  background: #ffffff;
}

.agi-duo > .wp-block-uagb-container,
.agi-duo > div[class*="uagb-block"] {
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06) !important;
  padding: 32px 28px !important;
  width: 100% !important;
  max-width: 100% !important;
}

.agi-duo .card--yes,
.agi-duo > [class*="uagb-block"].card--yes {
  background: var(--agi-bg-rose) !important;
  border: 1px solid var(--agi-border-rose) !important;
}

.agi-duo .card--no,
.agi-duo > [class*="uagb-block"].card--no {
  background: var(--agi-bg-blue) !important;
  border: 1px solid var(--agi-border-blue) !important;
}

/* ===========================
   HOME – LIENS
   =========================== */
.agi a {
  color: var(--agi-green);
  text-decoration: none;
  transition: color .25s ease, text-decoration-color .25s ease;
}

.agi a:hover {
  color: var(--agi-rose);
  text-decoration: underline;
}

/* ===========================
   HOME – CONTAINERS & ESPACEMENTS
   =========================== */
.agi-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 24px 60px;
}

.wp-block-uagb-container.agi-section,
div[class*="uagb-block"].agi-section {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 80px 24px 60px !important;
}

@media (max-width: 767px) {
  .agi-section,
  .wp-block-uagb-container.agi-section,
  div[class*="uagb-block"].agi-section {
    padding: 56px 24px !important;
  }
}

.agi-stack {
  display: flex;
  flex-direction: column;
  gap: 56px;
}

.agi-spacing-top {
  padding-top: 80px !important;
}

.agi-spacing-top-small {
  padding-top: 40px !important;
}

.agi-spacing-bottom {
  padding-bottom: 80px !important;
}

.agi-spacing-bottom-small {
  padding-bottom: 40px !important;
}

.agi-spacing-full {
  padding: 80px 0 !important;
}

@media (max-width: 767px) {
  .agi-spacing-top,
  .agi-spacing-bottom,
  .agi-spacing-full {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
  
  .agi-spacing-top-small {
    padding-top: 28px !important;
  }
  
  .agi-spacing-bottom-small {
    padding-bottom: 28px !important;
  }
}

/************************************
 * BLOG / ARCHIVES - VERSION AMÉLIORÉE
 * Fix : Utilisation des variables + Spécificité Astra
 ************************************/

/* ===========================
   BLOG – CONTENEUR PRINCIPAL
   =========================== */
.blog .ast-container,
.archive .ast-container,
.blog main,
.archive main {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 80px 24px !important;
}

@media (max-width: 767px) {
  .blog .ast-container,
  .archive .ast-container,
  .blog main,
  .archive main {
    padding: 56px 24px !important;
  }
}

/* ===========================
   BLOG – EXCERPTS
   =========================== */
.blog .entry-summary,
.archive .entry-summary,
.blog .ast-excerpt-container,
.archive .ast-excerpt-container {
  color: var(--agi-text) !important;
  line-height: 1.6 !important;
  margin-bottom: 16px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* ===========================
   BLOG – CARTES
   =========================== */
.blog .post,
.archive .post,
.blog article,
.archive article,
.wp-block-post-template > li,
.ast-article-post {
  border-radius: 12px !important;
  overflow: hidden !important;
  margin-bottom: 32px !important;
  background: #fff !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
  transition: box-shadow .3s ease, transform .3s ease !important;
}

.blog .post:hover,
.archive .post:hover,
.blog article:hover,
.archive article:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
  transform: translateY(-2px) !important;
}

/* ===========================
   BLOG – TITRES
   =========================== */
.blog .entry-title,
.archive .entry-title,
.blog .entry-title a,
.archive .entry-title a,
.blog h2.entry-title a,
.archive h2.entry-title a {
  color: var(--agi-green) !important;
  font-weight: 600 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-decoration: none !important;
  transition: color .25s ease !important;
}

.blog .entry-title a:hover,
.archive .entry-title a:hover,
.blog h2.entry-title a:hover,
.archive h2.entry-title a:hover {
  color: var(--agi-rose) !important;
  text-decoration: underline !important;
}

/* ===========================
   SINGLE – BANNIÈRE TITRE
   =========================== */

/* Réduit le padding de la bannière titre sur mobile */
@media (max-width: 768px) {
  .single .entry-header {
    padding-top: 1.5em !important;
    padding-bottom: 1.5em !important;
  }
}

/* Titre d’article plus compact sur mobile */
@media (max-width: 768px) {
  .single .entry-title {
    font-size: 22px !important;
    line-height: 1.25 !important;
  }
}

/* === Single Article – Amélioration du H1 === */

.single .entry-title {
  font-size: 48px !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
  margin-bottom: 0.6em !important;
}

/* Version mobile */
@media (max-width: 768px) {
  .single .entry-title {
    font-size: 36px !important;
  }
}


/* ===========================
   BLOG – MÉTA (date / auteur)
   =========================== */
.blog .entry-meta,
.archive .entry-meta,
.blog .posted-on,
.archive .posted-on,
.blog .byline,
.archive .byline {
  color: var(--agi-grey) !important;
  font-size: 14.5px !important;
  margin-bottom: 12px !important;
}

.blog .entry-meta a,
.archive .entry-meta a {
  color: var(--agi-grey) !important;
  text-decoration: none !important;
}

.blog .entry-meta a:hover,
.archive .entry-meta a:hover {
  color: var(--agi-rose) !important;
}

/* ===========================
   BLOG – BOUTONS "LIRE LA SUITE"
   =========================== */

/* Bouton texte simple */
.blog a.read-more,
.archive a.read-more,
.blog .ast-read-more,
.archive .ast-read-more {
  color: var(--agi-green) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  transition: color .25s ease !important;
}

.blog a.read-more:hover,
.archive a.read-more:hover,
.blog .ast-read-more:hover,
.archive .ast-read-more:hover {
  color: var(--agi-rose) !important;
  text-decoration: underline !important;
}

/* Bouton plein */
.blog a.more-link,
.archive a.more-link,
.blog .read-more-link,
.archive .read-more-link {
  display: inline-block !important;
  padding: 10px 16px !important;
  border-radius: 12px !important;
  background: var(--agi-green) !important;
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  transition: background .25s ease, transform .2s ease !important;
}

.blog a.more-link:hover,
.archive a.more-link:hover,
.blog .read-more-link:hover,
.archive .read-more-link:hover {
  background: #07535b !important;
  transform: translateY(-1px) !important;
  color: #fff !important;
}

/* Bouton outline (si classe ajoutée) */
.blog a.read-more.btn-outline,
.archive a.read-more.btn-outline {
  display: inline-block !important;
  padding: 10px 16px !important;
  border: 2px solid var(--agi-rose) !important;
  border-radius: 12px !important;
  color: var(--agi-rose) !important;
  background: transparent !important;
}

.blog a.read-more.btn-outline:hover,
.archive a.read-more.btn-outline:hover {
  background: var(--agi-rose) !important;
  color: #fff !important;
}

/* ===========================
   BLOG – CATÉGORIES (pills)
   =========================== */
.blog .cat-links,
.archive .cat-links {
  margin-bottom: 12px !important;
}

.blog .cat-links a,
.archive .cat-links a {
  display: inline-block !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  border: 1px solid var(--agi-rose) !important;
  color: var(--agi-green) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  margin-right: 6px !important;
  margin-bottom: 6px !important;
  transition: background .2s ease !important;
}

.blog .cat-links a:hover,
.archive .cat-links a:hover {
  background: var(--agi-bg-rose) !important;
}

/* ===========================
   BLOG – IMAGES
   =========================== */
.blog .post img,
.archive .post img,
.blog article img,
.archive article img,
.blog .post-thumbnail img,
.archive .post-thumbnail img,
.wp-block-post-featured-image img {
  border-radius: 12px !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
  transition: transform .3s ease, box-shadow .3s ease !important;
  width: 100% !important;
  height: auto !important;
}

.blog .post img:hover,
.archive .post img:hover,
.blog article img:hover,
.archive article img:hover {
  transform: scale(0.98) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
}

/* ===========================
   BLOG – PAGINATION
   =========================== */
.blog .ast-pagination,
.archive .ast-pagination,
.blog .pagination,
.archive .pagination,
.blog .nav-links,
.archive .nav-links {
  margin-top: 48px !important;
  text-align: center !important;
}

.ast-pagination a,
.ast-pagination span,
.pagination a,
.pagination span,
.nav-links a,
.nav-links span {
  color: var(--agi-green) !important;
  padding: 8px 12px !important;
  border-radius: 10px !important;
  margin: 0 4px !important;
  text-decoration: none !important;
  transition: background-color .2s ease, color .2s ease !important;
  display: inline-block !important;
}

.ast-pagination a:hover,
.pagination a:hover,
.nav-links a:hover {
  background: var(--agi-rose) !important;
  color: #fff !important;
}

.ast-pagination .current,
.pagination .current,
.nav-links .current,
.ast-pagination span.current,
.pagination span.current {
  background: var(--agi-rose) !important;
  color: #fff !important;
}

/* Navigation article précédent/suivant */
.single-post .post-navigation,
.single-post .nav-links {
  margin: 48px 0 !important;
  padding: 24px 0 !important;
  border-top: 1px solid #FCEBF5 !important;
  border-bottom: 1px solid #FCEBF5 !important;
}

.single-post .post-navigation a,
.single-post .nav-links a {
  border-radius: 999px !important;
  padding: 8px 14px !important;
  border: 1px solid #FCEBF5 !important;
  text-decoration: none !important;
  color: var(--agi-green) !important;
  transition: background .2s ease, color .2s ease !important;
}

.single-post .post-navigation a:hover,
.single-post .nav-links a:hover {
  background: var(--agi-rose) !important;
  color: #fff !important;
  border-color: var(--agi-rose) !important;
}

/* ===========================
   BLOG – EN-TÊTE ARCHIVE
   =========================== */
.blog .ast-archive-description,
.archive .ast-archive-description {
  background: linear-gradient(180deg, #FFF6F8 0%, #FFFFFF 100%) !important;
  padding: 60px 24px 40px !important;
  text-align: center !important;
  border-bottom: 1px solid #FCEBF5 !important;
  margin-bottom: 48px !important;
  border-radius: 0 !important;
}

.blog .ast-archive-description .page-title,
.archive .ast-archive-description .page-title,
.blog .ast-archive-description h1,
.archive .ast-archive-description h1 {
  font-family: "Lexend", sans-serif !important;
  font-weight: 700 !important;
  color: var(--agi-green) !important;
  font-size: 42px !important;
  margin-bottom: 10px !important;
  line-height: 1.2 !important;
}

@media (max-width: 767px) {
  .blog .ast-archive-description .page-title,
  .archive .ast-archive-description .page-title,
  .blog .ast-archive-description h1,
  .archive .ast-archive-description h1 {
    font-size: 32px !important;
  }
}

.blog .ast-archive-description .taxonomy-description,
.archive .ast-archive-description .taxonomy-description,
.blog .ast-archive-description .archive-description,
.archive .ast-archive-description .archive-description {
  color: var(--agi-grey) !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 17px !important;
  max-width: 680px !important;
  margin: 0 auto !important;
  line-height: 1.6 !important;
}

/* ===========================
   BLOG – LAYOUT (grille ou liste)
   =========================== */

/* Si layout en grille */
.blog .ast-blog-layout-1,
.archive .ast-blog-layout-1,
.blog .ast-grid-common-col,
.archive .ast-grid-common-col {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
  gap: 32px !important;
}

@media (max-width: 767px) {
  .blog .ast-blog-layout-1,
  .archive .ast-blog-layout-1,
  .blog .ast-grid-common-col,
  .archive .ast-grid-common-col {
    grid-template-columns: 1fr !important;
  }
}

/* ===========================
   BLOG – SIDEBAR (si présente)
   =========================== */
.blog .ast-separate-container .ast-article-single,
.archive .ast-separate-container .ast-article-single {
  padding: 32px !important;
  border-radius: 12px !important;
  background: #fff !important;
}

.blog aside.widget,
.archive aside.widget,
.blog .widget,
.archive .widget {
  background: #fff !important;
  padding: 24px !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
  margin-bottom: 24px !important;
}

.blog .widget-title,
.archive .widget-title {
  color: var(--agi-green) !important;
  font-weight: 600 !important;
  margin-bottom: 16px !important;
  padding-bottom: 12px !important;
  border-bottom: 2px solid var(--agi-rose) !important;
}