/* Articles du blog (extrait de article.html, refonte 16/10/2026) */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --bg: #FFFFFF; --bg2: #F5F5F0; --bg3: #EBEBEB;
      --border: rgba(0,0,0,0.08); --border2: rgba(0,0,0,0.16);
      --text: #1A1A1A; --muted: #6B7280; --muted2: #9CA3AF;
      --accent: #1A1A1A; --font-d: 'Barlow Condensed', sans-serif; --font-b: 'Barlow', sans-serif;
    }
    body { background: var(--bg); color: var(--text); font-family: var(--font-b); font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; }

    /* NAV */
    nav { position: sticky; top: 0; z-index: 200; height: 56px; background: rgba(255,255,255,0.95); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; padding: 0 2rem; }
    .logo { font-family: var(--font-d); font-size: 24px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text); text-decoration: none; }
    .logo span { color: var(--accent); }
    .nav-center { display: flex; gap: 24px; position: absolute; left: 50%; transform: translateX(-50%); }
    .nav-link { font-family: var(--font-d); font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); text-decoration: none; transition: color .15s; }
    .nav-link:hover { color: var(--text); }
    .nav-link.active { color: var(--text); }

    /* CONTAINER */
    .container { max-width: 1100px; margin: 0 auto; padding: 40px 2rem 100px; }

    /* BREADCRUMB */
    .breadcrumb { display: flex; align-items: center; gap: 8px; font-family: var(--font-d); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 24px; flex-wrap: wrap; }
    .breadcrumb a { color: var(--muted); text-decoration: none; transition: color .15s; }
    .breadcrumb a:hover { color: var(--text); }
    .breadcrumb .sep { color: var(--muted2); }

    /* HERO IMAGE */
    .hero-img { width: 100%; height: 400px; border-radius: 10px; object-fit: cover; margin-bottom: 28px; background: var(--bg2); }

    /* META LINE */
    .article-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
    .cat-pill { font-family: var(--font-d); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 12px; border-radius: 20px; background: var(--text); color: #fff; text-decoration: none; transition: opacity .15s; }
    .cat-pill:hover { opacity: 0.8; }
    .meta-text { font-size: 13px; color: var(--muted); }

    /* ARTICLE LAYOUT */
    .article-layout { display: grid; grid-template-columns: 1fr 280px; gap: 40px; align-items: start; }

    /* MAIN */
    .article-main { min-width: 0; }
    .article-main h1 { font-family: var(--font-d); font-size: clamp(36px, 5vw, 48px); font-weight: 800; line-height: 1.05; text-transform: uppercase; margin-bottom: 28px; }

    /* ARTICLE BODY */
    .article-body h2 { font-family: var(--font-d); font-size: 24px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; margin-top: 36px; margin-bottom: 14px; color: var(--text); scroll-margin-top: 80px; }
    .article-body h3 { font-family: var(--font-d); font-size: 18px; font-weight: 700; text-transform: uppercase; margin-top: 24px; margin-bottom: 10px; color: var(--text); }
    .article-body p { font-size: 16px; line-height: 1.8; color: var(--muted); margin-bottom: 16px; }
    .article-body ul, .article-body ol { padding-left: 24px; margin-bottom: 16px; }
    .article-body li { font-size: 15px; line-height: 1.7; color: var(--muted); margin-bottom: 6px; }
    .article-body img { max-width: 100%; border-radius: 8px; margin: 20px 0; display: block; }
    .article-body a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; transition: opacity .15s; }
    .article-body a:hover { opacity: 0.7; }

    /* BLOCKQUOTE */
    .article-body blockquote { border-left: 4px solid var(--accent); background: var(--bg2); padding: 16px 20px; margin: 20px 0; border-radius: 0 8px 8px 0; font-style: italic; }
    .article-body blockquote p { color: var(--text); margin-bottom: 0; }

    /* TABLES */
    .table-wrap { overflow-x: auto; margin: 20px 0; border-radius: 8px; border: 1px solid var(--border); }
    .article-body table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 500px; }
    .article-body table th { font-family: var(--font-d); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; background: var(--text); color: #fff; padding: 10px 14px; text-align: left; }
    .article-body table td { padding: 10px 14px; border-bottom: 1px solid var(--border); }
    .article-body table tr:nth-child(even) td { background: var(--bg2); }
    .article-body table tr:hover td { background: var(--bg3); }

    /* CHECK/CROSS TABLE CELLS */
    .article-body table td.cell-yes { background: #E8F5E9; color: #2E7D32; font-weight: 600; text-align: center; }
    .article-body table td.cell-no { background: #FFEBEE; color: #C62828; font-weight: 600; text-align: center; }
    .article-body table tr:nth-child(even) td.cell-yes { background: #D7ECD9; }
    .article-body table tr:nth-child(even) td.cell-no { background: #FCDEDE; }

    /* TIP BOX */
    .tip-box { background: var(--bg2); border-left: 4px solid var(--accent); border-radius: 0 8px 8px 0; padding: 16px 20px; margin: 20px 0; font-size: 14px; line-height: 1.7; }
    .tip-box strong { display: block; font-family: var(--font-d); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; color: var(--text); }
    .tip-box p { margin-bottom: 0; font-size: 14px; }

    /* PROGRAMMES RECOMMANDES */
    .reco-section { margin-top: 48px; }
    .section-title { font-family: var(--font-d); font-size: 32px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 20px; }
    .carousel-wrap { position: relative; }
    .carousel-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 8px; scrollbar-width: none; }
    .carousel-track::-webkit-scrollbar { display: none; }
    .carousel-card { flex: 0 0 300px; scroll-snap-align: start; background: var(--bg); padding: 24px; text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 12px; border: 1px solid var(--border); border-radius: 8px; transition: all 0.2s; }
    .carousel-card:hover { background: var(--bg2); box-shadow: 0 4px 20px rgba(0,0,0,0.08); transform: translateY(-2px); }
    .carousel-card .card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
    .carousel-card .card-note { font-family: var(--font-d); font-size: 13px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 4px; background: #FEF3C7; padding: 4px 10px; border-radius: 20px; }
    .carousel-card .card-title { font-family: var(--font-d); font-size: 22px; font-weight: 800; line-height: 1.05; text-transform: uppercase; }
    .carousel-card .card-desc { font-size: 13px; color: var(--muted); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .carousel-card .card-tags { margin-top: auto; display: flex; flex-wrap: wrap; gap: 5px; padding-top: 12px; border-top: 1px solid var(--border); align-items: center; }
    .duration-bar { display: flex; align-items: center; gap: 8px; width: 100%; }
    .duration-track { flex: 1; height: 4px; background: var(--bg3); border-radius: 2px; overflow: hidden; }
    .duration-fill { height: 100%; background: var(--text); border-radius: 2px; }
    .duration-label { font-family: var(--font-d); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
    .badge { font-family: var(--font-d); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 12px; border-radius: 2px; }
    .b-deb { background: #E8F5E9; color: #2E7D32; }
    .b-int { background: #FFF3E0; color: #E65100; }
    .b-adv { background: #FFEBEE; color: #C62828; }
    .tag { font-family: var(--font-d); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 12px; border-radius: 20px; }
    .tag-obj { background: var(--text); color: #FFFFFF; }
    .tag-info { background: transparent; color: var(--muted); border: 1px solid var(--border2); }
    .star-y { color: #F59E0B; }
    .carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; background: var(--text); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; opacity: 0.8; transition: opacity 0.2s; }
    .carousel-arrow:hover { opacity: 1; }
    .carousel-arrow.left { left: -12px; }
    .carousel-arrow.right { right: -12px; }

    /* SIDEBAR */
    .article-sidebar { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 76px; }
    .sidebar-card { background: #1A1A1A; border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; padding: 20px; color: #fff; }
    .sidebar-title { font-family: var(--font-d); font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 14px; }
    .toc-list { list-style: none; display: flex; flex-direction: column; gap: 2px; }
    .toc-list a { display: block; padding: 8px 12px; font-size: 13px; color: rgba(255,255,255,0.65); text-decoration: none; border-radius: 6px; transition: all .15s; line-height: 1.4; }
    .toc-list a:hover, .toc-list a.active { background: rgba(255,255,255,0.1); color: #fff; }

    /* SIMILAR ARTICLES CARD */
    .similar-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; padding: 20px; }
    .similar-title { font-family: var(--font-d); font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
    .similar-item { display: block; padding: 10px 0; border-bottom: 1px solid var(--border); text-decoration: none; color: inherit; transition: opacity .15s; }
    .similar-item:last-child { border-bottom: none; padding-bottom: 0; }
    .similar-item:hover { opacity: 0.7; }
    .similar-item-cat { font-family: var(--font-d); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted2); margin-bottom: 4px; }
    .similar-item-title { font-family: var(--font-d); font-size: 15px; font-weight: 700; text-transform: uppercase; color: var(--text); line-height: 1.2; }

    /* NOT FOUND */
    .not-found { text-align: center; padding: 100px 2rem; }
    .not-found h2 { font-family: var(--font-d); font-size: 48px; font-weight: 800; text-transform: uppercase; margin-bottom: 12px; }
    .not-found p { color: var(--muted); }
    .not-found a { color: var(--accent); text-decoration: none; font-family: var(--font-d); font-size: 14px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; display: inline-block; margin-top: 16px; }

    /* FOOTER */
    footer { background: var(--bg2); border-top: 1px solid var(--border); padding: 28px 2rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
    .footer-logo { font-family: var(--font-d); font-size: 18px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
    .footer-logo span { color: var(--accent); }
    footer small { font-size: 12px; color: var(--muted2); }

    /* ANIMATIONS */
    @keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
    .container { animation: fadeUp 0.3s ease both; }

    /* RESPONSIVE */
    @media (max-width: 800px) {
      .article-layout { grid-template-columns: 1fr; }
      .article-sidebar { position: static; order: 1; }
      .article-main { order: 2; }
      .hero-img { height: 240px; }
    }
    @media (max-width: 600px) {
      .container { padding: 28px 1.25rem 80px; }
      nav { flex-direction: column; height: auto; padding: 10px 1.25rem; gap: 6px; }
      .nav-center { position: static; transform: none; flex-wrap: wrap; justify-content: center; gap: 6px 16px; }
      .hero-img { height: 200px; border-radius: 8px; }
      .article-main h1 { font-size: 32px; }
    }

    /* SHARE BAR */
    .share-bar { position: fixed; left: 20px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 100; }
    .share-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.1); background: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
    .share-btn:hover { transform: scale(1.1); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
    .share-btn svg { width: 18px; height: 18px; }
    .share-btn.copied { background: #1A1A1A; border-color: #1A1A1A; }
    .share-btn.copied svg { stroke: #fff; fill: none; }
    .share-tooltip { position: absolute; left: 50px; top: 50%; transform: translateY(-50%); background: #1A1A1A; color: #fff; font-family: var(--font-d); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 6px 12px; border-radius: 6px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.2s; }
    .share-btn.copied .share-tooltip { opacity: 1; }
    @media (max-width: 800px) {
      .share-bar { position: fixed; left: 0; right: 0; top: auto; bottom: 0; transform: none; flex-direction: row; justify-content: center; gap: 12px; padding: 12px; background: rgba(255,255,255,0.95); backdrop-filter: blur(12px); border-top: 1px solid rgba(0,0,0,0.08); }
      .share-tooltip { display: none; }
    }