/* ─── Variables de thème (palette Nisarg) ────────────────────────────────── */
:root {
    --bg: #eef6fb;
    --bg-edge: #0a3d62;
    --text: #212121;
    --text-muted: #5c7a94;
    --link: #0288d1;
    --link-hover: #01659e;
    --header-bg: #ffffff;
    --header-text: #212121;
    --header-text-muted: #5c7a94;
    --card-bg: #fff;
    --card-shadow: rgba(0,0,0,.06);
    --card-shadow-hover: rgba(0,0,0,.1);
    --border: #e4e4e4;
    --surface: #f5f5f5;
    --pill-bg: #e3f2fd;
    --pill-text: #01579b;
    --input-bg: #fff;
    --input-border: #ddd;
    --success-bg: #d5f5e3;
    --success-text: #1e8449;
    --font-display: Lato, 'Helvetica Neue', -apple-system, 'Segoe UI', sans-serif;
    --font-body: 'Source Sans Pro', -apple-system, 'Segoe UI', sans-serif;
}

/* ─── Utilitaires ─────────────────────────────────────────────────────────── */
.text-muted { color: var(--text-muted); }
.error-page { text-align: center; padding: 4rem 1rem; }

/* ─── Reset & base ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-body); font-size: 16px; line-height: 1.7; color: var(--text);
    background: var(--bg-edge);
    background: linear-gradient(to right, var(--bg-edge) 0%, var(--bg) 12%, var(--bg) 88%, var(--bg-edge) 100%);
    background-attachment: fixed;
    transition: background-color .2s, color .2s;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { font-family: var(--font-display); }

.container { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; }

/* ─── Header ──────────────────────────────────────────────────────────────── */
.site-header { background: var(--header-bg); color: var(--header-text); position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.site-header { border-bottom: 1px solid var(--border); box-shadow: none; }
.site-header .container { display: flex; align-items: center; gap: 1.5rem; height: 72px; }
.site-logo { display: flex; align-items: center; gap: .5rem; font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; letter-spacing: .01em; color: var(--header-text); flex-shrink: 0; }
.site-logo img { height: 52px; width: auto; display: block; }
.site-logo:hover { text-decoration: none; opacity: .85; }

.main-nav { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; }
.nav-item { position: relative; }
.nav-item > a { display: block; padding: .5rem 0; color: var(--header-text); font-family: var(--font-body); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; border-radius: 0; }
.nav-item > a:hover { color: var(--link); background: none; text-decoration: none; }
.dropdown { display: none; position: absolute; top: 100%; left: 0; background: var(--card-bg); border: 1px solid var(--border); border-radius: 4px; box-shadow: 0 8px 24px rgba(0,0,0,.1); min-width: 180px; list-style: none; z-index: 200; padding: .4rem 0; }
.nav-item:hover .dropdown { display: block; }
.dropdown li { position: relative; }
.dropdown li a { display: block; padding: .5rem 1.1rem; color: var(--text); font-family: var(--font-body); font-size: .875rem; text-transform: none; letter-spacing: 0; font-weight: 400; }
.dropdown li a:hover { background: var(--surface); color: var(--link); text-decoration: none; }
.dropdown li.has-submenu > a::after { content: '▸'; float: right; margin-left: 1rem; opacity: .5; }
.submenu { display: none; position: absolute; top: -.4rem; left: 100%; background: var(--card-bg); border: 1px solid var(--border); border-radius: 4px; box-shadow: 0 8px 24px rgba(0,0,0,.1); min-width: 170px; list-style: none; z-index: 210; padding: .4rem 0; }
.dropdown li.has-submenu:hover .submenu { display: block; }
.submenu li a { display: block; padding: .5rem 1.1rem; color: var(--text); font-family: var(--font-body); font-size: .875rem; }
.submenu li a:hover { background: var(--surface); color: var(--link); text-decoration: none; }
.nav-toggle { display: none; background: none; border: none; color: var(--header-text); font-size: 1.4rem; cursor: pointer; margin-left: auto; }

/* ─── Recherche & bascule de thème (header) ──────────────────────────────── */
.search-form { display: flex; align-items: center; margin-left: auto; }
.search-form input { background: var(--surface); border: 1px solid var(--border); color: var(--text); padding: .4rem .7rem; border-radius: 3px 0 0 3px; font-size: .85rem; font-family: var(--font-body); width: 140px; }
.search-form input::placeholder { color: var(--text-muted); }
.search-form input:focus { outline: none; border-color: var(--link); }
.search-form button { background: var(--link); border: 1px solid var(--link); border-left: none; color: #fff; padding: .4rem .7rem; border-radius: 0 3px 3px 0; cursor: pointer; font-size: .9rem; }
.search-form button:hover { background: var(--link-hover); }

/* ─── Hero ────────────────────────────────────────────────────────────────── */
.hero { text-align: center; padding: 3rem 1rem 2rem; }
.hero h1 { font-family: var(--font-display); font-weight: 700; font-size: 2.2rem; color: var(--text); margin-bottom: .5rem; text-transform: uppercase; letter-spacing: .02em; }
.hero p { font-size: 1.05rem; color: var(--text-muted); font-style: normal; }

/* ─── Disposition liste + sidebar (accueil + catégorie) ──────────────────── */
.post-layout { display: grid; grid-template-columns: 1fr auto; gap: 2.5rem; align-items: start; padding: .5rem 0 3rem; }
.post-layout > section { min-width: 0; }
.post-layout aside { min-width: 180px; }
.post-layout--single { grid-template-columns: 1fr; max-width: 760px; margin: 0 auto; }

.post-entry { background: var(--card-bg); border: 1px solid var(--border); border-radius: 4px; text-align: center; margin-bottom: 2rem; overflow: hidden; }
.post-entry .card-image-link { display: block; background: var(--surface); }
.post-entry .card-image-link img { width: 100%; height: auto; display: block; }
.post-entry-inner { padding: 0 clamp(1.2rem, 3vw, 2.2rem) 2rem; }

.card-meta-row { display: flex; justify-content: center; align-items: center; gap: .9rem; margin: 1.6rem 0 .9rem; font-family: var(--font-body); font-size: .82rem; color: var(--text-muted); }
.card-country { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--pill-text); background: var(--pill-bg); padding: .25rem .7rem; border-radius: 100px; }
.card-country:hover { background: var(--link); color: #fff; text-decoration: none; }

.card-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.1rem, 2.2vw, 1.3rem); text-transform: none; letter-spacing: 0; margin-bottom: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-title a { color: var(--text); }
.card-title a:hover { color: var(--link); text-decoration: none; }

.card-excerpt { font-size: .96rem; color: var(--text-muted); text-align: justify; margin: 0 auto 1.2rem; max-width: 62ch; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.card-read-more { display: block; width: fit-content; margin: 0 auto; font-family: var(--font-body); font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--link); padding-bottom: .25rem; border-bottom: 1px solid var(--link); }
.card-read-more:hover { color: var(--link-hover); border-color: var(--link-hover); text-decoration: none; }

/* ─── Sidebar (accueil) ───────────────────────────────────────────────────── */
.sidebar-widget h3 { font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 1rem; padding-bottom: .6rem; border-bottom: 2px solid var(--link); display: inline-block; color: var(--text); }
.sidebar-widget ul { list-style: none; }
.sidebar-widget li { width: fit-content; padding: .55rem 0; border-bottom: 1px solid var(--border); font-family: var(--font-body); font-size: .9rem; }
.sidebar-widget li:last-child { border-bottom: none; }
.sidebar-widget a { color: var(--text); }
.sidebar-widget a:hover { color: var(--link); text-decoration: none; }

/* ─── Barre de progression de lecture ────────────────────────────────────── */
.reading-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: var(--link); z-index: 200; transition: width .1s linear; }

/* ─── Fil d'Ariane ────────────────────────────────────────────────────────── */
.breadcrumb { font-size: .8rem; color: var(--text-muted); font-family: var(--font-body); margin-bottom: 1.2rem; }
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--link); }
.breadcrumb-sep { margin: 0 .5rem; opacity: .5; }

/* ─── Articles similaires ────────────────────────────────────────────────── */
.similar-articles { margin: 3rem 0; }
.similar-articles h2 { font-family: var(--font-display); font-size: 1.3rem; margin-bottom: 1.2rem; color: var(--text); }
.similar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.similar-card { display: block; background: var(--card-bg); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; color: var(--text); transition: box-shadow .15s; }
.similar-card:hover { box-shadow: 0 4px 12px var(--card-shadow-hover); text-decoration: none; }
.similar-card img { width: 100%; height: 120px; object-fit: cover; display: block; }
.similar-title { display: block; padding: .8rem .9rem; font-size: .88rem; font-weight: 600; line-height: 1.35; }

/* ─── Page article ────────────────────────────────────────────────────────── */
.article-page { max-width: 760px; padding-top: 2.5rem; }
.article-categories { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .75rem; }
.article-categories a { font-size: .78rem; font-weight: 600; background: var(--pill-bg); color: var(--pill-text); padding: .25rem .7rem; border-radius: 100px; font-family: var(--font-body); text-transform: uppercase; letter-spacing: .05em; }
.article-title { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 1.9rem; line-height: 1.3; margin-bottom: .9rem; color: var(--text); }
.article-meta { display: inline-flex; align-items: center; gap: .6rem; font-size: .85rem; color: var(--text-muted); font-family: var(--font-body); padding-bottom: .9rem; margin-bottom: 1.6rem; border-bottom: 2px solid var(--link); }
.article-meta .meta-sep { opacity: .5; }
.article-featured-image { width: 100%; border-radius: 10px; margin-bottom: 2rem; max-height: 480px; object-fit: cover; }

.article-content h2 { font-size: 1.5rem; margin: 2rem 0 .75rem; color: var(--text); }
.article-content h3 { font-size: 1.2rem; margin: 1.5rem 0 .5rem; color: var(--text); }
.article-content p  { margin-bottom: 1.2rem; }
.article-content ul, .article-content ol { margin: 1rem 0 1.2rem 1.5rem; }
.article-content li { margin-bottom: .3rem; }
.article-content img { border-radius: 8px; margin: 1.5rem auto; }
.article-content table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: .9rem; }
.article-content th, .article-content td { padding: .6rem .9rem; border: 1px solid var(--border); }
.article-content th { background: var(--surface); font-weight: 600; }
.article-content a { color: var(--link); }
.article-content blockquote { border-left: 4px solid var(--link); padding: .8rem 1.2rem; color: var(--text-muted); font-style: italic; margin: 1.5rem 0; background: var(--surface); border-radius: 0 6px 6px 0; }

/* ─── Navigation articles ─────────────────────────────────────────────────── */
.article-nav { display: flex; justify-content: space-between; gap: 1.5rem; padding: 2rem 0; border-top: 1px solid var(--border); margin-top: 2rem; font-family: var(--font-body); font-size: .9rem; }
.nav-prev, .nav-next { flex: 1; display: flex; align-items: center; gap: .6rem; color: var(--link); min-width: 0; }
.nav-next { justify-content: flex-end; text-align: right; }
.nav-arrow { flex-shrink: 0; font-size: 1.1rem; }
.nav-title { display: flex; flex-direction: column; min-width: 0; }
.nav-line1 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: .82rem; letter-spacing: .03em; color: var(--link); }
.nav-line2 { color: var(--text-muted); font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-prev, .nav-next { text-decoration: none; }
.nav-prev:hover .nav-line2, .nav-next:hover .nav-line2 { text-decoration: underline; }

/* ─── Commentaires ────────────────────────────────────────────────────────── */
.comments { padding: 2rem 0; border-top: 1px solid var(--border); margin-top: 1rem; }
.comments h2 { font-size: 1.3rem; margin-bottom: 1.5rem; }
.comment { padding: 1rem; background: var(--surface); border-radius: 8px; margin-bottom: 1rem; }
.comment-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .4rem; font-family: var(--font-body); font-size: .875rem; }
.comment-header strong { color: var(--text); }
.comment-header time { color: var(--text-muted); font-size: .8rem; }
.comment-body { font-size: .95rem; line-height: 1.5; }
.comment-form { margin-top: 2rem; }
.comment-form h3 { font-size: 1.1rem; margin-bottom: 1rem; }
.comment-message { padding: .6rem .9rem; background: var(--success-bg); color: var(--success-text); border-radius: 6px; margin-bottom: 1rem; font-family: var(--font-body); font-size: .9rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.comment-form label { display: block; font-family: var(--font-body); font-size: .875rem; font-weight: 500; margin-bottom: .5rem; }
.comment-form input, .comment-form textarea { width: 100%; padding: .55rem .75rem; border: 1px solid var(--input-border); border-radius: 6px; font-size: .9rem; font-family: inherit; background: var(--input-bg); color: var(--text); }
.comment-form textarea { resize: vertical; }
.comment-form button { background: var(--link); color: #fff; border: none; padding: .65rem 1.5rem; border-radius: 6px; font-size: 1rem; cursor: pointer; margin-top: .5rem; }
.comment-form button:hover { background: var(--link-hover); }

/* ─── Page catégorie ──────────────────────────────────────────────────────── */
.category-header { padding: 2.5rem 0 1rem; }
.category-header h1 { font-size: 2rem; color: var(--text); }
.category-header p { color: var(--text-muted); font-family: var(--font-body); }
.subcategory-links { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.subcategory-links a { padding: .4rem .9rem; background: var(--pill-bg); color: var(--pill-text); border-radius: 20px; font-family: var(--font-body); font-size: .875rem; }
.subcategory-links a:hover { background: var(--link); color: #fff; text-decoration: none; }

/* ─── Footer ──────────────────────────────────────────────────────────────── */
.site-footer { background: var(--card-bg); color: var(--text-muted); text-align: center; padding: 2rem; border-top: 1px solid var(--border); font-family: var(--font-body); font-size: .875rem; margin-top: 3rem; }

/* ─── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Fond épuré : le dégradé "profondeur marine" n'a de sens que sur grand écran */
    body { background: var(--bg); }

    /* Menu réduit au strict nécessaire : uniquement la recherche */
    .main-nav, .nav-toggle { display: none; }

    /* Sidebar retirée, on ne garde que les articles */
    .post-layout aside { display: none; }

    .hero h1 { font-size: 1.7rem; }
    .post-layout { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }
    .editor-form { grid-template-columns: 1fr; }
    .search-form input { width: 100px; }
    .article-nav { flex-direction: column; }
    .similar-grid { grid-template-columns: 1fr; }
    .nav-next { justify-content: flex-start; text-align: left; }
}