/*
 Theme Name:   Kadence Child
 Theme URI:    https://www.lune2miel.mg/
 Description:  Thème enfant pour Kadence
 Author:       Alexa
 Author URI:   https://www.lune2miel.mg/
 Template:     kadence
 Version:      1.0.0
 */
 
 .page-provider {
    display: flex;
    flex-direction: row;
}

.contenu-principal {
    flex: 1;
}

.main-navigation i.fa-solid {
  color: var(--global-palette4); 
}

/*.colonne-droite {
    width: 300px;
    margin-left: 20px;
}*/

/* Mobile 
@media (max-width: 768px) {
    .page-provider {
        flex-direction: column;
    }

    .colonne-droite {
        width: 100%;
        margin: 20px 0 0 0;
        order: 2;
    }

    .contenu-principal {
        order: 1;
    }
}
*/

/* ==== DESIGN ARTICLE LUNE2MIEL ==== */

.lune2miel-article {
  background-color: #faf7ff;
  /*padding: 3rem 1rem;*/
}

.lune2miel-container {
  
  margin: 0 auto;
  
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.05);
  line-height: 1.8;
  display: block;
  /*align-items: flex-start;
  flex-direction: row-reverse;*/
}

/* Image mise en avant */
.lune2miel-featured-image img {
  width: 100%;
  height: 460px;
  margin-bottom: 10px;
  object-fit: cover; 
}

#lune2miel-main-content {
   max-width: calc(100% - 345px);
   margin: 0 2rem;
   background: #fff;
   padding: 2rem;
   border-radius: 20px;
}
  
  /* Responsive */
@media (max-width: 900px) {
  #lune2miel-main-content {
    max-width: calc(100%);
    margin: 0;
    padding: 1rem ;
  }
}
  
/* Titre principal */
.lune2miel-title {
  color: #6f3cff;
  text-align: center;
  font-weight: 700;
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

/* Métadonnées (date, auteur, catégorie) */
.lune2miel-meta {
  text-align: center;
  color: #888;
  font-size: 0.9rem;
  margin-bottom: 2rem;
}

.lune2miel-meta .meta-separator {
  margin: 0 0.4rem;
  color: #bbb;
}

/* Contenu */
.lune2miel-content p {
  margin-bottom: 1.4rem;
  text-align: justify;
  text-justify: inter-word;
  /*max-width: 1290px;*/
  text-indent: 50px;
}

.lune2miel-content h2, 
.lune2miel-content h3 {
  color: #5e35b1;
  margin-top: 2.2rem;
  margin-bottom: 1rem;
  font-weight: 600;
}

.lune2miel-content img {
  border-radius: 12px;
  margin: 1.5rem 0;
}

/* Boutons & liens */
.lune2miel-content a,
.lune2miel-share a {
  color: #6f3cff;
  text-decoration: none;
  font-weight: 500;
}

.lune2miel-content a:hover,
.lune2miel-share a:hover {
  text-decoration: underline;
}

/* Bloc de partage */
.lune2miel-share {
  margin-top: 2.5rem;
  text-align: center;
  background: #f6f2ff;
  border-radius: 16px;
  padding: 1rem;
}

.lune2miel-share p {
  margin-bottom: 0.6rem;
  font-weight: 600;
  color: #5a2faf;
}

/* Responsive */
@media (max-width: 768px) {
  .lune2miel-container {
    padding: 0.5rem;
  }
  .lune2miel-title {
    font-size: 1.6rem;
  }
}

.wp-block-quote {
  border-left: none; 
  margin: 1em 0; 
  padding: 0; 
  font-style: italic; 
  font-size: 1.1em; 
  padding : 0 2rem;
  
}

.wp-block-quote p{
    text-indent: 0px;
}


/* ========================= */
/* --- Page principale blogs --- */
/* ========================= */

/* 🎨 Lune2Miel Blog Page */
.l2m-blog-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  max-width: calc(100% - 345px);
  margin: 0 auto;
  padding: 2rem 1rem;
  gap: 2rem;
}

/* 📰 Colonne principale */
.l2m-blog-content {
  flex: 1;
  min-width: 0;
}

.l2m-blog-content .page-title {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 2rem;
}

.page-title {
    color: var(--global-palette4);
}

/*.meta-separator,
.meta-author,
.meta-category {display: none;}*/

/* 🧩 Grille des articles */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.blog-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.blog-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
}

.blog-thumb img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

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

.blog-title a {
  font-size: 1.2rem;
  color: var(--global-palette4);
  text-decoration: none;
  font-weight: 600;
  
}

.blog-title a:hover {
  color: #8c61ff; /* 💜 Violet lune2miel */
}

h2.blog-title  {
    line-height: 1.1;
    text-align: center;
    color: #6f3cff !important;
}

.blog-excerpt {
  color: #666;
  margin: 0.8rem 0;
}

.blog-readmore {
  color: #8c61ff;
  font-weight: 600;
  text-decoration: none;
}

/* 📢 Colonne publicitaire */
.l2m-blog-sidebar {
  width: 300px;
  flex-shrink: 0;
  position: relative;
}

.l2m-blog-sidebar .ads-desktop {
  position: sticky;
  top: 100px;
}

/* 📱 Responsive : cacher la colonne pub sur mobile */
@media (max-width: 900px) {
  .l2m-container {
    flex-direction: column;
  }
  .l2m-blog-sidebar {
    display: none;
  }
}





/* ========================= */
/* --- Colonne de droite --- */
/* ========================= */

.colonne-droite {
  min-height: 200px;
  margin-left: 10px !important;
  padding: 10px;
  box-sizing: border-box;
}

.colonne-droite a {
  display: block;
  margin-bottom: 15px;
}

.colonne-droite img.banner-image {
  width: 100%;
  height: auto;
  border-radius: 10px;
  object-fit: contain;
}

/* ========================= */
/* --- Pubs desktop --- */
/* ========================= */

.ads-desktop {
  display: block;
  float: right;
  clear: right;
  width: 300px;
  
  margin-right: 10px;
}

.ads-desktop .colonne-droite {
  float: none;
  margin: 0;
  display: block; /* empile verticalement */
}

/* ========================= */
/* --- Pubs mobile (bloc bas) --- */
/* ========================= */

.ads-mobile {
  display: none;
  text-align: center;
  margin: 20px auto;
}

.ads-mobile .colonne-droite {
  display: inline-block;
  width: auto;
  /*max-width: 280px;*/
  background: transparent;
}

.ads-mobile .colonne-droite a {
  display: inline-block;
  margin: 10px;
}

.ads-mobile .colonne-droite img.banner-image {
  width: 100%;
  max-width: 280px;
  height: auto;
  border-radius: 10px;
  object-fit: contain;
}



/* ========================= */
/* --- Responsive rules --- */
/* ========================= */

/* Petit écran : cache la colonne droite, affiche le bloc bas */
@media (max-width: 900px) {
  .ads-desktop { display: none; }
  .ads-mobile { display: block; }
}

/* ========================= */
/* --- HOME --- */
/* ========================= */

/* Sur la home, le bloc principal (ads-desktop) devient horizontal et centré */
.home .ads-home {
  display: block !important;
  float: none;
  width: 100%;
  max-width: 1000px;
  margin: 20px auto;
  text-align: center;
}

.home .ads-home .colonne-droite {
  display: grid;                       /* GRID pour gestion fluide */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 4 colonnes max */
  gap: 15px;
  justify-items: center;
  background: transparent;
  margin: 0 auto;
}

.home .ads-home .colonne-droite img.banner-image {
  width: 100%;
  max-width: 280px;
  height: auto;
  border-radius: 10px;
  object-fit: contain;
}

@media (max-width: 1200px) {
  .home .ads-home .colonne-droite {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .home .ads-home .colonne-droite {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .home .ads-home .colonne-droite {
    grid-template-columns: 1fr;
  }
}

/* ========================= */
/* --- NON-HOME --- */
/* ========================= */

/* Grand écran : colonne droite active, bloc bas caché */
@media (min-width: 901px) {
  body:not(.home) .ads-desktop {
    display: block;
    float: right;
    clear: right;
    width: 300px;
    
  }
  body:not(.home) .ads-mobile { display: none; }
}

/* Petit écran : bloc bas affiché, colonne cachée */
@media (max-width: 900px) {
  body:not(.home) .ads-desktop { display: none; }
  body:not(.home) .ads-mobile {
    display: block;
    text-align: center;
    margin: 20px auto;
  }
  body:not(.home) .ads-mobile .colonne-droite {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    justify-items: center;
  }
  @media (max-width: 520px) {
    body:not(.home) .ads-mobile .colonne-droite {
      grid-template-columns: 1fr;
    }
  }
}


/* Fin ads */

.provider-grid {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: auto;
  
  margin: 20px 1rem;
  
}

/* Carte principale */
.provider-card {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  
  background: #fff;
  border-radius: 14px;
  border: 1px solid #e9d8f5;
  box-shadow: 0 3px 8px rgba(80, 0, 120, 0.08);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  
}

.provider-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 18px rgba(90, 50, 130, 0.18);
}

/* Colonne texte */
.provider-info {
  flex: 1;
  padding: 1.4rem 1.6rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

/* Nom */
.provider-name {
  font-size: 1.25rem;
  font-weight: 600;
  color: #4a2a70;
  margin: 0 0 0.5rem 0;
}

/* Tagline */
.provider-tagline {
  color: #6b5b85;
  font-size: 0.95rem;
  line-height: 1.45;
  margin-bottom: 1rem;
}

/* Lien */
.provider-link {
  color: #8e3ed0;
  font-weight: 500;
  text-decoration: none;
  margin-top: auto;
  align-self: flex-start;
  border: 1px solid #cba3ff;
  border-radius: 20px;
  padding: 5px 14px;
  transition: all 0.25s ease;
  background: #f8f3ff;
}

.provider-link:hover {
  background: #8e3ed0;
  color: #fff;
  border-color: #8e3ed0;
}

/* Colonne image */
.provider-thumb {
  width: 35%;
  min-width: 220px;
  max-width: 280px;
  overflow: hidden;
  position: relative;
}

.provider-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.provider-card:hover .provider-thumb img {
  transform: none;
  filter: brightness(1.05);
}

/* ====== Petits détails bonus ====== */
.provider-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(74, 42, 112, 0.15), transparent);
  pointer-events: none;
}

/* Sur mobile : empiler les cartes */
@media (max-width: 500px) {
  .provider-card {
    flex-direction: column-reverse;
    text-align: center;
  }
  .provider-thumb {
    width: 100%;
    border-radius: 10px;
    height: 180px;
    margin: 0 auto;
  }
  .provider-info {
    padding: 1rem;
  }
  .provider-link {
    align-self: center;
  }
}



/* Message vide */
.no-results {
  text-align: center;
  font-style: italic;
  color: #7a6a94;
  padding: 1rem 0;
}




/* =========================================================
 🟣 STYLE PRINCIPAL — LUNE2MIEL : LISTE & FILTRES PRESTATAIRES
========================================================= */

/* === Disposition globale === */
.prestataires-app {
  max-width: calc(100% - 295px);
  background: none;
}

.prestataires-header {
  background-color: #ECE2F9;
  margin: 10px 1rem;
  padding: 1rem;
  border-radius: 10px;
}

.categorie-select {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 500px;
}

.categorie-select select {
  margin: 10px 10px 0px 10px;
  width: auto;
}

.categorie-hint {
  font-size: 0.7rem;
  color: #6b5b85;
  font-style: italic;
  margin: 0px;
  text-indent: 20px;
}



/* =========================================================
 🎛️ PANNEAU DES FILTRES
========================================================= */

/* --- Version latérale par défaut (desktop) --- */
.filter-panel {
  float: left;
  clear: left;
  width: 240px;
  margin: 10px 1rem;
  padding: 1rem;
  border-radius: 10px;
  background-color: #fde0f9;
}

.filter-panel::after {
  content: "";
  display: block;
  clear: both;
}

/* Label + éléments */
.info-label {
  color: #666;
  font-style: italic;
  font-weight: 400;
  min-width: 120px;
  font-size: 0.8rem;
  word-wrap: break-word;
}

.filter-item {
  margin: 7px 0;
  box-sizing: border-box;
}

.filter-item select,
.filter-item input {
  width: 210px;
}

.zone option {
  font-size: 0.75rem;
}

/* =========================================================
 📱 RESPONSIVE DESIGN DU PANNEAU
========================================================= */

/* --- Pleine largeur dès 1200px --- */
@media (max-width: 1200px) {
  .filter-panel {
    float: none;
    width: 100%;
    max-width: calc(100% - 33px);
    background-color: #fde0f9;
    padding: 1rem;
    overflow: hidden; /* force le conteneur à entourer les floats */
  }

  /* Grille fluide via float:left */
  .filter-item {
    float: left;
    width: calc(33.333% - 1rem); /* 3 colonnes */
    margin: 0 0.5rem 1rem 0.5rem;
  }

  .filter-item select,
  .filter-item input {
    width: 100%;
  }

  /* === 2 colonnes dès 900px === */
  @media (max-width: 900px) {
    .filter-item {
      width: calc(50% - 1rem);
    }
    
    .prestataires-app {
      max-width: 100%;
      background: none;
    }
  }

  /* === 1 colonne sur mobile === */
  @media (max-width: 600px) {
    .filter-item {
      width: 100%;
      margin: 0 0 1rem 0;
    }
  }

  /* === Cas spéciaux === */
  .filter-item.wide {
    width: 100% !important; /* pour les champs très hauts, ex: multiselect */
  }
}