/* ==========================================================================
   veranda-pergola.fr — Habillage MAGAZINE EXPERT (child theme revision)
   Palette héritée du recolor (theme mods) via variables --cs-light-*.
   Toutes les couleurs passent par ces vars pour rester synchro avec la charte.
   ========================================================================== */

:root{
  --vp-primary:   var(--cs-light-primary-color,   #2C5450); /* vert-canard  */
  --vp-secondary: var(--cs-light-secondary-color, #6E7E74); /* sauge-gris   */
  --vp-accent:    var(--cs-light-accent-color,    #C2743F); /* terracotta   */
  --vp-border:    var(--cs-light-border-color,    #D8E0D8);
  --vp-surface:   var(--cs-light-layout-background,#FFFFFF);
  --vp-tint:      var(--cs-light-header-highlight-background,#EEF3EE);
  --vp-bg-start:  var(--cs-light-site-background-start,#FDFDFB);
  --vp-bg-end:    var(--cs-light-site-background-end,  #F3F6F2);
  --vp-radius: 14px;
  --vp-shadow: 0 6px 24px rgba(44,84,80,.08);
  --vp-shadow-hover: 0 14px 40px rgba(44,84,80,.16);
  --vp-maxw: 1200px;
}

/* --- Rubrique color coding (badges & accents par univers) --- */
.vp[data-rub="verandas"]{ --vp-rub: var(--vp-primary); }
.vp[data-rub="pergolas"]{ --vp-rub: var(--vp-accent); }
.vp[data-rub="abris-carports"]{ --vp-rub: var(--vp-secondary); }
.vp[data-rub="agrandissement-extension"]{ --vp-rub: #8a6d3b; }
.vp[data-rub="votre-projet"]{ --vp-rub: var(--vp-primary); }
.vp{ --vp-rub: var(--vp-accent); }

/* Full-bleed helper (casser le .cs-container quand voulu) */
.vp-bleed{ margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); }
.vp-bleed > .vp-inner{ max-width:var(--vp-maxw); margin:0 auto; padding:0 24px; }

/* Conteneur pleine largeur de la home / hub (sort du .cs-container du thème). */
.vp-home{ margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); width:100vw; max-width:100vw; }
.vp-home .vp-section:first-of-type{ margin-top:40px; }

/* ============================ HERO ÉDITORIAL ============================ */
.vp-hero{
  background:
    radial-gradient(120% 140% at 85% 0%, rgba(194,116,63,.10), transparent 55%),
    linear-gradient(180deg, var(--vp-tint), var(--vp-bg-start));
  border-bottom:1px solid var(--vp-border);
  padding:64px 0 56px;
}
.vp-hero__inner{ max-width:var(--vp-maxw); margin:0 auto; padding:0 24px; }
.vp-eyebrow{
  display:inline-flex; align-items:center; gap:.5em;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  font-weight:700; color:var(--vp-accent); margin:0 0 18px;
}
.vp-eyebrow::before{ content:""; width:26px; height:2px; background:var(--vp-accent); display:inline-block; }
.vp-hero__title{
  font-size:clamp(2.1rem, 4.6vw, 3.4rem); line-height:1.08; margin:0 0 18px;
  color:var(--vp-primary); font-weight:800; letter-spacing:-.01em; max-width:20ch;
}
.vp-hero__title em{ color:var(--vp-accent); font-style:normal; }
.vp-hero__sub{
  font-size:clamp(1.05rem,1.6vw,1.25rem); line-height:1.6; color:var(--vp-secondary);
  max-width:60ch; margin:0 0 28px;
}
.vp-chips{ display:flex; flex-wrap:wrap; gap:10px; }
.vp-chip{
  display:inline-flex; align-items:center; gap:.45em;
  padding:9px 16px; border-radius:999px; background:var(--vp-surface);
  border:1px solid var(--vp-border); color:var(--vp-primary);
  font-weight:600; font-size:.92rem; text-decoration:none; transition:.18s;
}
.vp-chip:hover{ border-color:var(--vp-accent); color:var(--vp-accent); transform:translateY(-2px); box-shadow:var(--vp-shadow); }

/* ============================ SECTIONS ============================ */
.vp-section{ max-width:var(--vp-maxw); margin:56px auto 0; padding:0 24px; }
.vp-section__head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:20px;
  border-bottom:2px solid var(--vp-border); padding-bottom:14px; margin-bottom:28px;
}
.vp-section__titles{ min-width:0; }
.vp-section__title{
  font-size:clamp(1.4rem,2.4vw,1.9rem); margin:.15em 0 0; color:var(--vp-primary);
  font-weight:800; letter-spacing:-.01em;
}
.vp-section__title::before{
  content:""; display:inline-block; width:12px; height:12px; border-radius:3px;
  background:var(--vp-rub); margin-right:12px; transform:translateY(-1px);
}
.vp-section__desc{ margin:.5em 0 0; color:var(--vp-secondary); font-size:.98rem; max-width:70ch; }
.vp-section__more{
  flex:none; color:var(--vp-accent); font-weight:700; text-decoration:none; font-size:.95rem;
  white-space:nowrap;
}
.vp-section__more:hover{ text-decoration:underline; }

/* ============================ GRILLE + CARTES ============================ */
.vp-grid{ display:grid; gap:26px; grid-template-columns:repeat(3,1fr); }
.vp-grid--4{ grid-template-columns:repeat(4,1fr); }
@media(max-width:900px){ .vp-grid,.vp-grid--4{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .vp-grid,.vp-grid--4{ grid-template-columns:1fr; } }

.vp-card{
  display:flex; flex-direction:column; background:var(--vp-surface);
  border:1px solid var(--vp-border); border-radius:var(--vp-radius); overflow:hidden;
  transition:.2s; height:100%;
}
.vp-card:hover{ transform:translateY(-4px); box-shadow:var(--vp-shadow-hover); border-color:transparent; }
.vp-card__media{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--vp-tint); }
.vp-card__media img{ width:100%; height:100%; object-fit:cover; display:block; transition:.4s transform; }
.vp-card:hover .vp-card__media img{ transform:scale(1.05); }
.vp-card__badge{
  position:absolute; left:12px; top:12px; z-index:2;
  background:var(--vp-rub); color:#fff; font-size:.7rem; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; padding:5px 11px; border-radius:999px;
  text-decoration:none;
}
.vp-card__body{ display:flex; flex-direction:column; gap:10px; padding:18px 18px 20px; flex:1; }
.vp-card__title{ font-size:1.08rem; line-height:1.3; margin:0; font-weight:700; }
.vp-card__title a{ color:var(--vp-primary); text-decoration:none; }
.vp-card__title a:hover{ color:var(--vp-accent); }
.vp-card__excerpt{ color:var(--vp-secondary); font-size:.93rem; line-height:1.55; margin:0; }
.vp-card__meta{
  margin-top:auto; padding-top:12px; display:flex; gap:14px; align-items:center;
  color:var(--vp-secondary); font-size:.8rem; border-top:1px solid var(--vp-border);
}
.vp-card__meta svg{ vertical-align:-2px; margin-right:4px; opacity:.7; }

/* Carte "à la une" (large, format horizontal) */
.vp-lead{ display:grid; grid-template-columns:1.15fr .85fr; gap:0; margin-top:28px;
  background:var(--vp-surface); border:1px solid var(--vp-border); border-radius:var(--vp-radius);
  overflow:hidden; box-shadow:var(--vp-shadow); }
.vp-lead__media{ position:relative; min-height:340px; background:var(--vp-tint); }
.vp-lead__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.vp-lead__body{ padding:34px 38px; display:flex; flex-direction:column; justify-content:center; gap:14px; }
.vp-lead__title{ font-size:clamp(1.5rem,2.6vw,2.1rem); line-height:1.15; margin:0; color:var(--vp-primary); font-weight:800; }
.vp-lead__title a{ color:inherit; text-decoration:none; }
.vp-lead__title a:hover{ color:var(--vp-accent); }
.vp-lead__excerpt{ color:var(--vp-secondary); font-size:1.02rem; line-height:1.6; margin:0; }
@media(max-width:820px){ .vp-lead{ grid-template-columns:1fr; } .vp-lead__media{ min-height:220px; } }

/* ============ BAND "VOTRE PROJET" (pilier expert transversal) ============ */
.vp-project{
  margin-top:64px; padding:56px 0;
  background:linear-gradient(160deg, var(--vp-primary), #23433f);
  color:#fff;
}
.vp-project__inner{ max-width:var(--vp-maxw); margin:0 auto; padding:0 24px;
  display:grid; grid-template-columns:1fr 1.1fr; gap:44px; align-items:center; }
.vp-project__title{ font-size:clamp(1.6rem,2.8vw,2.2rem); margin:.2em 0 14px; font-weight:800; color:#fff; }
.vp-project .vp-eyebrow{ color:#E7C9A9; }
.vp-project .vp-eyebrow::before{ background:#E7C9A9; }
.vp-project__lead{ color:#D7E3DE; font-size:1.05rem; line-height:1.6; margin:0 0 24px; }
.vp-project__cta{
  display:inline-flex; align-items:center; gap:.5em; background:linear-gradient(180deg,var(--cs-light-button-background-start,#D88A5C),var(--cs-light-button-background-end,#C5773F));
  color:#fff; text-decoration:none; font-weight:700; padding:13px 26px; border-radius:999px; transition:.2s;
}
.vp-project__cta:hover{ transform:translateY(-2px); box-shadow:0 12px 30px rgba(0,0,0,.25); }
.vp-project__list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.vp-project__list a{
  display:flex; gap:12px; align-items:flex-start; padding:16px 18px; border-radius:12px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);
  color:#fff; text-decoration:none; transition:.18s;
}
.vp-project__list a:hover{ background:rgba(255,255,255,.14); transform:translateY(-2px); }
.vp-project__list strong{ display:block; font-size:1rem; }
.vp-project__list span{ display:block; color:#C6D6CF; font-size:.85rem; margin-top:3px; }
.vp-project__num{ font-weight:800; color:#E7C9A9; font-size:1.1rem; flex:none; }
@media(max-width:820px){ .vp-project__inner{ grid-template-columns:1fr; gap:28px; } .vp-project__list{ grid-template-columns:1fr; } }

/* ============================ TRUST / EXPERTISE ============================ */
.vp-trust{ max-width:var(--vp-maxw); margin:64px auto 8px; padding:0 24px; }
.vp-trust__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.vp-trust__item{ background:var(--vp-surface); border:1px solid var(--vp-border); border-radius:var(--vp-radius);
  padding:26px 24px; }
.vp-trust__item h3{ margin:.4em 0 .3em; color:var(--vp-primary); font-size:1.1rem; }
.vp-trust__item p{ margin:0; color:var(--vp-secondary); font-size:.92rem; line-height:1.55; }
.vp-trust__ico{ width:42px; height:42px; border-radius:10px; background:var(--vp-tint); display:grid; place-items:center; color:var(--vp-accent); }
@media(max-width:820px){ .vp-trust__grid{ grid-template-columns:1fr; } }

/* ============================ HUB (archive catégorie) ============================ */
.vp-hub{
  background:linear-gradient(180deg,var(--vp-tint),var(--vp-bg-start));
  border-bottom:1px solid var(--vp-border); padding:52px 0 44px; margin-bottom:40px;
}
.vp-hub__inner{ max-width:var(--vp-maxw); margin:0 auto; padding:0 24px; }
.vp-hub__title{ font-size:clamp(2rem,4vw,3rem); margin:0 0 14px; color:var(--vp-primary); font-weight:800;
  letter-spacing:-.01em; }
.vp-hub__title::before{ content:""; display:inline-block; width:16px; height:16px; border-radius:4px;
  background:var(--vp-rub); margin-right:14px; transform:translateY(-2px); }
.vp-hub__desc{ font-size:1.1rem; line-height:1.65; color:var(--vp-secondary); max-width:75ch; margin:0; }
.vp-hub__count{ margin-top:16px; color:var(--vp-accent); font-weight:700; font-size:.9rem;
  text-transform:uppercase; letter-spacing:.06em; }

/* ============================ SINGLE : sommaire, sources, auteur ============================ */
.vp-toc{
  background:var(--vp-tint); border:1px solid var(--vp-border); border-left:4px solid var(--vp-accent);
  border-radius:12px; padding:20px 24px; margin:0 0 30px;
}
.vp-toc__title{ font-size:.78rem; text-transform:uppercase; letter-spacing:.12em; font-weight:800;
  color:var(--vp-primary); margin:0 0 12px; display:flex; align-items:center; gap:.5em; }
.vp-toc ol{ margin:0; padding:0; list-style:none; counter-reset:toc; columns:2; column-gap:32px; }
@media(max-width:640px){ .vp-toc ol{ columns:1; } }
.vp-toc li{ counter-increment:toc; margin:0 0 9px; break-inside:avoid; }
.vp-toc a{ color:var(--vp-primary); text-decoration:none; font-size:.95rem; line-height:1.4; }
.vp-toc a::before{ content:counter(toc,decimal-leading-zero); color:var(--vp-accent); font-weight:700;
  margin-right:9px; font-size:.85em; }
.vp-toc a:hover{ color:var(--vp-accent); }

.vp-sources{
  margin:36px 0 8px; padding:22px 26px; border-radius:12px; background:var(--vp-surface);
  border:1px solid var(--vp-border);
}
.vp-sources__title{ font-size:.95rem; font-weight:800; color:var(--vp-primary); margin:0 0 8px;
  display:flex; align-items:center; gap:.5em; }
.vp-sources p{ margin:0; color:var(--vp-secondary); font-size:.9rem; line-height:1.6; }

.vp-author{
  margin:30px 0 8px; padding:24px 26px; border-radius:14px;
  background:linear-gradient(160deg,var(--vp-tint),var(--vp-surface)); border:1px solid var(--vp-border);
  display:flex; gap:20px; align-items:flex-start;
}
.vp-author__avatar{ flex:none; width:66px; height:66px; border-radius:50%; overflow:hidden;
  background:var(--vp-primary); color:#fff; display:grid; place-items:center; font-weight:800; font-size:1.5rem; }
.vp-author__avatar img{ width:100%; height:100%; object-fit:cover; }
.vp-author__role{ font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; color:var(--vp-accent);
  font-weight:800; margin:0 0 3px; }
.vp-author__name{ font-size:1.15rem; color:var(--vp-primary); margin:0 0 8px; font-weight:800; }
.vp-author__bio{ margin:0 0 10px; color:var(--vp-secondary); font-size:.93rem; line-height:1.6; }
.vp-author__link{ color:var(--vp-accent); font-weight:700; text-decoration:none; font-size:.9rem; }
.vp-author__link:hover{ text-decoration:underline; }
@media(max-width:560px){ .vp-author{ flex-direction:column; } }

/* Anchor offset (sticky header) */
.entry-content h2[id], .entry-content h3[id]{ scroll-margin-top:100px; }

/* ============================ PAGES : À propos & Glossaire ============================ */
.vp-about__intro{ font-size:1.18rem; line-height:1.7; color:var(--vp-secondary); }
.entry-content .vp-about__intro strong{ color:var(--vp-primary); }

.vp-glossary__index{
  display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 34px; padding:16px;
  background:var(--vp-tint); border:1px solid var(--vp-border); border-radius:12px; position:sticky; top:80px; z-index:5;
}
.vp-glossary__index a{
  display:grid; place-items:center; min-width:34px; height:34px; padding:0 6px; border-radius:8px;
  background:var(--vp-surface); border:1px solid var(--vp-border); color:var(--vp-primary);
  font-weight:700; text-decoration:none; transition:.15s;
}
.vp-glossary__index a:hover{ background:var(--vp-accent); color:#fff; border-color:transparent; }
.vp-glossary__letter{
  font-size:1.5rem; color:var(--vp-accent); border-bottom:2px solid var(--vp-border);
  padding-bottom:6px; margin:34px 0 14px; scroll-margin-top:150px;
}
.vp-glossary dl{ margin:0; }
.vp-glossary dt{
  font-weight:800; color:var(--vp-primary); font-size:1.06rem; margin:16px 0 4px;
  padding-left:14px; border-left:3px solid var(--vp-accent); scroll-margin-top:150px;
}
.vp-glossary dd{ margin:0 0 10px 14px; color:var(--vp-secondary); line-height:1.6; }
@media(max-width:640px){ .vp-glossary__index{ position:static; } }