/*
Theme Name: Cecilia Blog V01 Test Autonome
Author: OpenAI
Description: Prototype WordPress autonome de la page Blog reproduisant la maquette validée.
Version: 1.0.3
*/

/* Polices chargées par WordPress / cockpit Ferrari — aucun @import bloquant ici. */

:root{
  --ink:#102f49;
  --forest:#174f38;
  --forest-btn:#345f3d;
  --terracotta:#9b4c2d;
  --terracotta-soft:#b36a46;
  --paper:#fbf7f2;
  --paper-2:#faf6f0;
  --resources-panel:#fbefea;
  --tag:#f4eee8;
  --line:#dec0b2;
  --serif:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:'Montserrat', Arial, Helvetica, sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input,select{font:inherit}
.blog-page{overflow:hidden}

/* ===== HEADER — même langage que les pages validées ===== */
.site-header{
  height:6.52vw;
  min-height:62px;
  max-height:126px;
  padding:0 6.55vw;
  display:flex;
  align-items:center;
  background:#fff;
  border-bottom:1px solid rgba(16,47,73,.05);
  position:relative;
  z-index:20;
}
.brand{display:flex;flex-direction:column;flex:0 0 auto;min-width:20.5vw}
.brand strong{
  font:500 2.00vw/.95 var(--serif);
  letter-spacing:.01em;
  color:var(--ink);
}
.brand span{
  font:500 .67vw/1.2 var(--sans);
  margin-top:.26vw;
  color:var(--ink);
}
.site-nav{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:2.25vw;
  white-space:nowrap;
  font:600 .71vw/1 var(--sans);
}
.site-nav a{position:relative}
.site-nav .active::after{
  content:'';
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:-1.42vw;
  width:2.0vw;
  height:1px;
  background:#c99477;
}
.search-link{
  width:1.5vw;height:1.5vw;min-width:16px;min-height:16px;
  display:flex;align-items:center;justify-content:center
}
.search-link svg{width:100%;height:100%}
.nav-cta{
  background:var(--forest-btn);
  color:#fff!important;
  border-radius:999px;
  padding:1.04vw 2.0vw;
  font-weight:600;
}
.menu-toggle{display:none}

/* ===== HERO ===== */
.blog-hero{
  min-height:46.75vw;
  display:grid;
  grid-template-columns:49.25% 50.75%;
  background:var(--paper);
}
.blog-hero-copy{
  padding:6.7vw 4.4vw 4.7vw 6.05vw;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.blog-label{
  display:inline-flex;
  align-self:flex-start;
  border:1px solid #c48d73;
  border-radius:999px;
  padding:.58vw 1.18vw;
  color:#8c452b;
  font:600 .72vw/1 var(--sans);
  margin-bottom:1.8vw;
}
.blog-hero h1{
  margin:0;
  color:#8c3f25;
  font:500 4.07vw/.93 var(--serif);
  letter-spacing:-.025em;
  max-width:34vw;
}
.blog-hero-copy>p{
  margin:1.55vw 0 1.95vw;
  max-width:35vw;
  font:500 1.03vw/1.45 var(--sans);
  color:#234157;
}
.blog-hero-button{
  display:inline-flex;
  width:max-content;
  align-items:center;
  gap:1.65vw;
  background:var(--terracotta-soft);
  color:#fff;
  border-radius:999px;
  padding:1.22vw 2.35vw;
  font:600 .82vw/1 var(--sans);
}
.blog-hero-photo{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* ===== ARTICLES ===== */
.articles-section{
  background:#fff;
  padding:2.95vw 5.9vw 3.0vw;
}
.articles-top{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:3vw;
  margin-bottom:2.45vw;
}
.articles-title h2{
  margin:0;
  color:#8f4026;
  font:500 3.5vw/.98 var(--serif);
}
.articles-title p{
  margin:.55vw 0 0;
  font:500 .89vw/1.35 var(--sans);
  color:#345066;
}
.article-tools{
  display:flex;
  align-items:center;
  gap:1.35vw;
  padding-bottom:.12vw;
}
.category-select{
  height:3.47vw;
  min-height:38px;
  border:1px solid #d5b3a5;
  border-radius:999px;
  padding:0 1.6vw;
  background:#fff;
  color:#435a69;
  font:500 .72vw/1 var(--sans);
}
.searchbox{
  height:3.47vw;
  min-height:38px;
  width:18.4vw;
  border:1px solid #d5b3a5;
  border-radius:999px;
  display:flex;
  align-items:center;
  overflow:hidden;
}
.searchbox input{
  border:0;outline:0;background:transparent;
  flex:1;min-width:0;
  padding:0 1.45vw;
  color:#435a69;
  font:500 .72vw/1 var(--sans);
}
.searchbox button{
  border:0;background:transparent;color:#a45e44;
  width:3.7vw;height:100%;
  display:flex;align-items:center;justify-content:center;
}
.searchbox svg{width:1.18vw;height:1.18vw;min-width:14px;min-height:14px}

.article-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  column-gap:2.05vw;
  row-gap:2.25vw;
}
.article-card{min-width:0}
.article-card img{
  width:100%;
  aspect-ratio:1.35/1;
  object-fit:cover;
  border-radius:.72vw;
}
.article-tags{
  display:flex;
  flex-wrap:wrap;
  gap:.38vw;
  margin:.73vw 0 .72vw;
}
.article-tags span{
  background:var(--tag);
  border-radius:999px;
  padding:.32vw .48vw;
  font:600 .50vw/1 var(--sans);
  letter-spacing:.015em;
  color:#354a58;
}
.article-card h3{
  margin:0;
  min-height:4.45vw;
  font:500 1.44vw/1.03 var(--serif);
  color:#17364d;
}
.article-card .excerpt{
  margin:.62vw 0 1.02vw;
  min-height:3.8vw;
  font:400 .80vw/1.43 var(--sans);
  color:#596b77;
}
.article-meta strong{
  display:block;
  font:600 .72vw/1.2 var(--sans);
  color:#435866;
}
.article-meta span{
  display:block;
  margin-top:.25vw;
  font:400 .70vw/1.2 var(--sans);
  color:#667681;
}

.pagination{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:1.55vw;
  margin:2.6vw 0 .05vw;
  color:#294354;
  font:600 .75vw/1 var(--sans);
}
.pagination .current{
  width:3.0vw;height:3.0vw;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  border:1px solid #d7b3a3;
  background:#faeee8;
}
.pagination .arrow{font-size:1.4vw;font-weight:400}

/* ===== RESSOURCES GRATUITES ===== */
.resources-lead{
  background:var(--resources-panel);
  min-height:9.35vw;
  display:flex;
  align-items:center;
  padding:1.9vw 5.2vw;
  gap:1.5vw;
}
.resources-icon{width:4.55vw;height:auto;flex:0 0 auto}
.resources-copy{min-width:0}
.resources-copy h2{
  margin:0;
  color:#97462c;
  font:500 2.15vw/.98 var(--serif);
}
.resources-copy p{
  margin:.38vw 0 0;
  color:#9b5c43;
  font:500 .72vw/1.3 var(--sans);
}
.resources-form{
  margin-left:auto;
  width:31.9vw;
  height:4.0vw;
  min-height:44px;
  display:flex;
  border:1px solid #d8b7aa;
  border-radius:999px;
  overflow:hidden;
  background:#fff;
}
.resources-form input{
  border:0;outline:0;flex:1;min-width:0;
  padding:0 1.6vw;
  background:transparent;
  font:500 .75vw/1 var(--sans);
}
.resources-form button{
  border:0;
  width:12.2vw;
  background:var(--forest);
  color:#fff;
  font:600 .76vw/1 var(--sans);
}

/* ===== FOOTER ===== */
.footer{
  background:#174f38;
  color:#fff;
  padding:3.55vw 5.85vw 1.4vw;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.7fr 1fr 1fr .8fr 1fr;
  gap:4.0vw;
  max-width:100%;
}
.footer-brand strong{
  display:block;
  font:500 1.72vw/1 var(--serif);
}
.footer-brand .subtitle{
  margin:.45vw 0 1.28vw;
  font:500 .68vw/1.25 var(--sans);
}
.footer-brand .promise{
  margin:0;
  font:500 .78vw/1.45 var(--sans);
}
.footer h3{
  margin:0 0 1.0vw;
  font:600 .74vw/1 var(--sans);
}
.footer a{
  display:block;
  margin:0 0 .50vw;
  font:500 .69vw/1.12 var(--sans);
}
.social-icons{display:flex;align-items:center;gap:1.1vw}
.social-icons a{margin:0;display:flex;align-items:center;justify-content:center}
.social-icons svg{width:1.45vw;height:1.45vw;min-width:18px;min-height:18px}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.45);
  margin-top:2.55vw;
  padding-top:1.05vw;
  display:flex;
  justify-content:space-between;
  font:500 .61vw/1.2 var(--sans);
}

/* ===== Responsive mobile/tablette sans changer le design desktop ===== */
@media(max-width:1050px){
  .site-header{height:72px;padding:0 24px}
  .brand{min-width:auto}.brand strong{font-size:23px}.brand span{font-size:9px}
  .site-nav{display:none}.menu-toggle{display:block;margin-left:auto;border:0;background:none;font-size:26px;color:var(--ink)}
  .blog-hero{grid-template-columns:1fr;min-height:0}
  .blog-hero-copy{padding:64px 7% 58px}
  .blog-hero h1{font-size:56px;max-width:700px}
  .blog-hero-copy>p{font-size:15px;max-width:650px}
  .blog-label{font-size:11px;padding:8px 16px;margin-bottom:18px}
  .blog-hero-button{font-size:12px;padding:15px 25px}
  .blog-hero-photo{aspect-ratio:1.4/1}
  .articles-section{padding:56px 6% 48px}
  .articles-top{align-items:flex-start;flex-direction:column;margin-bottom:34px}
  .articles-title h2{font-size:46px}.articles-title p{font-size:13px}
  .article-tools{width:100%}.category-select{font-size:11px;height:44px}.searchbox{height:44px;width:min(360px,100%)}.searchbox input{font-size:11px}
  .article-grid{grid-template-columns:repeat(2,1fr);gap:42px 28px}
  .article-card img{border-radius:10px}
  .article-tags span{font-size:8px;padding:5px 7px}
  .article-card h3{font-size:24px;min-height:0}.article-card .excerpt{font-size:12px;min-height:0}.article-meta strong,.article-meta span{font-size:10px}
  .pagination{font-size:11px;gap:20px;margin-top:40px}.pagination .current{width:42px;height:42px}.pagination .arrow{font-size:20px}
  .resources-lead{padding:24px 6%;min-height:110px;flex-wrap:wrap}.resources-icon{width:58px}.resources-copy h2{font-size:30px}.resources-copy p{font-size:10px}.resources-form{width:min(450px,100%);height:48px;margin-left:auto}.resources-form input{font-size:11px}.resources-form button{width:150px;font-size:11px}
  .footer{padding:46px 6% 18px}.footer-grid{grid-template-columns:1.6fr 1fr 1fr;gap:34px}.footer-brand strong{font-size:25px}.footer-brand .subtitle,.footer h3,.footer a{font-size:10px}.footer-brand .promise{font-size:11px}.footer-bottom{font-size:9px}
}
@media(max-width:650px){
  .blog-hero h1{font-size:44px}
  .article-grid{grid-template-columns:1fr}
  .article-tools{flex-direction:column;align-items:stretch}.searchbox{width:100%}
  .resources-lead{display:grid;grid-template-columns:auto 1fr}.resources-form{grid-column:1/-1;margin:8px 0 0;width:100%}
  .footer-grid{grid-template-columns:1fr 1fr}.footer-grid .footer-brand{grid-column:1/-1}.footer-bottom{flex-direction:column;gap:6px}
}