/* ============================================================
   PSYCHO CLAIR v2 — Design inspiré des leaders
   nospensees.fr · psychologies.com · psychologue.net
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Nunito:wght@400;500;600;700;800&display=swap');

/* ============================================================
   1. RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.7;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img  { max-width: 100%; height: auto; display: block; }
a    { color: var(--color-primary); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--color-primary-dark); }
ul   { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }
input, textarea { font: inherit; }
main { flex: 1; }

/* ============================================================
   2. VARIABLES CSS
   ============================================================ */
:root {
  /* Couleurs */
  --color-primary:       #1F4E6B;
  --color-primary-dark:  #133347;
  --color-primary-light: #EAF3F8;
  --color-accent:        #D4715A;
  --color-accent-dark:   #B55540;
  --color-accent-light:  #FBF0EE;
  --color-bg:            #FAFAF8;
  --color-surface:       #FFFFFF;
  --color-surface-2:     #F4F3F0;
  --color-text:          #1A1E2E;
  --color-text-muted:    #6B7280;
  --color-text-light:    #9CA3AF;
  --color-border:        #E5E7EB;
  --color-border-light:  #F3F4F6;

  /* Catégories */
  --cat-anxiete:    #7C3AED;
  --cat-depression: #1D4ED8;
  --cat-bienetre:   #059669;
  --cat-relations:  #BE185D;
  --cat-stress:     #B45309;
  --cat-sommeil:    #0369A1;
  --cat-therapies:  #6D28D9;
  --cat-dev:        #15803D;

  /* Typographie */
  --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Nunito', system-ui, -apple-system, sans-serif;

  /* Tailles de police */
  --fs-xs:   .75rem;
  --fs-sm:   .875rem;
  --fs-base: 1rem;
  --fs-md:   1.0625rem;
  --fs-lg:   1.1875rem;
  --fs-xl:   1.375rem;
  --fs-2xl:  1.75rem;
  --fs-3xl:  2.125rem;
  --fs-4xl:  2.75rem;
  --fs-5xl:  3.5rem;

  /* Espacement */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;
  --sp-4: 1rem;    --sp-5: 1.25rem; --sp-6: 1.5rem;
  --sp-8: 2rem;    --sp-10: 2.5rem; --sp-12: 3rem;
  --sp-16: 4rem;   --sp-20: 5rem;

  /* Bordures */
  --radius-sm:   4px;
  --radius:      8px;
  --radius-lg:   14px;
  --radius-xl:   22px;
  --radius-full: 9999px;

  /* Ombres */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow:    0 4px 16px rgba(0,0,0,.07), 0 1px 4px rgba(0,0,0,.04);
  --shadow-md: 0 8px 28px rgba(0,0,0,.09), 0 2px 8px rgba(0,0,0,.05);
  --shadow-lg: 0 16px 48px rgba(0,0,0,.12), 0 4px 16px rgba(0,0,0,.06);
  --shadow-accent: 0 8px 24px rgba(212,113,90,.25);

  /* Layout */
  --container-max: 1200px;
  --sidebar-w: 308px;
  --header-h: 64px;
  --catbar-h: 46px;
}

/* ============================================================
   3. TYPOGRAPHIE
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-text);
}
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl);  }
h4 { font-size: var(--fs-lg);  }
p  { margin-bottom: var(--sp-4); }
p:last-child { margin-bottom: 0; }

/* ============================================================
   4. LAYOUT
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--sp-5);
}
.layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-8);
  padding-top: var(--sp-10);
  padding-bottom: var(--sp-16);
}
@media (min-width: 1024px) {
  .layout { grid-template-columns: 1fr var(--sidebar-w); }
}
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ============================================================
   5. BARRE DE LECTURE (article page)
   ============================================================ */
#reading-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: var(--color-accent);
  z-index: 200;
  transition: width .1s linear;
  border-radius: 0 2px 2px 0;
}

/* ============================================================
   6. HEADER & NAVIGATION
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-surface);
  transition: box-shadow .3s ease;
}
.site-header.scrolled {
  box-shadow: 0 2px 16px rgba(0,0,0,.08);
}

.header-top {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--sp-5);
  border-bottom: 1px solid var(--color-border-light);
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: -.01em;
  flex-shrink: 0;
}
.logo:hover { color: var(--color-primary); opacity: .88; }
.logo__icon {
  width: 38px; height: 38px;
  background: linear-gradient(135deg, var(--color-primary) 0%, #2A6B8A 100%);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  box-shadow: 0 2px 8px rgba(31,78,107,.3);
  flex-shrink: 0;
}

/* Nav desktop */
.header-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}
.nav__link {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-text-muted);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius);
  transition: all .2s ease;
  letter-spacing: .01em;
}
.nav__link:hover, .nav__link--active {
  color: var(--color-primary);
  background: var(--color-primary-light);
}
.nav__cta {
  margin-left: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background: var(--color-accent);
  color: white !important;
  border-radius: var(--radius-full);
  font-size: var(--fs-sm);
  font-weight: 700;
  transition: all .2s ease;
}
.nav__cta:hover {
  background: var(--color-accent-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-accent);
}

/* Hamburger mobile */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: var(--sp-2);
  border-radius: var(--radius);
  transition: background .2s;
}
.hamburger span {
  display: block;
  width: 22px; height: 2px;
  background: var(--color-text);
  border-radius: 2px;
  transition: transform .25s ease;
}
.hamburger:hover { background: var(--color-border-light); }

/* Barre de catégories */
.cat-nav {
  background: var(--color-surface);
  border-bottom: 2px solid var(--color-border-light);
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.cat-nav::-webkit-scrollbar { display: none; }
.cat-nav__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--sp-5);
  height: var(--catbar-h);
}
.cat-nav__btn {
  white-space: nowrap;
  padding: var(--sp-1) var(--sp-4);
  border-radius: var(--radius-full);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-text-muted);
  transition: all .2s ease;
  flex-shrink: 0;
  letter-spacing: .01em;
}
.cat-nav__btn:hover {
  color: var(--color-primary);
  background: var(--color-primary-light);
}
.cat-nav__btn.active {
  background: var(--color-primary);
  color: white;
}
.cat-nav__divider {
  width: 1px;
  height: 18px;
  background: var(--color-border);
  flex-shrink: 0;
}

/* Mobile nav menu */
#nav-menu {
  display: flex;
}
@media (max-width: 768px) {
  .hamburger { display: flex; }
  .header-nav {
    display: none;
    position: absolute;
    top: var(--header-h);
    left: 0; right: 0;
    background: var(--color-surface);
    flex-direction: column;
    align-items: stretch;
    padding: var(--sp-4);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
    gap: var(--sp-1);
    z-index: 100;
  }
  .header-nav.nav--open { display: flex; }
  .nav__link { padding: var(--sp-3) var(--sp-4); }
  .nav__cta { margin-left: 0; text-align: center; }
}

/* ============================================================
   7. HERO
   ============================================================ */
.hero {
  background: linear-gradient(135deg, #1A3A50 0%, #2A6B8A 60%, #3A8EAD 100%);
  color: white;
  padding: var(--sp-12) var(--sp-5);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 20% 80%, rgba(255,255,255,.04) 0%, transparent 50%),
                    radial-gradient(circle at 80% 20%, rgba(255,255,255,.06) 0%, transparent 50%);
}
.hero::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 50px;
  background: var(--color-bg);
  clip-path: ellipse(55% 100% at 50% 100%);
}
.hero__content {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
  padding-bottom: var(--sp-4);
}
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255,255,255,.65);
  margin-bottom: var(--sp-4);
}
.hero__eyebrow::before, .hero__eyebrow::after {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background: rgba(255,255,255,.35);
}
.hero h1 {
  font-size: clamp(var(--fs-2xl), 4vw, var(--fs-4xl));
  color: white;
  line-height: 1.2;
  margin-bottom: var(--sp-4);
}
.hero h1 em {
  font-style: italic;
  color: rgba(255,255,255,.85);
}
.hero p {
  font-size: var(--fs-md);
  color: rgba(255,255,255,.8);
  margin-bottom: var(--sp-8);
  line-height: 1.7;
}

/* Barre de recherche hero */
.hero-search {
  display: flex;
  max-width: 500px;
  margin: 0 auto;
  background: white;
  border-radius: var(--radius-full);
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,.2);
}
.hero-search input {
  flex: 1;
  padding: var(--sp-3) var(--sp-5);
  border: none;
  outline: none;
  font-size: var(--fs-base);
  font-family: var(--font-body);
  color: var(--color-text);
  background: transparent;
}
.hero-search button {
  padding: var(--sp-3) var(--sp-5);
  background: var(--color-accent);
  color: white;
  font-weight: 700;
  font-size: var(--fs-sm);
  font-family: var(--font-body);
  white-space: nowrap;
  transition: background .2s;
  letter-spacing: .02em;
}
.hero-search button:hover { background: var(--color-accent-dark); }

/* ============================================================
   8. SECTION HEADERS
   ============================================================ */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-6);
  padding-bottom: var(--sp-4);
  border-bottom: 2px solid var(--color-border-light);
}
.section-header h2 {
  font-size: var(--fs-xl);
  font-family: var(--font-heading);
  position: relative;
  padding-left: var(--sp-4);
}
.section-header h2::before {
  content: '';
  position: absolute;
  left: 0; top: 15%; bottom: 15%;
  width: 3px;
  background: var(--color-accent);
  border-radius: 2px;
}
.section-header a {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-primary);
}
.section-header a:hover { text-decoration: underline; }

/* ============================================================
   9. CARTES D'ARTICLES
   ============================================================ */
.articles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
  gap: var(--sp-6);
}
@media (max-width: 640px) {
  .articles-grid { grid-template-columns: 1fr; gap: var(--sp-5); }
}

/* Carte standard */
.card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border-light);
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}

/* Image de la carte */
.card__image-link { display: block; overflow: hidden; flex-shrink: 0; }
.card__image {
  height: 200px;
  background-color: var(--color-primary-light);
  background-size: cover;
  background-position: center;
  transition: transform .4s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.card:hover .card__image { transform: scale(1.05); }

/* Image placeholder — dégradé par catégorie */
.card__image[data-cat="Anxiété"]                 { background: linear-gradient(135deg, #7C3AED22, #7C3AED44); }
.card__image[data-cat="Dépression"]              { background: linear-gradient(135deg, #1D4ED822, #1D4ED844); }
.card__image[data-cat="Bien-être"]               { background: linear-gradient(135deg, #05966922, #05966944); }
.card__image[data-cat="Relations"]               { background: linear-gradient(135deg, #BE185D22, #BE185D44); }
.card__image[data-cat="Stress"]                  { background: linear-gradient(135deg, #B4530922, #B4530944); }
.card__image[data-cat="Sommeil"]                 { background: linear-gradient(135deg, #036986 22, #0369A144); }
.card__image[data-cat="Thérapies"]               { background: linear-gradient(135deg, #6D28D922, #6D28D944); }
.card__image[data-cat="Développement personnel"] { background: linear-gradient(135deg, #15803D22, #15803D44); }

.card__image-placeholder {
  font-size: 3.5rem;
  opacity: .3;
  user-select: none;
}

/* Corps de la carte */
.card__body {
  padding: var(--sp-5);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.card__title {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  line-height: 1.35;
  font-weight: 700;
}
.card__title a { color: var(--color-text); }
.card__title a:hover { color: var(--color-primary); }
.card__excerpt {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card__meta {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--color-text-light);
  flex-wrap: wrap;
}
.card__meta-dot { color: var(--color-border); }

/* Carte FEATURED (premier article) */
.card--featured {
  grid-column: 1 / -1;
  flex-direction: row;
  min-height: 340px;
  position: relative;
  background: var(--color-text);
  border: none;
}
.card--featured .card__image-link {
  width: 55%;
  flex-shrink: 0;
}
.card--featured .card__image {
  height: 100%;
  min-height: 300px;
}
.card--featured .card__image::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(26,30,46,.7) 0%, transparent 100%);
}
.card--featured .card__body {
  padding: var(--sp-8);
  justify-content: center;
  background: white;
  flex: 1;
  gap: var(--sp-4);
}
.card--featured .card__title {
  font-size: var(--fs-2xl);
  line-height: 1.25;
}
.card--featured .card__excerpt {
  -webkit-line-clamp: 4;
  font-size: var(--fs-base);
}
.card--featured-label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--color-accent);
  margin-bottom: var(--sp-1);
}
.card--featured-label::before {
  content: '';
  display: block;
  width: 18px;
  height: 2px;
  background: var(--color-accent);
  border-radius: 1px;
}
.card--featured .card__read-more {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-5);
  background: var(--color-accent);
  color: white;
  border-radius: var(--radius-full);
  font-size: var(--fs-sm);
  font-weight: 700;
  width: fit-content;
  transition: all .2s ease;
}
.card--featured .card__read-more:hover {
  background: var(--color-accent-dark);
  transform: translateX(3px);
  color: white;
}
.card--featured .card__read-more::after { content: '→'; }

@media (max-width: 768px) {
  .card--featured { flex-direction: column; }
  .card--featured .card__image-link { width: 100%; }
  .card--featured .card__image { min-height: 220px; }
  .card--featured .card__body { padding: var(--sp-5); }
  .card--featured .card__title { font-size: var(--fs-xl); }
}

/* Bouton charger plus */
.load-more-wrap { text-align: center; margin-top: var(--sp-8); }
.btn-load-more {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-8);
  background: var(--color-surface);
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: var(--fs-sm);
  font-family: var(--font-body);
  letter-spacing: .02em;
  transition: all .2s ease;
}
.btn-load-more:hover {
  background: var(--color-primary);
  color: white;
  box-shadow: var(--shadow-colored);
}
#load-more { display: none; }

/* ============================================================
   10. BADGES
   ============================================================ */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  background: var(--color-primary-light);
  color: var(--color-primary);
  width: fit-content;
}
.badge--accent { background: var(--color-accent-light); color: var(--color-accent-dark); }
.badge--large  { font-size: var(--fs-xs); padding: 4px 12px; }

/* ============================================================
   11. SIDEBAR
   ============================================================ */
.sidebar { display: flex; flex-direction: column; gap: var(--sp-5); }

.widget {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-light);
  padding: var(--sp-5);
  overflow: hidden;
}
.widget--accent {
  background: linear-gradient(135deg, var(--color-primary) 0%, #2A6B8A 100%);
  border: none;
  color: white;
}

.widget__title {
  font-family: var(--font-heading);
  font-size: var(--fs-base);
  font-weight: 700;
  margin-bottom: var(--sp-4);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.widget__title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border-light);
  margin-left: var(--sp-2);
}
.widget--accent .widget__title::after { background: rgba(255,255,255,.2); }

/* À propos widget */
.widget-about p {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: 1.7;
  margin: 0;
}

/* Catégories sidebar */
.cat-filter-list { display: flex; flex-direction: column; gap: 2px; }
.cat-filter-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-text);
  transition: all .2s ease;
  text-align: left;
  font-family: var(--font-body);
}
.cat-filter-btn:hover, .cat-filter-btn.active {
  background: var(--color-primary-light);
  color: var(--color-primary);
}
.cat-filter-btn .count {
  font-size: .7rem;
  font-weight: 700;
  background: var(--color-border-light);
  color: var(--color-text-muted);
  padding: 1px 7px;
  border-radius: var(--radius-full);
  min-width: 24px;
  text-align: center;
}
.cat-filter-btn.active .count { background: var(--color-primary); color: white; }

/* Newsletter widget */
.widget--accent .widget__title { color: white; }
.newsletter-form { display: flex; flex-direction: column; gap: var(--sp-3); }
.newsletter-form p { font-size: var(--fs-sm); color: rgba(255,255,255,.8); margin: 0 0 var(--sp-1); }
.newsletter-input {
  padding: var(--sp-3) var(--sp-4);
  border: 2px solid rgba(255,255,255,.25);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  font-family: var(--font-body);
  width: 100%;
  outline: none;
  background: rgba(255,255,255,.15);
  color: white;
  transition: border-color .2s;
}
.newsletter-input::placeholder { color: rgba(255,255,255,.55); }
.newsletter-input:focus { border-color: rgba(255,255,255,.6); }
.btn-newsletter {
  padding: var(--sp-3) var(--sp-4);
  background: var(--color-accent);
  color: white;
  border-radius: var(--radius);
  font-weight: 800;
  font-size: var(--fs-sm);
  font-family: var(--font-body);
  letter-spacing: .03em;
  text-align: center;
  transition: all .2s ease;
  box-shadow: 0 4px 12px rgba(212,113,90,.3);
}
.btn-newsletter:hover { background: var(--color-accent-dark); transform: translateY(-1px); }

/* Articles liés sidebar */
.related-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.related-item {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-2);
  border-radius: var(--radius);
  transition: background .2s;
}
.related-item:hover { background: var(--color-bg); }
.related-item__img {
  width: 64px; height: 48px;
  border-radius: var(--radius);
  background: var(--color-primary-light);
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  overflow: hidden;
}
.related-item__info {}
.related-item__title {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.related-item:hover .related-item__title { color: var(--color-primary); }
.related-item__meta { font-size: var(--fs-xs); color: var(--color-text-light); margin-top: 2px; }

/* Recherche sidebar */
.search-widget {
  display: flex;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .2s;
}
.search-widget:focus-within { border-color: var(--color-primary); }
.search-widget input {
  flex: 1;
  padding: var(--sp-2) var(--sp-3);
  border: none;
  outline: none;
  font-size: var(--fs-sm);
  font-family: var(--font-body);
  background: transparent;
}
.search-widget button {
  padding: var(--sp-2) var(--sp-3);
  background: var(--color-primary);
  color: white;
  font-size: var(--fs-sm);
  transition: background .2s;
}
.search-widget button:hover { background: var(--color-primary-dark); }

/* Table des matières */
#toc { display: none; }
#toc.visible { display: block; }
#toc .widget__title { margin-bottom: var(--sp-3); }
#toc ol {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-left: var(--sp-4);
  counter-reset: toc;
}
#toc li {
  font-size: var(--fs-sm);
  list-style: decimal;
  color: var(--color-text-muted);
}
#toc li.sub { margin-left: var(--sp-3); list-style: disc; }
#toc a { color: var(--color-text-muted); line-height: 1.4; display: block; }
#toc a:hover { color: var(--color-primary); }

/* ============================================================
   12. PAGE ARTICLE
   ============================================================ */
.article-page { padding-top: var(--sp-8); }

/* Breadcrumb */
.breadcrumb {
  font-size: var(--fs-xs);
  color: var(--color-text-light);
  margin-bottom: var(--sp-5);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.breadcrumb a { color: var(--color-text-muted); }
.breadcrumb a:hover { color: var(--color-primary); }

/* En-tête article */
.article-header { margin-bottom: var(--sp-8); }
.article-header h1 {
  font-size: clamp(var(--fs-xl), 3.5vw, var(--fs-3xl));
  margin: var(--sp-4) 0 var(--sp-5);
  line-height: 1.2;
  letter-spacing: -.01em;
}
.article-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--color-border-light);
  border-bottom: 1px solid var(--color-border-light);
}
.article-meta strong { color: var(--color-text); }
.article-meta-dot { color: var(--color-border); }

/* Image hero article */
.article-hero-image {
  margin-top: var(--sp-6);
  border-radius: var(--radius-xl);
  overflow: hidden;
  max-height: 460px;
  box-shadow: var(--shadow-md);
}
.article-hero-image img {
  width: 100%;
  object-fit: cover;
}

/* Disclaimer */
.article-disclaimer {
  background: #FFFBEB;
  border-left: 3px solid #F59E0B;
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--sp-4) var(--sp-5);
  font-size: var(--fs-sm);
  color: #78350F;
  margin-bottom: var(--sp-8);
  line-height: 1.65;
}
.article-disclaimer a { color: #92400E; text-decoration: underline; }

/* Encadré points clés */
.article-keypoints {
  background: var(--color-primary-light);
  border: 1px solid rgba(31,78,107,.15);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  margin-bottom: var(--sp-8);
}
.article-keypoints__title {
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  color: var(--color-primary);
  margin-bottom: var(--sp-4);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.article-keypoints ul {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.article-keypoints li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--color-primary-dark);
  line-height: 1.6;
}
.article-keypoints li::before {
  content: '✓';
  color: var(--color-primary);
  font-weight: 800;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Corps de l'article */
.article-body {
  font-size: 1.075rem;
  line-height: 1.85;
  color: var(--color-text);
}
.article-body h2 {
  font-size: var(--fs-2xl);
  margin: var(--sp-12) 0 var(--sp-4);
  color: var(--color-primary-dark);
  padding-left: var(--sp-4);
  border-left: 3px solid var(--color-accent);
}
.article-body h3 {
  font-size: var(--fs-xl);
  margin: var(--sp-8) 0 var(--sp-3);
}
.article-body p { margin-bottom: var(--sp-5); }
.article-body ul, .article-body ol {
  padding-left: var(--sp-6);
  margin-bottom: var(--sp-5);
}
.article-body li { margin-bottom: var(--sp-2); }
.article-body ul li { list-style: disc; }
.article-body ol li { list-style: decimal; }
.article-body blockquote {
  border-left: 3px solid var(--color-accent);
  padding: var(--sp-5) var(--sp-6);
  background: var(--color-accent-light);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  margin: var(--sp-8) 0;
  font-style: italic;
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  color: var(--color-accent-dark);
  line-height: 1.6;
}
.article-body blockquote cite {
  display: block;
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  font-style: normal;
  font-family: var(--font-body);
  color: var(--color-text-muted);
}
.article-body strong { font-weight: 800; }
.article-body a { text-decoration: underline; text-underline-offset: 3px; }
.article-body img {
  border-radius: var(--radius-lg);
  margin: var(--sp-8) auto;
  box-shadow: var(--shadow-md);
}
.article-body hr {
  border: none;
  border-top: 2px solid var(--color-border-light);
  margin: var(--sp-10) 0;
}
/* Encadré info générique */
.article-body .info-box {
  background: var(--color-primary-light);
  border: 1px solid rgba(31,78,107,.15);
  border-radius: var(--radius-lg);
  padding: var(--sp-5) var(--sp-6);
  margin: var(--sp-8) 0;
  font-size: var(--fs-sm);
  line-height: 1.7;
}

/* Auteur */
.article-author {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  margin: var(--sp-10) 0 var(--sp-8);
}
.article-author__avatar {
  width: 56px; height: 56px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}
.article-author__name {
  font-weight: 700;
  font-size: var(--fs-base);
  color: var(--color-text);
}
.article-author__role {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* Tags */
.article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: var(--sp-6) 0;
}
.tag {
  padding: 4px 12px;
  background: var(--color-bg);
  color: var(--color-text-muted);
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: 700;
  border: 1px solid var(--color-border);
  transition: all .2s;
}
.tag:hover { background: var(--color-primary-light); color: var(--color-primary); border-color: transparent; }

/* Partage */
.article-share {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding: var(--sp-5) var(--sp-6);
  background: var(--color-bg);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  margin-bottom: var(--sp-8);
}
.share-label {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.share-btn {
  padding: 6px var(--sp-4);
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: 700;
  font-family: var(--font-body);
  letter-spacing: .03em;
  transition: all .2s ease;
}
.share-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.share-btn--fb   { background: #1877F2; color: white; }
.share-btn--tw   { background: #1DA1F2; color: white; }
.share-btn--wa   { background: #25D366; color: white; }
.share-btn--copy { background: var(--color-border-light); color: var(--color-text); }

/* ============================================================
   13. PUBLICITÉS (masquées — activées après approbation AdSense)
   ============================================================ */
.ad-container { display: none; }
.ad-banner-top { display: none; }
.ad-placeholder { display: none; }

/* Décommenter lors de l'activation :
.ad-container {
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  text-align: center;
  overflow: hidden;
}
.ad-container::before {
  content: 'Publicité';
  display: block;
  font-size: var(--fs-xs);
  color: var(--color-text-light);
  padding: var(--sp-1);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.ad-container--inline { margin: var(--sp-8) 0; min-height: 100px; }
.ad-container--sidebar { min-height: 250px; }
.ad-banner-top {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: var(--sp-2) 0;
  text-align: center;
}
*/

/* ============================================================
   14. PIED DE PAGE
   ============================================================ */
.site-footer {
  background: #111827;
  color: rgba(255,255,255,.6);
  padding: var(--sp-16) 0 var(--sp-8);
  margin-top: auto;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--sp-10);
  margin-bottom: var(--sp-10);
}
@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr; gap: var(--sp-8); }
}
.footer-brand .logo {
  color: white;
  margin-bottom: var(--sp-4);
}
.footer-brand .logo__icon { box-shadow: none; }
.footer-brand p { font-size: var(--fs-sm); line-height: 1.7; max-width: 320px; }
.footer-col h4 {
  font-family: var(--font-heading);
  font-size: var(--fs-base);
  color: white;
  margin-bottom: var(--sp-4);
}
.footer-links { display: flex; flex-direction: column; gap: var(--sp-2); }
.footer-links a {
  font-size: var(--fs-sm);
  color: rgba(255,255,255,.5);
  transition: color .2s;
}
.footer-links a:hover { color: white; }

.footer-disclaimer {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-5);
  font-size: var(--fs-xs);
  color: rgba(255,255,255,.4);
  margin-bottom: var(--sp-8);
  line-height: 1.65;
}
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: var(--sp-6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-4);
  font-size: var(--fs-xs);
  color: rgba(255,255,255,.35);
}

/* ============================================================
   15. BANNIÈRE COOKIES
   ============================================================ */
#cookie-banner {
  display: none;
  position: fixed;
  bottom: var(--sp-4);
  left: var(--sp-4);
  right: var(--sp-4);
  max-width: 560px;
  margin: 0 auto;
  z-index: 1000;
  background: #1A1F2E;
  color: rgba(255,255,255,.85);
  padding: var(--sp-5) var(--sp-6);
  gap: var(--sp-4);
  align-items: flex-start;
  flex-direction: column;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255,255,255,.08);
}
.cookie-text { font-size: var(--fs-sm); line-height: 1.6; }
.cookie-text a { color: #7EB8D0; }
.cookie-buttons { display: flex; gap: var(--sp-3); }
.btn-cookie {
  padding: var(--sp-2) var(--sp-5);
  border-radius: var(--radius-full);
  font-size: var(--fs-sm);
  font-weight: 700;
  font-family: var(--font-body);
  transition: all .2s;
}
.btn-cookie--accept { background: #10B981; color: white; }
.btn-cookie--accept:hover { background: #059669; }
.btn-cookie--decline { background: rgba(255,255,255,.1); color: rgba(255,255,255,.65); }
.btn-cookie--decline:hover { background: rgba(255,255,255,.18); }

/* ============================================================
   16. SKELETONS
   ============================================================ */
@keyframes shimmer {
  0%   { background-position: -800px 0; }
  100% { background-position:  800px 0; }
}
.skeleton-box,
.skeleton-line {
  background: linear-gradient(90deg, #f0f0ee 25%, #e5e5e3 50%, #f0f0ee 75%);
  background-size: 800px 100%;
  animation: shimmer 1.6s ease-in-out infinite;
  border-radius: var(--radius);
}
.card--skeleton { pointer-events: none; box-shadow: none; }
.card--skeleton .card__image { background: #f0f0ee; animation: shimmer 1.6s ease-in-out infinite; background-size: 800px 100%; }
.skeleton-line  { height: 14px; margin-bottom: var(--sp-3); }
.skeleton-line.w-20 { width: 20%; }
.skeleton-line.w-40 { width: 40%; }
.skeleton-line.w-60 { width: 60%; }
.skeleton-line.w-80 { width: 80%; }
.skeleton-line.h-large { height: 20px; }
.skeleton-line.mt-8 { margin-top: var(--sp-4); }

/* ============================================================
   17. ÉTATS VIDES
   ============================================================ */
.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--sp-20) var(--sp-5);
  color: var(--color-text-muted);
}
.empty-state__icon { font-size: 3.5rem; margin-bottom: var(--sp-4); opacity: .4; }
.empty-state p { font-size: var(--fs-lg); font-family: var(--font-heading); }
.empty-state small { font-size: var(--fs-sm); color: var(--color-text-light); }

/* ============================================================
   18. PAGE 404
   ============================================================ */
.error-page {
  text-align: center;
  padding: var(--sp-20) var(--sp-5);
  max-width: 520px;
  margin: 0 auto;
}
.error-code {
  font-size: 7rem;
  font-weight: 700;
  font-family: var(--font-heading);
  color: var(--color-primary-light);
  line-height: 1;
  display: block;
  letter-spacing: -.03em;
}
.error-page h1 { margin: var(--sp-4) 0 var(--sp-3); font-size: var(--fs-2xl); }
.error-page p  { color: var(--color-text-muted); margin-bottom: var(--sp-8); }
.btn-home {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-8);
  background: var(--color-primary);
  color: white;
  border-radius: var(--radius-full);
  font-weight: 700;
  font-family: var(--font-body);
  transition: all .2s ease;
}
.btn-home:hover { background: var(--color-primary-dark); color: white; box-shadow: var(--shadow-colored); }

/* ============================================================
   19. RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  :root { --sidebar-w: 280px; }
}
@media (max-width: 768px) {
  h1 { font-size: var(--fs-2xl); }
  h2 { font-size: var(--fs-xl); }
  .hero { padding: var(--sp-10) var(--sp-5); }
  .article-body { font-size: var(--fs-base); }
  .article-body h2 { font-size: var(--fs-xl); margin-top: var(--sp-8); }
  .article-share { justify-content: center; }
  .footer-bottom { flex-direction: column; text-align: center; }
}
@media (max-width: 480px) {
  .hero h1 { font-size: var(--fs-xl); }
  .section-header h2 { font-size: var(--fs-lg); }
  #cookie-banner { left: var(--sp-3); right: var(--sp-3); bottom: var(--sp-3); }
}