/* Blog Créacodeal — header identique au site + barre de thèmes. Palette de marque, Montserrat. */
@import url('/fonts/montserrat.css');
@import url('/fonts/caprasimo.css');

:root{
  --cream:hsl(41,47%,94%); --brown:#5a4b44; --taupe:#a2978a; --mint:#acd5c7; --line:#e6ddc9; --card:#ffffff;
  --soft:0 2px 15px -3px rgba(90,75,68,.08),0 4px 6px -4px rgba(90,75,68,.05);
  --soft-lg:0 10px 40px -10px rgba(90,75,68,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--brown);
  font-family:'Montserrat',system-ui,-apple-system,sans-serif;line-height:1.65;-webkit-font-smoothing:antialiased}
.wrap{max-width:1280px;margin:0 auto;padding:0 1rem}
@media(min-width:1024px){.wrap{padding:0 2rem}}
.reading{max-width:760px}

/* ── Header : COPIE EXACTE du header du site (src/components/layout/Header.tsx, classes Tailwind traduites) ── */
header.site{position:sticky;top:0;z-index:50;background:#d3e3d6;transition:all .3s cubic-bezier(.4,0,.2,1);line-height:1.5}
header.site.scrolled{box-shadow:var(--soft)}
/* container mx-auto px-4 lg:px-8 / flex items-center justify-between h-20 lg:h-24 */
.hwrap{max-width:1280px;margin:0 auto;padding:0 1rem;height:80px;display:flex;align-items:center;justify-content:space-between}
@media(min-width:1024px){.hwrap{padding:0 2rem;height:96px}}
/* Logo : œil-C animé + nom en Caprasimo (mêmes tailles que Header.tsx) */
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand .mark{width:56px;height:56px;display:block;flex-shrink:0;transition:transform .3s cubic-bezier(.4,0,.2,1)}
.brand:hover .mark{transform:scale(1.05)}
.bname{font-family:'Caprasimo',Georgia,serif;font-size:26px;line-height:1;letter-spacing:-.01em;color:#2E2420;white-space:nowrap}
@media(min-width:1024px){.bname{display:none}}
@media(min-width:1024px){.brand .mark{width:68px;height:68px}}
@media(min-width:1280px){.bname{display:block;font-size:34px}}
/* nav : hidden lg:flex items-center gap-8 ; liens text-sm font-medium */
.nav{display:none}
@media(min-width:1024px){.nav{display:flex;align-items:center;gap:32px}}
.nav a{position:relative;font-size:14px;line-height:20px;font-weight:500;text-decoration:none;color:rgba(90,75,68,.8);
  transition:color .2s cubic-bezier(.4,0,.2,1)}
.nav a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--brown);transition:all .3s cubic-bezier(.4,0,.2,1)}
.nav a:hover{color:var(--brown)}
.nav a:hover::after{width:100%}
.nav a.active{color:var(--brown)}
.nav a.active::after{width:100%}
/* hidden lg:flex items-center gap-5 (langues + bouton) ; lg:hidden flex items-center gap-3 (langues + menu) */
.hright{display:none}
@media(min-width:1024px){.hright{display:flex;align-items:center;gap:20px}}
.hmobile{display:flex;align-items:center;gap:12px}
@media(min-width:1024px){.hmobile{display:none}}
/* Sélecteur de langue : flex items-center gap-1 text-xs font-semibold uppercase ; séparateur mx-1 */
.langs{display:flex;align-items:center;gap:4px;font-size:12px;line-height:16px;font-weight:600;text-transform:uppercase}
.langs .lg{display:flex;align-items:center}
.langs a{color:rgba(90,75,68,.7);text-decoration:none;transition:color .15s cubic-bezier(.4,0,.2,1)}
.langs a:hover{color:var(--brown)}
.langs .cur{color:var(--brown)}
.langs .sep{color:rgba(90,75,68,.4);margin:0 4px}
/* Bouton : variant cta, size lg (h-12 px-8 text-base font-medium rounded-lg) */
.cta-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 2rem;border-radius:.75rem;
  background:var(--brown);color:#fff;font-size:16px;line-height:24px;font-weight:500;text-decoration:none;box-shadow:var(--soft);
  transition:all .3s cubic-bezier(.4,0,.2,1);white-space:nowrap}
.cta-btn:hover{background:rgba(90,75,68,.85);box-shadow:var(--soft-lg);transform:translateY(-2px)}
/* Bouton menu : p-2 text-foreground, icônes lucide 24 px */
.burger{display:inline-flex;align-items:center;justify-content:center;background:none;border:0;cursor:pointer;padding:8px;color:var(--brown);line-height:0}
.burger svg{display:block}
.burger .i-x{display:none}
.burger[aria-expanded="true"] .i-x{display:block}
.burger[aria-expanded="true"] .i-menu{display:none}
/* Menu mobile : absolute top-20 bg-[#acd5c7] ; nav flex-col p-6 gap-4 ; liens text-base font-medium py-2 */
.mmenu{display:none;position:absolute;top:80px;left:0;right:0;background:#acd5c7;box-shadow:var(--soft-lg);
  flex-direction:column;padding:1.5rem;gap:1rem}
.mmenu.open{display:flex}
@media(min-width:1024px){.mmenu.open{display:none}}
.mmenu a{font-size:16px;line-height:24px;font-weight:500;text-decoration:none;color:rgba(90,75,68,.8);padding:.5rem 0;transition:color .15s}
.mmenu a:hover,.mmenu a.active{color:var(--brown)}
.mmenu .mcta{justify-content:center;height:48px;margin-top:1rem;padding:0 2rem;background:var(--brown);color:#fff;
  border-radius:.75rem;display:inline-flex;align-items:center;box-shadow:var(--soft)}

/* ── Barre de THÈMES (sticky, sous le header) ── */
.thememenu{position:sticky;top:80px;z-index:40;background:var(--cream);border-bottom:1px solid var(--line)}
@media(min-width:1024px){.thememenu{top:96px}}
.thememenu-inner{display:flex;align-items:center;gap:.6rem;padding-top:.7rem;padding-bottom:.7rem}
.tmlabel{flex:0 0 auto;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:#8a7d6f}
.themes{display:flex;gap:.5rem;overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth;flex:1}
.themes::-webkit-scrollbar{display:none}
.theme{flex:0 0 auto;background:#fff;border:1px solid var(--line);color:var(--brown);text-decoration:none;
  padding:.5rem 1rem;border-radius:999px;font-size:14px;font-weight:500;white-space:nowrap;transition:.2s;cursor:pointer}
.theme:hover{border-color:var(--taupe)}
.theme.active{background:var(--brown);color:#fff;border-color:var(--brown)}
.tmarrow{flex:0 0 auto;background:#fff;border:1px solid var(--line);width:34px;height:34px;border-radius:50%;
  cursor:pointer;font-size:18px;line-height:1;color:var(--brown)}

/* ── Hero ── */
.hero{background:var(--cream);border-bottom:1px solid var(--line);padding:56px 0 44px}
.hero .kicker{margin:0 0 10px;color:#8a7d6f;font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:13px}
.hero h1{margin:0 0 14px;font-size:clamp(28px,4.5vw,44px);line-height:1.15;font-weight:700;color:var(--brown)}
.hero p{margin:0;font-size:18px;color:#6b5d54;max-width:680px}

/* ── Piliers / cartes ── */
.pillars{padding:44px 0 24px}
.pillar{margin-bottom:48px}
.pillar h2{font-size:24px;margin:0 0 6px;color:var(--brown)}
.pillar .intro{margin:0 0 20px;color:#6b5d54;max-width:680px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.card{display:block;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px;
  text-decoration:none;color:var(--brown);font-weight:600;font-size:17px;line-height:1.4;box-shadow:0 1px 3px rgba(90,75,68,.06);
  transition:transform .2s,box-shadow .2s,border-color .2s}
.card:hover{transform:translateY(-3px);box-shadow:0 12px 30px -12px rgba(90,75,68,.25);border-color:var(--mint)}
.card .tag{display:inline-block;background:var(--mint);color:#2f4a40;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;padding:3px 9px;border-radius:999px;margin-bottom:10px}

/* ── Article ── */
.crumb{font-size:14px;color:#8a7d6f;margin:24px 0 8px}
.crumb a{color:#8a7d6f}
article{padding:8px 0 40px;font-size:17px}
article h2{font-size:26px;margin:38px 0 14px;color:var(--brown);line-height:1.25}
article h3{font-size:20px;margin:28px 0 10px;color:var(--brown)}
article p{margin:0 0 18px;color:#4f433c}
article ul,article ol{margin:0 0 18px;padding-left:22px;color:#4f433c}
article li{margin:0 0 8px}
article strong{color:var(--brown)}
article a{color:#3f352f;text-decoration:underline;text-underline-offset:2px}
article blockquote{margin:24px 0;padding:14px 20px;border-left:4px solid var(--mint);background:#fff;border-radius:0 10px 10px 0;color:#5a4b44;font-style:italic}
article .lead{font-size:19px;color:#6b5d54}
article table{width:100%;border-collapse:collapse;margin:0 0 22px;font-size:15px}
article th,article td{border:1px solid var(--line);padding:10px 12px;text-align:left}
article th{background:#efe8d5}

/* ── CTA ── */
.cta{background:var(--brown);color:var(--cream);margin-top:24px}
.cta .wrap{padding:48px 1rem;text-align:center}
.cta h2{margin:0 0 8px;font-size:26px;color:#fff}
.cta p{margin:0 auto 22px;max-width:560px;color:#e7ddcf}
.btn{display:inline-block;margin:6px;background:var(--mint);color:#2f4a40;text-decoration:none;padding:13px 26px;border-radius:11px;font-weight:700;transition:transform .2s}
.btn:hover{transform:translateY(-2px)}
.btn.alt{background:transparent;color:var(--cream);border:1.5px solid var(--mint)}
.cta .related a{color:var(--mint);text-decoration:none;font-weight:600}

/* ── Footer ── */
footer.site{background:hsl(39,30%,92%);border-top:1px solid var(--line)}
footer.site .wrap{padding:32px 1rem;text-align:center}
.fbrand{display:inline-flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:18px;text-decoration:none;color:#2E2420}
.fbrand .mark{width:64px;height:64px;display:block}
.fbrand .bname{display:block;font-size:30px}
.fbrand .ftag{font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.fnav{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin-bottom:14px}
.fnav a{color:var(--brown);text-decoration:none;font-size:14px;font-weight:500;opacity:.85}
.fnav a:hover{opacity:1}
.fcopy{margin:0;font-size:13px;color:#8a7d6f}

.hero .pubdate{font-size:.85rem;opacity:.72;margin-top:8px}

/* Articles liés (fin d'article) */
.related-articles{padding:8px 0 40px}
.related-articles h2{font-size:1.15rem;margin:0 0 14px;color:var(--brown)}
.related-articles ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.related-articles li{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 16px}
.related-articles li a{color:var(--brown);font-weight:600;text-decoration:none}
.related-articles li a:hover{text-decoration:underline}
.related-articles .rtag{font-size:.72rem;color:#8a7d6f;text-transform:uppercase;letter-spacing:.06em}
.hero .pubdate a{color:inherit}
.reading .cover{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--line);margin:0 0 28px}
article a.lex{color:inherit;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px;text-decoration-color:var(--taupe)}
article a.lex:hover{color:var(--brown);text-decoration-style:solid}


/* ── Bandeau brun (BANDEAU_BRUN de Header.tsx) : nom en menthe, menu crème, bouton menthe ── */
header.site.brun{background:#5a4b44}
.brun .bname{color:#acd5c7}
.brun .nav a{color:#faf5e4}
.brun .nav a:hover,.brun .nav a.active{color:#fff}
.brun .nav a::after{background:#acd5c7}
.brun .hwrap .langs a{color:rgba(255,255,255,.8)}
.brun .hwrap .langs a:hover,.brun .hwrap .langs .cur{color:#fff}
.brun .hwrap .langs .sep{color:rgba(255,255,255,.4)}
.brun .hwrap .cta-btn{background:#acd5c7;color:#2E2420}
.brun .hwrap .cta-btn:hover{background:#c2e2d6}
.brun .burger{color:#faf5e4}