/*
 Theme Name:   The Monocle Bear
 Theme URI:    https://themonoclebear.com
 Description:  Kadence child theme — The Monocle Bear AI Lab
 Author:       Sophie Dupont
 Author URI:   https://themonoclebear.com
 Template:     kadence
 Version:      2.0.0
 License:      Proprietary
 License URI:  https://themonoclebear.com/mentions-legales
 Text Domain:  themonoclebear-child
*/

/* ══════════════════════════════════════════
   DESIGN TOKENS — exact match current site
   ══════════════════════════════════════════ */

:root {
    /* Backgrounds */
    --tmb-bg:               #0e2a3a;
    --tmb-bg-dark:          #091e2c;
    --tmb-bg-card:          rgba(255, 255, 255, 0.04);
    --tmb-bg-card-hover:    rgba(255, 255, 255, 0.07);

    /* Accent — Teal */
    --tmb-accent:           #42c6d4;
    --tmb-accent-dim:       #2a9aa6;
    --tmb-accent-hover:     #5dd8e4;

    /* Borders */
    --tmb-border:           rgba(255, 255, 255, 0.1);
    --tmb-border-hover:     rgba(66, 198, 212, 0.4);

    /* Text */
    --tmb-text:             #e8edf2;
    --tmb-text-muted:       #8fa4b8;

    /* Typography */
    --tmb-sans:             'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --tmb-mono:             'JetBrains Mono', monospace;

    /* Layout */
    --tmb-max-width:        1100px;
    --tmb-section-padding:  2.5rem 2rem;

    /* Transitions */
    --tmb-transition:       0.2s ease;
}


/* ══════════════════════════════════════════
   KADENCE GLOBAL PALETTE OVERRIDE
   ══════════════════════════════════════════ */

body {
    --global-palette1: #42c6d4;   /* accent */
    --global-palette2: #5dd8e4;   /* accent hover */
    --global-palette3: #e8edf2;   /* text */
    --global-palette4: #8fa4b8;   /* text muted */
    --global-palette5: #5a7088;   /* text dimmed */
    --global-palette6: rgba(255, 255, 255, 0.1); /* border */
    --global-palette7: #091e2c;   /* bg dark */
    --global-palette8: #0e2a3a;   /* bg main */
    --global-palette9: #061520;   /* bg deepest */
}


/* ══════════════════════════════════════════
   GLOBAL RESETS & BASE
   ══════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    font-family: var(--tmb-sans) !important;
    background: var(--tmb-bg) !important;
    color: var(--tmb-text);
    font-size: 17px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

::selection {
    background: var(--tmb-accent);
    color: var(--tmb-bg);
}

img { max-width: 100%; height: auto; }


/* ══════════════════════════════════════════
   TYPOGRAPHY
   ══════════════════════════════════════════ */

h1, h2, h3, h4, h5, h6 {
    color: var(--tmb-text);
    font-family: var(--tmb-sans);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

h1 { font-size: clamp(2.2rem, 4.5vw, 3.2rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.5rem); }

p {
    color: var(--tmb-text-muted);
    font-size: 1.05rem;
    line-height: 1.8;
    margin-bottom: 0.4rem;
}

p.gap {
    height: 1em;
    margin: 0;
}

p strong, p b {
    color: var(--tmb-text);
    font-weight: 500;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--tmb-transition);
}

ul { list-style: none; padding: 0; }


/* ══════════════════════════════════════════
   NAVIGATION (matches current site exactly)
   ══════════════════════════════════════════ */

.site-header,
#masthead,
.kadence-header {
    position: fixed !important;
    top: 0;
    width: 100%;
    z-index: 1000;
    background: rgba(14, 42, 58, 0.92) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--tmb-border);
}

.site-header a,
.kadence-header a,
.header-navigation a {
    color: var(--tmb-text-muted) !important;
    font-size: 0.88rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    transition: color var(--tmb-transition);
}

.site-header a:hover,
.kadence-header a:hover,
.header-navigation a:hover {
    color: var(--tmb-text) !important;
}

/* Logo */
.custom-logo {
    max-height: 40px;
    width: auto;
}

/* Nav brand text */
.site-branding .site-title,
.site-branding .site-title a {
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: 0.02em;
    color: var(--tmb-text) !important;
}


/* ══════════════════════════════════════════
   SECTION COMMONS
   ══════════════════════════════════════════ */

.section-wrap,
.tmb-section .kb-row-layout-inner,
.tmb-section > .alignwide {
    max-width: var(--tmb-max-width);
    margin: 0 auto;
    padding: var(--tmb-section-padding);
}

/* Section label: // SERVICES pattern */
.section-label,
.tmb-label {
    font-family: var(--tmb-mono);
    font-size: 0.78rem;
    color: var(--tmb-accent);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.section-title,
.tmb-title {
    font-size: clamp(1.6rem, 3.5vw, 2.2rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-bottom: 0.8rem;
    color: var(--tmb-text);
}

.section-subtitle,
.tmb-subtitle {
    color: var(--tmb-text-muted);
    font-size: 1.05rem;
    line-height: 1.7;
    max-width: 600px;
    margin-bottom: 3rem;
}


/* ══════════════════════════════════════════
   HERO
   ══════════════════════════════════════════ */

.tmb-hero {
    padding-top: 7rem;
    background: var(--tmb-bg);
}

.tmb-hero-grid {
    display: flex;
    flex-direction: row;
    gap: 3rem;
    align-items: center;
}

.tmb-hero-image {
    flex: 0 0 220px;
}

.tmb-hero-image img {
    width: 220px;
    height: auto;
}

.tmb-hero-content h1 {
    margin-bottom: 2rem;
}

.tmb-hero-content h1 .accent,
h1 .accent {
    color: var(--tmb-accent);
}

/* SSH terminal tag */
.tmb-ssh,
.hero-tag {
    display: inline-block;
    margin-top: 2rem;
    padding: 0.7rem 1.5rem;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 4px;
    font-family: var(--tmb-mono);
    font-size: 0.82rem;
    color: var(--tmb-accent);
    letter-spacing: 0.03em;
}


/* ══════════════════════════════════════════
   PILLAR CARDS (services)
   ══════════════════════════════════════════ */

.tmb-pillars {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
}

.tmb-pillar {
    background: var(--tmb-bg-card);
    border: 1px solid var(--tmb-border);
    border-radius: 10px;
    padding: 2rem;
    transition: all var(--tmb-transition);
}

.tmb-pillar:hover {
    background: var(--tmb-bg-card-hover);
    border-color: var(--tmb-border-hover);
}

.tmb-pillar__number {
    font-family: var(--tmb-mono);
    font-size: 0.75rem;
    color: var(--tmb-accent);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 0.8rem;
}

.tmb-pillar__title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--tmb-text) !important;
    margin-bottom: 1rem;
}

.tmb-pillar__desc {
    color: var(--tmb-text-muted);
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.tmb-pillar__details {
    border-top: 1px solid var(--tmb-border);
    padding-top: 1.2rem;
    margin-top: auto;
}

.tmb-pillar__details li {
    color: var(--tmb-text-muted);
    font-size: 0.88rem;
    padding: 0.25rem 0 0.25rem 1rem;
    position: relative;
}

.tmb-pillar__details li::before {
    content: '›';
    position: absolute;
    left: 0;
    color: var(--tmb-accent);
    font-weight: 600;
}


/* ══════════════════════════════════════════
   STEPS (approche)
   ══════════════════════════════════════════ */

.tmb-steps {
    margin-top: 2.5rem;
}

.tmb-step {
    display: flex;
    gap: 1.5rem;
    align-items: baseline;
    padding: 1.2rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.tmb-step:last-child {
    border-bottom: none;
}

.tmb-step__number {
    font-family: var(--tmb-mono);
    font-size: 0.85rem;
    color: var(--tmb-accent);
    flex-shrink: 0;
    min-width: 2rem;
}

.tmb-step__body h4,
.tmb-step__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--tmb-text) !important;
    margin-bottom: 0.3rem;
}

.tmb-step__desc {
    color: var(--tmb-text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
}


/* ══════════════════════════════════════════
   DATA SECTION (données sensibles)
   ══════════════════════════════════════════ */

.tmb-data {
    display: flex;
    gap: 3rem;
    align-items: flex-start;
    margin-top: 3rem;
}

.tmb-data__image {
    flex: 0 0 200px;
}

.tmb-data__image img {
    width: 200px;
    height: auto;
}

.tmb-data__content h2 {
    font-size: clamp(1.4rem, 3vw, 1.8rem);
    margin-bottom: 1.5rem;
}


/* ══════════════════════════════════════════
   SECTORS
   ══════════════════════════════════════════ */

.tmb-sectors {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
    margin-top: 2rem;
}

.tmb-sector {
    background: var(--tmb-bg-card);
    border: 1px dashed var(--tmb-border);
    border-radius: 8px;
    padding: 1.5rem;
}

.tmb-sector h4 {
    color: var(--tmb-text) !important;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.tmb-sector p {
    color: var(--tmb-text-muted);
    font-size: 0.88rem;
    line-height: 1.5;
}


/* ══════════════════════════════════════════
   STACK TECHNIQUE
   ══════════════════════════════════════════ */

.tmb-stack {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-top: 2.5rem;
    padding-top: 2.5rem;
    border-top: 2px solid var(--tmb-accent);
    border-top-width: 2px;
}

/* Amber line separator — matches current site's teal line */
.tmb-stack::before {
    display: none; /* line is on border-top */
}

.tmb-stack__label {
    font-family: var(--tmb-mono);
    font-size: 0.72rem;
    color: var(--tmb-accent);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.tmb-stack__value {
    color: var(--tmb-text-muted);
    font-size: 0.92rem;
    line-height: 1.6;
}


/* ══════════════════════════════════════════
   ABOUT / NO BULLSHIT
   ══════════════════════════════════════════ */

.tmb-about h2 {
    font-size: clamp(1.6rem, 3.5vw, 2.2rem);
}


/* ══════════════════════════════════════════
   CONTACT
   ══════════════════════════════════════════ */

.tmb-contact__avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.tmb-contact__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tmb-contact h2 {
    font-size: 1.8rem;
    margin-bottom: 0.3rem;
}

.tmb-contact h3 {
    color: var(--tmb-text-muted);
    font-size: 1.1rem;
    font-weight: 400;
    margin-bottom: 2rem;
}

/* Buttons — teal filled */
.tmb-btn,
.wp-block-button__link {
    display: inline-block;
    padding: 0.8rem 2rem;
    background: var(--tmb-accent) !important;
    color: var(--tmb-bg) !important;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    transition: all var(--tmb-transition);
}

.tmb-btn:hover,
.wp-block-button__link:hover {
    background: var(--tmb-accent-hover) !important;
    color: var(--tmb-bg) !important;
}

/* Outlined variant */
.tmb-btn--outline {
    background: transparent !important;
    color: var(--tmb-accent) !important;
    border: 1px solid var(--tmb-accent);
}

.tmb-btn--outline:hover {
    background: var(--tmb-accent) !important;
    color: var(--tmb-bg) !important;
}

.tmb-contact__cta {
    margin-top: 1rem;
    color: var(--tmb-text-muted);
    font-size: 0.95rem;
}

.tmb-contact__bluesky {
    margin-top: 1.5rem;
}


/* ══════════════════════════════════════════
   REFERENCES / PREVIOUS MISSIONS
   ══════════════════════════════════════════ */

.tmb-references {
    text-align: center;
    padding: 2.5rem 0;
    border-top: 1px solid var(--tmb-border);
}

.tmb-references h4 {
    font-family: var(--tmb-sans);
    font-size: 0.95rem;
    font-weight: 500;
    font-style: italic;
    color: var(--tmb-text-muted);
    margin-bottom: 1.5rem;
}

.tmb-references__logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    flex-wrap: wrap;
}

.tmb-references__logos img {
    max-height: 45px;
    width: auto;
    opacity: 0.7;
    transition: opacity var(--tmb-transition);
}

.tmb-references__logos img:hover {
    opacity: 1;
}


/* ══════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════ */

.site-footer,
footer.kadence-footer {
    background: var(--tmb-bg-dark) !important;
    border-top: 1px solid var(--tmb-border);
    font-size: 0.88rem;
}

.site-footer,
.site-footer p,
footer.kadence-footer,
footer.kadence-footer p {
    color: var(--tmb-text-muted) !important;
}

.site-footer a,
footer.kadence-footer a {
    color: var(--tmb-text-muted) !important;
    transition: color var(--tmb-transition);
}

.site-footer a:hover,
footer.kadence-footer a:hover {
    color: var(--tmb-text) !important;
}

.tmb-footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
    max-width: var(--tmb-max-width);
    margin: 0 auto;
    padding: 2.5rem 2rem;
}

.tmb-footer-brand h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--tmb-text) !important;
    margin-bottom: 0.5rem;
}

.tmb-footer-brand .tagline {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tmb-text-muted);
    line-height: 1.5;
    margin-bottom: 1rem;
}

.tmb-footer-brand .lab-tag {
    font-family: var(--tmb-mono);
    font-size: 0.75rem;
    color: var(--tmb-accent);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 0.8rem;
}

.brand-note {
    font-style: italic;
    font-size: 0.82rem;
    color: var(--tmb-text-muted);
}

.tmb-ai-notice {
    font-size: 0.82rem;
    color: var(--tmb-text-muted);
    line-height: 1.6;
}

.tmb-footer-bottom {
    text-align: center;
    padding: 1.2rem 2rem;
    border-top: 1px solid var(--tmb-border);
    font-size: 0.82rem;
    color: var(--tmb-text-muted);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
}


/* ══════════════════════════════════════════
   BLOG PAGE / ARCHIVE / SINGLE
   ══════════════════════════════════════════ */

.site-main,
.content-area,
.site-container {
    background-color: var(--tmb-bg);
}

.entry-content {
    color: var(--tmb-text-muted);
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
    color: var(--tmb-text);
}

.entry-content a {
    color: var(--tmb-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.entry-content a:hover {
    color: var(--tmb-accent-hover);
}

.entry-content blockquote {
    border-left: 3px solid var(--tmb-accent);
    padding-left: 1.5rem;
    color: var(--tmb-text);
    font-style: italic;
}

.entry-content code {
    font-family: var(--tmb-mono);
    background: var(--tmb-bg-dark);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
    color: var(--tmb-accent);
}

.entry-content pre {
    font-family: var(--tmb-mono);
    background: var(--tmb-bg-dark);
    padding: 1.5rem;
    border-radius: 6px;
    overflow-x: auto;
    border: 1px solid var(--tmb-border);
}

.entry-content pre code {
    background: none;
    padding: 0;
    color: var(--tmb-text);
}

/* Blog cards */
.entry.post,
.loop-entry {
    background: var(--tmb-bg-card) !important;
    border: 1px solid var(--tmb-border);
    border-radius: 10px;
    overflow: hidden;
    transition: all var(--tmb-transition);
}

.entry.post:hover,
.loop-entry:hover {
    border-color: var(--tmb-border-hover);
}

.entry-title a {
    color: var(--tmb-text) !important;
}

.entry-title a:hover {
    color: var(--tmb-accent) !important;
}

.entry-meta,
.entry-meta a {
    color: var(--tmb-text-muted) !important;
    font-size: 0.85rem;
}


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

@media (max-width: 768px) {
    .tmb-hero-grid,
    .tmb-data {
        flex-direction: column;
        text-align: center;
    }

    .tmb-hero-image,
    .tmb-data__image {
        flex: none;
        margin: 0 auto;
    }

    .tmb-pillars {
        grid-template-columns: 1fr;
    }

    .tmb-sectors {
        grid-template-columns: 1fr;
    }

    .tmb-stack {
        grid-template-columns: 1fr;
    }

    .tmb-footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .tmb-references__logos {
        gap: 2rem;
    }
}

@media (max-width: 480px) {
    .tmb-step {
        flex-direction: column;
        gap: 0.3rem;
    }

    .tmb-pillar {
        padding: 1.5rem;
    }
}


/* ══════════════════════════════════════════
   UTILITY CLASSES
   ══════════════════════════════════════════ */

.text-accent { color: var(--tmb-accent) !important; }
.text-muted { color: var(--tmb-text-muted) !important; }
.font-mono { font-family: var(--tmb-mono) !important; }
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}