/* SPDX-License-Identifier: AGPL-3.0-only
 * Copyright (C) 2026 Vivian Epiney (AP-EdNum, HEP-VS) */
/* ============================================================
   base.css — Styles communs à toutes les pages du projet C2
   ============================================================ */
/* --- Typographie locale (hors ligne) --- */
@font-face {
    font-family: 'Outfit';
    src: url('../fonts/outfit.woff2') format('woff2');
    font-weight: 400 700;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('../fonts/jetbrains-mono.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}
/* --- Accessibilité et Touch (Tablet-First) --- */
body {
    touch-action: manipulation; /* Élimine le délai de 300ms sur mobile */
}

.unlinked {
    pointer-events: none;
    cursor: inherit;
}

button {
    min-width: 44px;
    min-height: 44px;
}
/* --- Impression --- */
@media print {
    .no-print { display: none !important; }
}
/* --- Accessibilité et ancres --- */
:target { scroll-margin-top: 5rem; }
/* --- Accessibilité : Focus Rings --- */
:focus-visible {
    outline: 3px solid #667eea;
    outline-offset: 2px;
    box-shadow: 0 0 8px rgb(102 126 234 / 60%);
}
/* ============================================================
   Haute Lisibilité (High Contrast)
   ============================================================ */
body.high-contrast {
    /* Colors and Backgrounds */
    --bg-main: #ffffff;
    --bg-panel: #ffffff;
    --text-main: #000000;
    --text-muted: #000000;

    /* Stronger Borders, No Shadows */
    --border-subtle: #000000;
    --glass-border: 2px solid #000000;
    --glass-shadow: none;
    box-shadow: none !important;

    /* Base tweaks */
    font-size: 20px;
    line-height: 1.6;
    letter-spacing: 0.05em;
    font-weight: 700;
}

body.high-contrast * {
    text-shadow: none !important;
    box-shadow: none !important;
    border-color: #000000 !important;
}

body.high-contrast .btn,
body.high-contrast .tab-btn,
body.high-contrast .menu-item-btn {
    border: 3px solid #000000 !important;
    background-color: #ffffff !important;
    color: #000000 !important;
    font-weight: 900;
}

body.high-contrast .btn:hover,
body.high-contrast .tab-btn:hover,
body.high-contrast .menu-item-btn:hover,
body.high-contrast .tab-btn.active {
    background-color: #000000 !important;
    color: #ffffff !important;
}

body.high-contrast .icon-action-btn {
    border: 3px solid #000000 !important;
    color: #000000 !important;
    background-color: #ffffff !important;
}

body.high-contrast .icon-action-btn:hover {
    background-color: #000000 !important;
    color: #ffffff !important;
}

body.high-contrast .container,
body.high-contrast .ui-modal-content,
body.high-contrast .settings-dropdown-content {
    border: 4px solid #000000 !important;
    background-color: #ffffff !important;
}

/* Make inputs highly visible */
body.high-contrast input,
body.high-contrast select,
body.high-contrast textarea {
    border: 3px solid #000000 !important;
    background-color: #ffffff !important;
    color: #000000 !important;
}

body.high-contrast input:focus,
body.high-contrast select:focus,
body.high-contrast textarea:focus {
    outline: 4px solid #0000ff !important;
    outline-offset: 2px;
}

/* High visibility focus ring for accessibility */
body.high-contrast *:focus-visible {
    outline: 4px solid #0000ff !important;
    outline-offset: 4px !important;
}

/* Fixes for index.html specific elements in High Contrast mode */
body.high-contrast {
    background-color: #ffffff !important;
    background-image: none !important;
}

body.high-contrast footer p,
body.high-contrast footer span {
    color: #000000 !important;
}

body.high-contrast footer a {
    color: #000000 !important;
    text-decoration: underline !important;
}

body.high-contrast main {
    background: #ffffff !important;
}

body.high-contrast .filter-btn {
    color: #000000 !important;
    border-color: #000000 !important;
}

body.high-contrast .filter-btn.active {
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* Also fix duotone icons in high contrast mode */
body.high-contrast .fa-icon[data-fa^="dt-"] {
    --fa-primary: #000000 !important;
    --fa-secondary: #000000 !important;
}

/* The app cards backgrounds in index are set dynamically with inline styles directly on the li or a element */
body.high-contrast [style*="background"],
body.high-contrast [style*="--bg-primary"] {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

body.high-contrast a.card,
body.high-contrast a.card.teacher,
body.high-contrast a.card.external,
body.high-contrast .card {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 4px solid #000000 !important;
    color: #000000 !important;
}

body.high-contrast a.card[style],
body.high-contrast .card[style] {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

body.high-contrast a.card:hover,
body.high-contrast .card:hover {
    background: #f0f0f0 !important;
    background-color: #f0f0f0 !important;
    color: #000000 !important;
}

body.high-contrast .card-title,
body.high-contrast .card-desc,
body.high-contrast .card-ref {
    color: #000000 !important;
}

body.high-contrast .card .badge,
body.high-contrast .card .badge.prof,
body.high-contrast .card .badge.grey,
body.high-contrast .card .tag {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 2px solid #000000 !important;
}

body.high-contrast a.card .card-title i,
body.high-contrast a.card .card-title svg {
    color: #000000 !important;
}
body.high-contrast a.card .card-ref i,
body.high-contrast a.card .card-ref svg {
    color: #000000 !important;
}

/* --- Effet de zoom au survol pour le cœur du footer --- */
footer a [data-fa="heart"] {
    transition: transform 0.2s var(--spring-easing, ease-in-out);
    display: inline-block;
}
footer a:hover [data-fa="heart"] {
    transform: scale(1.25);
}