/* ════════════════════════════════════════════════════════════════
   new.fr-chocolat.com / Beaux-Arts — landing
   Identité Chocolat! · navy + ocre · serif décorative pour FR
   ════════════════════════════════════════════════════════════════ */

:root {
    --c-navy: #1F2D3D;
    --c-navy-soft: #2C3E50;
    --c-ocre: #B39451;
    --c-ocre-soft: #C9A961;
    --c-paper: #FAF8F3;
    --c-paper-deep: #F2EDE2;
    --c-ink: #1A1A1A;
    --c-ink-soft: #555;
    --c-rule: #E5DFD0;

    --serif: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
    --jp:    'Noto Sans JP', -apple-system, 'Hiragino Sans', sans-serif;

    --max-w: 1180px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--jp);
    background: var(--c-paper);
    color: var(--c-ink);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--c-ocre); text-decoration: none; }
a:hover { color: var(--c-navy); }

/* ────── HEADER ────── */
.site-head {
    border-bottom: 1px solid var(--c-rule);
    position: sticky; top: 0; z-index: 50;
    backdrop-filter: blur(10px);
    background: rgba(250, 248, 243, 0.94);
}
.site-head-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 14px 24px;
    display: flex; align-items: center; gap: 32px;
}
.site-logo { display: flex; align-items: center; gap: 14px; text-decoration: none; line-height: 1; }
.site-logo-img { height: 38px; width: auto; display: block; }
/* .site-logo-section retiré le 17/07 : la mention de section à côté du logo
   redisait le fil d'Ariane affiché une ligne plus bas. Plus aucun markup. */
.site-nav { display: flex; gap: 24px; font-size: 0.9rem; margin-left: auto; align-items: center; }
.site-nav a { color: var(--c-ink-soft); }
.site-nav a:hover { color: var(--c-navy); }
.site-nav-external {
    font-size: 0.78rem;
    padding: 4px 10px;
    border: 1px solid var(--c-rule);
    border-radius: 2px;
    color: var(--c-ocre) !important;
}

/* ────── HERO ────── */
.hero {
    position: relative;
    background: var(--c-paper-deep);
    padding: 90px 24px 80px;
    border-bottom: 1px solid var(--c-rule);
    overflow: hidden;
}
.hero-bg-placeholder {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(90deg, var(--c-paper) 0%, rgba(250, 248, 243, 0.92) 38%, rgba(250, 248, 243, 0.55) 60%, rgba(201, 169, 97, 0.18) 100%),
        url('hero-bg.jpg');
    background-size: cover, cover;
    background-position: center, right center;
    background-repeat: no-repeat, no-repeat;
    pointer-events: none;
    filter: saturate(0.92);
}
@media (max-width: 700px) {
    .hero-bg-placeholder {
        background-image:
            linear-gradient(180deg, rgba(250, 248, 243, 0.96) 0%, rgba(250, 248, 243, 0.75) 60%, rgba(201, 169, 97, 0.22) 100%),
            url('hero-bg.jpg');
    }
}

/* ── hero spécifique Chansons ── */
.hero--chansons .hero-bg-placeholder {
    background-image:
        linear-gradient(90deg, var(--c-paper) 0%, rgba(250, 248, 243, 0.92) 38%, rgba(250, 248, 243, 0.55) 60%, rgba(201, 169, 97, 0.18) 100%),
        url('hero-bg-chansons.jpg');
}
@media (max-width: 700px) {
    .hero--chansons .hero-bg-placeholder {
        background-image:
            linear-gradient(180deg, rgba(250, 248, 243, 0.96) 0%, rgba(250, 248, 243, 0.75) 60%, rgba(201, 169, 97, 0.22) 100%),
            url('hero-bg-chansons.jpg');
    }
}

/* ── hero spécifique Cinéma (overlay sombre, texte blanc) ── */
.hero--cinema .hero-bg-placeholder {
    background-image:
        linear-gradient(90deg, rgba(31, 45, 61, 0.92) 0%, rgba(31, 45, 61, 0.80) 42%, rgba(44, 62, 80, 0.45) 72%, rgba(44, 62, 80, 0.25) 100%),
        url('hero-bg-cinema.jpg');
}
@media (max-width: 700px) {
    .hero--cinema .hero-bg-placeholder {
        background-image:
            linear-gradient(180deg, rgba(31, 45, 61, 0.90) 0%, rgba(31, 45, 61, 0.72) 55%, rgba(44, 62, 80, 0.55) 100%),
            url('hero-bg-cinema.jpg');
    }
}

/* ── hero spécifique Lire (overlay sombre, texte blanc) ── */
.hero--lire .hero-bg-placeholder {
    background-image:
        linear-gradient(90deg, rgba(31, 45, 61, 0.92) 0%, rgba(31, 45, 61, 0.80) 42%, rgba(44, 62, 80, 0.45) 72%, rgba(44, 62, 80, 0.25) 100%),
        url('hero-bg-lire.jpg');
}
@media (max-width: 700px) {
    .hero--lire .hero-bg-placeholder {
        background-image:
            linear-gradient(180deg, rgba(31, 45, 61, 0.90) 0%, rgba(31, 45, 61, 0.72) 55%, rgba(44, 62, 80, 0.55) 100%),
            url('hero-bg-lire.jpg');
    }
}

/* ── hero spécifique Beaux-Arts : dégradé INVERSÉ (papier à droite) ──
   Seul hero du site dont le sujet est à gauche (la statue de Folon). Le voile
   part donc de la droite et le texte est poussé dans la moitié droite, sinon
   il se poserait sur le bronze. `left center` ancre la statue quel que soit
   le recadrage vertical imposé par `cover`. Choix Bob 2026-08-03. */
.hero--beaux-arts .hero-bg-placeholder {
    background-image:
        linear-gradient(270deg, var(--c-paper) 0%, rgba(250, 248, 243, 0.94) 54%, rgba(250, 248, 243, 0.40) 70%, rgba(201, 169, 97, 0.12) 100%),
        url('hero-bg-beaux-arts.jpg');
    background-position: center, left center;
}
/* Le texte doit tomber à droite du voile, qui devient plein à 54 % du dégradé
   (soit 46 % de l'écran).
   Ces valeurs tiennent jusqu'au passage en pleine largeur (700 px) : plus bas
   que ça, `cover` zoome l'image et étale la statue vers la droite, si bien
   qu'avancer le voile pour gagner de la place au texte la délavait au lieu de
   la révéler (constaté en capture à 820 px). Pas de palier intermédiaire.

   ⚠️ min() obligatoire : un padding en % se calcule sur le bloc conteneur —
   ici `.hero`, pleine largeur — et NON sur `.hero-inner`, borné à --max-w.
   Sans plafond, un écran 1920 poussait le texte de 861 px et ne lui laissait
   que 319 px : le titre cassait en trois lignes. Le plafond garde ~620 px de
   colonne quelle que soit la largeur, tout en restant à droite du voile. */
.hero--beaux-arts .hero-inner { padding-left: min(46%, 560px); }
@media (max-width: 700px) {
    /* Plus de place pour deux colonnes : on repasse au voile vertical, texte
       pleine largeur, et on cadre sur la statue plutôt qu'au centre.
       ⚠️ Voile nettement plus opaque que le mobile générique (0.75 → 0.22) :
       celui-ci est réglé pour un fond clair (le dessin de /chansons/), alors
       qu'ici le bronze est sombre et contrasté — les compteurs du bas, en gris
       fin, devenaient illisibles. Vérifié en capture à 390 px. */
    .hero--beaux-arts .hero-bg-placeholder {
        background-image:
            linear-gradient(180deg, rgba(250, 248, 243, 0.94) 0%, rgba(250, 248, 243, 0.86) 55%, rgba(250, 248, 243, 0.90) 100%),
            url('hero-bg-beaux-arts.jpg');
        background-position: center, 24% center;
    }
    .hero--beaux-arts .hero-inner { padding-left: 0; }
}
/* Hero Beaux-Arts plus bas que les autres (demande Bob 2026-08-04) : depuis le
   dégonflage du 03/08 la page est un fonds, le hero n'a plus à occuper l'écran.
   Réduction par les paddings du bloc ET les respirations internes — l'image en
   `cover` se recadre seule, `left center` garde la statue dans le champ. */
.hero--beaux-arts { padding: 48px 24px 40px; }
.hero--beaux-arts .hero-eyebrow  { margin-bottom: 12px; }
.hero--beaux-arts .hero-subtitle { margin-bottom: 14px; }
.hero--beaux-arts .hero-lede     { margin-bottom: 20px; }
.hero--beaux-arts .hero-stats    { padding-top: 16px; }

/* ── hero spécifique Agenda (2026-08-08) ──
   Galerie du musée d'Art Ōtsuka : le Déjeuner sur l'herbe à gauche, les
   visiteurs et la perspective à droite. Photo d'origine 4082×1024 (ratio 4),
   refaite par Bob sans le texte incrusté de l'ancienne bannière Joomla.

   Le voile générique (90deg, opaque à gauche) convient tel quel : le texte se
   pose sur le Manet — de toute façon voilé — et laisse la profondeur du
   couloir respirer à droite. `center center` en ancre : à ratio proche, `cover`
   remplit la largeur et ne rogne que le haut et le bas ; le centre garde les
   cadres et les silhouettes dans le champ.

   Hero bas (demande Bob 08/08) : mêmes valeurs que Beaux-Arts, une image aussi
   panoramique n'a pas besoin de hauteur — elle en perdrait en largeur utile. */
.hero--agenda .hero-bg-placeholder {
    background-image:
        linear-gradient(90deg, var(--c-paper) 0%, rgba(250, 248, 243, 0.92) 38%, rgba(250, 248, 243, 0.55) 60%, rgba(201, 169, 97, 0.18) 100%),
        url('hero-bg-agenda.jpg');
    background-position: center, center center;
}
@media (max-width: 700px) {
    .hero--agenda .hero-bg-placeholder {
        background-image:
            linear-gradient(180deg, rgba(250, 248, 243, 0.96) 0%, rgba(250, 248, 243, 0.80) 60%, rgba(201, 169, 97, 0.20) 100%),
            url('hero-bg-agenda.jpg');
        background-position: center, 62% center;
    }
}
.hero--agenda { padding: 48px 24px 40px; }
.hero--agenda .hero-eyebrow  { margin-bottom: 12px; }
.hero--agenda .hero-subtitle { margin-bottom: 14px; }
.hero--agenda .hero-lede     { margin-bottom: 20px; }

.hero-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    position: relative;
    z-index: 1;
}
.hero-eyebrow {
    font-family: var(--serif);
    font-style: italic;
    font-size: 0.85rem;
    letter-spacing: 0.18em;
    color: var(--c-ocre);
    text-transform: uppercase;
    font-weight: 600;
    display: block;
    margin-bottom: 18px;
}
.hero-title {
    font-family: var(--jp);
    font-size: clamp(2rem, 5vw, 3.4rem);
    color: var(--c-navy);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}
.hero-subtitle {
    font-family: var(--serif);
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    color: var(--c-ocre);
    font-style: italic;
    margin-bottom: 24px;
    font-weight: 400;
}
.hero-lede {
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    line-height: 1.75;
    color: var(--c-ink);
    max-width: 680px;
    margin-bottom: 32px;
}
.hero-lede strong { color: var(--c-navy); font-weight: 700; }
.hero-stats {
    display: flex; gap: 36px; flex-wrap: wrap;
    padding-top: 24px; border-top: 1px solid var(--c-rule);
    font-size: 0.95rem; color: var(--c-ink-soft);
}
.hero-stats strong {
    font-family: var(--serif);
    font-size: 1.7rem;
    color: var(--c-navy);
    font-weight: 600;
    margin-right: 4px;
}
.hero-stats em {
    font-family: var(--serif);
    font-style: italic;
    color: var(--c-ocre);
    font-size: 0.85rem;
    margin-left: 4px;
}

/* ────── SECTION générique ────── */
.section {
    max-width: var(--max-w);
    margin: 90px auto 0;
    padding: 0 24px;
}
.section-eyebrow {
    font-family: var(--serif);
    font-style: italic;
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    color: var(--c-ocre);
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 12px;
}
.section-eyebrow em { font-style: italic; opacity: 0.85; text-transform: none; letter-spacing: 0.05em; }
.section-title {
    font-family: var(--jp);
    font-size: clamp(1.5rem, 2.8vw, 2.1rem);
    color: var(--c-navy);
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 12px;
}
.section-title em {
    font-family: var(--serif);
    font-style: italic;
    color: var(--c-ocre);
    font-size: 0.7em;
    font-weight: 400;
    margin-left: 12px;
}
.section-lede {
    font-size: 0.95rem;
    color: var(--c-ink-soft);
    margin-bottom: 28px;
    max-width: 640px;
}

/* ────── EN CE MOMENT (now-grid + bande couleur) ──────
   Vignettes réduites de moitié (240 → 120 px de piste, soit ~283 → ~140 px de
   carte sur une page de 1180) : depuis que la programmation vit sur /agenda/,
   cette section n'est plus qu'un rappel (Bob 2026-08-03). Le mini-Gantt 60 j et
   la section 近日公開 ont été retirés le même jour. */
.now-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 24px 20px;
    align-items: start;
    margin-bottom: 28px;
}
.now-card {
    position: relative;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s, opacity 0.2s;
}
.now-card:hover { transform: translateY(-3px); }
.now-card-img {
    width: 100%; height: auto; display: block;
    background: var(--c-paper-deep);
    box-shadow: 0 10px 24px -10px rgba(31, 45, 61, 0.35);
}
.now-card-bar { height: 3px; width: 100%; }
.now-card-musee {
    margin-top: 8px;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    color: var(--c-navy);
    font-weight: 600;
    line-height: 1.35;
}
.now-card-fr {
    position: absolute; top: 6px; right: 6px;
    background: rgba(255, 255, 255, 0.95);
    color: #002654;
    font-size: 0.62rem;
    padding: 2px 5px;
    border-radius: 2px;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    letter-spacing: 0.02em;
}
/* Renvoi vers l'Agenda : c'est lui qui porte la programmation complète. */
.now-vers-agenda { margin: 0; font-size: 0.9rem; }
.now-vers-agenda a {
    color: var(--c-navy);
    text-decoration: none;
    border-bottom: 1px solid var(--c-ocre);
    padding-bottom: 2px;
    font-weight: 600;
}
.now-vers-agenda a:hover { color: var(--c-ocre); }
.now-vers-agenda em {
    font-family: var(--serif);
    font-style: italic;
    color: var(--c-ocre);
    font-weight: 400;
}

/* Le mini-Gantt 60 j, la section BIENTÔT (upcoming-*) et leur interactivité de
   survol ont été retirés le 2026-08-03 : la programmation vit sur /agenda/.
   Seul subsiste le survol des affiches, en CSS pur (.now-card:hover). */
/* ────── EXPLORER (mosaïques) ────── */
.explore-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 16px;
}
@media (max-width: 700px) {
    .explore-grid { grid-template-columns: 1fr; }
}
.explore-card {
    text-decoration: none;
    color: inherit;
    background: white;
    border: 1px solid var(--c-rule);
    overflow: hidden;
    transition: all 0.2s;
}
.explore-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px -10px rgba(31, 45, 61, 0.18);
    border-color: var(--c-ocre);
}
.explore-mosaic {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    aspect-ratio: 5/3;
    gap: 1px;
    background: var(--c-rule);
}
.explore-mosaic img {
    width: 100%; height: 100%;
    object-fit: cover;
    background: var(--c-paper-deep);
}
/* Mosaïque musées : variante typographique (pas d'images) */
.explore-mosaic-typo {
    background: var(--c-paper);
}
.explore-typo-cell {
    background: var(--c-paper);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 14px 10px;
    text-align: center;
    gap: 6px;
    transition: background 0.25s;
    overflow: hidden;
}
.explore-typo-cell:nth-child(2),
.explore-typo-cell:nth-child(3) {
    background: var(--c-paper-deep);
}
.explore-typo-jp {
    font-family: var(--jp);
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--c-navy);
    line-height: 1.3;
    letter-spacing: 0.01em;
    word-break: keep-all;
    overflow-wrap: break-word;
}
.explore-typo-fr {
    font-family: var(--serif);
    font-style: italic;
    font-size: 0.74rem;
    color: var(--c-ocre);
    line-height: 1.3;
    opacity: 0.9;
}
.explore-card:hover .explore-typo-cell {
    background: rgba(201, 169, 97, 0.12);
}
.explore-card-body {
    padding: 24px 22px 28px;
    display: flex; flex-direction: column;
    align-items: center; text-align: center; gap: 4px;
}
.explore-num {
    font-family: var(--serif);
    font-size: 2.8rem;
    font-weight: 600;
    color: var(--c-navy);
    line-height: 1;
}
.explore-label-jp {
    font-size: 1rem;
    color: var(--c-navy);
    font-weight: 700;
    margin-top: 4px;
}
.explore-label-fr {
    font-family: var(--serif);
    font-style: italic;
    font-size: 0.9rem;
    color: var(--c-ocre);
}

/* ────── FOOTER Chocolat! ────── */
.site-foot {
    margin-top: 110px;
    background: var(--c-navy);
    color: rgba(255,255,255,0.85);
    padding: 50px 24px 40px;
}
.site-foot-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 60px;
    align-items: start;
}
@media (max-width: 700px) {
    .site-foot-inner { grid-template-columns: 1fr; gap: 32px; }
}
.site-foot-brand { display: flex; flex-direction: column; gap: 14px; }
.site-foot-logo {
    height: 42px; width: auto;
    filter: brightness(0) invert(1) brightness(1.5);
    align-self: flex-start;
}
.site-foot-tagline {
    font-family: var(--jp);
    font-size: 0.9rem;
    line-height: 1.5;
    color: rgba(255,255,255,0.6);
    margin: 0;
    max-width: 320px;
}
.site-foot-tagline em { font-family: var(--serif); font-style: italic; display: block; margin-top: 4px; opacity: 0.85; }
.site-foot-nav {
    display: flex; flex-wrap: wrap;
    gap: 12px 28px;
    font-size: 0.88rem;
    align-items: center;
}
.site-foot-nav strong {
    font-family: var(--serif);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--c-ocre);
    width: 100%;
    margin-bottom: 4px;
    font-weight: 600;
}
.site-foot-nav a {
    color: rgba(255,255,255,0.8);
    text-decoration: none;
}
.site-foot-nav a:hover { color: var(--c-ocre); }
.site-foot-credit {
    grid-column: 1 / -1;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.1);
    font-size: 0.78rem;
    color: rgba(255,255,255,0.5);
    font-style: italic;
}

/* ════════════════════════════════════════════════════════════════
   PAGE EXPO (expo.php)
   ════════════════════════════════════════════════════════════════ */

/* ─── Breadcrumb ─── */
.breadcrumb {
    background: var(--c-paper-deep);
    border-bottom: 1px solid var(--c-rule);
}
.breadcrumb-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 12px 24px;
    font-size: 0.82rem;
    color: var(--c-ink-soft);
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
}
.breadcrumb a { color: var(--c-ink-soft); }
.breadcrumb a:hover { color: var(--c-navy); }
.breadcrumb-sep { color: var(--c-ocre); opacity: 0.6; }
.breadcrumb-current { color: var(--c-navy); font-weight: 600; }

/* ─── Hero expo ─── */
.expo-hero {
    background: var(--c-paper);
    padding: 60px 24px 70px;
    border-bottom: 1px solid var(--c-rule);
}
.expo-hero-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 380px) 1fr;
    gap: 56px;
    align-items: start;
}
@media (max-width: 800px) {
    .expo-hero-inner { grid-template-columns: 1fr; gap: 32px; }
    .expo-poster-wrap { max-width: 320px; margin: 0 auto; }
}
.expo-poster-wrap { position: relative; }
.expo-poster {
    width: 100%; height: auto; display: block;
    box-shadow: 0 18px 40px -16px rgba(31, 45, 61, 0.42);
    background: var(--c-paper-deep);
}
.expo-poster-fr {
    position: absolute; top: 12px; right: 12px;
    background: white;
    color: #002654;
    font-size: 0.85rem;
    padding: 5px 12px;
    border-radius: 2px;
    font-weight: 700;
    box-shadow: 0 3px 10px rgba(0,0,0,0.18);
    letter-spacing: 0.04em;
}
.expo-hero-body {
    padding-top: 8px;
}
.expo-status {
    display: inline-flex; align-items: baseline; gap: 8px;
    padding: 5px 14px;
    background: var(--c-paper-deep);
    border-radius: 2px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--c-navy);
    margin-bottom: 18px;
}
.expo-status em {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    color: var(--c-ocre);
    font-size: 0.8rem;
}
.expo-status--live { background: rgba(90, 110, 80, 0.15); color: #3d5535; }
.expo-status--live em { color: #6a8060; }
.expo-status--upcoming { background: rgba(201, 169, 97, 0.18); color: #8a6a30; }
.expo-status--upcoming em { color: #b39451; }
.expo-status--past { background: rgba(31, 45, 61, 0.08); color: var(--c-ink-soft); }
.expo-status--past em { color: var(--c-ink-soft); }

.expo-title {
    font-family: var(--jp);
    font-size: clamp(1.7rem, 3.4vw, 2.6rem);
    color: var(--c-navy);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.005em;
    margin-bottom: 8px;
}
.expo-title-fr {
    font-family: var(--serif);
    font-size: clamp(1.05rem, 1.7vw, 1.3rem);
    color: var(--c-ocre);
    font-style: italic;
    margin-bottom: 16px;
    line-height: 1.4;
}
.expo-subtitle {
    color: var(--c-ink-soft);
    font-size: 0.95rem;
    margin-bottom: 22px;
    line-height: 1.55;
}

.expo-meta {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 10px 18px;
    padding: 18px 0;
    border-top: 1px solid var(--c-rule);
    border-bottom: 1px solid var(--c-rule);
    margin-bottom: 22px;
}
.expo-meta dt {
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    color: var(--c-ocre);
    font-weight: 600;
    text-transform: uppercase;
    padding-top: 3px;
}
.expo-meta dd {
    font-size: 0.95rem;
    color: var(--c-navy);
    line-height: 1.5;
}
.expo-meta dd strong { color: var(--c-navy); font-weight: 700; }
.expo-meta dd em {
    font-family: var(--serif);
    font-style: italic;
    color: var(--c-ocre);
    font-size: 0.9rem;
    display: block;
    margin-top: 2px;
}
.expo-meta dd a { color: var(--c-navy); border-bottom: 1px solid transparent; }
.expo-meta dd a:hover { border-bottom-color: var(--c-ocre); }

.expo-cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.expo-cta {
    display: inline-block;
    padding: 11px 24px;
    border-radius: 2px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid var(--c-ocre);
    color: var(--c-ocre);
    transition: background 0.2s, color 0.2s;
}
.expo-cta:hover { background: var(--c-ocre); color: white; }
.expo-cta--primary { background: var(--c-ocre); color: white; }
.expo-cta--primary:hover { background: var(--c-navy); border-color: var(--c-navy); color: white; }

/* ─── Section narrow (à propos, podcast, artiste, musée) ─── */
.section--narrow {
    max-width: 800px;
}

/* ─── Editorial (description) ─── */
.editorial-jp p {
    font-size: 1rem;
    line-height: 1.85;
    color: var(--c-ink);
    margin-bottom: 14px;
}
.editorial-jp.is-collapsible {
    position: relative;
    max-height: 360px;
    overflow: hidden;
    transition: max-height 0.4s ease;
}
.editorial-jp.is-collapsible::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 100px;
    background: linear-gradient(180deg, transparent, var(--c-paper) 85%);
    pointer-events: none;
    transition: opacity 0.3s;
}
.editorial-jp.is-collapsible.is-expanded {
    max-height: none;
}
.editorial-jp.is-collapsible.is-expanded::after { opacity: 0; }

.editorial-toggle {
    margin-top: 12px;
    background: none;
    border: 1px solid var(--c-ocre);
    color: var(--c-ocre);
    padding: 9px 22px;
    border-radius: 2px;
    font-family: var(--jp);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    display: inline-block;
}
.editorial-toggle em {
    font-family: var(--serif);
    font-style: italic;
    font-size: 0.82rem;
    margin-left: 8px;
    opacity: 0.85;
}
.editorial-toggle:hover { background: var(--c-ocre); color: white; }
.editorial-toggle-less { display: none; }
.editorial-toggle.is-expanded .editorial-toggle-more { display: none; }
.editorial-toggle.is-expanded .editorial-toggle-less { display: inline; }

.editorial-fr {
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid var(--c-rule);
}
.editorial-fr p {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--c-ink-soft);
    margin-bottom: 12px;
}
/* Quand FR est seul (pas de version JP) : typo principale, pas sous-titre */
.editorial-fr--solo {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}
.editorial-fr--solo p {
    font-family: var(--serif);
    font-style: normal;
    font-size: 1.08rem;
    line-height: 1.85;
    color: var(--c-ink);
    margin-bottom: 14px;
}

/* ─── Podcast card ─── */
.podcast-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 24px;
    padding: 22px 26px;
    background: var(--c-navy);
    color: rgba(255,255,255,0.92);
    border-radius: 4px;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
    margin-bottom: 14px;
}
.podcast-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px -12px rgba(31, 45, 61, 0.4);
    color: rgba(255,255,255,0.92);
}
.podcast-card-num {
    font-family: var(--serif);
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--c-ocre);
    letter-spacing: 0.02em;
    line-height: 1;
}
.podcast-card-body { line-height: 1.4; }
.podcast-card-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 4px; }
.podcast-card-fr {
    font-family: var(--serif);
    font-style: italic;
    font-size: 0.9rem;
    color: var(--c-ocre-soft);
    margin-bottom: 4px;
}
.podcast-card-date {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.55);
}
.podcast-card-arrow {
    font-size: 1.4rem;
    color: var(--c-ocre);
    line-height: 1;
}

/* ─── Artiste / Musée cards ─── */
.artiste-list { display: flex; flex-direction: column; gap: 16px; }
.artiste-card,
.musee-card {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 22px;
    padding: 18px;
    background: white;
    border: 1px solid var(--c-rule);
    border-radius: 3px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.artiste-card:hover,
.musee-card:hover {
    border-color: var(--c-ocre);
    transform: translateY(-2px);
    box-shadow: 0 12px 26px -14px rgba(31, 45, 61, 0.3);
}
.artiste-card-img,
.musee-card-img {
    width: 100px; height: 100px;
    object-fit: cover;
    background: var(--c-paper-deep);
    border-radius: 2px;
}
.artiste-card-body,
.musee-card-body { display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.artiste-card-name-jp,
.musee-card-name-jp {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--c-navy);
    line-height: 1.3;
}
.artiste-card-name-fr,
.musee-card-name-fr {
    font-family: var(--serif);
    font-style: italic;
    font-size: 0.95rem;
    color: var(--c-ocre);
}
.artiste-card-dates,
.musee-card-loc {
    font-size: 0.85rem;
    color: var(--c-ink-soft);
}

/* ─── Related grid (autres expos) ─── */
.related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 24px 20px;
    margin-top: 16px;
}
.related-card {
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s;
}
.related-card:hover { transform: translateY(-3px); }
.related-card-img {
    width: 100%; height: auto; display: block;
    background: var(--c-paper-deep);
    box-shadow: 0 6px 16px -8px rgba(31, 45, 61, 0.28);
}
.related-card-body { padding: 10px 0 0; }
.related-card-bucket {
    font-family: var(--serif);
    font-style: italic;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    color: var(--c-ocre);
    text-transform: uppercase;
    margin-bottom: 4px;
}
.related-card-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--c-navy);
    line-height: 1.4;
    margin-bottom: 3px;
}
.related-card-musee {
    font-size: 0.8rem;
    color: var(--c-ink-soft);
}
.related-card--past .related-card-img { opacity: 0.75; filter: saturate(0.6); }
.related-card--past .related-card-bucket { color: var(--c-ink-soft); }

/* Musée rebaptisé : nom porté à l'époque de l'expo (cf. expositions.musee_nom_historique) */
.related-card-histo,
.expo-meta-histo {
    display: block;
    margin-top: 3px;
    font-size: 0.74rem;
    color: var(--c-ink-soft);
    letter-spacing: 0.02em;
}

/* ════════════════════════════════════════════════════════════════
   PAGE ARTISTE (artiste.php)
   ════════════════════════════════════════════════════════════════ */
.artiste-hero {
    background: var(--c-paper);
    padding: 60px 24px 70px;
    border-bottom: 1px solid var(--c-rule);
}
.artiste-hero-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 280px) 1fr;
    gap: 56px;
    align-items: start;
}
@media (max-width: 800px) {
    .artiste-hero-inner { grid-template-columns: 1fr; gap: 32px; }
    .artiste-portrait-wrap { max-width: 240px; margin: 0 auto; }
}
.artiste-portrait-wrap {
    aspect-ratio: 1/1;
    overflow: hidden;
    background: var(--c-paper-deep);
    border-radius: 3px;
    box-shadow: 0 14px 32px -14px rgba(31, 45, 61, 0.35);
}
.artiste-portrait {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.artiste-name-jp {
    font-family: var(--jp);
    font-size: clamp(1.9rem, 3.6vw, 2.8rem);
    color: var(--c-navy);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.005em;
    margin-bottom: 6px;
}
.artiste-name-fr {
    font-family: var(--serif);
    font-size: clamp(1.1rem, 1.8vw, 1.4rem);
    color: var(--c-ocre);
    font-style: italic;
    margin-bottom: 22px;
    line-height: 1.4;
}
.artiste-meta {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 12px 18px;
    padding: 18px 0;
    border-top: 1px solid var(--c-rule);
    border-bottom: 1px solid var(--c-rule);
    margin-bottom: 22px;
}
.artiste-meta dt {
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    color: var(--c-ocre);
    font-weight: 600;
    text-transform: uppercase;
    padding-top: 4px;
}
.artiste-meta dd {
    font-size: 0.95rem;
    color: var(--c-navy);
    line-height: 1.5;
}
.artiste-meta dd strong { font-weight: 700; }
.artiste-meta dd em {
    font-family: var(--serif);
    font-style: italic;
    color: var(--c-ocre);
    font-size: 0.85rem;
    display: block;
    margin-top: 2px;
}
.artiste-movements { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 2px; }
.artiste-movement-chip {
    display: inline-block;
    padding: 4px 12px;
    background: var(--c-paper-deep);
    border: 1px solid var(--c-rule);
    border-radius: 14px;
    font-size: 0.82rem;
    color: var(--c-navy);
    font-weight: 600;
}

.artiste-links { display: flex; flex-wrap: wrap; gap: 10px; }
.artiste-link {
    display: inline-block;
    padding: 8px 18px;
    background: white;
    border: 1px solid var(--c-rule);
    border-radius: 2px;
    font-size: 0.85rem;
    color: var(--c-ink-soft);
    text-decoration: none;
    transition: border-color 0.2s, color 0.2s;
}
.artiste-link:hover { border-color: var(--c-ocre); color: var(--c-ocre); }

/* ─── Œuvres galerie ─── */
.oeuvres-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 32px 24px;
    margin-top: 16px;
}
.oeuvre-card {
    margin: 0;
    display: flex;
    flex-direction: column;
}
.oeuvre-img-wrap {
    background: var(--c-paper-deep);
    overflow: hidden;
    box-shadow: 0 8px 18px -10px rgba(31, 45, 61, 0.3);
}
.oeuvre-img {
    width: 100%; height: auto; display: block;
    transition: transform 0.4s ease;
}
.oeuvre-card:hover .oeuvre-img { transform: scale(1.03); }
.oeuvre-caption { padding: 12px 0 0; }
.oeuvre-titre-fr {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1rem;
    color: var(--c-navy);
    line-height: 1.4;
    margin-bottom: 3px;
}
.oeuvre-titre-fr em { font-style: italic; }
.oeuvre-titre-jp {
    font-size: 0.85rem;
    color: var(--c-ink-soft);
    line-height: 1.4;
    margin-bottom: 4px;
}
.oeuvre-meta {
    font-size: 0.82rem;
    color: var(--c-ink-soft);
}
.oeuvre-meta em {
    font-family: var(--serif);
    font-style: italic;
    color: var(--c-ocre);
}
.oeuvre-musee {
    font-size: 0.78rem;
    color: var(--c-ink-soft);
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px dotted var(--c-rule);
}

/* ════════════════════════════════════════════════════════════════
   PAGE MUSÉE (musee.php)
   ════════════════════════════════════════════════════════════════ */

/* ─── Hero banner pleine largeur (image musée) ─── */
.musee-hero-banner {
    position: relative;
    width: 100%;
    height: clamp(220px, 36vw, 420px);
    background-color: var(--c-paper-deep);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-bottom: 1px solid var(--c-rule);
}
.musee-hero-banner--noimg {
    background-image:
        radial-gradient(ellipse at 30% 50%, rgba(201, 169, 97, 0.18), transparent 60%),
        radial-gradient(ellipse at 70% 50%, rgba(31, 45, 61, 0.10), transparent 60%);
    background-color: var(--c-paper-deep);
}
.musee-hero-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(31,45,61,0.05) 0%, rgba(250,248,243,0.55) 100%);
    pointer-events: none;
}

/* ─── Hero infos centrées sous le banner ─── */
.musee-hero-info {
    background: var(--c-paper);
    padding: 52px 24px 56px;
    border-bottom: 1px solid var(--c-rule);
}
.musee-hero-info-inner {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}
.musee-name-jp {
    font-family: var(--jp);
    font-size: clamp(1.9rem, 3.6vw, 2.7rem);
    color: var(--c-navy);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.005em;
    margin-bottom: 8px;
}
.musee-name-fr {
    font-family: var(--serif);
    font-size: clamp(1.1rem, 1.8vw, 1.35rem);
    color: var(--c-ocre);
    font-style: italic;
    margin-bottom: 28px;
    line-height: 1.4;
}

/* ─── Meta (centré, structure dt/dd inline) ─── */
.musee-meta {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 10px 22px;
    max-width: 540px;
    margin: 0 auto 28px;
    text-align: left;
    padding: 18px 0;
    border-top: 1px solid var(--c-rule);
    border-bottom: 1px solid var(--c-rule);
}
.musee-meta dt {
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    color: var(--c-ocre);
    font-weight: 600;
    text-transform: uppercase;
    padding-top: 3px;
}
.musee-meta dd {
    font-size: 0.95rem;
    color: var(--c-navy);
    line-height: 1.5;
}
.musee-meta dd strong { color: var(--c-navy); font-weight: 700; }
.musee-meta dd a { color: var(--c-navy); border-bottom: 1px solid transparent; }
.musee-meta dd a:hover { border-bottom-color: var(--c-ocre); }

.musee-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

/* ─── Carte Leaflet ─── */
.musee-map-section { padding-top: 60px; }
.musee-map {
    aspect-ratio: 16/7;
    border: 1px solid var(--c-rule);
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 8px 22px -12px rgba(31, 45, 61, 0.25);
    background: var(--c-paper-deep);
}
.musee-map .leaflet-container {
    font-family: var(--jp);
    background: var(--c-paper-deep);
}
.musee-map .leaflet-control-attribution {
    font-family: var(--serif);
    font-style: italic;
    font-size: 0.7rem;
    background: rgba(255,255,255,0.85);
}
/* Marker custom navy/ocre */
.musee-marker { display: flex; align-items: center; justify-content: center; }
.musee-marker-dot {
    display: block;
    width: 18px; height: 18px;
    background: var(--c-ocre);
    border: 3px solid white;
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--c-navy), 0 4px 10px rgba(31,45,61,0.5);
}

/* ════════════════════════════════════════════════════════════════
   PAGE INDEX VÉRIFICATION (placeholder racine)
   ════════════════════════════════════════════════════════════════ */
.verif-list {
    list-style: none;
    margin: 0; padding: 0;
}
.verif-list li {
    padding: 14px 0;
    border-bottom: 1px solid var(--c-rule);
    line-height: 1.6;
}
.verif-list li:last-child { border-bottom: 0; }
.verif-list a {
    color: var(--c-navy);
    border-bottom: 1px solid var(--c-ocre);
    padding-bottom: 1px;
    transition: color 0.2s, border-color 0.2s;
}
.verif-list a:hover { color: var(--c-ocre); border-bottom-color: var(--c-navy); }
.verif-list strong { font-weight: 700; }
.verif-list em {
    font-family: var(--serif);
    font-style: italic;
    color: var(--c-ink-soft);
    font-size: 0.9rem;
    margin-left: 8px;
}
.verif-sublabel {
    display: block;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--c-ocre);
    font-weight: 600;
    margin-bottom: 6px;
}
.verif-list--planned li {
    color: var(--c-ink-soft);
    font-style: italic;
}
.verif-list--planned strong { font-style: normal; }

/* ════════════════════════════════════════════════════════════════
   PAGES INDEX (expositions / artistes / musées)
   ════════════════════════════════════════════════════════════════ */

/* Nav active */
.site-nav a.is-current {
    color: var(--c-navy);
    font-weight: 700;
    border-bottom: 2px solid var(--c-ocre);
    padding-bottom: 2px;
}

/* Hero compact */
.index-hero {
    background: linear-gradient(180deg, var(--c-paper) 0%, var(--c-paper-deep) 100%);
    padding: 60px 24px 48px;
    border-bottom: 1px solid var(--c-rule);
}
.index-hero-inner { max-width: var(--max-w); margin: 0 auto; }
.index-hero-eyebrow {
    font-family: var(--serif);
    font-style: italic;
    font-size: 0.85rem;
    letter-spacing: 0.15em;
    color: var(--c-ocre);
    text-transform: uppercase;
    font-weight: 600;
    display: block;
    margin-bottom: 14px;
}
.index-hero-title {
    font-family: var(--jp);
    font-size: clamp(1.7rem, 3.4vw, 2.5rem);
    color: var(--c-navy);
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 14px;
}
.index-hero-title em {
    font-family: var(--serif);
    font-style: italic;
    color: var(--c-ocre);
    font-size: 0.65em;
    font-weight: 400;
    margin-left: 14px;
}
.index-hero-lede {
    color: var(--c-ink);
    font-size: 1rem;
    line-height: 1.7;
    max-width: 720px;
}
.index-hero-lede em {
    font-family: var(--serif);
    font-style: italic;
    color: var(--c-ink-soft);
    display: block;
    margin-top: 4px;
}

/* Bandeau de filtres (sticky discret) */
.index-controls {
    margin-top: 36px !important;
    padding: 0 24px;
}
.filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    border-bottom: 1px solid var(--c-rule);
    margin-bottom: 18px;
}
.filter-tab {
    background: none;
    border: 0;
    padding: 12px 20px;
    font-family: var(--jp);
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--c-ink-soft);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
    margin-bottom: -1px;
}
.filter-tab em {
    font-family: var(--serif);
    font-style: italic;
    font-size: 0.82rem;
    color: inherit;
    margin-left: 6px;
    opacity: 0.75;
}
.filter-tab:hover { color: var(--c-navy); }
.filter-tab.is-active {
    color: var(--c-navy);
    border-bottom-color: var(--c-ocre);
}
.filter-tab .filter-count {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    background: var(--c-paper-deep);
    border-radius: 10px;
    font-size: 0.78rem;
    color: var(--c-ink-soft);
    font-weight: 600;
}
.filter-tab.is-active .filter-count {
    background: var(--c-ocre);
    color: white;
}

.filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}
.filter-chip {
    background: white;
    border: 1px solid var(--c-rule);
    padding: 6px 14px;
    font-family: var(--jp);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--c-ink-soft);
    cursor: pointer;
    border-radius: 14px;
    transition: all 0.2s;
}
.filter-chip em {
    font-family: var(--serif);
    font-style: italic;
    font-size: 0.8em;
    color: inherit;
    opacity: 0.75;
    margin-left: 4px;
}
.filter-chip .filter-count {
    display: inline-block;
    margin-left: 6px;
    font-size: 0.75rem;
    opacity: 0.75;
}
.filter-chip:hover { border-color: var(--c-ocre); color: var(--c-navy); }
.filter-chip.is-active {
    background: var(--c-navy);
    color: white;
    border-color: var(--c-navy);
}
.filter-chip.is-active em,
.filter-chip.is-active .filter-count { color: var(--c-ocre-soft); opacity: 1; }

/* Grilles index */
.index-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 32px 22px;
    margin-top: 8px;
}
.index-grid--artistes {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.index-grid--musees {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.index-card {
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s;
}
.index-card:hover { transform: translateY(-3px); }
.index-card-img-wrap {
    position: relative;
    aspect-ratio: 4/5;
    overflow: hidden;
    background: var(--c-paper-deep);
    box-shadow: 0 8px 22px -10px rgba(31, 45, 61, 0.3);
}
.index-card--musee .index-card-img-wrap { aspect-ratio: 4/3; }
.index-card-img-wrap--portrait { aspect-ratio: 1/1; }
.index-card-img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s;
}
.index-card:hover .index-card-img { transform: scale(1.04); }
.index-card-img-fallback {
    width: 100%; height: 100%;
    background:
        repeating-linear-gradient(45deg, transparent 0 8px, rgba(201,169,97,0.06) 8px 16px),
        var(--c-paper-deep);
}

.index-card-bucket {
    position: absolute;
    top: 10px; left: 10px;
    background: var(--c-navy);
    color: white;
    font-size: 0.72rem;
    padding: 3px 9px;
    border-radius: 2px;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.index-card-bucket--live { background: #3d5535; }
.index-card-bucket--upcoming { background: #b39451; }
.index-card-bucket--past { background: rgba(31,45,61,0.6); }

.index-card-fr {
    position: absolute;
    top: 10px; right: 10px;
    background: rgba(255,255,255,0.95);
    color: #002654;
    font-size: 0.72rem;
    padding: 3px 8px;
    border-radius: 2px;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.index-card-badge {
    position: absolute;
    bottom: 10px; right: 10px;
    background: rgba(31,45,61,0.85);
    color: white;
    font-size: 0.72rem;
    padding: 3px 9px;
    border-radius: 2px;
    font-weight: 700;
}
.index-card-badge--live {
    background: #3d5535;
}

.index-card-body { padding: 12px 0 0; }
.index-card-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--c-navy);
    line-height: 1.4;
    margin-bottom: 3px;
}
.index-card-fr,
.index-card--artiste .index-card-fr,
.index-card--musee .index-card-fr {
    /* Différencier fr du badge "fr=isolated" déjà nommé sur expositions */
    position: static;
    background: none; box-shadow: none; padding: 0;
    font-family: var(--serif);
    font-style: italic;
    font-size: 0.85rem;
    color: var(--c-ocre);
    margin-bottom: 4px;
    line-height: 1.3;
}
.index-card-musee {
    font-size: 0.82rem;
    color: var(--c-ink-soft);
    margin-bottom: 3px;
}
.index-card-dates,
.index-card-meta {
    font-family: var(--serif);
    font-style: italic;
    font-size: 0.82rem;
    color: var(--c-ocre);
}

/* Vignettes archives un peu désaturées */
.index-card--past .index-card-img { filter: saturate(0.8); }

.index-empty {
    text-align: center;
    color: var(--c-ink-soft);
    font-size: 1rem;
    padding: 60px 20px;
}
.index-empty em {
    font-family: var(--serif);
    font-style: italic;
    display: block;
    margin-top: 6px;
    color: var(--c-ocre);
}

/* ────── Menu hamburger mobile (injecté par /assets/top.js) ────── */
.nav-toggle { display: none; }
@media (max-width: 880px) {
    .site-head-inner { gap: 12px; padding: 14px 20px; }

    .nav-toggle {
        display: flex; flex-direction: column; justify-content: center; gap: 5px;
        width: 44px; height: 44px; margin-left: auto; padding: 11px;
        border: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent;
    }
    .nav-toggle span {
        display: block; width: 100%; height: 2px; border-radius: 2px;
        background: var(--c-navy); transition: transform .25s ease, opacity .2s ease;
    }
    .nav-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-toggle.is-active span:nth-child(2) { opacity: 0; }
    .nav-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .site-nav {
        position: absolute; top: 100%; left: 0; right: 0; margin: 0;
        flex-direction: column; align-items: stretch; gap: 0;
        background: var(--c-paper); border-bottom: 1px solid var(--c-rule);
        box-shadow: 0 14px 26px -18px rgba(0,0,0,.55);
        padding: 6px 20px 14px; display: none;
    }
    .site-nav.is-open { display: flex; }
    .site-nav a { display: block; padding: 14px 4px; font-size: 0.95rem; border-bottom: 1px solid var(--c-rule); }
    .site-nav a.is-current { color: var(--c-ocre); }
    .site-nav-cta, .site-nav-external {
        margin: 14px 0 0; text-align: center; border-bottom: 0;
        padding: 13px !important; border-radius: 2px;
    }
}

/* ────── Liens légaux dans le footer ────── */
.site-foot-legal {
    display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 14px;
}
.site-foot-legal a { color: var(--c-ocre); font-size: 0.82rem; }
.site-foot-legal a:hover { color: var(--c-navy); text-decoration: underline; }

/* ────── Harmonisation menu principal (2026-06-11) — règles reprises de top.css ────── */
.site-nav a { position: relative; }
.site-nav a.is-active { color: var(--c-navy); font-weight: 500; }
.site-nav a.is-active::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -2px;
    height: 2px; background: var(--c-ocre);
}
.site-nav-cta {
    margin-left: 8px;
    background: var(--c-navy);
    color: var(--c-paper) !important;
    padding: 8px 16px !important;
    border-radius: 2px;
    font-size: 0.82rem;
}
.site-nav-cta:hover { background: var(--c-ocre); color: var(--c-paper) !important; }