/* ===================================================
   Blog oltico.com : habillage des pages (en-tete, pied,
   liste, fin d'article). Le corps des articles porte son
   propre <style> scope sous .olt-article (voir CLAUDE.md).
   Palette et polices : celles du site (style.css).
   =================================================== */
:root{
  --bg-main:#ffffff;--bg-alt:#f6f6f8;--bg-surface-2:#f4f1fe;
  --border:rgba(17,17,26,.08);--border-hover:#8b5cf6;
  --text-primary:#111119;--text-secondary:#5b6170;--text-muted:#6b7280;
  --accent:#6d28d9;--accent-hover:#5b21b6;--accent-2:#8b5cf6;
  --gradient:linear-gradient(135deg,#6d28d9,#a78bfa);
  --font-heading:'Schibsted Grotesk',system-ui,sans-serif;
  --font-body:'Plus Jakarta Sans',system-ui,sans-serif;
  --radius:14px;--radius-lg:20px;
  --shadow-card:0 1px 2px rgba(17,17,26,.04),0 10px 28px rgba(17,17,26,.05);
  --max-width:1200px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body.b-body{margin:0;background:var(--bg-main);color:var(--text-primary);font-family:var(--font-body);line-height:1.6;-webkit-font-smoothing:antialiased}
.b-body a{color:inherit;text-decoration:none}
.b-body img{max-width:100%;height:auto;display:block}
.b-body h1,.b-body h2,.b-body h3{font-family:var(--font-heading);letter-spacing:-.02em;line-height:1.15;margin:0}

/* --- En-tete --- */
.bh{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.bh-in{max-width:var(--max-width);margin:0 auto;padding:0 24px;height:76px;display:flex;align-items:center;justify-content:space-between;gap:16px;transition:height .3s ease}
/* Comme sur la page d'accueil : l'en-tete se tasse des qu'on scrolle. */
.bh{transition:transform .3s ease,box-shadow .3s ease}
.bh.is-scrolled{box-shadow:0 1px 0 rgba(17,17,26,.06)}
/* Vers le bas, l'en-tete s'efface ; des qu'on remonte, il revient. */
.bh.is-hidden{transform:translateY(-100%)}
.bh.is-scrolled .bh-in{height:60px}
.bh.is-scrolled .bh-cta{padding:11px 22px;font-size:.9rem}
.bh-logo{font-family:var(--font-heading);font-weight:800;font-size:1.35rem;letter-spacing:-.03em;color:var(--text-primary)}
.bh-nav{display:flex;gap:4px}
.bh-nav a{font-size:.92rem;color:var(--text-secondary);padding:8px 12px;border-radius:10px;transition:.2s ease}
.bh-nav a:hover,.bh-nav a.is-current{color:var(--text-primary);background:var(--bg-surface-2)}
/* Boutons de prise de RDV : memes que .btn-primary du site (degrade, pilule, halo anime). */
.bh-cta,.b-article .olt-article .olt-cta a{display:inline-flex;align-items:center;gap:8px;background:var(--gradient);color:#fff;font-family:var(--font-heading);font-weight:600;font-size:.95rem;padding:15px 30px;border-radius:100px;transition:.2s ease;white-space:nowrap;position:relative;text-decoration:none;animation:glowPulse 3.5s ease-in-out infinite}
.b-body a.bh-cta,.b-body .olt-article .olt-cta a{color:#fff}
.bh-cta:hover,.b-article .olt-article .olt-cta a:hover{transform:translateY(-2px);filter:brightness(1.05)}
@keyframes glowPulse{0%,100%{box-shadow:0 6px 20px rgba(109,40,217,.25),0 0 0 0 rgba(109,40,217,.12)}50%{box-shadow:0 10px 30px rgba(109,40,217,.38),0 0 0 10px rgba(109,40,217,0)}}
.b-auteur a.b-btn,.b-liste-cta .bh-cta{margin-top:4px}
@media(max-width:760px){.bh-nav{display:none}.bh-in{height:64px}.bh .bh-cta{padding:11px 18px;font-size:.88rem}.bh.is-scrolled .bh-in{height:54px}.bh.is-scrolled .bh-cta{padding:9px 16px;font-size:.84rem}}

/* --- Article : chapeau --- */
.b-article{padding:32px 0 0}
.b-hero{max-width:820px;margin:0 auto;padding:16px 20px 8px}
.b-fil{font-size:.85rem;color:var(--text-muted);margin-bottom:18px}
.b-fil a{color:var(--text-muted)}
.b-fil a:hover{color:var(--accent)}
.b-hero h1{font-size:clamp(1.9rem,4.2vw,3rem);font-weight:800;color:var(--text-primary);margin-bottom:16px}
.b-meta{font-size:.9rem;color:var(--text-secondary);margin:0 0 8px}
.b-hero .b-meta{padding-bottom:20px;border-bottom:1px solid var(--border);margin-bottom:8px}

/* --- Fin d'article : auteur --- */
.b-fin{max-width:820px;margin:0 auto;padding:0 20px 56px}
.b-auteur{display:flex;gap:18px;align-items:flex-start;background:var(--bg-surface-2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px}
.b-auteur img{width:56px;height:56px;border-radius:14px;flex:none;background:#fff;padding:6px}
.b-auteur p{margin:0 0 8px;color:var(--text-secondary);font-size:.95rem;line-height:1.65}
.b-auteur .b-auteur-nom{font-family:var(--font-heading);font-weight:700;color:var(--text-primary);font-size:1.05rem}
.b-auteur a{color:var(--accent);font-weight:700}
@media(max-width:600px){.b-auteur{flex-direction:column}}

/* --- A lire aussi / liste --- */
.b-suite{background:var(--bg-alt);border-top:1px solid var(--border);padding:64px 24px}
.b-suite-in{max-width:var(--max-width);margin:0 auto}
.b-suite h2{font-size:1.6rem;font-weight:800;margin-bottom:28px}
.b-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px}
.b-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card);transition:.2s ease}
.b-card:hover{transform:translateY(-3px);border-color:#c4b5fd;box-shadow:0 0 40px rgba(109,40,217,.12)}
.b-card-img{aspect-ratio:16/9;background:var(--bg-surface-2);overflow:hidden}
.b-card-img img{width:100%;height:100%;object-fit:cover}
.b-card-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--gradient)}
.b-card-ph span{font-family:var(--font-heading);font-weight:800;font-size:1.6rem;color:rgba(255,255,255,.85);letter-spacing:-.03em}
.b-card-body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.b-cat{align-self:flex-start;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--accent);background:var(--bg-surface-2);padding:4px 10px;border-radius:999px}
.b-card h2{font-size:1.15rem;font-weight:700;line-height:1.3;color:var(--text-primary)}
.b-card p{margin:0;font-size:.92rem;color:var(--text-secondary);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;flex:1}
.b-card .b-meta{font-size:.82rem;color:var(--text-muted);margin:0}

.b-liste{max-width:var(--max-width);margin:0 auto;padding:56px 24px 80px}
.b-liste-head{max-width:760px;margin:0 auto 48px;text-align:center}
.b-sur{display:inline-block;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);margin-bottom:14px}
.b-liste-head h1{font-size:clamp(2rem,4.5vw,3.2rem);font-weight:800;margin-bottom:18px}
.b-liste-head p{color:var(--text-secondary);font-size:1.08rem;line-height:1.7;margin:0}
.b-vide{grid-column:1/-1;text-align:center;color:var(--text-secondary);padding:40px 0}
.b-liste-cta{margin:64px auto 0;max-width:760px;text-align:center;background:var(--text-primary);color:#fff;border-radius:var(--radius-lg);padding:40px 28px}
.b-liste-cta .b-liste-cta-t{font-family:var(--font-heading);font-size:1.5rem;font-weight:800;margin:0 0 10px}
.b-liste-cta p{margin:0 0 22px;color:#c9c6d6}

/* --- Pied de page --- */
.bf{background:var(--bg-alt);border-top:1px solid var(--border);padding:64px 24px 28px}
.bf-in{max-width:var(--max-width);margin:0 auto}
.bf-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;margin-bottom:48px}
.bf-brand p{font-size:.88rem;color:var(--text-secondary);line-height:1.7;max-width:280px;margin:12px 0 0}
.bf-col h3{font-family:var(--font-body);font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-primary);margin-bottom:14px}
.bf-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.bf-col a{font-size:.88rem;color:var(--text-secondary);transition:.2s ease}
.bf-col a:hover{color:var(--accent)}
.bf-bottom{border-top:1px solid var(--border);padding-top:24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.bf-bottom p{margin:0;font-size:.82rem;color:var(--text-muted)}
.bf-bottom a{color:var(--accent);font-weight:600}
@media(max-width:900px){.bf-top{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.bf-top{grid-template-columns:1fr}}