/* Kaléido — feuille de style
   Direction validée le 31 octobre 2026 : papier chaud, titres en Bricolage
   Grotesque, texte en Literata, interface en Instrument Sans.
   Une couleur par nature de fiche. Un seul thème, clair. */

/* ---------------------------------------------------------------- polices */

@font-face { font-family: "Bricolage Grotesque"; src: url("/polices/bricolage-grotesque-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("/polices/instrument-sans-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("/polices/instrument-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Literata"; src: url("/polices/literata-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Literata"; src: url("/polices/literata-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Literata"; src: url("/polices/literata-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Literata"; src: url("/polices/literata-latin-600-italic.woff2") format("woff2"); font-weight: 600; font-style: italic; font-display: swap; }

/* ---------------------------------------------------------------- jetons */

:root {
    color-scheme: light;

    --papier: #f4efe6;
    --carte: #fbf8f2;
    --encre: #1f1b16;
    --douce: #5e574b;
    --filet: #dcd3c2;

    /* Une couleur par nature ; la version pâle sert aux cartes sans image */
    --oeuvre: #a63d2a;   --oeuvre-pale: #ebd3cc;
    --lieu: #2f6b4f;     --lieu-pale: #d3e3d9;
    --personne: #8a5a12; --personne-pale: #ebddc3;
    --notion: #2a46b8;   --notion-pale: #d6dcf2;
    --panorama: #6b3f6f; --panorama-pale: #e2d3e3;

    --titre: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
    --texte: "Literata", Georgia, serif;
    --ui: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;

    --large: 72rem;
    --colonne: 40rem;
    --gouttiere: 2rem;
}

.nature-oeuvre   { --nature: var(--oeuvre);   --nature-pale: var(--oeuvre-pale); }
.nature-lieu     { --nature: var(--lieu);     --nature-pale: var(--lieu-pale); }
.nature-personne { --nature: var(--personne); --nature-pale: var(--personne-pale); }
.nature-notion   { --nature: var(--notion);   --nature-pale: var(--notion-pale); }
.nature-panorama { --nature: var(--panorama); --nature-pale: var(--panorama-pale); }

/* ---------------------------------------------------------------- base */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 1.5rem; }
body {
    margin: 0; background: var(--papier); color: var(--encre);
    font-family: var(--texte); font-size: 1.0625rem; line-height: 1.7;
    font-variant-numeric: oldstyle-nums proportional-nums;
}
a { color: var(--nature, var(--oeuvre)); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--encre); text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--encre); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--titre); font-weight: 700; line-height: 1.05; letter-spacing: -.03em; font-variant-numeric: lining-nums; }
p { margin: 0 0 1.1em; }
strong { font-weight: 600; }
[hidden] { display: none !important; }

.lien-evitement { position: absolute; left: -999rem; top: 0; z-index: 10; background: var(--encre); color: var(--papier); padding: .6rem 1rem; font-family: var(--ui); }
.lien-evitement:focus { left: 0; }
.cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.cadre { max-width: var(--large); margin: 0 auto; padding: 0 var(--gouttiere); }

/* ---------------------------------------------------------------- en-tête et pied */

.site-entete {
    max-width: var(--large); margin: 0 auto; padding: 1.75rem var(--gouttiere) 0;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem;
    font-family: var(--ui);
}
.marque { display: flex; align-items: center; gap: .75rem; font-family: var(--titre); font-weight: 700; font-size: 1.6rem; letter-spacing: -.03em; color: var(--encre); text-decoration: none; }
.marque svg { flex: none; }
.marque:hover { color: var(--encre); }
.site-entete nav { display: flex; gap: 1.5rem; font-size: .95rem; font-weight: 500; }
.site-entete nav a { color: var(--encre); text-decoration: none; }
.site-entete nav a:hover, .site-entete nav a[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .4em; }

.site-pied { max-width: var(--large); margin: 6rem auto 0; padding: 1.5rem var(--gouttiere) 3rem; border-top: 1px solid var(--filet); color: var(--douce); }
.pied-ligne { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; font-family: var(--ui); font-size: .9375rem; font-weight: 500; }
.pied-ligne a { text-decoration: none; }
.pied-ligne a:hover { text-decoration: underline; }
.pied-site { font-weight: 600; color: var(--encre); }
.pied-hub { color: var(--douce); }
.pied-mention { margin: .5rem 0 0; font-family: var(--ui); font-size: .8125rem; }

/* ---------------------------------------------------------------- accueil, index, thèmes */

.ouverture { padding-top: 4.5rem; padding-bottom: 2rem; }
.ouverture-titre { margin: 0; font-size: clamp(4rem, 14vw, 8.5rem); line-height: .95; letter-spacing: -.045em; }
.ouverture-accroche { margin: 1.25rem 0 0; font-style: italic; font-size: clamp(1.3rem, 3vw, 1.75rem); line-height: 1.35; max-width: 40rem; }
.page-titre { margin: 3.5rem 0 1rem; font-size: clamp(2.6rem, 7vw, 4rem); }
.page-intro { margin: 0 0 2rem; max-width: var(--colonne); color: var(--douce); font-size: 1.1rem; }
.ariane { margin: 0 0 1.25rem; font-family: var(--ui); font-size: .875rem; color: var(--douce); }
.ariane a { color: var(--douce); }

.outils {
    display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem;
    border-top: 2px solid var(--encre); padding-top: 1.25rem; margin-top: 1rem; font-family: var(--ui);
}
.recherche { display: flex; align-items: center; gap: .75rem; flex: 1 1 20rem; border-bottom: 1px solid var(--encre); min-height: 2.75rem; }
.recherche input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 1rem; color: var(--encre); padding: .5rem 0; }
.recherche input:focus { outline: none; }
.recherche:focus-within { border-bottom-width: 2px; }
.filtres { display: flex; flex-wrap: wrap; gap: .5rem; }
.filtres button {
    font: inherit; font-size: .875rem; font-weight: 500; min-height: 2.75rem; padding: 0 1.1rem;
    border: 1px solid var(--encre); background: transparent; color: var(--encre); cursor: pointer;
}
.filtres button[aria-pressed="true"] { background: var(--encre); color: var(--papier); font-weight: 600; }
.aucun { margin: 2rem 0 0; font-family: var(--ui); color: var(--douce); }

.mosaique { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 1.5rem; }
.carte a { display: block; color: var(--encre); text-decoration: none; }
.carte-image { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--filet); }
.carte-aplat { display: flex; align-items: flex-end; aspect-ratio: 4 / 3; padding: 1.25rem; background: var(--nature-pale); color: var(--nature); font-style: italic; font-size: 1.75rem; }
.carte-nature { display: block; margin: .9rem 0 .35rem; font-family: var(--ui); font-size: .8125rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--nature); }
.carte-titre { display: block; font-family: var(--titre); font-weight: 700; font-size: 1.5rem; line-height: 1.12; letter-spacing: -.025em; margin-bottom: .45rem; }
.carte-chapo { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: .95rem; line-height: 1.5; color: var(--douce); }
.carte a:hover .carte-titre { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .15em; }

.liste-themes { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .75rem; font-family: var(--ui); }
.liste-themes a { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: 0 1.1rem; border: 1px solid var(--encre); color: var(--encre); text-decoration: none; font-weight: 500; }
.liste-themes a:hover { background: var(--encre); color: var(--papier); }
.liste-themes .compte { color: inherit; opacity: .7; font-size: .85em; }

/* ---------------------------------------------------------------- fiche */

.fiche-tete { padding-top: 3.5rem; max-width: 48rem; }
.fiche-nature { margin: 0 0 .75rem; font-family: var(--ui); font-size: .8125rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--nature); }
.fiche-tete h1 { margin: 0 0 1.5rem; font-size: clamp(2.6rem, 7vw, 4.5rem); line-height: 1; letter-spacing: -.04em; }
.chapo { margin: 0; font-style: italic; font-size: clamp(1.15rem, 2.4vw, 1.375rem); line-height: 1.5; }
.infos { margin: 1rem 0 0; font-family: var(--ui); font-size: .875rem; color: var(--douce); }
.brouillon { margin: 1rem 0 0; font-family: var(--ui); font-size: .875rem; font-weight: 600; color: var(--oeuvre); }
.rencontre { margin: 1.5rem 0 0; padding-left: 1rem; border-left: 2px solid var(--nature); font-style: italic; max-width: var(--colonne); }

.identite {
    margin: 2.5rem 0 0; padding: 1.25rem 0; border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet);
    display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1rem 1.5rem; font-family: var(--ui);
}
.identite dt { font-size: .75rem; color: var(--douce); margin-bottom: .2rem; }
.identite dd { margin: 0; font-size: .9375rem; line-height: 1.4; }

.illustration { margin: 2.5rem 0 0; }
.illustration img { display: block; width: 100%; height: auto; background: var(--filet); }
.illustration figcaption { margin-top: .75rem; max-width: 48rem; font-size: .875rem; line-height: 1.5; color: var(--douce); }
.illustration .credit { font-family: var(--ui); font-size: .75rem; }
.illustration .credit a { color: var(--douce); }
.illustration.etroite img { width: auto; max-width: 100%; }

.fiche-corps { margin-top: 4rem; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 3rem; }
.sommaire { flex: 0 0 12.5rem; position: sticky; top: 1.5rem; font-family: var(--ui); font-size: .875rem; }
.sommaire-titre { margin: 0 0 .75rem; font-weight: 600; }
.sommaire ol { list-style: none; margin: 0; padding: 0; line-height: 1.35; }
.sommaire li { margin: 0 0 .6rem; }
.sommaire a { color: var(--douce); text-decoration: none; }
.sommaire a:hover { color: var(--encre); text-decoration: underline; }
.texte { flex: 1 1 32rem; max-width: var(--colonne); min-width: 0; font-size: 1.125rem; line-height: 1.7; }
.texte > section > p, .texte li { hyphens: auto; }
.texte h2 { margin: 3.5rem 0 1rem; font-size: 1.75rem; }
.texte h3 { margin: 2.25rem 0 .5rem; font-size: 1.2rem; letter-spacing: -.015em; }
.texte blockquote { margin: 1.5rem 0; padding-left: 1.2rem; border-left: 2px solid var(--nature); font-style: italic; }
.en-bref { border-top: 3px solid var(--nature); padding-top: .75rem; }
.en-bref h2 { margin-top: 0; }
.annexe ul { padding-left: 1.1rem; }
.annexe li { margin-bottom: .6rem; }
.annexe li::marker { color: var(--nature); }
.sources { font-size: .9375rem; line-height: 1.55; color: var(--douce); }
.type-lien { font-family: var(--ui); font-size: .85rem; color: var(--douce); }
.a-venir { color: var(--douce); border-bottom: 1px dotted var(--douce); cursor: help; }

.dans-le-cahier { margin-top: 5rem; padding: 2rem; background: var(--carte); border: 1px solid var(--filet); }
.dans-le-cahier h2 { margin: 0 0 .5rem; font-family: var(--ui); font-size: .8125rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--douce); }
.dans-le-cahier ul.cites { margin: 1rem 0 0; padding-left: 1.1rem; }

/* ---------------------------------------------------------------- écrans moyens et petits */

@media (max-width: 60rem) {
    .mosaique { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sommaire { display: none; }
}
@media (max-width: 36rem) {
    :root { --gouttiere: 1rem; }
    body { font-size: 1rem; }
    .mosaique { grid-template-columns: 1fr; }
    .site-entete nav { gap: 1rem; }
    .illustration { margin-left: calc(-1 * var(--gouttiere)); margin-right: calc(-1 * var(--gouttiere)); }
    .illustration figcaption { padding: 0 var(--gouttiere); }
    .texte { font-size: 1.0625rem; }
    .dans-le-cahier { padding: 1.25rem; }
}

@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

/* Images placées dans le texte d'une fiche (photos personnelles notamment) */
.texte .dans-le-texte { margin: 2rem 0 2.25rem; }
.texte .dans-le-texte figcaption { font-size: .875rem; }
@media (max-width: 36rem) { .texte .dans-le-texte { margin-left: 0; margin-right: 0; } }