/*
 * Theme Name:   GeneratePress Child
 * Theme URI:    https://www.musikfyn.dk
 * Description:  Child theme for MUSIKFYN — Press Forte design
 * Author:       Lars Thomsen
 * Template:     generatepress
 * Version:      3.4.0
 * Text Domain:  generatepress-child
 */

/* ─── Design Tokens ──────────────────────────────────────────────────────────── */
:root {
    --c-paper       : #F2EBDD;
    --c-paper-warm  : #E8DFCB;
    --c-paper-deep  : #DDD0B5;
    --c-ink         : #1A1410;
    --c-ink-muted   : #5D544A;
    --c-accent      : #C8261A;
    --c-accent-deep : #A01F15;
    --c-gold        : #9A7A3F;
    --c-rule        : #1A1410;

    --font-display : 'Fraunces', Georgia, serif;
    --font-body    : 'Newsreader', Georgia, serif;
    --font-mono    : 'JetBrains Mono', monospace;

    --text-display : clamp(3rem, 7vw, 6rem);
    --text-h1      : clamp(2.4rem, 5vw, 4rem);
    --text-h2      : clamp(1.8rem, 3.5vw, 2.8rem);
    --text-h3      : clamp(1.4rem, 2.4vw, 2rem);
    --text-body    : 1.0625rem;
    --text-lead    : 1.25rem;
    --text-small   : 0.875rem;
    --text-label   : 0.72rem;

    --space-xs : 6px;
    --space-sm : 12px;
    --space-md : 24px;
    --space-lg : 40px;
    --space-xl : 72px;
    --space-2xl: 120px;
    --space-section : clamp(5rem, 10vw, 10rem);
    --space-gutter  : clamp(1.5rem, 5vw, 3rem);

    --max-width : 1180px;
    --max-text  : 62ch;

    --ease-out  : cubic-bezier(0.16, 1, 0.3, 1);
    --dur-base  : 350ms;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ─── Reset & Base ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    background-color: var(--c-paper) !important;
    color: var(--c-ink);
}
body {
    font-family: var(--font-body);
    font-size: var(--text-body);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

/* Grain SVG */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.05;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
}

a {
    color: var(--c-ink);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    text-decoration-color: var(--c-accent);
    transition: color var(--dur-base) var(--ease-out),
                text-decoration-color var(--dur-base) var(--ease-out);
}
a:hover { color: var(--c-accent); text-decoration-color: var(--c-ink); }
a:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 4px; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--c-ink);
    margin: 0;
}

p { margin-bottom: 1.4em; }
p:last-child { margin-bottom: 0; }
img { max-width: 100%; height: auto; display: block; }

::selection { background: var(--c-accent); color: var(--c-paper); }

/* ─── Skip link ──────────────────────────────────────────────────────────────── */
.skip-link {
    position: absolute; top: -100%; left: var(--space-gutter);
    background: var(--c-ink); color: var(--c-paper);
    padding: 8px 16px;
    font-family: var(--font-mono);
    font-size: var(--text-small);
    z-index: 99999;
    text-decoration: none;
}
.skip-link:focus { top: 8px; color: var(--c-paper); }

/* ─── Force GP wrappers ─────────────────────────────────────────────────────── */
.site, .site-content, .content-area,
.inside-article, #page, #content {
    background: var(--c-paper) !important;
    color: var(--c-ink);
}
.grid-container {
    max-width: var(--max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left:  var(--space-gutter);
    padding-right: var(--space-gutter);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   HEADER — simple, sobre
   ═══════════════════════════════════════════════════════════════════════════════ */

.site-header {
    background: var(--c-paper) !important;
    border-bottom: 1px solid var(--c-rule);
    padding: 0;
}

.inside-header {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--space-lg) var(--space-gutter) var(--space-md);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
}

.site-title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    font-weight: 900;
    font-style: italic;
    letter-spacing: -0.03em;
    line-height: 1;
    margin: 0;
}
.site-title a {
    color: var(--c-ink) !important;
    text-decoration: none;
    background: none;
}
.site-title a:hover { color: var(--c-accent); }

.site-description {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--c-ink-muted);
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   NAVIGATION
   ═══════════════════════════════════════════════════════════════════════════════ */

.main-navigation {
    background: var(--c-paper) !important;
    border-bottom: 1px solid var(--c-rule);
    padding: 0;
}
.inside-navigation {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--space-gutter);
    display: flex;
    justify-content: flex-start;
}
.main-navigation .menu {
    display: flex;
    gap: 0;
    list-style: none;
    margin: 0; padding: 0;
}
.main-navigation .menu > li > a {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--c-ink);
    padding: 16px var(--space-md) 16px 0;
    margin-right: var(--space-md);
    text-decoration: none;
    display: block;
    position: relative;
    transition: color var(--dur-base) var(--ease-out);
}
.main-navigation .menu > li:not(:last-child) > a::after {
    content: '·';
    position: absolute;
    right: -3px;
    color: var(--c-ink-muted);
    font-size: 1rem;
}
.main-navigation .menu > li > a:hover,
.main-navigation .menu > li.current-menu-item > a {
    color: var(--c-accent);
    background: transparent;
}
.menu-toggle {
    background: var(--c-ink);
    color: var(--c-paper);
    border: none;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 10px 18px;
    cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   HERO — Présentation du site
   ═══════════════════════════════════════════════════════════════════════════════ */

.hero-presentation {
    background: var(--c-paper);
    padding: var(--space-section) var(--space-gutter);
    border-bottom: 1px solid var(--c-rule);
    position: relative;
}

.hero-presentation__inner {
    max-width: var(--max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-lg);
}

.hero-eyebrow {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--c-accent);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}
.hero-eyebrow::before {
    content: '';
    display: inline-block;
    width: 32px; height: 1px;
    background: var(--c-accent);
}

.hero-title {
    font-family: var(--font-display);
    font-size: var(--text-display);
    font-weight: 300;
    font-style: italic;
    line-height: 1;
    letter-spacing: -0.035em;
    color: var(--c-ink);
    margin: 0;
    max-width: 22ch;
}
.hero-title em {
    font-weight: 900;
    font-style: italic;
    color: var(--c-accent);
    font-feature-settings: 'ss01' 1;
}

.hero-lead {
    font-family: var(--font-body);
    font-size: var(--text-lead);
    color: var(--c-ink-muted);
    max-width: 56ch;
    line-height: 1.6;
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   ABOUT — Présentation Henrik Lundin
   ═══════════════════════════════════════════════════════════════════════════════ */

.about-section {
    background: var(--c-paper-warm);
    padding: var(--space-section) var(--space-gutter);
    border-bottom: 1px solid var(--c-rule);
}

.about-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: var(--space-2xl);
    align-items: start;
}

.about-monogram {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    position: sticky;
    top: var(--space-lg);
}

.about-monogram__mark {
    font-family: var(--font-display);
    font-size: clamp(8rem, 16vw, 14rem);
    font-weight: 900;
    font-style: italic;
    line-height: 0.85;
    color: var(--c-ink);
    letter-spacing: -0.06em;
    margin: 0;
    position: relative;
}
.about-monogram__mark::after {
    content: '';
    position: absolute;
    left: 0; right: 30%;
    bottom: 8%;
    height: 8px;
    background: var(--c-accent);
    z-index: -1;
    opacity: 0.4;
}

.about-monogram__est {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--c-ink-muted);
    line-height: 1.6;
}

.about-content { max-width: var(--max-text); }

.about-content__eyebrow {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--c-accent);
    margin: 0 0 var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--c-rule);
    display: inline-block;
    padding-right: var(--space-md);
}

.about-content__name {
    font-family: var(--font-display);
    font-size: var(--text-h1);
    font-weight: 300;
    font-style: italic;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--c-ink);
    margin: 0 0 var(--space-lg);
}
.about-content__name em {
    font-weight: 900;
    color: var(--c-ink);
    font-style: italic;
}

.about-content__bio {
    font-family: var(--font-body);
    font-size: 1.125rem;
    line-height: 1.75;
    color: var(--c-ink);
    margin: 0 0 var(--space-md);
}

.about-content__bio:first-of-type::first-letter {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 900;
    float: left;
    font-size: 4.5rem;
    line-height: 0.85;
    margin: 0.1em 0.12em -0.05em -0.04em;
    color: var(--c-accent);
}

.about-content__signature {
    margin-top: var(--space-xl);
    padding-top: var(--space-md);
    border-top: 1px solid var(--c-rule);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--c-ink-muted);
}
.about-content__signature strong { color: var(--c-ink); font-weight: 500; }

/* ═══════════════════════════════════════════════════════════════════════════════
   PHILOSOPHY — Vad du hittar här
   ═══════════════════════════════════════════════════════════════════════════════ */

.philosophy-section {
    background: var(--c-paper);
    padding: var(--space-section) var(--space-gutter);
    border-bottom: 1px solid var(--c-rule);
}

.philosophy-inner {
    max-width: var(--max-width);
    margin: 0 auto;
}

.philosophy-eyebrow {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--c-accent);
    margin: 0 0 var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--c-rule);
    display: inline-block;
    padding-right: var(--space-md);
}

.philosophy-title {
    font-family: var(--font-display);
    font-size: var(--text-h2);
    font-weight: 300;
    font-style: italic;
    color: var(--c-ink);
    margin: 0 0 var(--space-xl);
    max-width: 24ch;
    line-height: 1.05;
    letter-spacing: -0.025em;
}
.philosophy-title em { font-weight: 900; color: var(--c-accent); }

.philosophy-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
    counter-reset: phil;
}

.philosophy-item {
    counter-increment: phil;
    border-top: 2px solid var(--c-rule);
    padding-top: var(--space-md);
    position: relative;
}

.philosophy-item::before {
    content: counter(phil, decimal-leading-zero);
    position: absolute;
    top: -16px;
    right: 0;
    background: var(--c-paper);
    padding: 0 8px;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 900;
    color: var(--c-gold);
    font-size: 1.5rem;
    line-height: 1;
}

.philosophy-item__title {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--c-ink);
    margin: 0 0 var(--space-sm);
    line-height: 1.15;
}

.philosophy-item__desc {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--c-ink-muted);
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   POSTS / SINGLE / ARCHIVES
   ═══════════════════════════════════════════════════════════════════════════════ */

.entry-content {
    max-width: var(--max-text);
    font-family: var(--font-body);
    font-size: 1.125rem;
    line-height: 1.75;
}
.entry-content h2, .entry-content h3 { margin-top: 2em; margin-bottom: 0.5em; }
.entry-content p { color: var(--c-ink); }

.post {
    border-bottom: 2px solid var(--c-rule);
    padding-bottom: var(--space-xl);
    margin-bottom: var(--space-xl);
}
.post:last-child { border-bottom: none; }

.entry-title { font-family: var(--font-display); font-style: italic; font-weight: 700; }
.entry-title a { color: var(--c-ink); text-decoration: none; background: none; }
.entry-title a:hover { color: var(--c-accent); }
.entry-meta {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--c-ink-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   COMMENTS — masquer partout
   ═══════════════════════════════════════════════════════════════════════════════ */

.comments-area, #comments, .comment-respond,
.comment-list, #respond, .comments-title,
.comment-reply-link, .comment-form,
.wp-block-latest-comments,
.widget_recent_comments {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   HOMEPAGE — Masquer le contenu de page WP + sidebar
   ═══════════════════════════════════════════════════════════════════════════════ */

.home .site-main,
.home .widget-area,
.home #right-sidebar,
.home #left-sidebar,
.home .sidebar { display: none !important; }

.home .content-area {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}
.home .site-content { padding: 0 !important; }

/* ═══════════════════════════════════════════════════════════════════════════════
   SIDEBAR & WIDGETS (autres pages)
   ═══════════════════════════════════════════════════════════════════════════════ */

.widget-area, .sidebar, #left-sidebar, #right-sidebar {
    background: var(--c-paper) !important;
}
.widget {
    background: transparent !important;
    color: var(--c-ink);
    padding: var(--space-md) 0;
    margin-bottom: var(--space-lg);
    border-top: 2px solid var(--c-rule);
    border-radius: 0; border-left: none; border-right: none; border-bottom: none;
}
.widget-title, .widget h2, .widget .wp-block-heading {
    font-family: var(--font-mono) !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: var(--c-accent) !important;
    margin: 0 0 var(--space-md) !important;
    padding: 0 !important;
    border: none !important;
}
.widget a, .widget li a {
    color: var(--c-ink);
    text-decoration: underline;
    text-decoration-color: var(--c-accent);
}
.widget a:hover { color: var(--c-accent); }

.wp-block-search__label {
    font-family: var(--font-mono) !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: var(--c-accent) !important;
}
.wp-block-search__input, .widget input[type="search"], .widget input[type="text"] {
    background: var(--c-paper-warm) !important;
    color: var(--c-ink) !important;
    border: 1px solid var(--c-rule) !important;
    border-radius: 0;
    padding: 10px var(--space-sm);
    font-family: var(--font-body);
}
.wp-block-search__button, .widget button, .widget input[type="submit"] {
    background: var(--c-ink) !important;
    color: var(--c-paper) !important;
    border: none !important;
    font-family: var(--font-mono) !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    padding: 10px 20px !important;
    border-radius: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   FOOTER — minimal
   ═══════════════════════════════════════════════════════════════════════════════ */

.site-footer, .footer-widgets, .footer-bar,
.site-info, .inside-site-info, .copyright-bar, #footer-widgets {
    background: var(--c-paper) !important;
    color: var(--c-ink-muted);
}

.site-footer {
    border-top: 1px solid var(--c-rule);
    padding: var(--space-lg) var(--space-gutter);
    margin-top: 0;
}

.inside-footer-widgets { display: none; }

.site-info {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0;
    border-top: none;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-sm);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--c-ink-muted);
}
.site-info a { color: var(--c-ink-muted); text-decoration: none; }
.site-info a:hover { color: var(--c-accent); text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════════════════════
   FORMS
   ═══════════════════════════════════════════════════════════════════════════════ */

.btn, button[type="submit"], input[type="submit"] {
    display: inline-block;
    background: var(--c-ink);
    color: var(--c-paper);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 14px 28px;
    border: none; border-radius: 0;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--dur-base) var(--ease-out);
}
.btn:hover, button[type="submit"]:hover, input[type="submit"]:hover {
    background: var(--c-accent); color: var(--c-paper);
}

input[type="text"], input[type="email"], input[type="search"], textarea {
    background: var(--c-paper-warm);
    color: var(--c-ink);
    border: 1px solid var(--c-rule);
    border-radius: 0;
    padding: 12px var(--space-sm);
    font-family: var(--font-body);
    font-size: 1rem;
    width: 100%;
}
input:focus, textarea:focus {
    outline: none;
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px rgba(200, 38, 26, 0.12);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
    .about-inner { grid-template-columns: 1fr; gap: var(--space-xl); }
    .about-monogram { position: static; }
    .philosophy-list { grid-template-columns: 1fr; gap: var(--space-lg); }
}


/* ─── Categories grid (5 items) ───────────────────────────────────────────── */
.categories-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: var(--space-lg);
    counter-reset: cat;
}
.categories-list .philosophy-item { counter-increment: cat; }
.categories-list .philosophy-item::before {
    content: counter(cat, decimal-leading-zero);
}
.category-link {
    display: block;
    margin-top: var(--space-md);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--c-ink);
    text-decoration: underline;
    text-decoration-color: var(--c-accent);
    text-underline-offset: 4px;
    transition: color var(--dur-base) var(--ease-out);
}
.category-link:hover { color: var(--c-accent); }

/* ─── Affiliate disclosure ────────────────────────────────────────────────── */
.affiliate-disclosure {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--c-ink-muted);
}


/* ─── Fix header mobile toggle visible sur desktop ────────────────────────── */
@media (min-width: 769px) {
    /* Cacher complètement le mobile toggle inline du header */
    .site-header .menu-toggle,
    .site-header .mobile-menu-control-wrapper,
    .has-inline-mobile-toggle .mobile-menu-control-wrapper { display: none !important; }
}

/* Header propre : juste LB + tagline, alignés à gauche */
.inside-header {
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: baseline !important;
    gap: var(--space-md);
}
.site-branding { display: flex; flex-direction: column; gap: 2px; }
.main-title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    font-weight: 900;
    font-style: italic;
    letter-spacing: -0.03em;
    line-height: 1;
    margin: 0;
}
.main-title a {
    color: var(--c-ink) !important;
    text-decoration: none !important;
    background: none;
}
.main-title a:hover { color: var(--c-accent) !important; }

/* Mobile uniquement */
@media (max-width: 768px) {
    .site-header .menu-toggle {
        background: var(--c-ink);
        color: var(--c-paper);
        font-size: 0.75rem;
        padding: 8px 14px;
    }
    .inside-header { justify-content: space-between !important; }
}


/* ─── Catégories "Snart" — pas encore disponibles ─────────────────────────── */
.philosophy-item--soon { opacity: 0.7; }
.philosophy-item--soon .philosophy-item__title { color: var(--c-ink-muted); }
.category-link--soon {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--space-md);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--c-ink-muted);
    text-decoration: none;
    padding: 4px 10px;
    border: 1px solid var(--c-ink-muted);
    border-radius: 0;
    background: transparent;
}
.category-link--soon::before {
    content: '';
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--c-accent);
    margin-right: 2px;
}


/* ─── Footer menu (légal) ─────────────────────────────────────────────────── */
.footer-menu {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-md);
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-md);
}
.footer-menu li {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.footer-menu a {
    color: var(--c-ink);
    text-decoration: none;
    border-bottom: 1px solid var(--c-rule);
    padding-bottom: 2px;
    transition: color var(--dur-base) var(--ease-out);
}
.footer-menu a:hover { color: var(--c-accent); border-color: var(--c-accent); }

.copyright-line {
    text-align: center;
    padding-top: var(--space-md);
    border-top: 1px solid var(--c-rule);
}









body.no-sidebar:not(.home) .inside-article {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

body.no-sidebar:not(.home) .entry-header {
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--c-rule);
}

body.no-sidebar:not(.home) .entry-title {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 700;
    font-size: clamp(2rem, 4vw, 3.2rem);
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--c-ink);
    margin: 0 0 var(--space-md);
}

body.no-sidebar:not(.home) .entry-meta {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--c-ink-muted);
}

body.no-sidebar:not(.home) .post-image,
body.no-sidebar:not(.home) .featured-image {
    margin: 0 auto var(--space-lg);
    display: block;
}

body.no-sidebar:not(.home) .entry-content {
    max-width: 100%;
    font-family: var(--font-body);
    font-size: 1.125rem;
    line-height: 1.75;
}

/* Article TextBulker avec itemtype BlogPosting */
body.no-sidebar:not(.home) .entry-content article[itemtype*="BlogPosting"] {
    margin: 0;
}
body.no-sidebar:not(.home) .entry-content article[itemtype*="BlogPosting"] section {
    margin-bottom: var(--space-lg);
}
body.no-sidebar:not(.home) .entry-content article[itemtype*="BlogPosting"] h1 {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 700;
    font-size: clamp(2rem, 4vw, 3.2rem);
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--c-ink);
    margin: 0 0 var(--space-lg);
}
body.no-sidebar:not(.home) .entry-content article[itemtype*="BlogPosting"] h2 {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: 700;
    margin: var(--space-xl) 0 var(--space-sm);
    color: var(--c-ink);
}
body.no-sidebar:not(.home) .entry-content article[itemtype*="BlogPosting"] h3 {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 600;
    margin: var(--space-lg) 0 var(--space-xs);
    color: var(--c-ink);
}
body.no-sidebar:not(.home) .entry-content article[itemtype*="BlogPosting"] p {
    color: var(--c-ink);
    line-height: 1.75;
}
body.no-sidebar:not(.home) .entry-content article[itemtype*="BlogPosting"] p strong {
    color: var(--c-ink);
    font-weight: 700;
}
body.no-sidebar:not(.home) .entry-content article[itemtype*="BlogPosting"] section:first-of-type p:first-of-type::first-letter {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 900;
    float: left;
    font-size: 4.5rem;
    line-height: 0.85;
    margin: 0.1em 0.12em -0.05em -0.04em;
    color: var(--c-accent);
}


/* ─── Easy Table of Contents — style éditorial PRESS FORTE ───────────────── */
#ez-toc-container,
.ez-toc-v2_0_74,
div[class*="ez-toc"] {
    background: var(--c-paper-warm) !important;
    border: 2px solid var(--c-rule) !important;
    border-radius: 0 !important;
    padding: var(--space-lg) !important;
    margin: var(--space-xl) 0 !important;
    box-shadow: 4px 4px 0 var(--c-paper-deep) !important;
    max-width: 100% !important;
    width: 100% !important;
}

.ez-toc-title-container {
    margin-bottom: var(--space-md) !important;
    padding-bottom: var(--space-sm) !important;
    border-bottom: 1px solid var(--c-rule) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.ez-toc-title {
    font-family: var(--font-mono) !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: var(--c-accent) !important;
    margin: 0 !important;
    cursor: default !important;
}

.ez-toc-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    counter-reset: ezc;
}

.ez-toc-list li {
    padding: 6px 0 !important;
    font-family: var(--font-body) !important;
    font-size: 0.98rem !important;
    line-height: 1.5 !important;
}

.ez-toc-list li a {
    color: var(--c-ink) !important;
    text-decoration: none !important;
    border-bottom: 1px dotted transparent !important;
    transition: all var(--dur-base) var(--ease-out) !important;
}

.ez-toc-list li a:hover {
    color: var(--c-accent) !important;
    border-bottom-color: var(--c-accent) !important;
}

.ez-toc-list ul {
    list-style: none !important;
    padding-left: var(--space-md) !important;
    margin-top: 4px !important;
}

.ez-toc-list ul li {
    font-size: 0.9rem !important;
    color: var(--c-ink-muted) !important;
}

.ez-toc-list ul li a {
    color: var(--c-ink-muted) !important;
}

.ez-toc-btn {
    background: transparent !important;
    border: 1px solid var(--c-rule) !important;
    color: var(--c-ink) !important;
    font-family: var(--font-mono) !important;
    padding: 4px 8px !important;
    border-radius: 0 !important;
}
.ez-toc-icon-toggle-span svg {
    fill: var(--c-ink-muted) !important;
    color: var(--c-ink-muted) !important;
}

/* Numérotation auto cohérente */
.ez-toc-counter > .ez-toc-list > li {
    counter-increment: ezc;
}


/* ─── Logo dans le header (remplace .site-title texte) ────────────────────── */
.site-logo {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.site-logo a {
    display: inline-block;
    line-height: 0;
}

.site-logo img.header-image {
    max-height: 72px !important;
    width: auto !important;
    height: auto !important;
    display: block;
}

@media (max-width: 640px) {
    .site-logo img.header-image {
        max-height: 56px !important;
    }
}

/* Si le logo est présent, cacher éventuelle .site-description (baseline déjà intégrée au logo) */
.has-logo .site-description,
.site-logo + .site-branding .site-description {
    display: none !important;
}


/* ─── Fix logo : masquer texte "LB" doublon ───────────────────────────────── */
.has-inline-logo .site-branding,
.site-logo + .site-branding,
.site-header .site-branding .main-title,
.site-header .site-branding .site-title,
.site-header .site-branding {
    display: none !important;
}

/* Centrer proprement le .site-logo seul */
.inside-header {
    justify-content: center !important;
}

/* ─── Fix single post : forcer centrage à TOUS les niveaux ───────────────── */
body.single-post #page.grid-container,
body.single #page.grid-container,
body.page #page.grid-container {
    max-width: 1180px !important;
}

body.single-post .inside-article,
body.single .inside-article,
body.page .inside-article {
    padding: 0 !important;
    max-width: 100% !important;
    background: transparent !important;
}

body.single-post .entry-content,
body.single .entry-content,
body.page .entry-content {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
}

/* ─── Fix TOC : enlever borders parasites du title-container ─────────────── */
.ez-toc-title-container,
#ez-toc-container .ez-toc-title-container,
div[class*="ez-toc"] .ez-toc-title-container {
    border: none !important;
    border-bottom: 1px solid var(--c-rule) !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 0 var(--space-sm) 0 !important;
    margin: 0 0 var(--space-md) 0 !important;
}

/* La liste TOC doit être dans le même padding que le container principal */
.ez-toc-list,
#ez-toc-container .ez-toc-list {
    padding-left: 0 !important;
    margin: 0 !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   FIX FINAL : header logo+menu aligné + article centré via GRID
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Header : logo à gauche, menu à droite, MÊME ligne ─────────────────── */
.site-header {
    background: var(--c-paper) !important;
    border-bottom: none !important;
    padding: 0 !important;
}

.inside-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: var(--space-md) !important;
    padding: var(--space-md) var(--space-gutter) !important;
    max-width: var(--max-width) !important;
    margin: 0 auto !important;
}

.site-logo {
    margin: 0 !important;
    flex-shrink: 0 !important;
}

.site-logo img.header-image {
    max-height: 60px !important;
    width: auto !important;
    height: auto !important;
    display: block !important;
}

/* Masquer la .site-branding (doublon texte LB) */
.site-branding,
.site-branding-container .site-branding {
    display: none !important;
}

/* Navigation dans le header (nav-float-right) */
.main-navigation {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.main-navigation.sub-menu-right {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
}

.inside-navigation {
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    justify-content: flex-end !important;
    background: transparent !important;
}

.main-navigation .menu {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    background: transparent !important;
}

/* Ligne horizontale sous le header complet (logo+menu) */
.site-header {
    border-bottom: 1px solid var(--c-rule) !important;
}

/* Hide mobile toggle on desktop */
@media (min-width: 769px) {
    .site-header .menu-toggle,
    .site-header .mobile-menu-control-wrapper,
    .has-inline-mobile-toggle .mobile-menu-control-wrapper { display: none !important; }
}

/* ─── Article single/page : CENTRAGE VIA GRID (robuste) ──────────────────── */




body.single .inside-article,
body.single-post .inside-article,
body.page .inside-article {
    padding: 0 !important;
    max-width: 100% !important;
    background: transparent !important;
}

body.single .entry-content,
body.single-post .entry-content,
body.page .entry-content {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
}

/* Masquer post-meta / post-navigation moches en bas d'article */
body.single-post .post-navigation,
body.single-post nav.navigation.post-navigation,
body.single-post .cat-links,
body.single-post .nav-links,
body.single-post .nav-previous,
body.single-post .nav-next {
    display: none !important;
}

/* ─── Footer : vraiment centré ─────────────────────────────────────────── */
.site-footer {
    text-align: center !important;
}
.footer-menu {
    justify-content: center !important;
}
.copyright-bar {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}
.copyright-line {
    text-align: center !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   CENTRAGE SINGLE/PAGE — approche margin auto, block, spécificité extreme
   ═══════════════════════════════════════════════════════════════════════════ */

/* Reset TOUT ce qui pourrait influer sur #primary */
html body:not(.home) div#primary.content-area,
html body:not(.home) div#primary {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    flex: none !important;
    grid-template-columns: none !important;
}

/* Main: block + margin auto + max-width strict */
html body:not(.home) main#main.site-main,
html body:not(.home) main#main {
    display: block !important;
    width: auto !important;
    max-width: 1040px !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: var(--space-xl) !important;
    margin-bottom: var(--space-xl) !important;
    padding-left: var(--space-gutter) !important;
    padding-right: var(--space-gutter) !important;
    float: none !important;
    flex: none !important;
    grid-column: auto !important;
}

html body:not(.home) #main > article,
html body:not(.home) #main article.post,
html body:not(.home) #main article.page {
    max-width: 100% !important;
    width: 100% !important;
}

html body:not(.home) .inside-article {
    padding: 0 !important;
    max-width: 100% !important;
    background: transparent !important;
}

html body:not(.home) .entry-content {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
}

/* Masquer les post-nav/meta moches */
body.single-post .post-navigation,
body.single-post nav.navigation.post-navigation,
body.single-post .cat-links,
body.single-post .nav-links,
body.single-post .nav-previous,
body.single-post .nav-next {
    display: none !important;
}


/* ═══ LAYOUT OPTION B : texte 720px, medias 1040px ═══════════════════════ */

/* Paragraphes texte, listes, blockquotes, titres → 720px centrés */
body:not(.home) .entry-content > p,
body:not(.home) .entry-content > ul,
body:not(.home) .entry-content > ol,
body:not(.home) .entry-content > blockquote,
body:not(.home) .entry-content > h2,
body:not(.home) .entry-content > h3,
body:not(.home) .entry-content > h4,
body:not(.home) .entry-content > h5,
body:not(.home) .entry-content article[itemtype*="BlogPosting"] > div > section > p,
body:not(.home) .entry-content article[itemtype*="BlogPosting"] > div > section > h2,
body:not(.home) .entry-content article[itemtype*="BlogPosting"] > div > section > h3,
body:not(.home) .entry-content article[itemtype*="BlogPosting"] > div > section > h4,
body:not(.home) .entry-content article[itemtype*="BlogPosting"] > div > section > ul,
body:not(.home) .entry-content article[itemtype*="BlogPosting"] > div > section > ol,
body:not(.home) .entry-content article[itemtype*="BlogPosting"] > div > section > blockquote,
body:not(.home) .entry-content article[itemtype*="BlogPosting"] > div > p,
body:not(.home) .entry-content article[itemtype*="BlogPosting"] > div > h1,
body:not(.home) .entry-header .entry-title,
body:not(.home) .entry-header .entry-meta {
    max-width: 720px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Le h1 TextBulker spécifiquement */
body:not(.home) .entry-content article[itemtype*="BlogPosting"] h1 {
    max-width: 720px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Medias & encadrés → toute la largeur 1040px (centrés par margin auto) */
body:not(.home) .entry-content img,
body:not(.home) .entry-content figure,
body:not(.home) .entry-content table,
body:not(.home) .entry-content .wp-block-image,
body:not(.home) .entry-content .wp-block-gallery,
body:not(.home) .entry-content .wp-block-embed,
body:not(.home) .entry-content .wp-block-video,
body:not(.home) #ez-toc-container,
body:not(.home) .ez-toc-v2_0_74,
body:not(.home) div[class*="ez-toc"] {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
}

/* Featured image en haut : même largeur que le contenu (1040px max) */
body:not(.home) .post-image,
body:not(.home) .inside-article > .featured-image,
body:not(.home) .wp-post-image {
    max-width: 100%;
    width: auto;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block;
}

/* Le TOC Easy Table of Contents : full 1040px mais avec son propre padding interne */
body:not(.home) #ez-toc-container.ez-toc-title-toggle-default {
    max-width: 100% !important;
}


/* ═══ MOBILE FIX : réduire padding, texte plus large ════════════════════════ */
@media (max-width: 768px) {
    /* Kill body default margin */
    body {
        margin: 0 !important;
    }

    /* Gutter plus petit sur mobile */
    :root {
        --space-gutter: 1rem; /* 16px fixe au lieu de clamp */
    }

    /* .grid-container garde son padding réduit — c'est le seul niveau de padding */
    .grid-container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* #main retire SON padding (on évite le double niveau) */
    body:not(.home) main#main.site-main,
    body:not(.home) main#main {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-top: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }

    /* Paragraphes : 100% width sur mobile (au lieu de 720px) */
    body:not(.home) .entry-content > p,
    body:not(.home) .entry-content > ul,
    body:not(.home) .entry-content > ol,
    body:not(.home) .entry-content > blockquote,
    body:not(.home) .entry-content > h2,
    body:not(.home) .entry-content > h3,
    body:not(.home) .entry-content article p,
    body:not(.home) .entry-content article h1,
    body:not(.home) .entry-content article h2,
    body:not(.home) .entry-content article h3,
    body:not(.home) .entry-header .entry-title,
    body:not(.home) .entry-header .entry-meta {
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Drop cap plus petit sur mobile */
    body:not(.home) .entry-content article[itemtype*="BlogPosting"] section:first-of-type p:first-of-type::first-letter,
    body:not(.home) .entry-content > p:first-of-type::first-letter {
        font-size: 3.2rem !important;
        line-height: 0.85 !important;
        margin: 0.1em 0.08em -0.05em -0.04em !important;
    }

    /* Hero homepage — padding plus compact */
    .hero-presentation,
    .about-section,
    .philosophy-section {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Featured image mobile : pleine largeur */
    .post-image,
    .wp-post-image,
    body:not(.home) .entry-content img {
        margin-left: -1rem !important;
        margin-right: -1rem !important;
        max-width: calc(100% + 2rem) !important;
        width: calc(100% + 2rem) !important;
    }

    /* TOC mobile — padding réduit */
    #ez-toc-container,
    .ez-toc-v2_0_74,
    div[class*="ez-toc"] {
        padding: 1rem !important;
        margin: 1.5rem 0 !important;
    }
}

@media (max-width: 480px) {
    /* Viewport très étroit : réduire encore */
    .grid-container {
        padding-left: 0.875rem !important;
        padding-right: 0.875rem !important;
    }
    body:not(.home) .entry-title,
    body:not(.home) .entry-content article[itemtype*="BlogPosting"] h1 {
        font-size: 1.6rem !important;
        line-height: 1.15 !important;
    }
}


/* ═══ MOBILE MENU : menu hamburger qui marche ═════════════════════════════ */
@media (max-width: 768px) {
    /* Montrer SEULEMENT le toggle (burger) sur mobile, masquer les items */
    .site-header .mobile-menu-control-wrapper,
    .has-inline-mobile-toggle .mobile-menu-control-wrapper,
    .site-header .menu-toggle {
        display: flex !important;
        align-items: center !important;
    }

    /* Cacher la nav complète par défaut sur mobile */
    nav.main-navigation#site-navigation {
        display: none !important;
    }

    /* Quand le menu est ouvert (toggled), afficher en drawer vertical plein width */
    nav.main-navigation#site-navigation.toggled,
    .menu-toggle[aria-expanded="true"] ~ nav.main-navigation#site-navigation,
    nav.main-navigation.toggled {
        display: block !important;
        width: 100% !important;
        position: static !important;
        background: var(--c-paper-warm) !important;
        border-top: 1px solid var(--c-rule) !important;
        border-bottom: 1px solid var(--c-rule) !important;
        padding: 1rem !important;
    }
    nav.main-navigation#site-navigation.toggled .menu,
    nav.main-navigation.toggled .menu {
        flex-direction: column !important;
        gap: 0 !important;
        width: 100% !important;
    }
    nav.main-navigation#site-navigation.toggled .menu > li,
    nav.main-navigation.toggled .menu > li {
        width: 100% !important;
        border-bottom: 1px solid var(--c-rule) !important;
    }
    nav.main-navigation#site-navigation.toggled .menu > li:last-child,
    nav.main-navigation.toggled .menu > li:last-child {
        border-bottom: none !important;
    }
    nav.main-navigation#site-navigation.toggled .menu > li > a,
    nav.main-navigation.toggled .menu > li > a {
        padding: 0.8rem 0 !important;
        margin-right: 0 !important;
        display: block !important;
    }
    nav.main-navigation#site-navigation.toggled .menu > li > a::after,
    nav.main-navigation.toggled .menu > li > a::after {
        display: none !important;
    }

    /* Logo plus grand sur mobile (actuellement trop petit) */
    .site-logo img.header-image {
        max-height: 48px !important;
    }

    /* Header pas de wrap sur mobile (logo à gauche, burger à droite) */
    .inside-header {
        flex-wrap: nowrap !important;
        padding: 0.75rem 1rem !important;
        gap: 0.5rem !important;
    }
}