:root{
  --bg:#D0F5FE;
  --ink:#0B1F2A;
  --muted:#3c5a6b;
  --brand:#0aa2c0;
}

html,body{
  height:100%;
}
body{
  margin:0;
  font-family: Arial, sans-serif;
  color:var(--ink);
  background:var(--bg);
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

.blog-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px 20px;
  position:sticky;
  top:0;
  background:linear-gradient(to bottom, rgba(208,245,254,.95), rgba(208,245,254,.85));
  backdrop-filter:saturate(140%) blur(6px);
  border-bottom:1px solid rgba(11,31,42,.08);
  z-index:10;
}
.brand{
  font-weight:700;
  letter-spacing:.3px;
}
.back-link{
  text-decoration:none;
  color:var(--brand);
  font-weight:600;
}
.back-link:focus-visible{outline:2px solid var(--brand); outline-offset:2px; border-radius:6px;}

.blog-main{
  width:100%;
  max-width:960px;
  margin:24px auto;
  padding:0 16px 40px;
  flex:1 1 auto;
}

/* hero removed; images appear inline and in a grid at the end */

.post-title{ font-size: clamp(28px, 4vw, 40px); line-height:1.2; margin:18px 0 6px; }
.post-meta{ color:var(--muted); font-size:14px; margin-bottom:16px; }

.post-content{ font-size:18px; line-height:1.7; text-align: justify; text-justify: inter-word; }
.post-content p{ margin: 1em 0; }
.post-content img{
  width: auto;
  max-width: min(100%, 720px); /* smaller than container, cap at 720px */
  height: auto;
  border-radius:12px;
  display:block;
  margin:16px auto;
}
.post-content h2{ font-size: 24px; margin: 1.2em 0 .5em; }
.post-content h3{ font-size: 20px; margin: 1em 0 .5em; }

/* responsive image grid */
.post-image-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap:12px;
  margin-top: 20px;
}
.post-image-grid figure{ margin:0; }
.post-image-grid img{
  width:100%;
  height:auto;             /* keep natural aspect ratio */
  object-fit:contain;      /* avoid cropping */
  border-radius:12px;
  display:block;
}

.blog-footer{
  padding:16px 20px; color:var(--muted); font-size:14px; border-top:1px solid rgba(11,31,42,.08);
}

/* social icons in blog footer */
.blog-footer .social-links{ display:inline-flex; gap:12px; margin-left:12px; vertical-align:middle; }
.blog-footer .social-links a{ 
  width: clamp(20px, 3.2vw, 28px); 
  height: clamp(20px, 3.2vw, 28px); 
  aspect-ratio: 1 / 1; 
  display:inline-flex; 
  align-items:center; 
  justify-content:center; 
  color:inherit; 
  border-radius:50%; 
  transition: transform .18s ease, background-color .25s ease; 
}
.blog-footer .social-links svg{ width:100%; height:100%; fill: currentColor; opacity:.9; }
.blog-footer .social-links a:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; }
.blog-footer .social-links a:hover svg{ opacity:1; transform: translateY(-1px); transition: transform .15s ease, opacity .15s ease; }

@media (max-width: 640px){
  .blog-main{ margin:16px auto; }
  .post-content{ font-size:17px; }
}

/* Remove blue focus outline/highlight on blog page */
.blog-main{ -webkit-tap-highlight-color: transparent; }
.blog-main:focus { outline: none; box-shadow: none; }
.blog-main :focus { outline: none; box-shadow: none; }
.blog-main :focus-visible { outline: 2px solid #0066cc; outline-offset: 2px; }
.blog-main img, .blog-main a img{ border: 0; }

/* Reduce height of the two inline images (direct children), keep aspect ratio */
.post-content > img:nth-of-type(-n+2){
  /* augmente la hauteur ici */
  max-height: clamp(200px, 65vh, 720px);
}