/* ========= Article — Crearocailles ========= */

:root{
  --bg-article: #121212;
  --text: #EDEDED;
  --muted: #B8B8B8;
  --gold: #D4AF37;
  --gold-2: #E5C766;
  --edge: rgba(255,255,255,.08);
}

.single-post .entry-content,
.single-post article {
  --maxw: 970px;
  --padX: clamp(18px, 3vw, 32px);
  --padY: clamp(28px, 4vw, 48px);

  color: var(--text);
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(212,175,55,.08), transparent 60%),
    radial-gradient(900px 500px at -10% 20%, rgba(255,255,255,.04), transparent 50%),
    var(--bg-article);
  border: 1px solid var(--edge);
  border-radius: 20px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.04) inset,
    0 20px 60px rgba(0,0,0,.45);
  margin: 4rem auto;
  padding: var(--padY) var(--padX);
  max-width: var(--maxw);
  line-height: 1.85;
  font-size: 1.08rem;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* --------- Titres --------- */
.single-post .entry-content h1,
.single-post article h1{
  font-family: "Playfair Display", ui-serif, Georgia, serif;
  font-weight: 600;
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: .3px;
  line-height: 1.2;
  margin: 0 0 1.2rem;
  background: linear-gradient(90deg, var(--gold), var(--gold-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-align: center;
}

.single-post .entry-content h2,
.single-post article h2{
  font-family: "Playfair Display", ui-serif, Georgia, serif;
  font-weight: 600;
  font-size: clamp(1.45rem, 2.5vw, 2rem);
  margin: 2.2rem 0 .8rem;
  color: #fff;
  position: relative;
  padding-bottom: .6rem;
}
.single-post .entry-content h2::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width: 120px;
  height: 2px;
  background: linear-gradient(90deg, var(--gold-2), transparent 70%);
  border-radius: 2px;
}

.single-post .entry-content h3,
.single-post article h3{
  font-weight: 600;
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  margin: 1.6rem 0 .6rem;
  color: #FFF;
}

/* --------- Paragraphes & lettrine --------- */
.single-post .entry-content p{
  margin: 0 0 1.05rem;
  color: var(--text);
}
.single-post .entry-content > p:first-of-type{
  font-size: 1.12rem;
  color: #FAFAFA;
}
.single-post .entry-content > p:first-of-type::first-letter{
  float: left;
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 600;
  font-size: 3.1rem;
  line-height: .9;
  margin-right: .4rem;
  padding: .2rem .35rem .15rem .2rem;
  color: #0A0A0A;
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(212,175,55,.25);
}

/* --------- Listes – puces “perles” --------- */
.single-post .entry-content ul{
  list-style: none;
  margin: .4rem 0 1.2rem 0;
  padding: 0;
}
.single-post .entry-content li{
  position: relative;
  padding-left: 1.6rem;
  margin: .55rem 0;
}
.single-post .entry-content li::before{
  content:"";
  position:absolute; left:0; top:.55rem;
  width: .55rem; height: .55rem;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, #fff, #fff0 55%),
    radial-gradient(circle at 60% 70%, rgba(212,175,55,.85), rgba(212,175,55,.25));
  box-shadow: 0 0 0 1px rgba(212,175,55,.35);
}

/* --------- Citations --------- */
.single-post .entry-content blockquote{
  margin: 1.6rem 0;
  padding: 1.1rem 1.2rem 1.1rem 1.4rem;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border-left: 3px solid var(--gold);
  color: #F0E7C2;
  font-style: italic;
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

/* --------- Séparateur fin --------- */
.single-post .entry-content hr{
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  margin: 2rem 0;
}

/* --------- Images --------- */
.single-post .entry-content figure,
.single-post .entry-content img{
  display: block;
  max-width: 100%;
  margin: 1.8rem auto;
  border-radius: 16px;
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
}
.single-post .entry-content figcaption{
  text-align: center;
  font-size: .95rem;
  color: var(--muted);
  margin-top: .5rem;
}

/* --------- Liens --------- */
.single-post .entry-content a{
  color: var(--gold-2);
  text-underline-offset: 2px;
}
.single-post .entry-content a:hover{
  color: #fff;
  text-decoration: none;
  box-shadow: 0 1px 0 var(--gold-2);
}

/* --------- Encadré “astuce” --------- */
.single-post .entry-content .tip,
.single-post .entry-content .note{
  border: 1px solid var(--edge);
  border-left: 3px solid var(--gold);
  background: rgba(255,255,255,.03);
  padding: 1rem 1.1rem;
  border-radius: 12px;
  margin: 1.4rem 0;
  color: #F8F6E8;
}

/* --------- Meta / petits textes --------- */
.single-post .entry-content small,
.single-post .entry-content .meta{
  color: var(--muted);
  font-size: .92rem;
}

/* --------- Responsive resserré --------- */
@media (max-width: 640px){
  .single-post .entry-content,
  .single-post article{
    margin: 2rem var(--padX);
    padding: clamp(20px, 6vw, 28px);
    border-radius: 16px;
  }
  .single-post .entry-content h1{ font-size: clamp(1.8rem, 8vw, 2.4rem); }
}


/* ===== Galerie/Images — 2 colonnes, visibilité renforcée ===== */

/* Gutenberg : forcer la galerie en 2 colonnes */
.single-post .entry-content .wp-block-gallery{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px;
  margin: 1.2rem 0 1.8rem;
}

/* Compat Gutenberg (images imbriquées) */
.single-post .entry-content .wp-block-gallery.has-nested-images > figure{
  margin:0;
}

/* Images/cadres */
.single-post .entry-content .wp-block-gallery figure,
.single-post .entry-content .wp-block-image{
  border-radius:16px;
  overflow:hidden;
  background: #0f0f0f;
  outline: 1px solid rgba(212,175,55,.18);   /* liseré or satiné */
  box-shadow: 0 16px 42px rgba(0,0,0,.35);
}

/* Visibilité : image bien rognée, grande, sur toute la cellule */
.single-post .entry-content .wp-block-gallery img,
.single-post .entry-content .wp-block-image img{
  width:100%;
  height:100%;
  display:block;
  object-fit: cover;      /* image “remplie” */
 aspect-ratio: 4/3;     /* ratio confortable ; enlève si tu veux libre */
  transition: transform .35s ease, filter .35s ease;
}

/* Hover subtil */
.single-post .entry-content .wp-block-gallery figure:hover img,
.single-post .entry-content .wp-block-image:hover img{
  transform: scale(1.02);
  filter: saturate(1.05);
}

/* Légendes */
.single-post .entry-content .wp-element-caption{
  text-align:center;
  color:#B8B8B8;
  font-size:.95rem;
  padding:.55rem .6rem .7rem;
}

/* Ta grille perso : 2 colonnes aussi */
.single-post .entry-content .media-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 1.2rem 0 1.8rem;
}
.single-post .entry-content .media-grid img{
  width:100%; height:100%; object-fit:cover;
  border-radius:16px; display:block;
  /*aspect-ratio: 4/3; */
  outline: 1px solid rgba(212,175,55,.18);
  box-shadow: 0 16px 42px rgba(0,0,0,.35);
  transition: transform .35s ease, filter .35s ease;
}
.single-post .entry-content .media-grid img:hover{
  transform: scale(1.02);
  filter: saturate(1.05);
}

/* Responsive : 1 colonne sur mobile */
@media (max-width: 700px){
  .single-post .entry-content .wp-block-gallery,
  .single-post .entry-content .media-grid{
    grid-template-columns: 1fr !important;
  }
}

/* ===== Featured image (single post) - cadre luxe ===== */
.single-post .post-thumbnail,
.single-post .entry-header .post-thumbnail,
.single-post .featured-media {
  max-width: 1100px;       /* largeur contenue */
  margin: 1rem auto 2rem;  /* centrée */
  border-radius: 18px;
  background: #0f0f0f;
  outline: 1px solid rgba(212,175,55,.18); /* liseré or satiné */
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  overflow: hidden;        /* arrondi appliqué à l’image */
}

.single-post .post-thumbnail img,
.single-post .entry-header .post-thumbnail img,
.single-post .featured-media img,
.single-post .wp-post-image {
  display: block;
  width: 100%;
  height: auto;            /* pas d’étirement */
  object-fit: cover;       /* coupe propre si un thème force une hauteur */
  transform: translateZ(0); /* lissage */
  border-radius: 25px;
}

/* Variante si ton thème force une hauteur (désactive la hauteur fixe) */
.single-post .post-thumbnail img[style*="height"] {
  height: auto !important;
}

/* Titre au-dessus, bien espacé */
.single-post .entry-title {
  max-width: 1100px;
  margin: 0 auto 1rem;
}

/* Single post hero (featured image) */
.single .post-thumbnail,
.single .post-thumbnail a,          /* cover both WP core wrappers */
.single .entry-header .post-thumbnail {
  display:block;
  width:100%;
  max-width: 980px;                 /* align with your content width */
  margin: 0 auto 16px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* constrain height + crop nicely */
.single .post-thumbnail img {
  width: 100%;
  height: clamp(220px, 36vh, 420px); /* min → fluid → max height */
  object-fit: cover;
  object-position: center;          /* adjust framing if needed */
  display:block;
}

/* optional: smaller on narrow screens */
@media (max-width: 640px){
  .single .post-thumbnail img{
    height: clamp(180px, 32vh, 320px);
  }
}

.single .post-thumbnail {
  max-width: 980px;
  margin: 0 auto 16px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}