/*
Theme Name: Velch Digital
Theme URI: https://www.velchtdigital.com
Template: velch-core
Author: Velch Digital
Description: Thème enfant pour velchtdigital.com — agence de communication et marketing digital à Abidjan. Hérite du design system Velch Core.
Version: 1.0.5
Requires PHP: 8.1
Text Domain: velch
*/

/* Surcharges spécifiques à Velch Digital (aucune pour l'instant : la terracotta est l'accent par défaut).
   Pour Velch Technology, un thème enfant du même type redéfinira --accent, --accent-bright et --gold ici. */

/* Accueil : mockup « rapport » du hero (chiffres d’illustration) */
/* ---- Mockup "rapport" : décoratif, aucun chiffre lisible ---- */
.mock { margin-bottom: 28px; background: var(--ink-2); border-radius: var(--radius-lg); padding: 20px; box-shadow: 0 30px 80px rgba(0,0,0,.35); position: relative; }
.mock__bar { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.mock__title { font-family: var(--mono); font-size: 12px; color: var(--on-ink-muted); letter-spacing:.04em; }
.mock__pill { font-size: 11px; font-weight:600; color: var(--ink); background: var(--gold); border-radius: 999px; padding: 4px 10px; }
.mock__kpis { display:grid; grid-template-columns: repeat(3,1fr); gap:10px; margin-bottom:14px; }
.mock__kpi { background: var(--ink); border-radius: var(--radius-md); padding: 12px; }
.mock__kpi .lbl { font-size: 11px; color: var(--on-ink-muted); margin-bottom: 8px; }
.mock__kpi .val { height: 14px; width: 60%; border-radius: 4px; background: var(--gold); opacity:.9; }
.mock__kpi:nth-child(2) .val { width: 45%; background: var(--on-ink); opacity:.7; }
.mock__kpi:nth-child(3) .val { width: 70%; background: var(--teal); }
.mock__kpi .trend { margin-top: 8px; height: 6px; width: 32%; border-radius: 3px; background: var(--teal); }
.mock__chart { background: var(--ink); border-radius: var(--radius-md); padding: 12px; margin-bottom: 14px; }
.mock__chart .lbl { font-size: 11px; color: var(--on-ink-muted); margin-bottom: 8px; display:flex; justify-content:space-between; }
.mock__chart svg { width:100%; height: 84px; display:block; }
.mock__src { display:grid; gap:8px; }
.mock__row { display:grid; grid-template-columns: 86px 1fr 40px; align-items:center; gap:10px; font-size: 12px; color: var(--on-ink); }
.mock__row .track { height: 8px; background: rgba(246,241,232,.08); border-radius: 4px; overflow:hidden; }
.mock__row .fill { height:100%; border-radius:4px; background: var(--gold); }
.mock__row:nth-child(2) .fill { width: 58%; background: var(--teal); }
.mock__row:nth-child(3) .fill { width: 34%; background: var(--on-ink-muted); }
.mock__row:nth-child(1) .fill { width: 82%; }
 .mock__kpi .num { font-family: var(--mono); font-size: 22px; font-weight:500; color: var(--on-ink); line-height:1; }
.mock__kpi .num small { font-family: var(--sans); font-size: 11px; color: var(--on-ink-muted); font-weight:400; }
.mock__kpi .delta { margin-top: 6px; font-size: 11px; color: var(--on-ink-muted); }
.mock__kpi .delta.up { color: #4FC3A1; }
.mock__row em { font-style:normal; font-family: var(--mono); font-size: 11px; color: var(--on-ink-muted); text-align:right; }
.mock__note { position:absolute; right: 20px; bottom: -22px; font-size: 11px; color: var(--on-ink-muted); letter-spacing:.02em; }
/* petite carte flottante "nouveau contact" */
.mock__toast { position:absolute; left:-28px; bottom:-18px; background: var(--white); color: var(--ink); border-radius: var(--radius-md); padding: 10px 14px; font-size: 13px; box-shadow: 0 12px 32px rgba(11,31,42,.25); display:flex; align-items:center; gap:10px; }
.mock__toast .dot { width:10px; height:10px; border-radius:50%; background: var(--teal); box-shadow: 0 0 0 4px rgba(19,122,119,.2); }
.mock__toast b { display:block; font-weight:600; }
.mock__toast span { color: var(--muted); font-size: 12px; }
@media (max-width:768px){ .mock__toast{ left: 8px; bottom: -14px; } }

/* (ancien panneau 4 indicateurs, conservé si besoin) */
.hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.hero-stat { background: var(--ink); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); }
.hero-stat__value { font-family: var(--mono); font-size: 28px; color: var(--gold); line-height: 1; margin-bottom: 6px; }
.hero-stat__label { font-size: 13px; color: var(--on-ink-muted); }

/* Logo tuile */
.brand { gap: 10px; }
.brand__mark { flex-shrink: 0; }
.site-footer .brand { --brand-mark-bg: #F2B33D; --brand-mark-fg: #0B1F2A; }
.site-footer .brand__accent { color: var(--gold); }

/* Réalisations */
.work { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.work-card .work-card__type { font-family: var(--mono); font-size: 13px; color: var(--accent); margin-bottom: var(--space-1); }
.work-card .work-card__domain { font-size: 13px; color: var(--muted); }
.work-card .work-kpis { display: flex; gap: var(--space-3); margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--border); }
.work-card .work-kpis div { font-size: 13px; color: var(--muted); }
.work-card .work-kpis strong { display: block; font-family: var(--mono); font-size: 20px; color: var(--teal); font-weight: 500; }
.work-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-2); }
.work-tags span { font-size: 12px; background: var(--sand-2); border-radius: var(--radius-sm); padding: 4px 8px; color: var(--ink); }

/* Pourquoi nous */
.why { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
.why div { border-top: 2px solid var(--gold); padding-top: var(--space-2); }
.why h3 { color: var(--on-ink); font-size: 18px; }
.why p { font-size: 15px; }

/* Contact */
.contact-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-4); align-items: start; }

@media (max-width: 1024px) { .why { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) {
  .work, .why, .contact-grid, .hero-stats { grid-template-columns: 1fr; }
}