/* =====================================================================
   STYLE.CSS — ATELIER PERSONNEL
   Structure :
   1. Variables & base
   2. Header
   3. Galerie œuvres (masonry)
   4. Galerie secondaire (séries, événements, publications)
   5. Carte (commune)
   6. Fiche œuvre
   7. Métadonnées
   8. Thèmes (tags)
   9. Filtres
   10. Relations
   11. Divers
===================================================================== */


/* Police variable : couvre tous les poids (100–900) et l'italique via
   deux fichiers seulement — voir fonts/noto-sans/ (licence OFL incluse). */
@font-face {
    font-family: "Noto Sans";
    src: url("../fonts/noto-sans/NotoSans-Variable.ttf") format("truetype-variations");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Noto Sans";
    src: url("../fonts/noto-sans/NotoSans-Variable-Italic.ttf") format("truetype-variations");
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

/* =====================
   1. BASE
   → Styles appliqués à toute la page
===================== */

:root {
    font-family: "Noto Sans", -apple-system, Helvetica, Arial, sans-serif;
    /* ↑ Noto Sans (voir @font-face plus haut) avec repli sur les polices système

    /* Coin coupé */
    --corner: polygon(
    15px 0,
    100% 0,
    100% calc(100% - 15px),
    calc(100% - 15px) 100%,
    0 100%,
    0 15px
    );
    /* Ombre */
    --ocre: #FFD7CC;
    --ocre-hover: #D4B8B0;
    /* Surlignage léger (liens cliquables dans les métadonnées) */
    --ocre-surlignage: rgba(255, 215, 204, 0.5);
    --bleu: #298A6D;
    --bleu-hover: #B0D4C9;
    /* Ombre des pastilles/filtres (bleu) */
    --shadow-color: var(--bleu);
    --shadow-bordure-gauche: 4px solid var(--shadow-color);
    --shadow-bordure-bas: 4px solid var(--shadow-color);
    /* Ombre des images (noir estompé, pour un effet plus doux) */
    --ombre-image: rgba(39, 39, 42, 0.55);
    /* Typo générale */
    --noir: #353839;
    /* Texte des pastilles (recherche, menu, légendes de filtres, footer) */
    --texte-pastille: #353839; /* noir onyx */
    /* Fond de page (utilisé aussi comme couleur de texte des pastilles inversées) */
    --fond-page: #faf9f6;

}
/*style des compteurs*/
p {
    justify-content: left;
    color: var(--bleu-hover);
} 

body {
    margin: 0;
    background: #faf9f6;   /* ← couleur de fond de la page → modifie ici */
    color: var(--noir);        /* ← couleur du texte principal → modifie ici */
    /* Réserve la place du footer replié en bas du document, pour qu'il se
       révèle dans cet espace au lieu de recouvrir le contenu (voir #footer) */
    padding-bottom: var(--footer-hauteur, 4rem);
    box-sizing: border-box;
}

/* Curseurs personnalisés (voir cursor/) : Neutre au repos, IndexUp sur les
   éléments cliquables (repris par tous les "cursor: pointer" du fichier),
   Peace sur les champs de saisie. Fallback natif si l'image ne charge pas. */
html {
    cursor: url("../cursor/cursorNeutre.svg") 12 15, auto;
}

a {
    cursor: url("../cursor/cursorIndexRight.svg") 6 7, pointer;
}

input[type="search"],
input[type="text"],
input[type="number"],
textarea {
    cursor: url("../cursor/cursorPeace.svg") 7 11, text;
}

/* Barre de défilement (site entier : body, aside, overlay...) */
* {
    scrollbar-color: var(--shadow-color) var(--ocre);
}

*::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

*::-webkit-scrollbar-track {
    background: var(--ocre);
    border-radius: 0;
}

*::-webkit-scrollbar-thumb {
    background: var(--shadow-color);
    border-radius: 0;
}

h2 {
    font-size: 1rem;
}

/* =====================
   2. HEADER
   → Barre en haut : titre du site, navigation, barre de recherche
   → Défini dans index.html → <header id="header">
===================== */

header {
    padding: 1rem 1.5rem;   /* ← espace intérieur du header : haut, côtés, bas*/
    max-width: 100%;
    isolation: isolate;
    position: sticky;
    top:0;
    z-index: 1000;
    background: #faf9f6;
    border-bottom: var(--shadow-bordure-bas);
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
/* Titre du site */
header h1 {
    margin: 0;
    white-space: nowrap;
}

header p {
    margin: 0.2rem 0 0;
    color: #6e4545;
}

header p a {
    color: #777;
    text-decoration: underline;
}

/* Lieu accueil nampham */
#lien-accueil {
    text-decoration: none;
    font-size: 1.6rem;
    font-weight: 700;
    color: #CCD7FF;
    -webkit-text-stroke: 1px #404E80;
    text-shadow: -1.5px 2.5px 0 #AA7E71;   
}

#lien-accueil:hover {
    color: #E7FFCC;
}

/* Barre de recherche */
#recherche {
    display: block;
    width: 100%;
    margin: 0;
    height: auto;
    padding: 0.5rem 1.5rem;
    /* padding: 0.5rem 8rem 0.5rem 1rem; */

    box-sizing: border-box;

    font-size: 1rem;
    font-family: inherit;
    text-align: left;

    color: var(--texte-pastille);
    background: var(--ocre);

    border: 1px solid #ddd;
    border-radius: 0;

    border-radius: 999px; /* effet pilule */

    border-left: var(--shadow-bordure-gauche);
    border-bottom: var(--shadow-bordure-bas);

    /* Supprime la croix native de recherche sur tous les navigateurs (pas
       seulement Chrome/Safari via le pseudo-élément ci-dessous) : sur
       Firefox notamment, cette croix reste sinon affichée dans le même coin
       que #btn-recherche et intercepte le clic à sa place, effaçant le champ
       sans passer par la logique JS du bouton. */
    -webkit-appearance: textfield;
    appearance: textfield;
}

/* Supprime la croix native du champ de recherche sous Chrome/Safari : voir
   commentaire ci-dessus, complète la règle appearance sur #recherche. */
#recherche::-webkit-search-cancel-button,
#recherche::-webkit-search-decoration,
#recherche::-webkit-search-results-button,
#recherche::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
}

.recherche-wrapper {
    position: relative;
    min-width: 500px;
    width: 100%;
    flex: 1;
    display: flex;
    align-items: center;
}

#btn-recherche {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    margin:0;
    white-space: nowrap;
    background: none;
    color: var(--texte-pastille);   /* ← smiley noir, pas la couleur système du bouton */
    -webkit-appearance: none;
    appearance: none;
    cursor: url("../cursor/cursorIndexRight.svg") 6 7, pointer;
    font-size: 1rem;
    transition: all .15s ease;
}
#btn-recherche:hover {
    transform: scale(1.2) translateY(-40%);
}

nav {
    display: flex;
    gap: 1rem;
    white-space: nowrap;
}

/* Bouton hamburger (menu déroulant mobile) : masqué sur bureau, voir
   affichage dans la media query mobile ci-dessous. */
.menu-toggle {
    display: none;
    border: 2px solid var(--bleu);
    border-radius: 50%;
    padding: 0;
    background: var(--ocre);
    cursor: url("../cursor/cursorIndexRight.svg") 6 7, pointer;
    width: 3rem;
    height: 3rem;
    transition: all 0.2s ease;
}
.menu-toggle-fond {
    fill: var(--ocre);   /* ← remplissage rose */
}
.menu-toggle-trait {
    stroke: var(--bleu);   /* ← traits verts */
    stroke-width: 3;
    stroke-linecap: round;
}
.menu-toggle:hover {
    background: var(--ocre-hover);
    transform: scale(1.1);
}
.menu-toggle:hover .menu-toggle-fond {
    fill: var(--ocre-hover);
}

#menu {
  display: flex;
  gap: 10px;
  align-items: center;
}

#menu a {
  text-decoration: none;
  color: var(--texte-pastille);
  padding: 0.5rem 1.5rem;
  background: var(--ocre);

  /* coin coupé et ombre */
  border-left: var(--shadow-bordure-gauche);
  border-bottom: var(--shadow-bordure-bas);
  transition: all 0.3s ease;
  border-radius: 999px; /* effet pilule */
}
#menu a:hover {
  transform: translate(-3px, 3px);
}

/* disposition du header et de ses composants sur petit écran (mobile) */
@media (max-width: 600px) {

    /* Le header n'est plus collé en haut de l'écran sur mobile : il défile
       normalement avec la page, pour laisser plus de place aux images
       (voir ajusterHauteurHeader dans router.js, qui garde --header-hauteur
       à jour même si le header n'est plus sticky). */
    header {
        position: relative;
        top: auto;
    }

    header h1 {
        width: auto;
        text-align: left;
    }

    /* Ligne 1 : "nampham" + bouton hamburger, alignés sur la même ligne */
    .menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: auto;
    }

    /* Menu déroulant : masqué par défaut, ouvert via #menu-toggle (voir
       router.js), ancré sous le bouton hamburger */
    #menu {
        display: none;
        position: absolute;
        top: 100%;
        right: 1.5rem;
        flex-direction: column;
        align-items: stretch;
        gap: 0.6rem;
        width: max-content;
        max-width: calc(100vw - 3rem);
        margin-top: 0.5rem;
        padding: 0.8rem;
        background: #faf9f6;
        border: 2px solid var(--bleu);
        border-radius: 16px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
        z-index: 1100;
    }

    #menu.ouvert {
        display: flex;
    }

    #menu a {
        text-align: center;
    }

    .recherche-wrapper {
    position: relative;
    min-width: 200px;
    width: 100%;
    flex: 1;
    }

    #btn-recherche {
        display: none;
    }

}


/* =====================
   3. GALERIE ŒUVRES
   → Vue principale de galerie.js → div#grille.galerie-oeuvres
   → Colonnes CSS : hauteurs variables selon les images (effet masonry)
   → Overlay titre/année apparaît au survol
===================== */

/* Colonnes construites en JS (galerie.js → repartirEnColonnes) plutôt qu'avec
   la propriété CSS `columns`, qui remplit une colonne entière avant de passer
   à la suivante (ordre de lecture haut→bas puis colonne suivante). En
   répartissant nous-mêmes les cartes une à une entre les colonnes, l'ordre de
   lecture reste gauche→droite, ligne par ligne — cohérent avec le tri. */
.galerie-oeuvres {
    display: flex;
    gap: 1.5rem;          /* ← espace entre les colonnes */
    align-items: flex-start;
    isolation: isolate;   /* ← contient les cartes positionnées, pour qu'elles ne passent pas au-dessus de la barre sticky */
    margin-right: 2rem;
}

.galerie-colonne {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Sur mobile/tactile : overlay toujours visible (pas de hover) */
@media (hover: none) {
    .galerie-oeuvres .carte-meta {
        position: static;
        background: transparent;
        opacity: 1;
    }
}

/* Chaque carte dans la galerie masonry */
.galerie-oeuvres .carte {
    position: relative;
    width: 100%;
    margin-bottom: 1.5rem; /* ← espace vertical entre les cartes */
    z-index: 0;
    /* coin coupé et ombre (noir estompé, propre aux images) */
    clip-path: var(--corner);
    border-left: 4px solid var(--ombre-image);
    border-bottom: 4px solid var(--ombre-image);
}


/* Image : height auto conserve les proportions → effet masonry */
.galerie-oeuvres .carte img {
    width: 100%;
    height: auto;
    display: block;
}

/* Overlay au survol
   → inset: 0 = couvre toute la carte
   → Modifie background pour changer couleur/opacité de l'overlay
   → Modifie justify-content pour positionner le texte (center, flex-end...) */
.galerie-oeuvres .carte-meta {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: rgba(255,255,255,0.9);   /* ← fond blanc semi-transparent */
    opacity: 0;
    transition: opacity 0.2s ease;      /* ← vitesse d'apparition */
}

.galerie-oeuvres .carte:hover .carte-meta {
    opacity: 1;
}

/* =====================
   BARRE D'AFFICHAGE
===================== */

.barre-affichage {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem 0.5rem;
    padding-top: 10px;
    background: #faf9f6;
    z-index: 100;
    position: sticky;
    top: var(--header-hauteur, 80px);
    border-bottom: 3px solid var(--shadow-color);
    border-left: 3px solid var(--shadow-color);
}

/* Empilé (label au-dessus des icônes) plutôt qu'en ligne : à largeur de
   fenêtre réduite, ce bloc reste étroit et ne vient pas se disputer la place
   avec les boutons de tri (cote/titre/date) dans la même barre */
.bloc-affichage {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2rem;
}

.label-affichage {
    font-size: 0.75rem;
    color: #999;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}

.toggle-affichage {
    display: flex;
    border: 1px solid var(--ocre);
    border-radius: 0;
    overflow: hidden;
}

/* Sur mobile : la barre passe sur plusieurs lignes ; le toggle de mode
   est masqué car seul le mode Grille (actif par défaut) est disponible */
@media (max-width: 600px) {
    .barre-affichage {
        flex-wrap: wrap;
        row-gap: 0.5rem;
        /* Le header n'étant plus sticky sur mobile, la barre se colle
           directement en haut de l'écran (au lieu de laisser un vide de la
           hauteur de l'ancien header une fois celui-ci défilé). */
        top: 0;
    }
    .bloc-affichage {
        display: none;
    }
}

.toggle-btn {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.9rem;
    border: none;
    background: #faf9f6;
    color: var(--shadow-color);
    font-size: 0.8rem;
    font-family: inherit;
    cursor: url("../cursor/cursorIndexRight.svg") 6 7, pointer;
    text-align: center;
    transition: background 0.15s, color 0.15s;
}

.toggle-btn:first-child {
    border-right: 1px solid var(--ocre);
}

.toggle-btn.actif {
    background: var(--ocre);
    color: var(--shadow-color);
}

.toggle-btn:hover {
    background: var(--ocre-hover);
    color: var(--bleu);
}

.toggle-btn svg {
    display: block;
}

/* Flèche visible uniquement sur le mode actuellement sélectionné — même
   principe que .tri-fleche pour le tri */
.toggle-fleche {
    display: none;
    font-size: 0.6rem;
}

.toggle-btn.actif .toggle-fleche {
    display: inline;
}

/* Compteur + contrôles de tri, groupés à gauche de la barre d'affichage */
.barre-compteur-tri {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Boutons de tri (cote / titre / date) — même recette que .toggle-affichage :
   un seul bloc à coins carrés regroupant les 3 options, version bureau */
.tri {
    display: flex;
    border: 1px solid var(--ocre);
    border-radius: 0;
    overflow: hidden;
}

.tri .tri-btn:not(:last-child) {
    border-right: 1px solid var(--ocre);
}

.tri-btn {
    padding: 0.25rem 0.6rem;
    border: none;
    background: #faf9f6;
    color: var(--shadow-color);
    font-size: 0.78rem;
    font-family: inherit;
    cursor: url("../cursor/cursorIndexRight.svg") 6 7, pointer;
    transition: background 0.15s, color 0.15s;
}

.tri-btn.actif {
    background: #faf9f6;
    color: var(--shadow-color);
}

.tri-btn:hover {
    background: var(--ocre-hover);
    color: var(--bleu);
}

.tri-fleche {
    font-size: 0.7rem;
}

/* Tri version mobile : bouton carré qui déroule les 3 options */
.tri-mobile {
    position: relative;
    display: none;
}

.tri-mobile-btn {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ocre);
    border-radius: 6px;
    background: #faf9f6;
    color: var(--shadow-color);
    cursor: url("../cursor/cursorIndexRight.svg") 6 7, pointer;
}

.tri-mobile-btn:hover {
    background: var(--ocre-hover);
    color: var(--bleu);
}

/* Choix cote/titre/date à l'intérieur du menu déroulant mobile : bordure
   propre à chaque bouton (dans .tri, la version bureau, ils se partagent une
   seule bordure de groupe — ici ils sont empilés donc chacun la sienne) */
.tri-mobile-menu .tri-btn {
    border: 2px solid var(--ocre);
    background: var(--fond-page);
    border-radius: 4px;
}

.tri-mobile-menu {
    display: none;
    flex-direction: column;
    gap: 0.3rem;
    position: absolute;
    top: calc(100% + 0.4rem);
    left: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 0.4rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    z-index: 10;
}

.tri-mobile-menu.ouvert {
    display: flex;
}

@media (max-width: 600px) {
    .tri {
        display: none;
    }
    .tri-mobile {
        display: block;
    }
}

/* =====================
   CHRONOLOGIE
===================== */

.galerie-chronologie {
    padding: 0 1.5rem;
    width: 100%;
    box-sizing: border-box;
}

.groupe-annee {
    margin-bottom: 2.5rem;
}

.separateur-annee {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.2rem;

    position: sticky;
    top: calc(var(--header-hauteur, 80px) + var(--barre-hauteur, 44px)); /* ← se colle juste sous la barre d'affichage, elle-même sous le header */
    z-index: 50;
    background: #faf9f6;
    padding-top: 0.6rem;
}

/* Header non sticky sur mobile (voir plus haut) : le séparateur d'année se
   colle juste sous la barre d'affichage seule, sans compter le header. */
@media (max-width: 600px) {
    .separateur-annee {
        top: var(--barre-hauteur, 44px);
    }
}

.separateur-annee::before,
.separateur-annee::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #ddd;
}

.separateur-annee-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: #999;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Réinitialise le padding hérité de .galerie-oeuvres dans chaque groupe */
.groupe-annee .galerie-oeuvres {
    padding: 0;
    width: 100%;
}

/* =====================
   LISTE
   → galerie.js → div#grille.galerie-liste
   → Mode texte seul : cote, titre, année, type, technique, support
===================== */

.galerie-liste {
    padding: 0 1.5rem;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.liste-entete,
.ligne-liste {
    display: grid;
    grid-template-columns: 0.9fr 2fr 0.6fr 1fr 1fr 1fr;
    gap: 1rem;
    padding: 0.6rem 0.4rem;
    align-items: center;
}

.liste-entete {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #999;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: calc(var(--header-hauteur, 80px) + var(--barre-hauteur, 44px));
    background: #faf9f6;
    z-index: 50;
}

.ligne-liste {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.9rem;
}

.ligne-liste:hover {
    background: #f7f6f3;
}

.liste-cote {
    color: #999;
    font-size: 0.8rem;
}

.liste-titre {
    font-weight: 500;
}

@media (max-width: 800px) {
    .liste-entete,
    .ligne-liste {
        grid-template-columns: 0.8fr 2fr 0.6fr 1fr;
    }
    .liste-technique,
    .liste-support {
        display: none;
    }
}

@media (max-width: 500px) {
    .liste-entete,
    .ligne-liste {
        grid-template-columns: 2fr 0.6fr;
    }
    .liste-cote,
    .liste-type {
        display: none;
    }
}

/* =====================
   LISTE INDEX (Séries / Événements / Publications)
   → index-liste.js → div#index-liste-corps.galerie-liste.galerie-liste-index
   → Réutilise .liste-entete/.ligne-liste avec seulement 3 colonnes :
     cote, titre, année — toujours visibles, y compris sur petit écran.
===================== */

.galerie-liste-index .liste-entete,
.galerie-liste-index .ligne-liste {
    grid-template-columns: 1fr 3fr 1fr;
}

@media (max-width: 500px) {
    .galerie-liste-index .liste-cote {
        display: block;
    }
}

/* =====================
   PAGE-HEADER (Séries / Événements / Publications)
   → Utilisé pour les pages index (titre de section) et pour la page d'un
     item (titre, cote, dates, description). Présentation texte d'abord :
     l'image, quand elle existe, n'est qu'une petite vignette secondaire,
     jamais une colonne dominante (ces objets n'ont souvent pas d'image).
===================== */

.page-header {
    /* Annule le display:flex du sélecteur générique "header" (prévu pour
       #header, le header du site) qui empilerait titre/cote/description
       sur une même ligne ici. */
    display: block;
    padding: 1.5rem 1.5rem 1rem;
}

.page-header h1 {
    margin: 0 0 0.3rem;
    font-size: 2rem;
}

.page-header-detail {
    max-width: 700px;
}

.page-header-vignettes {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.page-header-vignettes figure {
    margin: 0;
}

.page-header-vignettes img {
    width: 110px;
    height: 110px;
    object-fit: cover;
    border-radius: 6px;
    display: block;
    cursor: url("../cursor/cursorLoupe.svg") 20 10, zoom-in;   /* ← loupe : agrandir l'image */
}

.page-header-vignettes figcaption {
    font-size: 0.7rem;
    color: #999;
    margin-top: 0.2rem;
    max-width: 110px;
}

/* Titre vertical des pages index (SÉRIES, ÉVÉNEMENTS, PUBLICATIONS)
   → index-liste.js. Reprend la largeur du filtre replié de la galerie
   (.filtres-retracte : 40px + 2×0.5rem = 56px) comme marge de gauche, pour
   harmoniser les deux familles de pages — remplace l'ancien .page-header
   horizontal. */
.page-index-layout {
    display: flex;
    align-items: stretch;
}

.page-titre-vertical {
    width: 56px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: var(--header-hauteur, 80px);
    height: calc(100vh - var(--header-hauteur, 80px));
    border-right: 2px solid var(--shadow-color);
}

.page-titre-vertical span {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-weight: 700;
    letter-spacing: 0.1em;
    font-size: 3rem;
    white-space: nowrap;
}

.page-index-corps {
    flex: 1;
    min-width: 0;
}

/* Header non sticky sur mobile (voir plus haut) : le titre vertical se colle
   directement en haut de l'écran. */
@media (max-width: 600px) {
    .page-titre-vertical {
        top: 0;
        height: 100vh;
    }

    /* Même raison pour l'en-tête de colonnes des index : son offset inclut la
       hauteur du header, qui sur mobile défile au lieu de rester collé. Il se
       figeait donc à ~124px du haut, par-dessus les lignes de la liste. La
       barre d'affichage étant collée à 0 ici, l'en-tête vient juste dessous. */
    .liste-entete {
        top: var(--barre-hauteur, 44px);
    }
}

/* =====================
   4. GALERIE SECONDAIRE
   → Séries : serie.js → div.galerie
   → Événements : evenement.js → div.galerie
   → Publications : publication.js → div.galerie
   → Grille fixe, vignettes homogènes
===================== */

.galerie {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    /* ↑ 220px = largeur minimale d'une carte → réduis pour plus de colonnes */
    gap: 1.2rem;
    padding: 1.5rem;
}

.galerie .carte img {
    width: 100%;
    height: 200px;        /* ← hauteur fixe des vignettes → modifie selon le rendu */
    object-fit: cover;    /* ← recadre sans déformer */
    display: block;
}


/* =====================
   5. CARTE (commune aux deux galeries)
   → .carte est utilisée partout : galerie masonry, galerie secondaire,
     relations, index séries/événements/publications
===================== */

.carte {
    display: block;
    text-decoration: none;
    color: inherit;
    background: #faf9f6;    /* ← fond de la carte → même couleur que le fond de page */
    border: 1px solid #eee; /* ← bordure → supprime ou modifie */
    border-radius: 0px;    /* ← arrondi des coins → 0 pour carré */
    overflow: hidden;
    transition: transform 0.15s;
}

.carte:hover {
    transform: translateY(-2px);   /* ← remontée au survol → 0 pour désactiver */
}

/* Bande sous l'image : titre + année
   → Dans galerie-oeuvres : position absolute (overlay)
   → Dans galerie secondaire : position normale (sous l'image) */
.carte-meta {
    padding: 0.6rem 0.8rem;
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
}

.carte-titre {
    font-weight: 500;
}

.carte-annee {
    color: #999;   /* ← couleur de l'année sur la vignette */
}

/* Pastilles de couleurs dominantes (extraites de l'image, voir
   oeuvre_couleurs.json / calculer_couleurs.py) — coin de la carte, toujours
   visibles (contrairement à .carte-meta, qui n'apparaît qu'au survol). */
.carte-couleurs {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: flex;
    gap: 0.3rem;
    z-index: 1;
}

.carte-couleurs .couleur {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.8), 0 1px 2px rgba(0, 0, 0, 0.3);
}


/* =====================
   6. FICHE ŒUVRE
   → fiche.js → main.fiche
   → Deux colonnes : images à gauche, métadonnées à droite
   → Sur mobile (flex-wrap) : empile en une colonne
===================== */

.fiche {
    display: flex;
    gap: 2rem;
    padding: 0 1.5rem 2rem;
    flex-wrap: wrap;   /* ← passe en colonne unique sur petit écran */
}

/* Colonne gauche : images de l'œuvre */
.images {
    flex: 1 1 320px;   /* ← largeur minimale de la colonne images */
}

/* Une seule image visible à la fois (carrousel piloté par router.js) */
.images figure {
    display: none;
    margin: 0 0 1rem;
}

.images figure.actif {
    display: block;
}

.images img {
    width: 100%;
    border-radius: 8px;   /* ← arrondi des images → 0 pour carré */
    cursor: url("../cursor/cursorLoupe.svg") 20 10, zoom-in;   /* ← loupe : agrandir l'image */
}

/* Vidéo courte (mp4) déposée dans OEV, lue en natif dans la fiche */
.images .video-oeuvre {
    display: block;
    width: 100%;
    border-radius: 8px;
}

.images figcaption {
    font-size: 0.8rem;
    color: #888;
    margin-top: 0.3rem;
}

/* Flèches de navigation entre images d'une même œuvre, superposées à l'image
   → visibles seulement si l'œuvre a plusieurs images (voir fiche.js) */
.figure-img-wrap {
    position: relative;
}

.carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    width: 2rem;
    height: 2rem;
    border: 2px solid var(--bleu);
    border-radius: 50%;
    background: var(--ocre);
    color: var(--bleu);
    font-size: 1.2rem;
    line-height: 1;
    cursor: url("../cursor/cursorIndexRight.svg") 6 7, pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.carousel-nav:hover {
    background: var(--ocre-hover);
}

/* Cœur ASCII "<3" utilisé comme flèche entre les images : sa pointe est
   naturellement à gauche, on le retourne en miroir pour le sens inverse.
   Écrit en texte (et non avec ❤ / U+2764) parce que iOS rend ce caractère
   en emoji couleur rouge, qu'aucun color/filter CSS ne peut recolorer :
   en ASCII il hérite simplement du color de .carousel-nav. */
.fleche-coeur {
    display: inline-block;
    font-size: 0.95rem;
    letter-spacing: -0.04em;
}

.carousel-suivant .fleche-coeur,
.lightbox-suivant .fleche-coeur {
    transform: scaleX(-1);
}

.carousel-nav.masque {
    display: none;
}

.carousel-precedent {
    left: 0.5rem;
}

.carousel-suivant {
    right: 0.5rem;
}

/* Vidéo intégrée (vimeo / youtube) */
.video-container {
    position: relative;
    width: 100%;
    padding-bottom: 75%;
}

/* Les vidéos YouTube sont quasi toujours en 16:9 */
.video-container.video-youtube {
    padding-bottom: 56.25%;
}

.video-container iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Colonne droite : métadonnées */
.meta {
    flex: 1 1 280px;   /* ← largeur minimale de la colonne métadonnées */
}

.meta h1 {
    margin: 0 0 0.3rem;
    font-size: 2rem;   /* ← taille du titre de l'œuvre */
}

/* Champ de métadonnée : nom (badge) + valeur
   → fiche.js → champMeta() : cote, date, technique, support, dimensions, description */
.meta-champ {
    margin-bottom: 0.75rem;
}

/* Nom de la métadonnée : même style que .filtre-groupe .legend
   (fond rose, ombre verte, coin coupé), mais écrit en minuscule */
.meta-nom {
    display: inline-block;
    text-transform: lowercase;
    letter-spacing: 0.08em;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.3rem 0.8rem;

    background: var(--ocre);
    color: var(--texte-pastille);

    clip-path: var(--corner);
    border-left: var(--shadow-bordure-gauche);
    border-bottom: var(--shadow-bordure-bas);

    margin-bottom: 0.3rem;
}

/* Valeur de la métadonnée : soulignée et écrite dans le vert de l'ombre */
.meta-valeur {
    padding: 0.2rem 0;
    line-height: 1.5;
    border-bottom: 2px solid var(--shadow-color);
    color: var(--shadow-color);
}

.meta-valeur a {
    color: inherit;
    text-decoration: none;
    background: var(--ocre-surlignage);
    padding: 0.05em 0.3em;
    border-radius: 3px;
    transition: background .15s ease;
}
.meta-valeur a:hover {
    background: var(--ocre);
}

/* Métadonnée sans nom (pas de badge) : ex. notes_creation
   → fiche.js → champSansNom() : encadré "<<< ... >>>", sans bordure */
.meta-champ-sans-nom {
    margin-bottom: 0.75rem;
}

.meta-valeur-sans-nom {
    padding: 0.2rem 0;
    line-height: 1.5;
    font-style: italic;
    color: var(--bleu-hover);   /* ← vert grisé, sans soulignement */
}


/* =====================
   7. MÉTADONNÉES
   → Styles pour les champs affichés dans .meta sur la fiche
   → .meta-champ / .meta-nom / .meta-valeur : voir section 6 ci-dessus
===================== */

/* Badge type d'œuvre (Peinture, Dessin, Imprimé...)
   → Cliquable → renvoie vers galerie filtrée par type
   → Même style pastille que #menu a (rose, ombre verte, coin en pilule) */
.type-oeuvre {
    display: inline-block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.3rem 1rem;
    margin: 0.3rem 0 1rem;

    background: none;
    color: var(--shadow-color);

    border: 2px solid var(--shadow-color);
    border-radius: 999px;

    transition: all .15s ease;
}
.type-oeuvre:hover {
    transform: translate(-3px, 3px);
}

.type-oeuvre a {
    color: inherit;
    text-decoration: none;
}

/* Variante non cliquable : type de série/événement/publication (ex.
   Monographie, Périodique, Marché et exposition) — aucun lien derrière,
   donc grisée et sans effet de survol (pas de translate). */
.type-oeuvre.statique {
    color: var(--bleu-hover);   /* ← vert grisé, pas le vert vif des liens */
    border-color: var(--bleu-hover);
    cursor: default;
}
.type-oeuvre.statique:hover {
    transform: none;
}

/* Pastille "inversée" : mêmes proportions que les pastilles standard,
   couleurs inversées (ombre rose, surface verte), texte de la couleur
   du fond de page — motifs, références */
.pastille-inverse {
    display: inline-block;
    padding: 0.2rem 0.7rem;
    margin: 0 0.3rem 0.3rem 0;
    font-size: 0.8rem;
    text-transform: lowercase;

    background: var(--shadow-color);
    color: var(--fond-page);

    border-left: 4px solid var(--ocre);
    border-bottom: 4px solid var(--ocre);
    border-radius: 999px;

    text-decoration: none;
    transition: all .15s ease;
}
.pastille-inverse:hover {
    transform: translate(-3px, 3px);
}


/* =====================
   8. THÈMES (tags)
   → fiche.js → div.themes → a.theme
   → Chaque tag est cliquable → renvoie vers galerie filtrée
===================== */

.themes {
    margin-top: 1rem;
}

/* Pastille inversée (ombre rose, surface verte, texte couleur du fond)
   → même style que .pastille-inverse, voir section 6 */
.theme {
    display: inline-block;
    padding: 0.2rem 0.7rem;
    margin: 0 0.3rem 0.3rem 0;
    font-size: 0.8rem;
    text-transform: lowercase;

    background: var(--shadow-color);
    color: var(--fond-page);

    border-left: 4px solid var(--ocre);
    border-bottom: 4px solid var(--ocre);
    border-radius: 999px;

    text-decoration: none;
    transition: all .15s ease;
}

.theme:hover {
    transform: translate(-3px, 3px);
}

/* Variante "couleur" : pastille seule (background-color inline, voir
   fiche.js), sans texte ni fond/bordure hérités de .theme. */
.theme-couleur {
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
    vertical-align: middle;
}


/* =====================
   9. FILTRES
   → galerie.js → aside.filtres dans div.layout
   → Barre latérale gauche, sticky, scrollable
===================== */

/* Conteneur layout : filtres à gauche + galerie à droite (+ toggle vertical sur mobile) */
.layout {
    display: flex;
    align-items: flex-start;
    margin-top: 0;
    padding-top:0;
    position: relative;
    z-index: 1;
}

.layout > .filtres-toggle-vertical {
    order: -2;
}

.layout > main {
    flex: 1;
    min-width: 0;
    display: block;   
}
.barre-affichage {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1.5rem;
    border-bottom: 3px solid var(--shadow-color);
    position: sticky;
    top: var(--header-hauteur, 80px);
    z-index: 100;
}
/* Redéfinition (déclarée en second, donc prioritaire) : header non sticky
   sur mobile, voir section 2 HEADER. */
@media (max-width: 600px) {
    .barre-affichage {
        top: 0;
    }
}
/* Mode grille : la galerie masonry prend toute la largeur de <main> */
.layout > main > .galerie-oeuvres {}

/* Mode chronologie : le conteneur prend toute la largeur de <main> */
.layout > main > .galerie-chronologie {
    padding: 0 1.5rem;
}

/* Barre de filtres latérale*/ 
/* Aside normal */
.filtres {
    width: 190px;
    flex-shrink: 0;
    padding: 0 1rem 2rem 1.5rem;
    position: sticky;
    top: var(--header-hauteur, 80px);
    max-height: calc(100vh - var(--header-hauteur, 80px));
    overflow-y: auto;
    align-self: flex-start;
    transition: width 0.2s ease;
    border-right: 2px solid var(--shadow-color);
}

/* Sur mobile : la colonne latérale ne tient pas à côté de la galerie (trop
   étroite, layout cassé). Elle devient un tiroir plein écran caché par
   défaut, ouvert par-dessus la page via #filtres-mobile-btn (voir galerie.js),
   sur le même principe que .fiche-overlay / .footer (position fixed +
   transform). */
@media (max-width: 600px) {
    /* .layout (position:relative + z-index:1) forme son propre contexte
       d'empilement : sans ceci, le z-index:1500 du tiroir ne se compare
       qu'à l'intérieur de .layout et reste sous le header (z-index:1000)
       malgré sa valeur plus élevée. On supprime donc ce contexte sur mobile
       (position:static ignore z-index) pour que le tiroir (position:fixed)
       se compare directement au header au niveau racine. Augmenter le
       z-index de .layout au lieu de ça ferait aussi passer la galerie
       (contenu normal de .layout) au-dessus du header. */
    .layout {
        position: static;
        z-index: auto;
    }

    /* Hauteur bornée explicitement : avec seulement inset (top/bottom à 0) le
       tiroir prend la hauteur de son contenu une fois les groupes dépliés, son
       bas passe hors écran et devient inatteignable (body est en
       overflow:hidden pendant l'ouverture). En fixant la hauteur à la fenêtre,
       le dépassement se règle par le défilement interne du tiroir.
       dvh plutôt que vh : sur iOS, vh ignore les barres d'outils dynamiques de
       Safari et fait dépasser le bas du tiroir sous la barre d'adresse. */
    .filtres {
        position: fixed;
        inset: 0 auto 0 0;
        width: 85vw;
        max-width: 320px;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0;
        padding: 1rem 1rem 2rem;
        background: #faf9f6;
        border-right: none;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.25);
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        z-index: 1500;         /* ← au-dessus du header (1000) */
    }

    .filtres.filtres-ouvert-mobile {
        transform: translateX(0);
    }

    /* Le bouton de rétraction (bureau) n'a pas de sens dans le tiroir mobile
       → remplacé par #fermer-filtres-mobile */
    #toggle-filtres {
        display: none;
    }
}

/* Fond assombri derrière le tiroir de filtres mobile, ferme le tiroir au clic
   (même principe que #footer-infos-backdrop) */
.filtres-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1450;
}
.filtres-backdrop.visible {
    display: block;
}

/* Conteneur vertical "FILTRER PAR" + bouton toggle (mobile uniquement) */
.filtres-toggle-vertical {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    padding: 2rem 0.5rem 1rem;
    position: sticky;
    top: var(--header-hauteur, 80px);
    height: fit-content;
    border-right: 2px solid var(--shadow-color);
    width: 70px;
    flex-shrink: 0;
}

.filtres-toggle-vertical span {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-weight: 700;
    letter-spacing: 0.1em;
    font-size: 3rem;
    white-space: nowrap;
    order: 2;
}

/* Bouton circulaire avec flèche pour toggle filtres (mobile uniquement) */
.filtres-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border: 2px solid var(--bleu);
    border-radius: 50%;
    background: var(--ocre);
    color: var(--bleu);
    font-size: 1.5rem;
    font-weight: 700;
    padding: 0;
    cursor: url("../cursor/cursorIndexRight.svg") 6 7, pointer;
    transition: all 0.2s ease;
    order: 1;
    flex-shrink: 0;
}
.filtres-toggle-btn:hover {
    background: var(--ocre-hover);
    transform: scale(1.1);
}

/* Flèche de fermeture du tiroir mobile, dans .filtres-header */
.fermer-filtres-mobile {
    display: none;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border: 2px solid var(--bleu);
    border-radius: 50%;
    background: var(--ocre);
    color: var(--bleu);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    padding: 0;
    cursor: url("../cursor/cursorIndexRight.svg") 6 7, pointer;
    transition: all 0.2s ease;
}
.fermer-filtres-mobile:hover {
    background: var(--ocre-hover);
    transform: scale(1.1);
}

@media (max-width: 600px) {
    .filtres-toggle-vertical {
        display: flex;
    }
    .fermer-filtres-mobile {
        display: flex;
    }
}

body.filtres-mobile-ouvert {
    overflow: hidden;   /* ← empêche le fond de défiler sous le tiroir de filtres */
}

/* Groupe de filtres (fieldset) : technique, support, type, thème... */

.filtre-groupe {
    border: 1px;
    border-top: 2px solid var(--shadow-color);   /* ← séparateur entre groupes */
    margin: 0 0 0.4rem;
    padding: 0.6rem 0 0.2rem;
    overflow: hidden
}

.filtre-groupe.ferme > *:not(.legend) {
    display: none;
}


.filtre-groupe .legend {
    display: inline-block;

    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.8rem;
    font-weight: 1000 ;
    padding: 0.5rem 1rem;

    background: var(--ocre);
    color: var(--texte-pastille);

    clip-path: var(--corner);
    border-left: var(--shadow-bordure-gauche);
    border-bottom: var(--shadow-bordure-bas);

    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 0.75rem;
    cursor: url("../cursor/cursorIndexRight.svg") 6 7, pointer;
    transition: all .15s ease;
}
.filtre-groupe .legend::after {
    content: " ↘";
}
.filtre-groupe .legend:hover {
    transform: translate(-3px, 3px);
}

.filtre-groupe.ferme .legend::after {
    content: " ↗";
}
/* Chaque case à cocher */
.filtre-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.15rem 0;
    font-size: 0.85rem;
    cursor: url("../cursor/cursorIndexRight.svg") 6 7, pointer;
    font-family: inherit;
    text-transform: uppercase;
}
.filtre-item:hover {
    background: var(--bleu-hover);
    border: 1px solid var(--bleu);
}

.filtre-item input {
    cursor: url("../cursor/cursorIndexRight.svg") 6 7, pointer;
}

/* Pastille de la catégorie "couleur" (roue à 12 teintes + Noir/Blanc/Gris,
   voir hexCategorieCouleur() dans galerie.js) — remplace visuellement le
   texte comme repère rapide, le libellé reste à côté pour l'accessibilité. */
.filtre-couleur-pastille {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}
.filtres-actifs {
    display: flex;
    flex-wrap: wrape;
    align-self: flex-end;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: none;
    border: 1px solid var(--bleu);
    border-radius: 20px;
    padding: 0.2rem 0.6rem 0.2rem 0.8rem;
    font-size: 0.8rem;
    color: var(--bleu);
}

.chip-suppr {
    border: none;
    background: none;
    cursor: url("../cursor/cursorIndexRight.svg") 6 7, pointer;
    font-size: 0.75rem;
    color: var(--bleu);
    padding: 0;
    line-height: 1;
}

.chip-suppr:hover {
    color: var(--bleu-hover);
}

/* Chip RESET : même forme que les chips de filtre, fond rose pour la
   distinguer — réinitialise tous les filtres au clic (voir galerie.js) */
.chip-reset {
    background: var(--ocre);
}
/* Filtre plage d'années : deux champs numériques */
.filtre-annee {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.filtre-annee input {
    width: 64px;
    padding: 0.3rem 0.4rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 0.85rem;
    font-family: inherit;
    text-transform: uppercase;
}

.filtre-annee span {
    color: #aaa;
}


/* COMPTEUR */
.filtre-label {
    flex: 1;
}

.filtre-compteur {
    color: #999;
    font-size: 0.8rem;
}

/* COLONNE FILTRE RETRACTABLE */
.filtres-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
/* Actions dans le header des filtres (réinitialiser + toggle) */
.filtres-header-actions {
    display: flex;
    align-items: right;
    gap: 2rem;
}

/* Bouton toggle rétracter/déployer */
#toggle-filtres {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    border: 1px solid var(--bleu);
    border-radius: 50%;
    background: var(--ocre);
    color: var(--bleu);
    cursor: url("../cursor/cursorIndexRight.svg") 6 7, pointer;
    font-size: 0.8rem;
    transition: background 0.15s;
    text-decoration: none;
    padding: 0;
}

#toggle-filtres:hover {
    background: var(--ocre-hover);
    color: var(--bleu);
}

/* Redéfinition (déclarée en second, donc prioritaire) : sur mobile le
   tiroir de filtres se ferme avec #fermer-filtres-mobile, pas ce bouton. */
@media (max-width: 600px) {
    #toggle-filtres {
        display: none;
    }
}

/* État rétracté : la colonne se réduit à la largeur du header seul */
.layout.filtres-retractes {
    grid-template-columns: 70px 1fr;
}
/* Aside rétracté */
.filtres-retracte {
    width: 40px;
    padding: 0 0.5rem;
    overflow: hidden;
    border-right: 0px solid var(--shadow-color);
    
}
.filtres-retracte #filtres-contenu {
    display: none;
}
.filtres-retracte h2 {
    display: none;
}
.filtres-retracte .filtres-header {
    flex-direction: column;
    align-items: center;
    padding-top: 0.5rem;
    gap: 0.5rem;
}
/* =====================
   10. RELATIONS
   → fiche.js, evenement.js, publication.js
   → Section en bas de la fiche : œuvres liées, événements, publications
===================== */

.relations {
    padding: 0 1.5rem 2.5rem;
    max-width: 900px;
}

.relations h2 {
    margin: 0 0 0.8rem;
    padding-bottom: 0.4rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ocre);
    text-shadow: -1px 1px 0 var(--shadow-color);   /* ← effet 3D façon WordArt, ombre à gauche */
    border-bottom: 2px solid var(--ocre);
}

/* Grille horizontale des cartes de relation */
.relations-liste {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

/* Carte de relation : plus petite que les cartes normales */
.carte-relation {
    width: 160px;   /* ← largeur des cartes dans les sections relations */
    /* Même hauteur qu'avec une image (voir .carte-relation img ci-dessous) :
       .carte-meta étant en position absolute (inset:0, voir .carte-hover-meta
       .carte-meta), sans cette hauteur minimale la carte se réduit à la seule
       étiquette .carte-relation-type quand il n'y a pas d'image, et le
       titre + la date apparaissent tronqués au survol. */
    min-height: 110px;
}

.carte-relation img {
    height: 110px;   /* ← hauteur fixe des vignettes de relation */
}

/* Pas d'image disponible (publication/événement sans vignette) : fond de
   substitution + icône "image absente" en surimpression, sinon la carte se
   confond avec le fond de page — voir .carte-hover-meta qui retire déjà la
   bordure de .carte. */
.carte-relation:not(:has(img)) {
    background-color: var(--ocre-surlignage);
    background-image: url("../cursor/imgAbsente.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 90px;
}

/* Label du type de relation (ex: "Basé sur", "Exposé à", "Édité dans") */
.carte-relation-type {
    display: block;
    margin-bottom: 0.1rem;
    font-size: 0.7rem;
    color: var(--bleu-hover);   /* ← vert grisé */
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Vignettes de relation entre tables (oeuvre ↔ série/événement/publication,
   oeuvre ↔ oeuvre — voir fiche.js, serie.js, evenement.js, publication.js) :
   titre + année apparaissent en overlay au survol, comme dans la galerie
   principale (voir .galerie-oeuvres .carte-meta) — seul le nom de la
   relation (.carte-relation-type, placé avant l'image dans le HTML) reste
   visible en permanence, au-dessus de l'image. */
.carte-hover-meta {
    position: relative;
    border: none;    /* ← retire le cadre .carte (visible autour du nom de la relation + l'image) */
}

.carte-hover-meta .carte-meta {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: rgba(255, 255, 255, 0.9);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.carte-hover-meta:hover .carte-meta {
    opacity: 1;
}

/* Sur mobile/tactile : pas de hover, texte toujours visible */
@media (hover: none) {
    .carte-hover-meta .carte-meta {
        position: static;
        background: transparent;
        opacity: 1;
    }
}


/* =====================
   11. DIVERS
===================== */


/* Lien externe (Instagram, site éditeur...) sur la fiche */
.lien-externe a {
    color: var(--shadow-color);
    font-size: 0.85rem;
    text-decoration: none;
    background: var(--ocre-surlignage);
    padding: 0.05em 0.3em;
    border-radius: 3px;
    transition: background .15s ease;
}

.lien-externe a:hover {
    background: var(--ocre);
}

/* Message affiché quand aucun résultat ne correspond aux filtres
   ou qu'une entité est introuvable */
.vide {
    padding: 2rem;
    color: #999;
    font-size: 0.9rem;
}

/* Badge "Image provisoire" sous les images temporaires
   → fiche.js, publication.js → span.img-provisoire
   → Affiché quand img_temp = true dans la base */
.img-provisoire {
    display: inline-block;
    font-size: 0.75rem;
    font-style: italic;
    color: #aaa;        /* ← couleur discrète → modifie si tu veux plus visible */
    margin-top: 0.2rem;
}


/* =====================
   12. OVERLAY FICHE
   → router.js → #fiche-overlay
   → Affiche la fiche d'une œuvre par-dessus la page de fond (galerie, série,
     événement, publication...) sans la détruire : scroll et filtres du fond
     restent intacts à la fermeture.
===================== */

.fiche-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;              /* ← au-dessus du header (1000) */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    padding: 2rem 1.5rem;
    background: rgba(0, 0, 0, 0.6);   /* ← opacité du fond assombri */
}

.fiche-overlay.hidden {
    display: none;
}

body.overlay-ouvert {
    overflow: hidden;   /* ← empêche le fond de défiler sous l'overlay */
}

/* Taille fixe du panneau, quel que soit le contenu de la fiche affichée :
   → seul #fiche-overlay-corps défile en interne si le contenu dépasse. */
.fiche-overlay-panneau {
    position: relative;
    background: #fff;
    border-radius: 8px;    /* ← arrondi du panneau → 0 pour carré */
    width: min(1100px, 100%);     /* ← largeur fixe du panneau */
    height: min(800px, 100%);     /* ← hauteur fixe du panneau */
    display: flex;
    flex-direction: column;
}

#fiche-overlay-corps,
#item-overlay-corps {
    overflow-y: auto;
    flex: 1;
    min-height: 0;      /* ← nécessaire pour que le scroll interne fonctionne en flex */
    padding-top: 1rem;
    background: #faf9f6;    /* ← même couleur que le fond de page / des cartes */
}

.fiche-overlay-fermer {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    width: 2.2rem;
    height: 2.2rem;
    border: 2px solid var(--bleu);
    border-radius: 50%;
    background: var(--ocre);
    color: var(--bleu);
    font-size: 1.1rem;
    line-height: 1;
    cursor: url("../cursor/cursorIndexRight.svg") 6 7, pointer;
    z-index: 1;
}

.fiche-overlay-fermer:hover {
    background: var(--ocre-hover);
}

/* Flèches précédent/suivant : naviguent entre les œuvres sans fermer l'overlay */
.fiche-overlay-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    width: 2.6rem;
    height: 2.6rem;
    border: 2px solid var(--bleu);
    border-radius: 50%;
    background: var(--ocre);
    color: var(--bleu);
    font-size: 1.6rem;
    line-height: 1;
    cursor: url("../cursor/cursorIndexRight.svg") 6 7, pointer;
    z-index: 1;
}

.fiche-overlay-nav:hover {
    background: var(--ocre-hover);
}

.fiche-overlay-nav.masque {
    display: none;
}

.fiche-overlay-precedent {
    left: 0.75rem;
}

.fiche-overlay-suivant {
    right: 0.75rem;
}

/* =====================
   13. LIGHTBOX IMAGE
   → router.js → #image-lightbox
   → Affiche l'image d'une œuvre agrandie, centrée, avec sa seule légende,
     par-dessus la fiche. Un clic en dehors de l'image referme le lightbox
     et revient à la fiche (#fiche-overlay), qui reste ouverte en-dessous.
===================== */

.image-lightbox {
    position: fixed;
    inset: 0;
    z-index: 3000;              /* ← au-dessus de la fiche (2000) */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    background: rgba(0, 0, 0, 0.85);
}

.image-lightbox.hidden {
    display: none;
}

.image-lightbox figure {
    max-width: 90vw;
    max-height: 90vh;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.image-lightbox img {
    max-width: 100%;
    max-height: 80vh;
    width: auto;
    border-radius: 8px;
    display: block;
}

.image-lightbox figcaption {
    color: #eee;
    font-size: 0.85rem;
    margin-top: 0.75rem;
    text-align: center;
}

/* Flèches précédent/suivant du lightbox, mêmes proportions que celles de la fiche */
.lightbox-nav {
    top: 50%;
    transform: translateY(-50%);
    width: 2.6rem;
    height: 2.6rem;
    background: var(--ocre);
    font-size: 1.6rem;
    z-index: 1;
}

.lightbox-nav:hover {
    background: var(--ocre-hover);
}

.lightbox-precedent {
    left: 1rem;
}

.lightbox-suivant {
    right: 1rem;
}

/* =====================
   14. FOOTER
   → index.html → #footer / #footer-pastille / #footer-infos-backdrop
   → 2 étapes : 1) replié par défaut (translateY 100%, hors écran), seule la
     pastille "+++" est visible et révèle le footer (nom/liens + pastille
     "Infos") ; 2) cliquer sur "Infos" (dans le footer) le fait monter
     presque tout en haut de l'écran, sans le recouvrir entièrement (voir
     .footer.infos-ouvert) — cliquer en dehors (backdrop transparent) le
     referme — voir router.js.
===================== */

.footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1050;              /* ← au-dessus du header (1000) */
    background: var(--bleu);
    color: white;
    border-top: 4px solid var(--ocre);
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.footer.revele {
    transform: translateY(0);
}

/* Étape 2 : le même footer monte presque tout en haut de l'écran, en
   s'arrêtant juste sous le header (--header-hauteur, voir
   ajusterHauteurHeader dans router.js) avec un petit espace, et se
   resserre légèrement sur les côtés pour laisser voir la page derrière
   sans la recouvrir entièrement. */
.footer.infos-ouvert {
    top: calc(var(--header-hauteur, 80px) + 1rem);
    left: 1.5vw;
    right: 1.5vw;
    display: flex;
    flex-direction: column;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.25);
}

.footer-contenu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.2rem;
    padding: 1rem 1.5rem;
    font-size: 0.85rem;
}

.footer.infos-ouvert .footer-contenu {
    flex-shrink: 0;
}

.footer-nom {
    font-weight: 700;
}

.footer-contenu a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

.footer-contenu a:hover {
    border-color: white;
}

/* Pastille "Infos" : poussée tout à droite, en pastille (même recette que
   #menu a / #recherche) pour la distinguer des liens texte simples. */
.footer-contenu .footer-infos {
    margin-left: auto;
    padding: 0.3rem 1rem;
    border: none;
    background: var(--ocre);
    color: var(--bleu);
    font: inherit;
    text-transform: none;
    font-weight: 700;
    letter-spacing: 0.05em;
    border-radius: 999px;
    cursor: url("../cursor/cursorIndexRight.svg") 6 7, pointer;
    border-left: var(--shadow-bordure-gauche);
    border-bottom: var(--shadow-bordure-bas);
    transition: transform 0.15s ease;
}

.footer-contenu .footer-infos:hover {
    transform: translate(-3px, 3px);
}

/* Panneau "Infos" : masqué tant que le footer n'a pas la classe
   .infos-ouvert (voir router.js → ouvrirInfosFooter/fermerInfosFooter). */
.footer-infos-panneau {
    display: none;
    padding: 1rem 1.5rem 1.5rem;
    font-size: 0.85rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.footer.infos-ouvert .footer-infos-panneau {
    display: block;
    flex: 1;
    overflow-y: auto;
}

/* Sections du panneau Infos (bio, DB, thésaurus, crédits, inspirations —
   voir js/infos-contenu.js) */
.infos-section {
    max-width: 50rem;
    margin: 0 0 1.75rem;
}

.infos-section:last-child {
    margin-bottom: 0.5rem;
}

.infos-section h3 {
    margin: 0 0 0.5rem;
    color: var(--ocre);
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.infos-section p {
    margin: 0 0 0.6rem;
    line-height: 1.5;
}

.infos-section ul {
    margin: 0 0 0.6rem;
    padding-left: 1.2rem;
}

.infos-section li {
    margin-bottom: 0.3rem;
}

.infos-section a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

.infos-section a:hover {
    border-color: white;
}

/* Lightbox générique (schéma DB pour l'instant — voir js/infos.js) : overlay
   plein écran par-dessus tout le reste, image centrée dans une fenêtre
   limitée en taille plutôt qu'affichée en plein cadre. */
.lightbox-fond {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5000; /* au-dessus de tout, y compris le footer (1050) et la fiche (3000) */
}

.lightbox-cadre {
    position: relative;
    background: #ffffff;
    border: 2px solid var(--ocre);
    border-radius: 8px;
    padding: 1.5rem;
    max-width: min(90vw, 900px);
    max-height: 90vh;
    overflow: auto;
}

.lightbox-cadre img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Croix simple (pas de pastille/cercle), même vert que le reste du site —
   voir .fiche-overlay-fermer pour le style "pastille" utilisé ailleurs. */
.lightbox-fermer {
    position: absolute;
    top: 0.5rem;
    right: 0.75rem;
    padding: 0;
    border: none;
    background: none;
    color: var(--bleu);
    font-size: 1.6rem;
    line-height: 1;
    cursor: url("../cursor/cursorIndexUp.svg") 16 6, pointer;
}

.lightbox-fermer:hover {
    color: var(--shadow-color);
}

/* Pastille "+++" : même recette pilule que #menu a / #recherche
   (fond jaune, coin coupé, ombre) pour rester dans le langage visuel du site.
   Cliquable : révèle le footer (voir router.js). */
.footer-pastille {
    position: fixed;
    left: 50%;
    bottom: 0.9rem;
    transform: translateX(-50%);
    z-index: 1049;
    margin: 0;
    padding: 0.35rem 1.2rem;
    border: none;
    background: var(--ocre);
    color: var(--texte-pastille);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    cursor: url("../cursor/cursorIndexRight.svg") 6 7, pointer;
    border-radius: 999px;
    border-left: var(--shadow-bordure-gauche);
    border-bottom: var(--shadow-bordure-bas);
    transition: opacity 0.2s ease, transform 0.15s ease;
}

.footer-pastille:hover {
    transform: translateX(-50%) translate(-3px, 3px);
}

.footer-pastille.masque {
    opacity: 0;
    pointer-events: none;
}

/* Backdrop transparent : capte les clics en dehors du panneau infos pour
   le refermer (voir router.js), sans assombrir la page derrière. */
.footer-infos-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: transparent;
    pointer-events: none;
}

.footer-infos-backdrop.actif {
    pointer-events: auto;
}

/* =====================
   12. COUVERTURE (ACCUEIL)
   → accueil.js — URL nue "index.html" : dessin plein cadre + "nampham",
     couleurs extraites de l'image (--splash-dominante / --splash-complementaire
     posées en JS). Clic n'importe où sur la scène → galerie.
===================== */

/* Chrome habituel (header, footer...) masqué : la scène occupe tout l'écran. */
body.mode-splash {
    overflow: hidden;
    padding-bottom: 0;
}
body.mode-splash #header,
body.mode-splash #footer,
body.mode-splash #footer-pastille,
body.mode-splash #footer-infos-backdrop {
    display: none;
}
body.mode-splash #app {
    position: fixed;
    inset: 0;
}

.splash-scene {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    cursor: url("../cursor/cursorIndexRight.svg") 6 7, pointer;
    /* Couleur dominante de l'œuvre (posée en JS, voir accueil.js) : comble
       l'espace autour de l'image quand elle est plus petite que l'écran,
       plutôt qu'un agrandissement qui la rendrait floue. */
    background-color: var(--splash-dominante, var(--ocre));
}

.splash-image {
    position: relative;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    /* Jamais agrandie au-delà de sa résolution native (contrairement à
       object-fit: cover plein cadre) : préserve la qualité, quitte à laisser
       apparaître le fond de couleur ci-dessus sur les images plus petites
       que l'écran. */
    object-fit: contain;
    display: block;
}

.splash-titre {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5vw;
}

.splash-titre h1 {
    position: relative;
    z-index: 0;
    margin: 0;
    font-size: clamp(3.5rem, 4vw, 13rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 0.85;
    text-align: center;
    text-wrap: balance;
    user-select: none;

    /* Surface = complémentaire de la dominante, contour = variante foncée de
       la surface ; repli sur la palette du site tant que le JS n'a pas
       encore mesuré l'image (évite un flash de texte non stylé). */
    color: var(--splash-complementaire, var(--bleu));
    -webkit-text-stroke: 2.5px var(--splash-contour, #1e5a67);
    paint-order: stroke fill;
}

/* Ombre décalée = copie du mot, dominante, placée dans son propre calque
   derrière le texte (au lieu d'un text-shadow) : un text-shadow chevauche le
   contour côté décalage et l'efface là où sa couleur pâle se confond avec le
   fond, ce qui laissait le détourage incomplet sur ce côté des lettres. */
.splash-titre h1::before {
    content: "nampham";
    position: absolute;
    inset: 0;
    z-index: -1;
    color: var(--splash-dominante, var(--ocre));
    -webkit-text-stroke: 0;
    transform: translate(-1.5px, 2.5px);
}

.splash-indice {
    position: absolute;
    bottom: 2.2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 0.5rem;

    color: var(--fond-page);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    opacity: 0.88;
}

.splash-fleche {
    display: inline-block;
    animation: splash-pousse 1.6s ease-in-out infinite;
}

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

@keyframes splash-pousse {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(4px); }
}

/* =====================
   PROTECTION DES IMAGES
   → voir js/protection-images.js pour le blocage clic droit / glisser-déposer
===================== */
img {
    -webkit-user-drag: none;
    user-drag: none;
    -webkit-touch-callout: none;   /* ← iOS : désactive le menu "Enregistrer l'image" à l'appui long */
    -webkit-user-select: none;
    user-select: none;
}

/* =====================
   BANDEROLE ANNONCE
   → contenu piloté par data/annonce.json (voir router.js → initialiserBanderole/
     afficherBanderole/masquerBanderole). N'apparaît qu'au-dessus de la page
     OEUVRES (galerie) — masquée sur la couverture, séries, événements,
     publications (voir les appels masquerBanderole() dans ces vues).
     Placée avant #header dans index.html : défile hors écran au scroll,
     avant que le header (sticky) ne se colle en haut.
===================== */
.banderole-annonce {
    overflow: hidden;
    white-space: nowrap;
    background: var(--bleu);
    border-bottom: var(--shadow-bordure-bas);
}

.banderole-annonce.hidden {
    display: none;
}

.banderole-piste {
    display: inline-flex;
    width: max-content;
    animation: banderole-defilement 20s linear infinite; /* durée recalculée en JS selon la longueur du texte */
}

.banderole-texte {
    display: inline-block;
    padding: 0.5rem 3rem;
    font-weight: 600;
    color: var(--fond-page);
}

@keyframes banderole-defilement {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); } /* la piste contient 2 copies du texte → boucle continue */
}

/* Défilement désactivé : texte statique, centré, tronqué s'il déborde */
@media (prefers-reduced-motion: reduce) {
    .banderole-piste {
        animation: none;
    }
    .banderole-texte[aria-hidden="true"] {
        display: none; /* copie utile seulement au défilement */
    }
}