/* ═══════════════════════════════════════════
   LEGACY — Fallbacks pour Safari ≤ 14 / iOS 12–14
   Chargé AVANT les CSS principaux.
   Les navigateurs modernes ignorent ce bloc grâce à @supports.
   ═══════════════════════════════════════════ */

/* ──────────────────────────────────────────
   1. FALLBACK COULEURS HEX (oklch non supporté)
   ────────────────────────────────────────── */
@supports not (color: oklch(50% 0.1 0)) {

    /* ── Design Tokens (duplicating :root from style.css & shared.css) ── */
    :root {
        /* Color Primitives — hex equivalents */
        --color-neutral-0: #ffffff;
        --color-neutral-100: #f5f5f5;
        --color-neutral-200: #eeeeee;
        --color-neutral-800: #2a2a2a;
        --color-neutral-850: #1e1e1e;
        --color-neutral-900: #1a1a1a;
        --color-neutral-950: #121212;

        --color-primary-10: #F1E7E8;
        --color-primary-20: #ECD9DC;
        --color-primary-400: #e84c3d;
        --color-primary-500: #d9362b;
        --color-primary-600: #b01b1b;

        --color-green-500: #34A853;
        --color-green-600: #0F9D58;

        /* Semantic Colors — Light Mode */
        --bg-color: #f5f5f5;
        --text-color: #1a1a1a;
        --text-inverted: #ffffff;
        --accent-color: #d9362b;
        --accent-hover: #b01b1b;
        --link-color: #d9362b;
        --modal-bg: #ffffff;
        --card-bg: #ffffff;
        --border-color: #e0d5d3;
        --border-subtle: #d6d6d6;
        --focus-color: #d9362b;
        --badge-bg: #eeeeee;
        --social-proof-bg: #FCE8E6;
        --availability-bg: #F1E7E8;
        --availability-border: #ECD9DC;
    }

    /* ── Dark mode (prefers-color-scheme) ── */
    @media (prefers-color-scheme: dark) {
        :root {
            --bg-color: #121212;
            --text-color: #f5f5f5;
            --text-inverted: #1a1a1a;
            --modal-bg: #1e1e1e;
            --card-bg: #2a2a2a;
            --border-color: #444444;
            --border-subtle: #444444;
            --focus-color: #ffffff;
            --badge-bg: #3a3a3a;
            --surface-hover: #333333;
            --accent-color: #e84c3d;
            --link-color: #e84c3d;
            --social-proof-bg: #261816;
        }
    }

    /* ── Dark mode (manual JS toggle) ── */
    :root[data-theme="dark"] {
        --bg-color: #121212;
        --text-color: #f5f5f5;
        --text-inverted: #1a1a1a;
        --modal-bg: #1e1e1e;
        --card-bg: #2a2a2a;
        --border-color: #444444;
        --border-subtle: #444444;
        --focus-color: #ffffff;
        --badge-bg: #3a3a3a;
        --surface-hover: #333333;
        --accent-color: #e84c3d;
        --link-color: #e84c3d;
        --social-proof-bg: #261816;
    }

    :root[data-theme="light"] {
        --bg-color: #f5f5f5;
        --text-color: #1a1a1a;
        --text-inverted: #ffffff;
        --accent-color: #d9362b;
        --accent-hover: #b01b1b;
        --link-color: #d9362b;
        --modal-bg: #ffffff;
        --card-bg: #ffffff;
        --border-color: #e0d5d3;
        --border-subtle: #d6d6d6;
        --focus-color: #d9362b;
        --badge-bg: #eeeeee;
        --surface-hover: #ededed;
        --social-proof-bg: #FCE8E6;
        --availability-bg: #F1E7E8;
        --availability-border: #ECD9DC;
    }

    /* ── Inline oklch() fallbacks across all files ── */

    /* style.css — Selection */
    ::selection {
        color: #ffffff;
    }

    /* style.css — noscript */
    .noscript-text {
        color: #777777;
    }

    /* style.css — .linkedin-link:hover */
    .linkedin-link:hover {
        box-shadow: 0 4px 12px #d6d6d6;
    }

    /* style.css — .email-link:hover */
    .email-link:hover {
        box-shadow: 0 4px 12px #b3b3b3;
    }

    /* style.css — .journal-link */
    .journal-link {
        color: #555555;
    }

    .journal-link:not(:last-child)::after {
        color: #8c8c8c;
    }

    /* style.css — modal shadows */
    dialog.a11y-modal,
    .konami-modal {
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
    }

    /* style.css — theme-toggle:hover */
    .theme-toggle:hover {
        background-color: #e3e3e3;
    }

    :root[data-theme="dark"] .theme-toggle:hover {
        background-color: #3a3a3a;
    }

    /* style.css — settings-toggle:hover */
    .settings-toggle:hover {
        background-color: #777777;
    }

    :root[data-theme="dark"] .settings-toggle:hover {
        background-color: #ffffff;
    }

    /* style.css — task-details, a11y-option-text p */
    .task-details,
    .a11y-option-text p {
        color: #666666;
    }

    /* style.css — focus-visible */
    *:focus-visible {
        outline-color: currentColor;
    }

    /* style.css — .hero-text .role (print) handled by @media print */

    /* style.css — konami-pdf-link */
    .konami-pdf-link {
        color: #ffffff;
    }

    /* style.css — modal-footer */
    .modal-footer {
        color: #707070;
        border-top-color: #b3b3b3;
    }



    /* style.css — email-toast */
    .email-toast {
        box-shadow: 0 8px 24px #a3a3a3;
    }

    /* style.css — toggle slider shadow */
    .toggle-switch .slider:before {
        box-shadow: 0 2px 4px #444444;
    }

    /* style.css — dark mode overrides */
    :root[data-theme="dark"] .linkedin-link:hover {
        background-color: #3a3a3a;
    }

    :root[data-theme="dark"] .skill-tag {
        background-color: #3a3a3a;
    }

    :root[data-theme="light"] .linkedin-link:hover {
        background-color: #ededed;
    }

    /* ── projects.css fallbacks ── */

    .back-link:hover {
        color: #707070;
    }

    .avatar-fm { background-color: #2c3e50; }
    .avatar-cc { background-color: #e95454; }
    .avatar-kd { background-color: #3498db; }
    .avatar-vd { background-color: #c0392b; }
    .avatar-nd { background-color: #9b59b6; }
    .avatar-gt { background-color: #2ecc71; }
    .avatar-cm { background-color: #f39c12; }
    .avatar-lb { background-color: #e67e22; }
    .avatar-tc { background-color: #34495e; }

    .phase-date,
    .project-footer,
    footer {
        color: #777777;
    }

    .case-study .case-kicker,
    .case-study .label,
    .text-page .note {
        color: #666666;
    }

    .journal-page .task-details {
        color: #666666;
    }

    :root[data-theme="dark"] .case-study .metric-chip,
    :root[data-theme="dark"] .case-study .tag {
        background-color: #3a3a3a;
    }

    .version-badge {
        background-color: #f0e6e4;
    }

    :root[data-theme="dark"] .version-badge {
        background-color: #2a1f1e;
    }

    .back-to-top {
        color: #888888;
    }

    .recommendation-card:hover {
        box-shadow: 0 10px 30px #cccccc;
    }

    :root[data-theme="dark"] .recommendation-card:hover {
        box-shadow: 0 10px 30px #1a1a1a;
    }

    /* projects.css — reco card quote color */
    .recommendation-card blockquote::before {
        color: #e0d5d3;
    }

    /* projects.css — author link */
    .author-link {
        color: #ffffff;
    }

    .author-role {
        color: #707070;
    }

    .author-context {
        color: #777777;
    }

    /* ── shared.css fallbacks ── */

    .a11y-option-text p {
        color: #666666;
    }

    .toggle-switch .slider:before {
        box-shadow: 0 2px 4px #b3b3b3;
    }

    .perf-pill:hover {
        box-shadow: 0 4px 12px #d6d6d6;
    }

    .perf-pill .pill-score {
        color: #ffffff;
    }

    /* ── chat.css fallbacks ── */
    .chat-container {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    }

    .chat-subtitle {
        color: #707070;
    }

    .chat-input-container button:hover {
        box-shadow: 0 4px 12px #d6d6d6;
    }

    :root[data-theme="dark"] .chat-input-container button:hover {
        box-shadow: 0 4px 12px #1a1a1a;
    }

    .chat-footer {
        color: #888888;
    }

    .chat-timestamp {
        color: #888888;
    }

    .typing-indicator span {
        background-color: #888888;
    }

    /* ── Dark mode chip fallback (shared.css) ── */
    :root[data-theme="dark"] .metric-chip,
    :root[data-theme="dark"] .tag {
        background-color: #3a3a3a;
    }

    /* ── Print override fallbacks ── */
    @media print {
        *,
        *::before,
        *::after {
            background: #ffffff !important;
            color: #000000 !important;
        }

        .hero-text .role {
            color: #333333 !important;
        }

        .pulse-dot {
            background: #000000 !important;
        }

        .skill-tag {
            border-color: #999999;
        }
    }
}

@supports not (color: oklch(50% 0.1 0)) {

    /* ── dvh → vh fallback ── */
    body {
        min-height: 100vh;
    }

    /* ── fit-content fallback ── */
    .availability {
        width: -webkit-fit-content;
        width: fit-content;
    }

    /* ── inset: 0 fallback pour dialog ── */
    dialog.a11y-modal {
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }

    /* ── clamp() fallbacks ── */
    .greeting      { font-size: 2.8rem; }
    .hero-text     { font-size: 2rem; }
    .description   { font-size: 1.2rem; }
    .testimonial   { font-size: 1.05rem; }

    .journal-page h1,
    .text-page h1  { font-size: 2rem; }
    .case-study .case-title { font-size: 2.1rem; }
    .sg-hero-title { font-size: 2.2rem; }

    /* ── <dialog> POLYFILL CSS ── */
    /* Safari < 15.4 : masquer les dialogs sans [open] */
    dialog:not([open]) {
        display: none;
    }

    /* Overlay backdrop créé par legacy.js */
    .legacy-backdrop {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
        z-index: 9998;
    }

    /* Centrer le dialog ouvert */
    dialog[open] {
        display: block;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 9999;
        max-width: 90%;
        max-height: 90vh;
        overflow-y: auto;
    }
}