/* --------------------------------------------------------------------------
   Thème minimaliste — inspiré du "brutalist web" de la référence.
   Fond blanc, serif, liens bleus soulignés. Volontairement dépouillé.
   -------------------------------------------------------------------------- */

:root {
    --ink: #000;
    --link: #1500ff;      /* bleu franc, proche du bleu navigateur */
    --paper: #fff;
    --muted: #444;
    --measure: 60rem;     /* largeur de lecture confortable */
    --serif: "Times New Roman", Times, serif;   /* DA : Times New Roman système */
}

* { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;   /* ancres : glissement plutôt que saut */
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--serif);
    font-size: 20px;
    line-height: 1.35;
}

.wrap {
    max-width: var(--measure);
    margin: 0;
    padding: 1.6rem 1.4rem 6rem;
}

a {
    color: var(--link);
    text-decoration: underline;
    text-underline-offset: 2px;
}
a:visited { color: var(--link); }
a:hover { text-decoration: none; }

/* --- Accueil --- */
.site-title {
    font-weight: normal;
    font-size: 2rem;
    margin: 0 0 1rem;
    letter-spacing: -0.01em;
}
.tagline {
    margin: -0.5rem 0 1.4rem;
    color: var(--muted);
    font-style: italic;
}
.index {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.index a {
    font-size: 1.9rem;
    line-height: 1.15;
}

/* --- Navigation retour --- */
.back { margin: 0 0 1.4rem; }
.back a { font-size: 1.6rem; text-decoration: none; }

/* --- Titres de page --- */
.page-title {
    font-weight: normal;
    font-size: 1.8rem;
    margin: 0 0 1.6rem;
}

/* --- Contenu texte / journal --- */
.prose p,
.entry-body p { margin: 0 0 1.3rem; }

.prose h1, .prose h2, .prose h3,
.entry-body h1, .entry-body h2, .entry-body h3 {
    font-weight: normal;
    margin: 1.6rem 0 0.8rem;
}

.journal .entry { margin: 0 0 1.6rem; }
.entry-label {
    text-decoration: underline;
    text-underline-offset: 2px;
    margin-right: 0.4rem;
}
/* Le label et le premier paragraphe se suivent sur la même ligne. */
.entry-body { display: inline; }
.entry-body > p:first-child { display: inline; }

blockquote {
    margin: 1.3rem 0;
    padding-left: 1rem;
    border-left: 2px solid var(--ink);
    color: var(--muted);
}

hr {
    border: none;
    border-top: 1px solid var(--ink);
    margin: 2rem 0;
    max-width: 8rem;
    margin-left: 0;
}

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

.empty { color: var(--muted); font-style: italic; }

/* --- Verrou « site privé » --- */
.gate-wrap { max-width: 30rem; }
.gate-msg { color: var(--muted); margin: 0 0 1.4rem; }
.gate-error { color: #c0392b; margin: 0 0 1rem; }
.gate-form { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.gate-form input {
    font-family: var(--serif);
    font-size: 1rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--ink);
    border-radius: 6px;
    min-width: 12rem;
}
.gate-form button {
    font-family: var(--serif);
    font-size: 1rem;
    padding: 0.5rem 1.1rem;
    border: 1px solid var(--ink);
    background: var(--ink);
    color: var(--paper);
    border-radius: 6px;
    cursor: pointer;
}
.gate-form button:hover { background: var(--paper); color: var(--ink); }

/* --- Recherche intégrée dans une liste (filtre à la frappe) --- */
.find {
    display: flex;
    align-items: baseline;
    gap: 0.8rem;
    margin: 0 0 1.6rem;
    max-width: 46rem;
}
.find-input {
    font-family: var(--serif);
    font-size: 1rem;
    color: var(--ink);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--ink);
    border-radius: 0;               /* Safari arrondit les champs search par défaut */
    padding: 0.15rem 0.1rem;
    width: 12rem;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}
.find-input::placeholder { color: #999; font-style: italic; }
.find-input:focus { border-bottom-width: 2px; }
.find-count { font-size: 0.85rem; color: var(--muted); }
.find.is-empty .find-count { color: #c0392b; }

/* --- Liste de lectures (références APA) --- */
.intro { margin-bottom: 2rem; }
.reading-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-width: 46rem;
}
.reading-list .reading {
    /* retrait négatif : 1re ligne à gauche, lignes suivantes en retrait */
    padding-left: 1.6rem;
    text-indent: -1.6rem;
    margin: 0 0 1.1rem;
    line-height: 1.4;
}
.reading-list .reading a {
    text-indent: 0;
    word-break: break-word;
}

/* --- Veille de contenus --- */
.feed {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 46rem;
}
.feed-item > * { margin: 0 0 0.4rem; }
.feed-meta {
    font-size: 0.9rem;
    color: var(--muted);
}
.feed-meta .feed-media { color: var(--ink); }
.feed-meta .sep { margin: 0 0.4rem; }
.feed-desc { font-size: 1.05rem; }
.feed-caption {
    color: var(--muted);
    font-style: italic;
    white-space: normal;
}

/* --- Galerie --- */
.gallery {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
    max-width: 40rem;
}
.gallery-item { margin: 0; }
.gallery-item figcaption {
    margin-top: 0.4rem;
    color: var(--muted);
    font-size: 0.95rem;
}

/* --- Moodboard (mur d'images façon Tumblr, masonry) --- */
.moodboard {
    column-count: 4;
    column-gap: 0.7rem;
    max-width: 72rem;
}
.mood-item {
    break-inside: avoid;
    margin: 0 0 0.7rem;
    display: inline-block;
    width: 100%;
}
.mood-item img { width: 100%; height: auto; display: block; }
.mood-item figcaption {
    font-size: 0.8rem;
    color: var(--muted);
    margin-top: 0.2rem;
}

/* --- Archive de newsletter (éditions) --- */
.archive {
    display: flex;
    flex-direction: column;
    gap: 1.3rem;
    max-width: 46rem;
}
.edition > * { margin: 0; }
.edition-title { font-size: 1.15rem; }
.edition-meta {
    font-size: 0.9rem;
    color: var(--muted);
    margin-top: 0.1rem;
}
.edition-meta .sep { margin: 0 0.4rem; }

/* Archive en texte intégral */
.archive-index {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    margin: 0 0 3rem;
    max-width: 46rem;
}
.edition-full {
    max-width: 46rem;
    margin: 0 0 3.5rem;
    padding-bottom: 3.5rem;
    border-bottom: 1px solid var(--ink);
    scroll-margin-top: 1rem;
}
.edition-full:last-child { border-bottom: none; }
.edition-heading {
    font-weight: normal;
    font-size: 1.6rem;
    margin: 0.2rem 0 1.4rem;
}
.edition-body h2, .edition-body h3, .edition-body h4 {
    font-weight: normal;
    font-size: 1.2rem;
    margin: 1.8rem 0 0.6rem;
}
.edition-body img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1.4rem auto;
}

/* --- Page archive : colonne centrée (façon System Magazine) --- */
body.tpl-page-archive .wrap { max-width: 42rem; margin: 0 auto; }
body.tpl-page-archive .back { text-align: left; }
body.tpl-page-archive .page-title,
body.tpl-page-archive .intro { text-align: center; }
body.tpl-page-archive .archive-index { align-items: center; text-align: center; }
body.tpl-page-archive .edition-full { margin-left: auto; margin-right: auto; }
body.tpl-page-archive .edition-meta,
body.tpl-page-archive .edition-heading { text-align: center; }
/* le corps de lecture reste aligné à gauche (lisibilité) */
body.tpl-page-archive .edition-body { text-align: left; }
body.tpl-page-archive .edition-body h2,
body.tpl-page-archive .edition-body h3 { text-align: center; }

/* --- Page « des films » --- */
body.tpl-page-films .wrap { max-width: 92rem; }
.films-index {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    margin: 0 0 3rem;
}
.film { margin: 0 0 4rem; scroll-margin-top: 1rem; }
.film-title {
    font-weight: normal;
    font-size: 1.5rem;
    margin: 0 0 0.8rem;
}
.film-wiki {
    margin: -0.3rem 0 1rem;
    font-size: 0.95rem;
}
.film-wiki a { display: inline-flex; align-items: center; }
.film-wiki .wiki-logo {
    height: 1em;          /* même hauteur que le texte */
    width: auto;
    margin-right: 0.4em;
}
.film-credits {
    margin: 0 0 1.2rem;
    color: var(--muted);
    font-size: 0.95rem;
}
.film-credits p { margin: 0; }
.film-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}
.film-grid img { width: 100%; height: auto; display: block; }
.film-grid .film-shot { display: block; cursor: zoom-in; }
.film-grid .film-shot img { transition: opacity 0.15s ease; }
.film-grid .film-shot:hover img { opacity: 0.85; }
@media (max-width: 640px) {
    .film-grid { grid-template-columns: 1fr; }
}

/* --- Bas de page (accueil) : CV à gauche, e-mail au centre, are.na à droite.
   Sur grand écran chaque élément est ancré indépendamment ; la barre .site-bottom
   ne sert de conteneur de mise en page que sur petit écran (voir plus bas). --- */

/* --- Lien are.na en bas à droite --- */
.site-footer {
    position: fixed;
    right: 1rem;
    bottom: 0.7rem;
    font-size: 0.95rem;
    background: var(--paper);
    padding: 0.1rem 0.35rem;
    z-index: 10;
}
.site-footer { display: flex; align-items: center; gap: 1rem; }
.site-footer a { display: inline-flex; align-items: center; white-space: nowrap; }
.site-footer .insta-logo {
    height: 1em;             /* même hauteur que le texte, comme le logo are.na */
    width: auto;
    margin-right: 0.4em;
}
/* Certaines plateformes (iOS) rendent « ↗ » en emoji : on force la variante
   texte, et on l'escamote sur mobile où elle alourdit la pile. */
.ext { font-variant-emoji: text; }
.site-footer .arena-logo {
    height: 1em;         /* même hauteur que le texte */
    width: auto;
    margin-right: 0.4em;
}

/* Bouton CV en bas à gauche (accueil) */
.site-cv {
    position: fixed;
    left: 1rem;
    bottom: 0.7rem;
    z-index: 10;
}
.site-cv a {
    display: inline-block;
    font-family: var(--serif);
    font-size: 0.9rem;
    line-height: 1;
    color: rgb(85, 186, 101);
    text-decoration: none;
    background: var(--paper);
    border: 1px solid var(--ink);
    border-radius: 999px;
    padding: 0.45rem 0.95rem;
    transition: background 0.15s ease, color 0.15s ease;
}
.site-cv a:hover { background: var(--ink); color: rgb(85, 186, 101); }

/* Bouton e-mail au centre (accueil) — copie l'adresse, n'ouvre pas de messagerie */
.site-mail {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0.7rem;
    z-index: 10;
}
.site-mail .mail-copy {
    position: relative;          /* repère pour l'état « copié » superposé */
    font-family: var(--serif);
    font-size: 0.9rem;
    line-height: 1;
    color: #9D9DCC;
    background: var(--paper);
    border: 1px solid var(--ink);
    border-radius: 999px;
    padding: 0.45rem 0.95rem;
    cursor: pointer;
    /* Le message de confirmation est plus long que l'adresse : la pastille
       s'élargit à la copie (min-width plus bas). Volontairement hors transition —
       animée, la largeur reste bloquée à 0 et le texte est tronqué. */
    min-width: 0;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}
.site-mail .mail-copy:hover { background: var(--ink); color: #9D9DCC; }

/* Annonce pour les lecteurs d'écran : audible, jamais affichée. */
.site-mail .mail-live {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Les deux libellés se superposent : on fait glisser l'un et apparaître l'autre. */
.site-mail .mail-label,
.site-mail .mail-done {
    display: inline-block;
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.site-mail .mail-done {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(0.45rem);
    color: #9D9DCC;
    pointer-events: none;
}
/* L'état « copié » doit l'emporter sur :hover, sinon le rendu diffère
   entre desktop (survol) et mobile (pas de survol). */
.site-mail .mail-copy.is-copied,
.site-mail .mail-copy.is-copied:hover {
    background: var(--paper);
    border-color: #9D9DCC;
    min-width: 17.5rem;   /* place pour « adresse copiée dans le presse-papiers » */
}
.site-mail .is-copied .mail-label { opacity: 0; transform: translateY(-0.45rem); }
.site-mail .is-copied .mail-done { opacity: 1; transform: translateY(0); }
.site-mail .is-failed { border-color: #c0392b; color: #c0392b; }

/* Respecte le réglage système « réduire les animations ». */
@media (prefers-reduced-motion: reduce) {
    .site-mail .mail-label,
    .site-mail .mail-done,
    .site-mail .mail-copy { transition: none; }
}

/* Sur petit écran, les trois éléments ancrés se chevaucheraient : la barre
   reprend la main et les empile, alignés à gauche — are.na, e-mail, puis CV. */
@media (max-width: 700px) {
    .site-bottom {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0.7rem;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
        padding: 0 1rem;
        z-index: 10;
        pointer-events: none;   /* la barre n'intercepte pas les clics */
    }
    .site-bottom > * {
        position: static;
        transform: none;
        text-align: left;
        pointer-events: auto;
    }
    /* L'ordre visuel diffère de l'ordre du HTML. */
    .site-bottom .site-footer { order: 1; }
    .site-bottom .site-mail   { order: 2; }
    .site-bottom .site-cv     { order: 3; }

    .site-footer {
        font-size: 0.85rem;
        padding-left: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    .site-footer .ext { display: none; }
    /* Même gabarit de pictogramme des deux côtés : les libellés s'alignent. */
    .site-footer .arena-logo,
    .site-footer .insta-logo {
        width: 1.25em;
        height: 1em;
        object-fit: contain;
        margin-right: 0.5em;
        flex: none;
    }
    .site-cv a,
    .site-mail .mail-copy { font-size: 0.8rem; padding: 0.4rem 0.75rem; }
    /* Empilé, le bouton a toute la largeur : pas besoin d'élargissement. */
    .site-mail .mail-copy.is-copied,
    .site-mail .mail-copy.is-copied:hover { min-width: 0; }
    .site-mail .mail-done { position: static; opacity: 0; display: none; }
    .site-mail .is-copied .mail-label { display: none; }
    .site-mail .is-copied .mail-done { display: inline-block; opacity: 1; transform: none; }
}

@media (max-width: 1000px) { .moodboard { column-count: 3; } }
@media (max-width: 640px) {
    body { font-size: 18px; }
    .site-title { font-size: 1.7rem; }
    .index a { font-size: 1.5rem; }
    .moodboard { column-count: 2; }
}

/* ==========================================================================
   Page « des lectures » — d'après Picture/Readings (Barbara Kruger, 1978).
   Une couverture bleue plein écran, puis la liste au défilement.
   ========================================================================== */
body.tpl-page-reading {
    --kruger: #0f3cc0;          /* le bleu de la couverture */
    background: var(--kruger);
    color: #fff;
}
body.tpl-page-reading a,
body.tpl-page-reading a:visited { color: #fff; }
body.tpl-page-reading .page-title,
body.tpl-page-reading .back a { color: #fff; }
body.tpl-page-reading blockquote { border-left-color: #fff; color: rgba(255,255,255,.75); }
body.tpl-page-reading .empty { color: rgba(255,255,255,.7); }

/* La couverture occupe l'écran : c'est .reading-body qui reprend les marges. */
body.tpl-page-reading .wrap { max-width: none; padding: 0; }

/* --- La couverture (commune à « des lectures » et « des films ») --- */
.reading-cover,
.films-cover {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;         /* évite le saut dû à la barre d'URL mobile */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 3rem 3.2rem 1.6rem;
}
/* Retour à l'accueil, en tête de couverture — même corps que le sous-titre. */
.cover-home,
.cover-home:visited {          /* sinon a:visited (plus spécifique) le repasse en bleu */
    margin: 0;
    color: #fff;
    text-decoration: none;
    letter-spacing: 0.01em;
}
.cover-home:hover { text-decoration: underline; text-underline-offset: 3px; }
.films-cover .cover-home { text-shadow: 0 1px 14px rgba(0,0,0,.55); }

.cover-title {
    margin: auto 0 0;           /* centrage optique vertical */
    font-weight: normal;
    font-size: clamp(2rem, 6vw, 3.6rem);
    color: #fff;
    letter-spacing: 0.01em;
}
.cover-sub {
    margin: auto 0 1.4rem;      /* taille de corps inchangée */
    color: #fff;
}

/* Flèche d'invitation au défilement — discrète, avec un léger balancement. */
.cover-down,
.cover-down:visited {          /* idem : l'ancre devient « visitée » après un clic */
    display: block;
    font-size: 1.5rem;
    line-height: 1;
    color: rgba(255,255,255,.65);
    text-decoration: none;
    animation: cover-bob 2.4s ease-in-out infinite;
}
.cover-down:hover { color: #fff; }
@keyframes cover-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(0.35rem); }
}

/* Mention en filigrane, le long du bord droit, lue de bas en haut. */
.cover-credit {
    position: absolute;
    right: 0.9rem;
    top: 50%;
    margin: 0;
    writing-mode: vertical-rl;
    transform: translateY(-50%) rotate(180deg);
    font-size: 0.6rem;
    line-height: 1.3;
    letter-spacing: 0.02em;
    color: rgba(255,255,255,.4);
    max-height: 88vh;
    overflow: hidden;
    pointer-events: none;
}
.cover-credit em { font-style: italic; }

/* --- La liste, sous la couverture --- */
.reading-body {
    max-width: var(--measure);
    padding: 2.4rem 1.4rem 6rem;
    scroll-margin-top: 0;
}

/* --- Liste et recherche sur fond bleu --- */
body.tpl-page-reading .find-input {
    color: #fff;
    border-bottom-color: #fff;
    caret-color: #fff;
}
body.tpl-page-reading .find-input::placeholder { color: rgba(255,255,255,.65); }
body.tpl-page-reading .find-count { color: rgba(255,255,255,.7); }
body.tpl-page-reading .find.is-empty .find-count { color: #ffb3ab; }

/* Écran très bas : le filigrane vertical ne tiendrait pas. */
@media (max-height: 520px) { .cover-credit { display: none; } }
@media (max-width: 640px) {
    .reading-cover { padding-left: 1.2rem; padding-right: 2.4rem; }
    .cover-credit { font-size: 0.55rem; right: 0.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .cover-down { animation: none; }
}

/* ==========================================================================
   Page « des films » — couverture photographique plein écran.
   ========================================================================== */
body.tpl-page-films .wrap { max-width: none; padding: 0; }
.films-body {
    max-width: 92rem;
    padding: 2.4rem 1.4rem 6rem;
}

.films-cover {
    background: #111 url('cover-films.webp') center / cover no-repeat;
    color: #fff;
}
/* Voile sombre : sans lui, le blanc se perd dans les tons clairs du visage. */
.films-cover::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
                rgba(0,0,0,.50), rgba(0,0,0,.28) 42%, rgba(0,0,0,.60));
    pointer-events: none;
}
/* Au-dessus du voile — sans toucher au positionnement absolu du filigrane,
   qui redeviendrait sinon un élément de flux et casserait le centrage. */
.films-cover .cover-title,
.films-cover .cover-sub,
.films-cover .cover-down { position: relative; z-index: 1; }
.films-cover .cover-credit { z-index: 1; }
.films-cover .cover-title,
.films-cover .cover-sub { text-shadow: 0 1px 14px rgba(0,0,0,.55); }
.films-cover .cover-sub { max-width: 44rem; }
.films-cover .cover-credit {
    color: rgba(255,255,255,.55);
    text-shadow: 0 1px 8px rgba(0,0,0,.6);
}
/* En portrait, l'image (très large) est recadrée horizontalement : centrée,
   elle ne montrerait que le nez. On vise le regard. */
@media (orientation: portrait) {
    .films-cover {
        /* L'image est rendue un peu plus haute que l'écran puis calée en bas :
           elle remonte d'autant, et « des films » vient se loger sous la paupière. */
        --montee: 100px;
        background-size: auto calc(100% + var(--montee));
        background-position: 64% 100%;
    }
}