/* 1) Neutraliser le centrage et les traits, quoi qu'il arrive */
#prestablogfront,
#prestablogfront .post,
#prestablogfront .post-content,
#prestablogauthor { text-align: left !important; }

#prestablogfront h1, #prestablogfront h2, #prestablogfront h3,
#prestablogfront h4, #prestablogfront h5, #prestablogfront h6,
#prestablogauthor h1, #prestablogauthor h2,
#prestablogauthor .prestablogtitle {
  text-align: left !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Certaines versions dessinent des “traits” via pseudo-éléments */
#prestablogfront h1::before, #prestablogfront h1::after,
#prestablogfront h2::before, #prestablogfront h2::after,
#prestablogfront .prestablogtitle::before, #prestablogfront .prestablogtitle::after {
  content: none !important; display: none !important;
}

/* 2) Rétablir une hiérarchie propre et un rythme vertical */
#prestablogfront h1 { font-size: clamp(28px, 3vw, 36px); line-height: 1.2; margin: 0 0 .6em !important; }
#prestablogfront h2 { font-size: clamp(22px, 2.4vw, 28px); line-height: 1.25; margin: 1.2em 0 .5em !important; }
#prestablogfront h3 { font-size: clamp(18px, 2vw, 22px); line-height: 1.3;  margin: 1em 0 .4em !important; }
#prestablogfront p  { margin: .8em 0 1em; hyphens: auto; }
#prestablogfront .post-content { max-width: 72ch; }

/* 3) Listes, citations, images, tableaux */
#prestablogfront ul, #prestablogfront ol { padding-left: 1.2em; margin: .6em 0 1em; }
#prestablogfront blockquote {
  margin: 1.2em 0; padding: .8em 1em; border-left: 3px solid var(--color-primary, #ec6201);
  background: rgba(0,0,0,.03);
}
#prestablogfront figure { margin: 1.2em 0; }
#prestablogfront img { max-width: 100%; height: auto; display: block; margin: .6em auto; }
#prestablogfront figcaption { font-size: .9em; opacity: .8; text-align: center; }

#prestablogfront table { width: 100%; border-collapse: collapse; margin: 1em 0; }
#prestablogfront th, #prestablogfront td { border: 1px solid #e5e7eb; padding: .6em .7em; text-align: left; }
#prestablogfront thead th { background: #f6f7f9; }

/* 4) Cas fourbe : centrage appliqué par le thème sur .title_block/.blog-title/.post-title */
#prestablogfront .title_block,
#prestablogfront .blog-title,
#prestablogfront .post-title { text-align: left !important; border: 0 !important; }

/* 5) Responsive confortable */
@media (max-width: 576px) {
  #prestablogfront .post-content { padding-left: 12px; padding-right: 12px; }
  #prestablogfront h1 { font-size: 24px; }
  #prestablogfront h2 { font-size: 20px; }
}

/* 6) Micro-fixes fréquents */
#prestablogfront h1 a, #prestablogfront h2 a { color: inherit; text-decoration: none; }
#prestablogfront .breadcrumb, #prestablogfront .page-heading { text-align: left !important; }

body#module-prestablog-blog #prestablogfront h2 { text-align:left !important; border:0 !important; }

:target { scroll-margin-top: 96px; }

/* Grille responsive pour images côte à côte */
#prestablogfront .img-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  align-items: start;
}

/* Nettoyage des wrappers injectés par l’éditeur */
#prestablogfront .img-row > p { margin: 0; }
#prestablogfront .img-row img { display: block; width: 100%; height: auto; }

/* Légendes */
#prestablogfront .img-row figure { margin: 0; }
#prestablogfront .img-row figcaption { font-size: .9rem; opacity: .8; text-align: center; margin-top: 6px; }

/* Variante 50/50 strict */
#prestablogfront .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 680px) { #prestablogfront .two-col { grid-template-columns: 1fr; } }

/* Images dans un <p> => remets-les en ligne */
#module-prestablog-blog #prestablogfront .post-content p img{
  display:inline-block !important;
  vertical-align:middle;
  margin:0 8px 12px 0;
}

/* Si un <p> contient au moins deux images, aligne en grille flex */
#module-prestablog-blog #prestablogfront .post-content p:has(> img + img){
  display:flex !important;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
}
#module-prestablog-blog #prestablogfront .post-content p:has(> img + img) img{
  display:block; /* propre avec flex */
  margin:0;
  height:auto;
  max-width:100%;
}

/* 1) Neutralise la règle qui centre et empile les images */
body#module-prestablog-blog #prestablogfront .post-content img{
  display:inline-block !important;
  vertical-align:middle !important;
  margin:0 8px 12px 0 !important; /* plus d'auto */
}

/* 2) Quand un <p> contient plusieurs <img>, force un layout propre */
body#module-prestablog-blog #prestablogfront .post-content p:has(> img + img){
  display:flex !important;
  flex-wrap:wrap;
  gap:12px;
  align-items:flex-start;
}
body#module-prestablog-blog #prestablogfront .post-content p:has(> img + img) br{ display:none; } /* si l’éditeur a inséré des <br> */

/* 1) Neutralise le centrage/empilement global des images */
body#module-prestablog-blog #prestablogfront .post-content img{
  max-width:100%;
  height:auto;
  display:inline-block !important;
  vertical-align:middle;
  margin:0 8px 12px 0 !important; /* pas de margin:auto */
}

/* 2) Si un paragraphe contient ≥2 images, aligne-les côte à côte */
body#module-prestablog-blog #prestablogfront .post-content p:has(img:nth-of-type(2)){
  display:flex !important;
  flex-wrap:wrap;
  gap:12px;
  align-items:flex-start;
  margin:0 0 12px 0;
}

/* 3) Styles des images à l’intérieur du paragraphe multi-images */
body#module-prestablog-blog #prestablogfront .post-content p:has(img:nth-of-type(2)) img{
  display:block !important; /* propre en flex */
  margin:0;
}

/* 4) Nettoie les <br> intercalés par l’éditeur */
body#module-prestablog-blog #prestablogfront .post-content p:has(img:nth-of-type(2)) br{
  display:none;
}
/* Images non cliquables par défaut */
#prestablogfront .post-content img{
  pointer-events: none;
  cursor: default;
}

/* Sauf si l'image est dans un lien */
#prestablogfront .post-content a img{
  pointer-events: auto;
  cursor: pointer;
}

<script>
document.addEventListener('click', function(e){
  const img = e.target.closest('#prestablogfront .post-content img');
  if (img && !img.closest('a')) e.preventDefault();
});
</script>

/* Patch temporaire PrestaBlog */

/* 0) S'assurer que rien ne centre/empile les images */
body#module-prestablog-blog #prestablogfront .post-content img{
  max-width:100%;
  height:auto;
  display:inline-block !important;
  vertical-align:middle;
  margin:0 8px 12px 0 !important; /* plus de margin:auto */
  float:none !important;
  clear:none !important;
}

/* 1) Met TOUS les paragraphes du contenu en flex.
   Résultat: les images placées dans le même <p> passent côte à côte. */
body#module-prestablog-blog #prestablogfront .post-content p{
  display:flex !important;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:12px;
}

/* 2) Nettoyage des <br> qui cassent l’alignement */
body#module-prestablog-blog #prestablogfront .post-content p br{ display:none; }

/* 3) Désactiver la lightbox sur images non liées (clic inutile) */
body#module-prestablog-blog #prestablogfront .post-content img{ pointer-events:none; }
body#module-prestablog-blog #prestablogfront .post-content a img{ pointer-events:auto; cursor:pointer; }
