/* =========================================================================
   styleresume.css — web presentation for the daily "résumé de séance" pages
   (/bourse-de-casablanca-resume-seances/seance-*.html, built by send.php).

   WHY THIS FILE EXISTS
   The page body is produced by buildEmailContent() in functions/send.php, the
   SAME function that builds the newsletter. Email clients strip <style> blocks
   and class selectors, so that markup must carry its styling inline — and those
   inline rules are tuned for a 700px email, not for a web page sitting inside
   the site chrome. This stylesheet is the web-only layer that re-dresses that
   markup, and it is the only place the page's look is defined.

   TWO RULES WHEN EDITING
   1. Never "fix" the page by changing the inline styles in send.php. They are
      the newsletter's only styling; editing them changes what 300+ subscribers
      receive. Override here instead — classes are invisible to email clients.
      That is also why !important appears so often below: it is beating an
      inline style, not another rule.
   2. Everything is scoped under .seance-main / .seance-card. Bare .container
      was used before and this file is loaded next to mystyle.css, so an
      unscoped rule here can silently restyle unrelated pages.

   Colours are the site's existing tokens (see mystyle.css: .main-nav,
   .latest-article-card and the .dark-mode block) so the page matches the rest
   of the site rather than introducing a second palette. Dark mode keys off
   html.dark-mode — the class the site's own toggle sets — NOT
   prefers-color-scheme, which is what made these pages follow the OS while
   every other page followed the button.
   ========================================================================= */

/* ---------- tokens ---------------------------------------------------- */
:root {
    --sc-surface: #fff;
    --sc-surface-alt: #f7fafc;
    --sc-border: #e2e8f0;
    --sc-border-strong: #cbd5e0;
    --sc-heading: #1a202c;
    --sc-text: #4a5568;
    --sc-muted: #718096;
    --sc-accent: #2c5282;
    --sc-up: #1a7f37;
    --sc-down: #c00;
    --sc-flat: #718096;
    --sc-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

/* Dark values are lifted versions of the light ones, the same way the site
   lifts its link colour from #0d6efd to #6cb2ff. #1a7f37 and #c00 are far too
   dark to read on a #16202b card, so the semantic up/down pair is lifted too. */
.dark-mode {
    --sc-surface: #16202b;
    --sc-surface-alt: #1b2733;
    --sc-border: #2a3946;
    --sc-border-strong: #3a4a5a;
    --sc-heading: #e6edf3;
    --sc-text: #c2cfdb;
    --sc-muted: #8aa0b4;
    --sc-accent: #6cb2ff;
    --sc-up: #3fb950;
    --sc-down: #ff7b72;
    --sc-flat: #8aa0b4;
    --sc-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}

/* ---------- page shell ------------------------------------------------ */
.seance-main {
    max-width: 1100px;
    margin: 24px auto 32px;
    padding: 0 16px;
}

.seance-head {
    margin-bottom: 18px;
}

/* padding is reset because cb-mobile.css declares a bare `h1 { padding: 0 16px }`
   for the home page's title, which would double up with .seance-main's own
   gutter here. */
.seance-head h1 {
    margin: 0;
    padding: 0;
    font-size: 1.9rem;
    line-height: 1.25;
    color: var(--sc-heading);
}

/* The card the report sits in. Neutralises the email's 700px width, its
   centring margin and its padding. */
.seance-card {
    max-width: none !important;
    margin: 0 !important;
    padding: 28px 30px !important;
    background: var(--sc-surface) !important;
    border: 1px solid var(--sc-border);
    border-radius: 10px;
    box-shadow: var(--sc-shadow) !important;
    color: var(--sc-text);
}

/* "Résumé du Marché – <date>". Inline it is a centred 0056b3 heading, which
   competed with the real <h1> directly above it. Demoted to a section lead. */
.seance-card .seance-subtitle {
    text-align: start !important;
    margin: 0 0 20px !important;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--sc-border);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--sc-heading) !important;
}

.seance-card .seance-h3 {
    color: var(--sc-heading) !important;
    font-size: 0.95rem !important;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.seance-card a {
    color: var(--sc-accent);
}

/* ---------- panels (overview, sectors) -------------------------------- */
.seance-card .seance-panel {
    background: var(--sc-surface-alt) !important;
    border: 1px solid var(--sc-border) !important;
    border-radius: 8px !important;
    padding: 18px 20px !important;
    margin: 22px 0 !important;
}

/* ---------- market overview (hausses / baisses / tendance) ------------ */
.seance-card .seance-stats {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.seance-card .seance-stat {
    padding: 4px !important;
}

.seance-card .seance-stat-value {
    font-size: 1.6rem !important;
    font-weight: 700;
    line-height: 1.2;
}

.seance-card .seance-stat-label {
    margin-top: 2px;
    font-size: 0.75rem !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sc-muted) !important;
}

/* Direction modifiers. The inline colour is correct for email but unreadable
   on a dark card, so every semantic-coloured value carries one of these. */
.seance-card .seance-up { color: var(--sc-up) !important; }
.seance-card .seance-down { color: var(--sc-down) !important; }
.seance-card .seance-flat { color: var(--sc-flat) !important; }

/* ---------- MASI ------------------------------------------------------ */
/* The email paints this box with a lime or a magenta gradient. Neither is a
   site colour; on the page it becomes a flat tinted panel with a direction
   stripe, which reads the same at a glance without the confetti. */
.seance-card .seance-masi {
    background: var(--sc-surface-alt) !important;
    border: 1px solid var(--sc-border) !important;
    border-inline-start: 4px solid var(--sc-flat) !important;
    border-radius: 8px !important;
    max-width: none !important;
    padding: 20px !important;
    margin: 22px 0 !important;
    text-align: start !important;
}

.seance-card .seance-masi--up { border-inline-start-color: var(--sc-up) !important; }
.seance-card .seance-masi--down { border-inline-start-color: var(--sc-down) !important; }

.seance-card .seance-masi-value {
    font-size: 1.75rem !important;
    font-weight: 700;
    margin-bottom: 6px !important;
}

.seance-card .seance-masi-note {
    color: var(--sc-text) !important;
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
}

/* ---------- sector bars ----------------------------------------------- */
.seance-card .seance-sector {
    margin: 12px 0 !important;
}

.seance-card .seance-sector-head {
    font-size: 0.875rem;
    color: var(--sc-text);
}

.seance-card .seance-bar {
    background: var(--sc-border) !important;
    height: 6px !important;
    border-radius: 3px !important;
}

.seance-card .seance-bar-fill {
    border-radius: 3px;
}

/* ---------- analyses du jour ------------------------------------------ */
/* Keeps the amber accent (it is the only "note" colour the report has) but as
   a rule on the side instead of a filled yellow block. */
.seance-card .seance-insights {
    background: var(--sc-surface-alt) !important;
    border: 1px solid var(--sc-border) !important;
    border-inline-start: 4px solid #d99b00 !important;
    border-radius: 8px !important;
    padding: 18px 20px !important;
    margin: 22px 0 !important;
}

.seance-card .seance-insights .seance-h3 {
    color: var(--sc-heading) !important;
}

.seance-card .seance-insight {
    color: var(--sc-text) !important;
    font-size: 0.95rem !important;
    line-height: 1.6;
    margin: 6px 0 !important;
}

/* ---------- tables ---------------------------------------------------- */
.seance-card .seance-table-title {
    margin: 30px 0 10px !important;
    font-size: 1.05rem !important;
    font-weight: 600;
}

.seance-card .seance-table {
    width: 100%;
    background: transparent !important;
    border: 1px solid var(--sc-border) !important;
    border-radius: 8px;
    box-shadow: none !important;
    margin-bottom: 8px !important;
    overflow: hidden;
}

/* The email header row is a purple gradient (#667eea → #764ba2), a colour that
   appears nowhere else on the site. On the page it becomes the same navy as
   the main nav. */
.seance-card .seance-thead {
    background: #0d2b45 !important;
    background-image: none !important;
}

.dark-mode .seance-card .seance-thead {
    background: #1b1b1b !important;
}

.seance-card .seance-table th {
    padding: 10px 12px !important;
    font-size: 0.72rem !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #e8f4fd !important;
}

.seance-card .seance-table td {
    padding: 10px 12px !important;
    border-bottom: 1px solid var(--sc-border) !important;
    color: var(--sc-text);
    vertical-align: middle;
}

.seance-card .seance-table tbody tr:last-child td {
    border-bottom: none !important;
}

.seance-card .seance-table tbody tr:nth-child(even) {
    background: var(--sc-surface-alt);
}

/* The inner layout table each row uses to sit the logo next to the ticker. */
.seance-card .seance-table td table td {
    padding: 0 !important;
    border: none !important;
    background: none !important;
}

.seance-card .seance-table td table td:first-child {
    padding-inline-end: 10px !important;
}

/* 64px is an email size; at page width it made every row ~90px tall. */
.seance-card .seance-logo {
    width: 40px !important;
    height: 40px !important;
}

.seance-card .seance-symbol {
    color: var(--sc-accent) !important;
    font-weight: 700;
}

.seance-card .seance-badge {
    background: #b3541e !important;
    font-size: 0.625rem !important;
    letter-spacing: 0.04em;
}

.seance-card .seance-name {
    color: var(--sc-heading);
    font-weight: 500;
}

.seance-card .seance-name-sector {
    color: var(--sc-muted) !important;
    font-size: 0.72rem !important;
    margin-top: 2px;
}

.seance-card .seance-var {
    font-size: 0.9rem !important;
}

.seance-card .seance-price {
    color: var(--sc-heading) !important;
    font-variant-numeric: tabular-nums;
}

.seance-card .seance-rule {
    border-top: 1px solid var(--sc-border) !important;
    margin: 30px 0 !important;
}

/* ---------- source + community ---------------------------------------- */
/* Inline this line is 24px — caption text at heading size. */
.seance-card .seance-source {
    font-size: 0.875rem !important;
    color: var(--sc-muted) !important;
    text-align: start !important;
    margin-top: 28px !important;
}

.seance-card .seance-community {
    background: var(--sc-surface-alt) !important;
    border: 1px solid var(--sc-border) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    padding: 22px !important;
    margin: 24px 0 0 !important;
    text-align: start !important;
}

.seance-card .seance-community .seance-h3 {
    color: var(--sc-heading) !important;
    font-size: 1.05rem !important;
}

.seance-card .seance-community-text {
    color: var(--sc-text) !important;
    font-size: 0.95rem !important;
    margin-bottom: 16px !important;
}

.seance-card .seance-community-btn {
    background: #0d2b45 !important;
    color: #fff !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    padding: 10px 20px !important;
    font-size: 0.95rem !important;
}

.seance-card .seance-community-btn:hover {
    background: #164d73 !important;
}

.dark-mode .seance-card .seance-community-btn {
    background: #6cb2ff !important;
    color: #0d2b45 !important;
}

/* ---------- responsive ------------------------------------------------ */
@media (max-width: 768px) {
    .seance-main {
        margin: 16px auto 24px;
        padding: 0 12px;
    }

    .seance-head h1 {
        font-size: 1.4rem;
    }

    .seance-card {
        padding: 20px 16px !important;
    }

    /* Four columns of market data do not fit a phone; let the table scroll
       rather than crushing the ticker and the price into each other. */
    .seance-card .seance-table-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .seance-card .seance-table {
        min-width: 520px;
    }

    .seance-card .seance-logo {
        width: 32px !important;
        height: 32px !important;
    }

    .seance-card .seance-stat-value {
        font-size: 1.3rem !important;
    }

    .seance-card .seance-masi-value {
        font-size: 1.4rem !important;
    }
}

@media (max-width: 480px) {
    .seance-card .seance-stats {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .seance-card .seance-stat {
        display: flex !important;
        align-items: baseline;
        justify-content: space-between;
        text-align: start !important;
        padding: 6px 0 !important;
        border-bottom: 1px solid var(--sc-border);
    }

    .seance-card .seance-stat:last-child {
        border-bottom: none;
    }

    .seance-card .seance-stat-label {
        margin-top: 0;
    }
}

/* ---------------------------------------------------------------------------
   Legacy pages (published before the .seance-* class hooks existed)

   ~250 archived résumé pages were retrofitted with the current chrome (shared
   header/nav/footer + dark-mode toggle) but their BODY still carries the old
   inline e-mail markup: a `<div class='container'>` white card with no
   .seance-* classes, now wrapped in `<main class="seance-main"><article>`.

   The .seance-card rules above therefore do not touch it, and that is
   deliberate: the inline styling is self-consistent and readable on its own -
   a white 700px card reads fine on the dark page too (it looks like a printed
   sheet), so we do NOT try to repaint every inline colour for dark mode, which
   would be fragile across ~250 hand-varying pages. These few rules only give
   the card the same centring the current design has and let its wide market
   tables scroll on a phone instead of crushing the ticker into the price.

   NB the selector is `.seance-main .container`, not `body > .container`: after
   the retrofit the card is nested under main > article, so the old direct-child
   selector no longer matched. */
.seance-main .container {
    margin-inline: auto;
    padding-inline: 16px;
}

/* The archived card keeps its inline `background:#fff` in dark mode (nothing
   repaints .container), so it stays a light sheet on the dark page - which is
   fine and reads like a printed page. The one hazard: the site-wide
   `.dark-mode body { color:#e6e6e6 !important }` lift is inherited by every
   cell that had NO inline colour (e.g. the bare `<div>CMT</div>` libellé),
   turning it near-white on that white card. Pin the card's default ink back to
   dark so those elements stay legible. Elements that carry their own inline
   colour - symbols, variations, headings, the yellow insight panel, the pink
   MASI block - declare colour directly on themselves and so keep it; only the
   inheriting, colour-less text is affected. */
.dark-mode .seance-main .container {
    color: #333 !important;
}

/* Same story for headings: mystyle's `.dark-mode h1,h2,h3,h4 { color:#f0f0f0 }`
   is meant to lift headings onto the dark page, but the archived section
   titles ("Gagnants", "Top 3 Perdants", "Résumé du Marché …") live on the
   white card, where #f0f0f0 is invisible. Pin them back to dark ink. Their
   inline green/red tint is dropped in dark mode - a single dark title is the
   readable, non-fragile choice across ~250 hand-varying pages; the gain/loss
   colour still lives in each row's variation cell. (The real article <h1> sits
   in .seance-head, outside .container, so it keeps the light page heading.) */
.dark-mode .seance-main .container h1,
.dark-mode .seance-main .container h2,
.dark-mode .seance-main .container h3,
.dark-mode .seance-main .container h4 {
    color: #1a202c !important;
}

@media (max-width: 768px) {
    .seance-main .container {
        padding-inline: 12px;
    }

    .seance-main .container table {
        display: block;
        overflow-x: auto;
    }
}

/* ===========================================================================
   Résumés-de-séance INDEX (the landing page: index.php in this folder).

   Full-width layout under the shared header/nav/footer: a hero with the
   archive's key figures, a horizontal snap slider of the latest sessions, a
   client-side search box, then every session grouped by month. All colours run
   through the --sc-* tokens so the whole thing flips with .dark-mode for free;
   mystyle's `.dark-mode h1..h4 { #f0f0f0 }` lift actually helps here (light
   headings on the dark page/cards), so nothing needs overriding.
   =========================================================================== */
.seance-index {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px 72px;
}

/* ---- hero ---- */
.si-hero {
    padding: 40px 0 26px;
    border-bottom: 1px solid var(--sc-border);
    margin-bottom: 34px;
}
.si-hero h1 {
    margin: 0 0 12px;
    font-size: 2.15rem;
    line-height: 1.18;
    color: var(--sc-heading);
}
.si-hero .si-lead {
    margin: 0;
    /* max-width: 700px;*/
    color: var(--sc-text);
    font-size: 1.05rem;
    line-height: 1.6;
    text-align: center;
}
.si-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 34px;
    margin-top: 24px;
}
.si-stat b {
    display: block;
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1;
    color: var(--sc-accent);
    font-family: 'Courier New', Courier, monospace;
}
.si-stat span {
    display: block;
    margin-top: 6px;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--sc-muted);
}

/* ---- section headers ---- */
.si-sec-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 18px;
}
.si-sec-head h2 {
    margin: 0;
    font-size: 1.3rem;
    color: var(--sc-heading);
}
.si-sec-head .si-hint {
    font-size: 0.85rem;
    color: var(--sc-muted);
}

/* ---- latest slider ---- */
.si-slider {
    position: relative;
    margin-bottom: 52px;
}
.si-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(300px, 340px);
    gap: 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 4px 2px 12px;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}
.si-slide {
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    background: var(--sc-surface);
    border: 1px solid var(--sc-border);
    border-radius: 12px;
    padding: 22px;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--sc-shadow);
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.si-slide:hover {
    border-color: var(--sc-border-strong);
    transform: translateY(-2px);
}
.si-date-pill {
    align-self: flex-start;
    margin-bottom: 14px;
    padding: 4px 11px;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--sc-accent);
    background: var(--sc-surface-alt);
    border: 1px solid var(--sc-border);
    border-radius: 999px;
    white-space: nowrap;
}
.si-slide h3 {
    margin: 0 0 10px;
    font-size: 1.16rem;
    line-height: 1.35;
    color: var(--sc-heading);
}
.si-slide .si-excerpt {
    margin: 0 0 18px;
    flex: 1;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--sc-muted);
}
.si-slide .si-cta {
    align-self: flex-start;
    margin-top: auto;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--sc-accent);
}
.si-slide:hover .si-cta {
    text-decoration: underline;
}

/* prev / next arrows */
.si-arrow {
    position: absolute;
    top: 40%;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--sc-border-strong);
    border-radius: 50%;
    background: var(--sc-surface);
    color: var(--sc-heading);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--sc-shadow);
    z-index: 2;
}
.si-arrow:hover {
    background: var(--sc-surface-alt);
}
.si-prev { left: -15px; }
.si-next { right: -15px; }

/* ---- search ---- */
.si-search-wrap {
    margin: 0 0 22px;
}
.si-search {
    width: 100%;
    max-width: 440px;
    padding: 11px 15px;
    font-size: 0.95rem;
    color: var(--sc-heading);
    background: var(--sc-surface);
    border: 1px solid var(--sc-border-strong);
    border-radius: 10px;
}
.si-search::placeholder { color: var(--sc-muted); }
.si-search:focus {
    outline: none;
    border-color: var(--sc-accent);
}

/* ---- archive (grouped by month) ---- */
.si-month { margin-bottom: 30px; }
.si-month-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0 0 12px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--sc-border);
}
.si-month-head h3 {
    margin: 0;
    font-size: 1.05rem;
    color: var(--sc-heading);
    text-transform: capitalize;
}
.si-count {
    padding: 2px 9px;
    font-size: 0.76rem;
    color: var(--sc-muted);
    background: var(--sc-surface-alt);
    border-radius: 999px;
}
.si-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    column-gap: 26px;
}
.si-row a {
    display: flex;
    gap: 12px;
    align-items: baseline;
    padding: 9px 10px;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
}
.si-row a:hover { background: var(--sc-surface-alt); }
.si-row .si-d {
    flex: 0 0 auto;
    min-width: 54px;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    color: var(--sc-muted);
    font-family: 'Courier New', Courier, monospace;
}
.si-row .si-t {
    font-size: 0.92rem;
    line-height: 1.4;
    color: var(--sc-text);
}
.si-row a:hover .si-t { color: var(--sc-heading); }

#si-empty {
    display: none;
    padding: 24px 0;
    color: var(--sc-muted);
}

@media (max-width: 640px) {
    .si-hero { padding: 28px 0 20px; }
    .si-hero h1 { font-size: 1.6rem; }
    .si-stats { gap: 22px; }
    .si-arrow { display: none; }
    .si-track { grid-auto-columns: 84%; }
    .si-list { grid-template-columns: 1fr; }
}