/* =================================================================
 * AlephBeth — app.css (front public)
 * Charte inspirée du WP actuel (alephbeth.net) :
 *   - Hero massif avec image en fond + titre blanc
 *   - Breadcrumb avec chevrons rose/accent
 *   - Layout 2 colonnes sur les articles (contenu + sidebar)
 *   - Cards d'articles riches (badge catégorie, titre, date)
 *   - Palette dorée discrète, fonds clairs, sérifs pour le contenu
 * ================================================================= */

:root {
    --color-bg:        #faf8f4;
    --color-surface:   #ffffff;
    --color-text:      #1b1c1f;
    --color-muted:     #5f6773;
    --color-faint:     #9aa1ad;
    --color-accent:    #b08134;
    --color-accent-dk: #8a6226;
    --color-rose:      #d94d6b;   /* breadcrumb / chevrons, comme sur le WP */
    --color-rose-dk:   #b43955;
    --color-border:    #e5ddd1;
    --color-hover:     #f2ece0;
    --color-black:     #0f1113;

    --radius: 6px;
    --radius-lg: 10px;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .05);
    --shadow: 0 2px 8px rgba(0, 0, 0, .07), 0 8px 24px rgba(0, 0, 0, .05);
    --shadow-lg: 0 20px 40px rgba(0, 0, 0, .1);

    --max-width: 1200px;
    --content-width: 1080px;

    --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-serif: Georgia, "Times New Roman", serif;
    --font-display: Georgia, "Times New Roman", serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

    --space-1: .25rem; --space-2: .5rem; --space-3: 1rem;
    --space-4: 1.5rem; --space-5: 2rem;  --space-6: 3rem; --space-7: 4.5rem;
}

* { box-sizing: border-box; }
html, body {
    margin: 0; padding: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-serif);
    font-size: 18px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}
html[dir="rtl"] body { font-family: var(--font-sans); }

img, video, picture { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
a { color: var(--color-accent-dk); text-decoration: none; transition: color .15s; }
a:hover { color: var(--color-accent); text-decoration: underline; }

h1, h2, h3, h4 {
    font-family: var(--font-sans);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.01em;
    margin: 0 0 var(--space-3);
    color: var(--color-text);
}
h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
h2 { font-size: clamp(1.35rem, 3vw, 1.85rem); }
h3 { font-size: 1.15rem; }

/* Accessibilité ----------------------------------------------------- */
.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;
}
.skip-link {
    position: absolute; top: -40px; left: var(--space-3);
    background: var(--color-text); color: #fff;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius);
    transition: top .2s;
}
.skip-link:focus { top: var(--space-2); }

/* ================== Header ==================== */
.site-header {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 9000;
    box-shadow: var(--shadow-sm);
}
/* Permet aux dropdowns de sortir du header sans être clippés */
.site-header, .site-header__nav-wrap, .site-header__top { overflow: visible; }
/* Ligne 1 : logo à gauche, search + langues à droite */
.site-header__top {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--space-3) var(--space-3) var(--space-2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}
.site-header__tools {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}
/* Ligne 2 : menu centré, pleine largeur, séparateur au-dessus */
.site-header__nav-wrap {
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
}
.site-header__nav-wrap .site-nav {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--space-3);
}
.site-header__nav-wrap .site-nav__list {
    justify-content: center;
    padding: var(--space-2) 0;
}
@media (max-width: 720px) {
    .site-header__nav-wrap .site-nav__list { justify-content: flex-start; }
}

.site-logo {
    display: flex; flex-direction: column;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.55rem;
    color: var(--color-text);
    text-decoration: none;
    line-height: 1.1;
    letter-spacing: -.02em;
}
.site-logo:hover { color: var(--color-accent-dk); text-decoration: none; }
.site-baseline {
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: .78rem;
    color: var(--color-muted);
    margin-top: 3px;
    letter-spacing: .02em;
    font-style: italic;
}

/* Nav principal — overflow visible pour que les dropdowns ne soient pas clippés.
   Sur mobile seulement, scroll horizontal (pas de dropdown au toucher). */
.site-nav { overflow: visible; }
@media (max-width: 720px) {
    .site-nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .site-nav::-webkit-scrollbar { display: none; }
}
.site-nav__list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex; flex-wrap: nowrap; gap: 0;
    font-family: var(--font-sans);
    font-size: .88rem;
    font-weight: 500;
    white-space: nowrap;
}
@media (min-width: 960px) { .site-nav__list { flex-wrap: wrap; } }
.site-nav__item { position: relative; flex-shrink: 0; }
.site-nav__item > a {
    color: var(--color-text);
    padding: var(--space-2) var(--space-3);
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: .78rem;
    font-weight: 600;
    border-bottom: 2px solid transparent;
    transition: color .15s, border-color .15s;
}
.site-nav__item > a:focus { outline: none; border-bottom-color: var(--color-accent); color: var(--color-accent-dk); }
.site-nav__item > a:hover {
    color: var(--color-accent-dk);
    text-decoration: none;
    border-bottom-color: var(--color-accent);
}
.site-nav__sub { list-style: none; margin: 0; padding: var(--space-2) 0; display: none; }
.site-nav__item.has-children:hover .site-nav__sub,
.site-nav__item.has-children:focus-within .site-nav__sub {
    display: block;
    position: absolute; top: 100%; left: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    min-width: 260px;
    box-shadow: var(--shadow);
    z-index: 9999;
    padding: var(--space-2) 0;
}
.site-nav__item.has-children > a::after {
    content: '▾';
    margin-left: 4px;
    font-size: .7em;
    color: var(--color-muted);
}
.site-nav__sub a {
    display: block; padding: var(--space-2) var(--space-3);
    color: var(--color-text);
    font-size: .85rem;
    text-transform: none;
    letter-spacing: 0;
}
.site-nav__sub a:hover { background: var(--color-hover); text-decoration: none; }

/* Lang switch */
.lang-switch { display: flex; gap: 2px; font-family: var(--font-sans); font-size: .78rem; align-items: center; }
.lang-switch__link { padding: 4px 8px; border-radius: var(--radius); color: var(--color-muted); font-weight: 600; letter-spacing: .04em; }
.lang-switch__link:hover { background: var(--color-hover); color: var(--color-accent-dk); text-decoration: none; }
.lang-switch__link.is-active { background: var(--color-accent-dk); color: #fff; }

/* Search */
.site-search {
    display: flex; gap: var(--space-1);
    font-family: var(--font-sans);
}
.site-search input[type="search"] {
    flex: 1;
    padding: .5rem .8rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
    font: inherit; font-size: .88rem;
    color: var(--color-text);
    min-width: 0;
    max-width: 260px;
}
.site-search input:focus { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.site-search button {
    padding: .5rem 1rem;
    background: var(--color-accent-dk); color: #fff;
    border: 0; border-radius: var(--radius);
    font: inherit; font-size: .85rem; font-weight: 600;
    cursor: pointer;
}
.site-search button:hover { background: var(--color-accent); }

/* ================== Main content ==================== */
.site-main { min-height: 60vh; }

.content-wrap {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0 var(--space-3);
}

/* ================== Home hero — massif, immersif ==================== */
.home-hero {
    position: relative;
    text-align: center;
    padding: clamp(4rem, 10vw, 7rem) var(--space-3) clamp(4rem, 10vw, 8rem);
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    overflow: hidden;
    background:
        radial-gradient(ellipse at top, rgba(176, 129, 52, .3) 0%, transparent 60%),
        radial-gradient(ellipse at bottom, rgba(0, 0, 0, .4) 0%, transparent 60%),
        linear-gradient(135deg, #1a1410 0%, #2e2217 50%, #3d2f1f 100%);
    background-size: cover;
    background-position: center;
    margin-bottom: var(--space-6);
    border-bottom: 1px solid var(--color-border);
}
.home-hero--with-img {
    /* Le style inline écrase la `background:` ci-dessus ; on force cover/center */
    background-size: cover !important;
    background-position: center !important;
}
/* Subtile grain pour le relief */
.home-hero::after {
    content: '';
    position: absolute; inset: 0;
    background-image:
        linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.4) 100%);
    pointer-events: none;
}
.home-hero > * { position: relative; z-index: 1; }
.home-hero__kicker {
    font-family: var(--font-sans);
    font-size: clamp(.85rem, 1.5vw, 1rem);
    letter-spacing: .25em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .75);
    margin: 0 0 var(--space-3);
    font-weight: 500;
}
.home-hero__title {
    font-family: var(--font-display);
    font-size: clamp(3rem, 10vw, 7rem);
    line-height: .95;
    margin: 0;
    color: var(--color-accent);
    letter-spacing: -.04em;
    font-weight: 700;
    text-shadow: 0 4px 30px rgba(0, 0, 0, .5);
}
.home-hero__baseline {
    font-family: var(--font-serif);
    font-style: italic;
    color: rgba(255, 255, 255, .9);
    font-size: clamp(1.1rem, 2.2vw, 1.6rem);
    margin: var(--space-4) 0 0;
    max-width: 640px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .4);
}

/* ================== Home categories ==================== */
.home-cat {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--space-5) var(--space-3) var(--space-6);
}
.home-cat__head { margin-bottom: var(--space-4); text-align: center; }
.home-cat__title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    margin: 0 0 var(--space-2);
    color: var(--color-text);
    letter-spacing: -.02em;
    font-weight: 700;
}
.home-cat__title a { color: inherit; }
.home-cat__title a:hover { color: var(--color-accent-dk); text-decoration: none; }
.home-cat__desc {
    color: var(--color-muted);
    font-size: 1.02rem;
    max-width: 640px;
    margin: 0 auto;
}
.home-cat__more {
    text-align: center;
    margin-top: var(--space-4);
}
.home-cat__more .btn-link {
    font-family: var(--font-sans);
    font-size: .92rem;
    color: var(--color-accent-dk);
    font-weight: 600;
}

/* Grille 4 colonnes (desktop) / 3 / 2 / 1 selon viewport */
.post-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}
@media (min-width: 600px)  { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .post-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .post-grid { grid-template-columns: repeat(4, 1fr); } }

/* Card "Elementor-like" */
.post-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex; flex-direction: column;
    position: relative;
    transition: transform .18s ease, box-shadow .18s ease;
}
.post-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}
.post-card__thumb {
    display: block;
    aspect-ratio: 16 / 10;
    background: var(--color-hover);
    overflow: hidden;
    position: relative;
}
.post-card__thumb img, .post-card__thumb picture {
    width: 100%; height: 100%; object-fit: cover;
    display: block;
    transition: transform .35s ease;
}
.post-card:hover .post-card__thumb img { transform: scale(1.04); }
.post-card__placeholder {
    display: block; width: 100%; height: 100%;
    background: linear-gradient(135deg, var(--color-hover), var(--color-border));
}
.post-card__badge {
    position: absolute;
    top: 10px; left: 10px;
    z-index: 2;
}
.post-card__badge a {
    display: inline-block;
    padding: 3px 10px;
    background: var(--color-accent-dk);
    color: #fff;
    font-family: var(--font-sans);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
.post-card__badge a:hover { background: var(--color-accent); text-decoration: none; }

.post-card__body {
    padding: var(--space-3);
    display: flex; flex-direction: column;
    flex: 1; gap: var(--space-2);
}
.post-card__title {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
    letter-spacing: -.005em;
}
.post-card__title a { color: var(--color-text); }
.post-card__title a:hover { color: var(--color-accent-dk); text-decoration: none; }
.post-card__more {
    font-family: var(--font-sans);
    font-size: .8rem;
    font-weight: 600;
    color: var(--color-accent-dk);
    margin-top: auto;
}
.post-card__meta {
    font-family: var(--font-sans);
    font-size: .75rem;
    color: var(--color-muted);
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border);
    margin-top: var(--space-2);
}

/* ================== Home latest block ==================== */
.home-latest {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--space-5) var(--space-3) var(--space-6);
    border-top: 1px solid var(--color-border);
}

/* Card grid générique (articles_card partial) */
.card-grid {
    display: grid; grid-template-columns: 1fr;
    gap: var(--space-4);
}
@media (min-width: 640px)  { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px)  { .card-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .card-grid { grid-template-columns: repeat(4, 1fr); } }
.card-grid--compact { gap: var(--space-3); }

.section-title {
    font-family: var(--font-display);
    font-size: 1.6rem;
    margin: 0 0 var(--space-4);
    padding-bottom: var(--space-2);
    border-bottom: 2px solid var(--color-border);
    letter-spacing: -.01em;
}
.section-title a { color: inherit; }

/* ================== Article hero (pleine largeur) ==================== */
.article-hero {
    position: relative;
    min-height: 440px;
    background-color: var(--color-black);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    padding: var(--space-6) var(--space-3);
    margin-bottom: 0;
}
.article-hero--no-img {
    min-height: 200px;
    background: linear-gradient(135deg, #3a2e1a 0%, #1a1612 100%);
}
.article-hero__inner {
    max-width: 920px;
}
.article-hero__title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3.8rem);
    line-height: 1.1;
    margin: 0;
    color: #fff;
    text-shadow: 0 2px 20px rgba(0, 0, 0, .55);
    letter-spacing: -.02em;
}
.article-hero__subtitle {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(1rem, 2vw, 1.3rem);
    margin: var(--space-3) 0 0;
    color: rgba(255, 255, 255, .92);
    text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}

/* ================== Breadcrumb rose ==================== */
.crumbs {
    max-width: var(--max-width);
    margin: var(--space-4) auto 0;
    padding: 0 var(--space-3);
    font-family: var(--font-sans);
    font-size: .9rem;
}
.crumbs__list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex; flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-muted);
}
.crumbs__list li { display: inline-flex; align-items: center; gap: var(--space-2); }
.crumbs__list li + li::before {
    content: '»';
    color: var(--color-rose);
    font-weight: 700;
    font-size: 1rem;
    margin-right: var(--space-1);
}
.crumbs__list a { color: var(--color-rose); font-weight: 600; }
.crumbs__list a:hover { color: var(--color-rose-dk); text-decoration: underline; }
.crumbs__list [aria-current="page"] { color: var(--color-text); }

/* ================== Layout 2 colonnes (article) ==================== */
.article-layout {
    max-width: var(--max-width);
    margin: var(--space-5) auto var(--space-6);
    padding: 0 var(--space-3);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
}
@media (min-width: 1050px) {
    .article-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-6); }
}

.article-main { min-width: 0; overflow-wrap: break-word; word-wrap: break-word; }
.article-sidebar { min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); position: sticky; top: calc(80px + var(--space-3)); align-self: start; }
@media (max-width: 1050px) { .article-sidebar { position: static; } }

/* Image à la une */
.article-feature {
    margin: 0 0 var(--space-4);
}
.article-feature img, .article-feature picture {
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}
.article-feature__caption {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: .92rem;
    color: var(--color-muted);
    text-align: center;
    margin-top: var(--space-2);
}

/* Article full */
.article-full {
    font-size: 1.08rem;
    line-height: 1.75;
}
.article-full__head { margin-bottom: var(--space-4); }
.article-full__category {
    font-family: var(--font-sans);
    font-size: .8rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-accent-dk);
    margin: 0 0 var(--space-2);
    font-weight: 600;
}
.article-full__category a { color: inherit; }
.article-full__title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    margin: 0 0 var(--space-2);
    letter-spacing: -.02em;
    line-height: 1.15;
}
.article-full__meta {
    font-family: var(--font-sans);
    font-size: .85rem;
    color: var(--color-muted);
    margin: 0 0 var(--space-4);
}
.article-full__meta time { color: var(--color-text); font-weight: 500; }
.article-full__views { color: var(--color-accent-dk); font-weight: 500; }

.article-full__lead {
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.55;
    border-left: 3px solid var(--color-accent);
    padding-left: var(--space-3);
    margin: var(--space-4) 0;
    color: var(--color-text);
    font-style: italic;
}
html[dir="rtl"] .article-full__lead {
    border-left: 0; border-right: 3px solid var(--color-accent);
    padding-left: 0; padding-right: var(--space-3);
}

.article-full__body p { margin: 0 0 var(--space-3); }
.article-full__body h2 { font-size: 1.75rem; margin: var(--space-5) 0 var(--space-3); color: var(--color-text); }
.article-full__body h3 { font-size: 1.35rem; margin: var(--space-4) 0 var(--space-2); color: var(--color-text); }
.article-full__body h4 { font-size: 1.15rem; margin: var(--space-3) 0 var(--space-2); }
.article-full__body blockquote {
    border-left: 3px solid var(--color-border);
    padding: var(--space-2) 0 var(--space-2) var(--space-4);
    color: var(--color-muted);
    font-style: italic;
    margin: var(--space-4) 0;
    font-size: 1.1rem;
}
.article-full__body a { color: var(--color-accent-dk); text-decoration: underline; text-underline-offset: 3px; }
.article-full__body ul, .article-full__body ol { padding-left: var(--space-5); margin: 0 0 var(--space-3); }
.article-full__body img, .article-full__body picture {
    border-radius: var(--radius);
    margin: var(--space-4) 0;
    box-shadow: var(--shadow-sm);
}
.article-full__body table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-4) 0;
    font-size: .95rem;
}
.article-full__body table th, .article-full__body table td {
    border: 1px solid var(--color-border);
    padding: .55rem .7rem;
    vertical-align: top;
    text-align: left;
}
.article-full__body table th { background: var(--color-hover); font-weight: 600; }
.article-full__body hr { border: 0; border-top: 1px solid var(--color-border); margin: var(--space-5) 0; }
.article-full__body pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    background: var(--color-hover);
    border: 1px solid var(--color-border);
    padding: var(--space-3);
    border-radius: var(--radius);
    font-family: var(--font-serif);
    font-size: 1rem;
    line-height: 1.7;
    margin: var(--space-3) 0;
}
.article-full__body pre code { white-space: pre-wrap; }
.article-full, .article-full__body { max-width: 100%; overflow-wrap: break-word; }
/* Protection globale contre les overflow d'enfants (iframes, tableaux larges, etc.) */
.article-main > * { max-width: 100%; }
.article-main img, .article-main video, .article-main iframe { max-width: 100%; height: auto; }
.article-full__body table { display: block; overflow-x: auto; max-width: 100%; }

/* ================== Table des matières ==================== */
.toc {
    background: var(--color-hover);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-3) var(--space-4);
    margin: var(--space-4) 0;
    font-family: var(--font-sans);
    font-size: .92rem;
}
.toc__header {
    cursor: pointer;
    font-weight: 700;
    color: var(--color-accent-dk);
    font-size: .95rem;
    padding: 0;
    list-style: none;
    display: flex; justify-content: space-between; align-items: center;
}
.toc__header::after {
    content: '▾'; font-size: .8em; color: var(--color-muted);
    transition: transform .2s;
}
.toc[open] .toc__header::after { transform: rotate(180deg); }
.toc__list {
    list-style: none;
    padding: var(--space-3) 0 0;
    margin: 0;
    counter-reset: toc;
}
.toc__item {
    padding: .2rem 0;
    counter-increment: toc;
}
.toc__item a { color: var(--color-muted); }
.toc__item a:hover { color: var(--color-accent-dk); }
.toc__item a::before {
    content: counter(toc) '. ';
    color: var(--color-accent);
    font-weight: 600;
    margin-right: .35rem;
}
.toc__item--h3 { padding-left: var(--space-4); font-size: .88rem; }
.toc__item--h3 a::before { display: none; }

/* ================== Share buttons (ronds, colorés) ==================== */
.share-row {
    display: flex; align-items: center; gap: var(--space-2);
    margin: var(--space-5) 0;
    padding: var(--space-3) 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    font-family: var(--font-sans);
}
.share-row__label {
    font-weight: 600;
    color: var(--color-text);
    margin-right: var(--space-2);
}
.share-grid {
    display: flex; gap: var(--space-2);
    flex-wrap: wrap;
}
.share-btn {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 38px; height: 38px;
    border-radius: 50%;
    color: #fff !important;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: .95rem;
    text-decoration: none;
    transition: transform .12s, box-shadow .12s;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}
.share-btn:hover { transform: translateY(-2px); text-decoration: none; box-shadow: 0 4px 12px rgba(0, 0, 0, .25); }
.share-btn--fb { background: #1877f2; }
.share-btn--tw { background: #000; }
.share-btn--li { background: #0a66c2; font-size: .7rem; text-transform: lowercase; }
.share-btn--wa { background: #25d366; }

/* Article nav (prev/next) */
.article-nav {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    margin: var(--space-5) 0;
}
@media (max-width: 640px) { .article-nav { grid-template-columns: 1fr; } }
.article-nav__link {
    display: flex; flex-direction: column; gap: var(--space-1);
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
    transition: border-color .12s, background .12s;
}
.article-nav__link:hover { border-color: var(--color-accent); background: var(--color-hover); text-decoration: none; }
.article-nav__link--next { text-align: right; }
.article-nav__label {
    font-family: var(--font-sans);
    font-size: .78rem;
    color: var(--color-accent-dk);
    letter-spacing: .04em;
    font-weight: 600;
    text-transform: uppercase;
}
.article-nav__title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.3;
}

/* ================== Sidebar widgets ==================== */
.widget {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-3) var(--space-4);
    box-shadow: var(--shadow-sm);
}
.widget__title {
    font-family: var(--font-sans);
    font-size: .95rem;
    font-weight: 700;
    margin: 0 0 var(--space-3);
    color: var(--color-text);
    padding-bottom: var(--space-2);
    border-bottom: 2px solid var(--color-accent);
    display: inline-block;
    min-width: 100%;
}

.widget--ad { padding: 0; background: transparent; border: 0; box-shadow: none; overflow: hidden; border-radius: var(--radius-lg); }
.widget--ad img, .widget--ad picture { width: 100%; display: block; border-radius: var(--radius-lg); }

.widget--share .share-grid { justify-content: flex-start; }

.mini-posts {
    list-style: none;
    margin: 0; padding: 0;
    display: flex; flex-direction: column;
    gap: var(--space-3);
}
.mini-posts--numbered { counter-reset: mp; }
.mini-post__link {
    display: flex; gap: var(--space-2);
    align-items: flex-start;
    color: var(--color-text);
    text-decoration: none;
}
.mini-post__link:hover { text-decoration: none; color: var(--color-accent-dk); }
.mini-post__link:hover .mini-post__title { color: var(--color-accent-dk); }
.mini-post__img {
    width: 72px; height: 72px;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: var(--radius);
    background: var(--color-hover);
}
.mini-post__img--placeholder {
    display: block;
    background: linear-gradient(135deg, var(--color-hover), var(--color-border));
}
.mini-post__title {
    font-family: var(--font-sans);
    font-size: .88rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--color-text);
    transition: color .12s;
}
.mini-post__meta {
    display: block;
    font-family: var(--font-sans);
    font-size: .72rem;
    color: var(--color-muted);
    margin-top: 2px;
}
.mini-posts--numbered .mini-post { counter-increment: mp; }
.mini-posts--numbered .mini-post__link::before {
    content: counter(mp);
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--color-accent-dk); color: #fff;
    font-family: var(--font-sans);
    font-weight: 700; font-size: .85rem;
    flex-shrink: 0;
    margin-right: var(--space-2);
}

/* ================== Related section ==================== */
.related {
    max-width: var(--max-width);
    margin: var(--space-6) 0 0;
}
/* Force 3 colonnes max sur le bloc related (pas 4) */
.related .card-grid {
    grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .related .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px)  { .related .card-grid { grid-template-columns: repeat(3, 1fr) !important; } }
@media (min-width: 1200px) { .related .card-grid { grid-template-columns: repeat(3, 1fr) !important; } }

/* ================== Article card (utilisé dans related + home latest) ==================== */
.article-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform .15s, box-shadow .15s;
    display: flex; flex-direction: column;
}
.article-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.article-card__link { display: flex; flex-direction: column; color: inherit; text-decoration: none; flex: 1; }
.article-card__link:hover { text-decoration: none; }
.article-card__figure {
    aspect-ratio: 16 / 10;
    background: var(--color-hover);
    overflow: hidden;
    margin: 0;
}
.article-card__figure img, .article-card__figure picture { width: 100%; height: 100%; object-fit: cover; }
.article-card__figure--placeholder { background: linear-gradient(135deg, var(--color-hover), var(--color-border)); }
.article-card__body { padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.article-card__category {
    font-family: var(--font-sans);
    font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
    color: var(--color-accent-dk); margin: 0; font-weight: 600;
}
.article-card__title { font-family: var(--font-display); font-size: 1.1rem; margin: 0; font-weight: 700; line-height: 1.3; }
.article-card__excerpt { font-size: .92rem; color: var(--color-muted); margin: 0; flex: 1; }
.article-card__date { font-family: var(--font-sans); font-size: .78rem; color: var(--color-muted); margin-top: auto; }

/* ================== Sous-catégories (en tête d'une cat parente) ==================== */
.subcategories {
    max-width: var(--max-width);
    margin: 0 auto var(--space-5);
    padding: 0 var(--space-3);
}
.subcat-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
}
@media (min-width: 600px)  { .subcat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .subcat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .subcat-grid { grid-template-columns: repeat(4, 1fr); } }

.subcat-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--shadow-sm);
    padding: 0;
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.subcat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    border-color: var(--color-accent);
    text-decoration: none;
    color: inherit;
}
.subcat-card__thumb {
    width: 72px;
    height: 72px;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
    background-color: var(--color-hover);
}
.subcat-card__thumb--placeholder {
    background: linear-gradient(135deg, var(--color-hover), var(--color-border));
}
.subcat-card__body {
    display: flex; flex-direction: column;
    justify-content: center;
    padding: var(--space-2) var(--space-3) var(--space-2) 0;
    flex: 1;
    min-width: 0;
}
.subcat-card__title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.25;
}
.subcat-card__count {
    font-family: var(--font-sans);
    font-size: .78rem;
    color: var(--color-muted);
    margin-top: 2px;
}

.cat-articles { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-3); }

/* ================== Page head (category / search) ==================== */
.page-head {
    max-width: var(--max-width);
    margin: var(--space-5) auto 0;
    padding: 0 var(--space-3);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-5);
}
.page-head h1 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3rem);
    margin: 0 0 var(--space-2);
    letter-spacing: -.02em;
}
.page-head__desc { color: var(--color-muted); font-size: 1.05rem; }
.page-head__meta { font-family: var(--font-sans); font-size: .85rem; color: var(--color-muted); margin: var(--space-1) 0 0; }

/* Category page/others wrap */
.home-latest, .page-head + .card-grid, .home-latest .card-grid { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-3); }
.page-head + * { max-width: var(--max-width); margin-left: auto; margin-right: auto; padding-left: var(--space-3); padding-right: var(--space-3); }

/* Pagination */
.pagination {
    display: flex; justify-content: space-between; align-items: center;
    max-width: var(--max-width);
    margin: var(--space-5) auto 0;
    padding: var(--space-3);
    border-top: 1px solid var(--color-border);
    font-family: var(--font-sans);
    font-size: .9rem;
}
.pagination__prev, .pagination__next {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
}
.pagination__prev:hover, .pagination__next:hover { background: var(--color-hover); text-decoration: none; }
.pagination__status { color: var(--color-muted); }

/* Empty / error */
.empty-state, .error-page {
    max-width: 560px;
    margin: var(--space-5) auto;
    text-align: center;
    color: var(--color-muted);
    padding: var(--space-5) var(--space-3);
}

/* ================== Footer ==================== */
.site-footer {
    margin-top: var(--space-7);
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
}
.site-footer__inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--space-4) var(--space-3);
    display: flex; flex-wrap: wrap;
    justify-content: space-between; align-items: center;
    gap: var(--space-3);
    font-family: var(--font-sans);
    font-size: .85rem;
    color: var(--color-muted);
}
.footer-nav { display: flex; gap: var(--space-4); }
.footer-nav a { color: var(--color-muted); }
.footer-nav a:hover { color: var(--color-accent-dk); }

/* Debug / dev */
.debug { background: #fff4d6; border: 1px solid #e0cf98; padding: .75rem; font-family: var(--font-mono); font-size: .8rem; white-space: pre-wrap; word-break: break-all; }

/* ================== Newsletter ==================== */
.nl-block {
    max-width: var(--max-width);
    margin: var(--space-6) auto;
    padding: var(--space-5) var(--space-3);
    background: linear-gradient(135deg, var(--color-accent-dk), var(--color-accent));
    border-radius: var(--radius-lg);
    text-align: center;
    color: #fff;
}
.nl-block__inner { max-width: 580px; margin: 0 auto; }
.nl-block__title { font-family: var(--font-display); font-size: clamp(1.4rem, 3vw, 1.9rem); margin: 0 0 var(--space-2); color: #fff; }
.nl-block__lead { margin: 0 0 var(--space-3); color: rgba(255, 255, 255, .95); }
.nl-block__note { font-size: .78rem; color: rgba(255, 255, 255, .8); font-style: italic; margin: var(--space-2) 0 0; }
.nl-form { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: center; }
.nl-form__input {
    flex: 1 1 260px; min-width: 0;
    padding: .75rem 1rem;
    border: 0; border-radius: var(--radius);
    background: #fff; font: inherit;
}
.nl-form__input:focus { outline: 3px solid rgba(255, 255, 255, .5); }
.nl-form__btn {
    padding: .75rem 1.5rem;
    background: var(--color-text); color: #fff;
    border: 0; border-radius: var(--radius);
    font: inherit; font-weight: 700; cursor: pointer;
    transition: background .15s;
    font-family: var(--font-sans);
}
.nl-form__btn:hover { background: #000; }

/* Popup */
body.nl-popup-open { overflow: hidden; }
.nl-popup { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: var(--space-3); }
.nl-popup[hidden] { display: none; }
.nl-popup__backdrop { position: absolute; inset: 0; background: rgba(20, 18, 12, .55); }
.nl-popup__card {
    position: relative;
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--space-5) var(--space-4);
    max-width: 480px; width: 100%;
    text-align: center;
    animation: nlPopup .25s ease-out;
}
@keyframes nlPopup {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
.nl-popup__close { position: absolute; top: 8px; right: 12px; background: transparent; border: 0; font-size: 1.8rem; color: var(--color-muted); cursor: pointer; line-height: 1; }
.nl-popup__close:hover { color: var(--color-text); }
.nl-popup__title { font-family: var(--font-display); font-size: 1.5rem; color: var(--color-accent-dk); margin: 0 0 var(--space-2); }
.nl-popup__lead { color: var(--color-muted); margin: 0 0 var(--space-3); }
.nl-popup__note { font-size: .75rem; color: var(--color-muted); font-style: italic; margin: var(--space-2) 0 0; }

.newsletter-status { max-width: 560px; margin: var(--space-6) auto; text-align: center; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); }
.newsletter-status__msg { color: var(--color-text); font-size: 1.05rem; }
.newsletter-status--error { border-color: #d77; }
.newsletter-status--ok { border-color: #7a6; }
.btn-link { color: var(--color-accent-dk); font-family: var(--font-sans); font-size: .9rem; }

/* ================== Ajustements RTL ==================== */
html[dir="rtl"] .article-card__excerpt,
html[dir="rtl"] .article-full__body { text-align: right; }
html[dir="rtl"] .article-full__body ul,
html[dir="rtl"] .article-full__body ol { padding-left: 0; padding-right: var(--space-5); }
html[dir="rtl"] .crumbs__list { direction: rtl; }
html[dir="rtl"] .crumbs__list li + li::before { content: '«'; margin-right: 0; margin-left: var(--space-1); }
html[dir="rtl"] .site-logo { text-align: right; }

/* Hello stub (legacy) */
.home-stub, .hello p { color: var(--color-muted); font-family: var(--font-sans); }