/* ============================================================
   PALETTE — définie dans un fichier séparé sous site/themes/
   Le thème actif est chargé via <link> dans index.html
   (avant ce fichier, pour que les vars soient disponibles ici).
   Ajouter un nouveau thème = dupliquer un fichier de site/themes/
   et pointer index.html dessus.
   ============================================================ */

body {
    background-color: var(--color-paper);
    color: var(--color-ink);
    font-family: 'Inter', sans-serif;
    line-height: 1.7;
}

h1, h2, h3, h4, .serif {
    font-family: 'Playfair Display', serif;
}

/* Les titres reçoivent une légère teinte de la couleur d'accent du thème,
   pour installer une hiérarchie visuelle subtile. 80% d'ink + 20% d'accent
   reste lisible sur tout fond de palette, tout en marquant l'identité du
   thème au-delà des seuls liens. Les hover explicites (ex. group-hover:
   text-accent sur les teasers d'accueil) passent par-dessus via spécificité. */
h1, h2, h3, h4 {
    color: color-mix(in srgb, var(--color-ink) 80%, var(--color-accent));
}

/* Mode police serif : corps de texte en Lora (text serif taillée
   pour la lecture longue, contrairement à Playfair qui est un
   display serif réservé aux titres). Les titres restent en Playfair.
   La nav et le menu de palette restent en Inter pour la lisibilité
   des petits éléments d'interface. */
html[data-font="serif"] body {
    font-family: 'Lora', Georgia, serif;
}

html[data-font="serif"] .site-nav,
html[data-font="serif"] .theme-option,
html[data-font="serif"] input,
html[data-font="serif"] textarea,
html[data-font="serif"] label {
    font-family: 'Inter', sans-serif;
}

#article-view {
    display: none;
}

#article-view.active {
    display: block;
    animation: fadeIn 0.8s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.nav-link {
    transition: color 0.3s ease;
    position: relative;
    text-transform: none;
    letter-spacing: normal;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: -2px;
    left: 0;
    background-color: var(--color-accent);
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

.nav-link:hover {
    color: var(--color-accent);
}

.article-body h1 {
    font-size: clamp(1.875rem, 1.25rem + 1.5vw, 2.25rem);
    font-weight: 700;
    line-height: 1.3;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}

.article-body h1:first-child {
    margin-top: 0;
}

.article-body .article-subtitle {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: clamp(1.125rem, 0.95rem + 0.5vw, 1.375rem);
    line-height: 1.4;
    color: var(--color-muted);
    margin-top: 0;
    margin-bottom: 2.5rem;
}

.article-body h2 {
    font-size: clamp(1.5rem, 1.25rem + 1.25vw, 1.875rem);
    font-weight: 700;
    line-height: 1.3;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}

.article-body h3 {
    font-size: clamp(1.25rem, 1.125rem + 0.5vw, 1.375rem);
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

.article-body h4 {
    font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
    font-weight: 700;
    line-height: 1.35;
    margin-top: 1.75rem;
    margin-bottom: 0.5rem;
}

.article-body p {
    margin-bottom: 1.25rem;
}

.article-body ul, .article-body ol {
    margin: 1rem 0 1.5rem 1.5rem;
}

.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }

.article-body li {
    margin-bottom: 0.5rem;
}

.article-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 2rem 0;
    font-size: 0.95rem;
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.article-body th, .article-body td {
    border-bottom: 1px solid var(--color-rule);
    padding: 0.75rem 1rem;
    text-align: left;
    vertical-align: top;
}

.article-body th {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    background-color: var(--color-th-bg);
}

.article-body blockquote {
    border-left: 2px solid var(--color-accent);
    padding-left: 1.5rem;
    font-style: italic;
    margin: 2rem 0;
    color: var(--color-muted);
}

.article-body code {
    background-color: var(--color-code-bg);
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    font-size: 0.9em;
}

.article-body em {
    font-style: italic;
}

.article-body strong {
    font-weight: 700;
}

.site-nav {
    background-color: var(--color-paper);
}

.site-logo {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    /* Abaisse légèrement le cercle pour qu'il soit centré sur la
       hauteur optique des capitales (et non sur la box line-height,
       qui tire visuellement le glyphe vers le haut). */
    transform: translateY(2px);
}

@supports ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
    .site-nav {
        background-color: color-mix(in srgb, var(--color-paper) 85%, transparent);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* padding élargit la cible tactile à ~30px tout en gardant une icône de 18px */
    padding: 6px;
    opacity: 0.6;
    transition: opacity 0.3s ease, color 0.3s ease;
    color: var(--color-ink);
    background-color: transparent;
    border-radius: 4px;
}

.icon-btn:hover,
.icon-btn:focus-visible {
    opacity: 1;
    color: var(--color-accent);
}

.theme-icon-sun { display: none; }
html.dark .theme-icon-sun { display: inline-block; }
html.dark .theme-icon-moon { display: none; }

/* Bouton de bascule serif / sans-serif : le glyphe "Aa" adopte
   la typographie du mode actif, ce qui rend le choix visible. */
.font-toggle .font-icon {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 15px;
    line-height: 1;
    letter-spacing: -0.3px;
}

html[data-font="serif"] .font-toggle .font-icon {
    font-family: 'Lora', Georgia, serif;
    font-weight: 600;
    font-size: 17px;
    letter-spacing: 0;
}

/* ============================================================
   Sélecteur de palette (popover dans la nav)
   ============================================================ */

.theme-picker,
.nav-picker,
.appearance-picker {
    position: relative;
}

.theme-menu,
.nav-menu,
.appearance-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 200px;
    max-width: calc(100vw - 2rem);
    padding: 6px;
    background-color: var(--color-paper);
    border: 1px solid var(--color-rule);
    border-radius: 6px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    z-index: 20;
}

.theme-menu[hidden],
.nav-menu[hidden],
.appearance-menu[hidden] {
    display: none;
}

.theme-option,
.nav-menu-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    text-align: left;
    color: var(--color-ink);
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    border-radius: 4px;
    background-color: transparent;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.theme-option:hover,
.nav-menu-option:hover {
    background-color: var(--color-rule);
}

.appearance-separator {
    height: 1px;
    background-color: var(--color-rule);
    margin: 4px 2px;
}

.appearance-icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--color-ink);
    font-weight: 700;
}

.theme-option[aria-current="true"] {
    color: var(--color-accent);
    font-weight: 600;
}

.swatch {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--swatch-paper) 0 50%, var(--swatch-accent) 50% 100%);
    border: 1px solid var(--color-rule);
    flex-shrink: 0;
}