/* ==========================================================================
   APIMASANTÉ — Thème Joornal
   Nature / organique — miel & bois — Fraunces + Karla
   CSS pur (Grid + Flexbox), sans framework
   ========================================================================== */

:root{
  --honey: #E0A100;
  --honey-light: #F4B942;
  --wood: #5C3A21;
  --wood-dark: #3E2814;
  --ink: #2B1D10;
  --wax: #FFF8EC;
  --wax-deep: #FBEDD0;
  --white: #FFFFFF;
  --line: rgba(92,58,33,0.18);

  --font-display: "Fraunces", serif;
  --font-body: "Karla", sans-serif;

  --radius-blob: 60% 40% 30% 70% / 60% 30% 70% 40%;
  --shadow-soft: 0 18px 40px -16px rgba(43,29,16,0.25);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--wax);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}

h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--wood-dark);
  line-height:1.12;
  margin:0 0 .5em;
  font-weight:600;
}

.container{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
}
.container--narrow{max-width:740px;}

.section-title{
  font-size:1.9rem;
  font-style:italic;
  letter-spacing:.01em;
  border-bottom:3px solid var(--honey-light);
  display:inline-block;
  padding-bottom:.25em;
  margin-bottom:1.6em;
}

/* ==========================================================================
   HEADER / NAV
   ========================================================================== */
.site-header{
  background:var(--wood-dark);
  border-bottom:4px solid var(--honey);
  position:sticky;
  top:0;
  z-index:50;
}
.nav-wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:18px 24px;
  min-height:96px;
}
.logo-link{display:inline-flex;align-items:center;flex-shrink:0;}
.logo-link img{height:72px;width:auto;}

.nav-toggle-checkbox{display:none;}
.nav-toggle-label{
  display:none;
  flex-direction:column;
  gap:6px;
  cursor:pointer;
  padding:8px;
}
.nav-toggle-label span{
  width:28px;height:3px;background:var(--honey-light);border-radius:2px;
}

.main-nav{}
.menu-list{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.menu-item{}
.menu-link{
  display:inline-block;
  padding:10px 16px;
  font-family:var(--font-body);
  font-weight:700;
  font-size:.95rem;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--wax);
  border-radius:999px;
  transition:background .2s ease,color .2s ease;
}
.menu-link:hover{
  background:var(--honey);
  color:var(--wood-dark);
}

@media (max-width:720px){
  .nav-toggle-label{display:flex;}
  .main-nav{
    display:none;
    width:100%;
    order:3;
  }
  .nav-toggle-checkbox:checked ~ .main-nav{display:block;}
  .menu-list{flex-direction:column;gap:4px;padding:12px 0;}
  .menu-link{width:100%;}
  .nav-wrap{min-height:64px;flex-wrap:wrap;padding:12px 16px;}
  .logo-link img{height:48px;}
}

/* ==========================================================================
   INDEX — ARCHÉTYPE C : Typographie héroïque + vignette flottante
   ========================================================================== */
.hero-c{
  position:relative;
  padding:80px 0 70px;
  background:
    radial-gradient(circle at 90% 10%, rgba(244,185,66,0.18), transparent 55%),
    var(--wax);
  overflow:hidden;
}
.hero-c__inner{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:48px;
}
.hero-c__text{flex:1 1 580px;max-width:680px;}
.hero-c__kicker{
  display:inline-block;
  font-family:var(--font-body);
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:.82rem;
  color:var(--wood);
  background:var(--wax-deep);
  border:1px solid var(--line);
  padding:6px 14px;
  border-radius:999px;
  margin-bottom:22px;
}
.hero-c__text h1{
  font-size:clamp(2.8rem,6vw,5.6rem);
  font-style:italic;
  font-weight:600;
  letter-spacing:-.01em;
  text-align:left;
}
.hero-c__baseline{
  font-family:var(--font-body);
  font-size:1.15rem;
  color:var(--wood);
  max-width:480px;
  margin-top:18px;
}

.hero-c__thumb{
  position:relative;
  flex:0 0 320px;
  width:320px;
  height:320px;
  margin-top:10px;
}
.hero-thumb-img{
  width:280px;
  height:280px;
  object-fit:cover;
  border-radius:var(--radius-blob);
  box-shadow:var(--shadow-soft);
  position:relative;
  z-index:2;
}
.hero-c__blob{
  position:absolute;
  inset:-26px -10px auto auto;
  width:260px;height:260px;
  background:var(--honey-light);
  border-radius:var(--radius-blob);
  opacity:.45;
  z-index:1;
}
.hero-c__hive{
  position:absolute;
  bottom:-40px;left:-40px;
  width:240px;height:240px;
  background:
    repeating-linear-gradient(60deg, transparent 0 18px, var(--honey) 18px 20px),
    repeating-linear-gradient(-60deg, transparent 0 18px, var(--honey) 18px 20px);
  opacity:.08;
  clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);
}

@media (max-width:720px){
  .hero-c{padding:48px 0 40px;}
  .hero-c__inner{flex-direction:column;}
  .hero-c__thumb{width:200px;height:200px;align-self:flex-end;}
  .hero-thumb-img{width:170px;height:170px;}
  .hero-c__blob{width:160px;height:160px;}
}

.content-section{
  padding:50px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:var(--white);
}
.content-section .container--narrow{
  font-size:1.08rem;
  color:var(--ink);
}
.content-section h2,.content-section h3{margin-top:1em;}
.content-section p{margin:0 0 1.2em;}

.showcase-section{padding:60px 0 80px;}
.showcase-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px;
}
@media (max-width:992px){
  .showcase-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:480px){
  .showcase-grid{grid-template-columns:1fr;}
}

/* ==========================================================================
   POST CARD — post-loop.html — asymétrique avec vignette hexagonale
   ========================================================================== */
.post-card{
  display:flex;
  flex-direction:column;
  background:var(--white);
  border-radius:18px;
  overflow:visible;
  box-shadow:0 10px 28px -18px rgba(43,29,16,0.35);
  border:1px solid var(--line);
  height:100%;
}
.post-card__thumb-link{
  display:block;
  width:130px;
  margin:22px auto -34px;
}
.post-card__thumb{
  width:130px;
  height:130px;
  object-fit:cover;
  clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);
  border:3px solid var(--honey-light);
}
.post-card__body{
  padding:48px 24px 26px;
  display:flex;
  flex-direction:column;
  flex:1;
  text-align:center;
}
.post-card__category{
  display:inline-block;
  align-self:center;
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--honey);
  border:1px solid var(--honey-light);
  border-radius:999px;
  padding:4px 12px;
  margin-bottom:12px;
}
.post-card__title{
  font-size:1.35rem;
  margin-bottom:.5em;
}
.post-card__title a{transition:color .2s ease;}
.post-card__title a:hover{color:var(--honey);}
.post-card__excerpt{
  font-size:.95rem;
  color:var(--wood);
  flex:1;
  margin-bottom:18px;
}
.post-card__meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:.82rem;
  border-top:1px dashed var(--line);
  padding-top:14px;
  color:var(--wood);
}
.post-card__more{
  font-weight:700;
  color:var(--wood-dark);
}
.post-card__more:hover{color:var(--honey);}

/* ==========================================================================
   POST-LIST — bandeau coloré (différent de l'index)
   ========================================================================== */
.list-hero{
  position:relative;
  background:var(--wood);
  color:var(--wax);
  padding:64px 0 56px;
  overflow:hidden;
}
.list-hero .breadcrumb,
.list-hero a{color:var(--honey-light);}
.list-hero__title{
  color:var(--wax);
  font-size:clamp(2.2rem,5vw,3.6rem);
  font-style:italic;
  margin-top:16px;
  text-align:left;
}
.list-hero__sub{
  color:rgba(255,248,236,0.8);
  max-width:560px;
  font-size:1.05rem;
}
.list-hero__hex{
  position:absolute;
  top:-60px;right:-60px;
  width:220px;height:220px;
  background:var(--honey);
  opacity:.18;
  clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);
}

.list-section{padding:60px 0 80px;}
.post-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px;
  margin-bottom:50px;
}
@media (max-width:992px){.post-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:480px){.post-grid{grid-template-columns:1fr;}}

.pagination{
  display:flex;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
}
.page-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:40px;height:40px;
  border-radius:50%;
  border:1px solid var(--line);
  font-weight:700;
  color:var(--wood-dark);
}
.page-link.active{
  background:var(--honey);
  border-color:var(--honey);
  color:var(--wood-dark);
}

/* ==========================================================================
   POST — page détail article (pas de hero classique)
   ========================================================================== */
.post{padding-top:44px;padding-bottom:80px;}
.post .breadcrumb{font-size:.85rem;color:var(--wood);margin-bottom:24px;}
.post .breadcrumb a{color:var(--honey);font-weight:700;}

.post__meta-top{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:14px;
}
.post__category{
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--honey);
  border:1px solid var(--honey-light);
  border-radius:999px;
  padding:5px 14px;
}
.post__date,.post__reading{font-size:.88rem;color:var(--wood);}

.post__title{
  position:relative;
  font-size:clamp(2.2rem,5vw,3.4rem);
  font-style:italic;
  text-align:left;
  z-index:2;
}
.post__hex-decor{
  position:absolute;
  top:-30px;right:-10px;
  width:140px;height:140px;
  background:var(--honey-light);
  opacity:.25;
  clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);
  z-index:1;
}

.post__thumb-wrap{
  margin:36px 0;
  max-width:980px;
  margin-left:auto;margin-right:auto;
  padding:0 24px;
}
.post__thumb{
  width:100%;
  max-height:480px;
  object-fit:cover;
  border-radius:24px;
  box-shadow:var(--shadow-soft);
}

.post__layout{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:48px;
  align-items:start;
}
.post__toc{
  position:sticky;
  top:120px;
  font-size:.88rem;
  background:var(--wax-deep);
  border:1px solid var(--line);
  border-radius:14px;
  padding:18px;
}
.post__toc a{display:block;padding:4px 0;color:var(--wood-dark);}
.post__toc a:hover{color:var(--honey);}

.post__content{
  font-size:1.1rem;
  color:var(--ink);
  max-width:680px;
}
.post__content h2,.post__content h3{margin-top:1.4em;}
.post__content p{margin:0 0 1.3em;}
.post__content img{border-radius:16px;margin:1.6em 0;}
.post__content blockquote{
  border-left:4px solid var(--honey);
  margin:1.8em 0;
  padding:.4em 1.4em;
  font-style:italic;
  color:var(--wood);
  background:var(--wax-deep);
  border-radius:0 12px 12px 0;
}

@media (max-width:992px){
  .post__layout{grid-template-columns:1fr;}
  .post__toc{position:static;}
}

.post__signatory{
  margin-top:50px;
  padding:26px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:18px;
  display:flex;
  align-items:center;
  gap:18px;
}

.post__related{
  padding:60px 0 20px;
  border-top:1px solid var(--line);
  margin-top:50px;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{
  background:var(--wood-dark);
  color:rgba(255,248,236,0.75);
  padding:36px 24px;
  text-align:center;
  font-size:.88rem;
}
.site-footer strong{color:var(--honey-light);}

/* ==========================================================================
   RESPONSIVE GLOBAL — breakpoints xs/sm/md/lg/xl/xxl
   ========================================================================== */
@media (max-width:480px){
  .container{padding:0 18px;}
  .hero-c__text h1{font-size:2.4rem;}
  .post__title{font-size:2rem;}
  .section-title{font-size:1.5rem;}
}
@media (min-width:1400px){
  .container{max-width:1320px;}
}