/* ===================================================================
   journal.thanaelfontaine.eu · Direction artistique « Une journée »
   Le journal est une salle de la journée du portfolio : 09:00, le cabinet,
   sous Gabriël Metsu, Homme écrivant une lettre. Mêmes jetons, mêmes polices,
   mêmes règles que thanaelfontaine.eu (docs/design/charte-une-journee.md du
   portfolio) : papiers et encres, Sienne pour seul accent de jour, coins
   droits, ni noir ni blanc purs, tout lisible sans JavaScript.
   =================================================================== */

/* ----------------------------------------------------------- polices
   Hébergées sur le site (SIL Open Font License), sous-ensemble latin, aucune
   requête vers un domaine tiers. Secours calés sur leurs métriques. */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 300 600; font-display: swap; src: url(../fonts/cormorant-garamond-latin.woff2) format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 300 600; font-display: swap; src: url(../fonts/cormorant-garamond-italic-latin.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans Condensed"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/ibm-plex-sans-condensed-400-latin.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans Condensed"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/ibm-plex-sans-condensed-500-latin.woff2) format("woff2"); }
@font-face { font-family: "Cormorant Secours"; src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Liberation Serif"); size-adjust: 89%; ascent-override: 103.8%; descent-override: 32.2%; line-gap-override: 0%; }
@font-face { font-family: "Plex Secours"; src: local("Arial Narrow"), local("ArialNarrow"); size-adjust: 111%; ascent-override: 92.3%; descent-override: 24.8%; line-gap-override: 0%; }
@font-face { font-family: "Plex Secours Large"; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Roboto"); size-adjust: 91%; ascent-override: 112.6%; descent-override: 30.2%; line-gap-override: 0%; }

:root {
  /* Papiers */
  --paper: #EFE8DC;        /* Vélin */
  --mat: #F6F1E8;          /* Crème */
  --lin: #E4D9C6;          /* Lin */
  --letter: #F3EBDD;       /* Papier à lettre */
  --sky: #EDE4D6;          /* 09:00, entre le matin (#ECE0D3) et la salle ovale (#F2EDE3) */
  /* Encres et accents */
  --ink: #1C1B1F;
  --ink-soft: #3A3631;
  --ink-muted: #6B5E52;    /* Terre d'ombre */
  --sienna: #B4532F;
  --sienna-deep: #8B3A1E;
  --gold: #E8B77E;
  /* Nuit */
  --midnight: #0D1322;
  --moon: #C9D1DE;
  --moon-dim: #AEB6C8;
  --frame-gold: #C7A765;
  --cream-light: #F4EEE3;
  --night-ink: #EFE8DC;

  --serif: "Cormorant Garamond", "Cormorant Secours", Georgia, serif;
  --label: "IBM Plex Sans Condensed", "Plex Secours", "Plex Secours Large", sans-serif;
  --ease: cubic-bezier(.2,.7,.2,1);

  --padX: clamp(28px, 5vw, 88px);
  --padY: clamp(80px, 9vw, 140px);
  --measure: 40rem;
}
@media (max-width: 859px) {
  :root { --padX: 20px; --padY: 64px; }
}

/* ----------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--serif); font-size: 19.5px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
@media (max-width: 859px) { body { font-size: 18px; } }
img { max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:hover { opacity: .8; }
em { font-style: italic; }
::selection { background: var(--sienna); color: var(--cream-light); }
:focus-visible { outline: 2px solid var(--sienna); outline-offset: 3px; }
.j-foot :focus-visible { outline-color: var(--gold); }

.j-skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--ink); color: var(--cream-light);
  padding: 12px 16px; font-family: var(--label); font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase;
}
.j-skip:focus { top: 12px; }

/* Lien sortant : petite flèche vers le haut à droite, collée au dernier mot. */
main a[href^="http"]::after, .j-foot a[href^="http"]::after {
  content: "\2197"; margin-left: .12em;
  font-family: var(--label); font-size: .72em; vertical-align: .32em; text-decoration: none;
}
.tf-bar a[href^="http"]::after { content: none; }

/* ----------------------------------------------------------- bandeau */
.tf-bar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 54px; padding: 8px var(--padX);
  background: var(--sky); color: var(--ink);
  font-family: var(--label); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  box-shadow: 0 1px 0 rgba(180,83,47,.22);
}
.tf-bar a { color: inherit; display: inline-flex; align-items: center; min-height: 44px; }
.tf-bar-back { gap: 10px; min-width: 0; }
.tf-bar-back .ar { font-size: 14px; letter-spacing: 0; transition: transform .3s var(--ease); }
.tf-bar-back:hover .ar { transform: translateX(-3px); }
.tf-bar-back .h { font-size: 13px; letter-spacing: .06em; color: var(--sienna-deep); }
.tf-bar-back .rule { width: 32px; height: 1px; background: currentColor; opacity: .5; flex: none; }
.tf-bar-back > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tf-bar-nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 26px); flex: none; }
.tf-bar-name { gap: 10px; font-family: var(--serif); font-size: 19px; letter-spacing: 0; text-transform: none; }
.tf-seal { width: 22px; height: 22px; transform: rotate(-2deg); }
.tf-lang { display: inline-flex; align-items: center; gap: 0; }
.tf-lang a { padding: 0 2px; opacity: .7; border-bottom: 1px solid transparent; min-width: 44px; justify-content: center; }
.tf-lang a[aria-current] { opacity: 1; border-bottom-color: currentColor; }
@media (max-width: 640px) {
  .tf-bar .tf-bar-back .rule, .tf-bar .tf-bar-name, .tf-bar .tf-bar-feed { display: none; }
  .tf-bar { font-size: 10.5px; letter-spacing: .12em; }
}

/* ----------------------------------------------------------- étiquettes et titres */
.j-hour {
  display: flex; align-items: center; gap: 14px; margin: 0;
  font-family: var(--label); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-muted);
}
.j-hour .h { font-size: 15px; letter-spacing: .06em; color: var(--ink); }
.j-hour .rule { display: block; width: 40px; height: 1px; background: currentColor; flex: none; }

.j-h1, .j-h2 { margin: 0; font-family: var(--serif); font-weight: 300; text-wrap: balance; }
.j-h1 { font-size: clamp(60px, 7vw, 124px); line-height: .92; letter-spacing: -.015em; }
.j-h2 { font-size: clamp(40px, 4.8vw, 80px); line-height: 1; letter-spacing: -.01em; }
.j-h1 em, .j-h2 em { color: var(--sienna); }
@media (max-width: 859px) {
  .j-h1 { font-size: 46px; }
  .j-h2 { font-size: 38px; }
}

.j-link {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--label); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
}
.j-link { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.j-tlink { border-bottom: 1px solid var(--sienna); }

.j-btn {
  min-height: 52px; display: inline-grid; place-items: center; padding: 0 24px;
  font-family: var(--label); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  text-align: center; transition: background .45s, color .45s;
}
.j-btn:hover { opacity: 1; }
.j-btn--ink { background: var(--ink); color: var(--cream-light); }
.j-btn--ink:hover { background: var(--sienna); }
@media (max-width: 859px) { .j-btn { min-height: 48px; } }

/* ----------------------------------------------------------- cadre et cartel (accrochage A) */
.j-frame {
  background: var(--mat); padding: 14px; border: 1px solid var(--frame-gold);
  box-shadow: inset 0 0 0 4px var(--mat), inset 0 0 0 5px rgba(199,167,101,.55), 0 40px 60px -36px rgba(60,40,20,.5);
}
.j-frame img { display: block; width: 100%; height: auto; }
.j-cartel { display: flex; flex-direction: column; gap: 4px; margin-top: 18px; }
.j-cartel .t { font-style: italic; font-size: 20px; line-height: 1.2; }
.j-cartel .m { font-family: var(--label); font-size: 11px; line-height: 1.5; color: var(--ink-muted); }
.j-cartel .r { font-size: 17px; line-height: 1.4; color: var(--ink-soft); margin-top: 4px; }

/* ----------------------------------------------------------- sections */
.jr-sec { padding: var(--padY) var(--padX); }

/* L'accueil : le texte et le tableau, beaucoup de mur. */
.jr-hero {
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(36px, 6vw, 110px); align-items: center;
  padding: clamp(56px, 7vw, 110px) var(--padX) var(--padY);
  background: var(--sky);
}
.jr-hero-text { display: flex; flex-direction: column; gap: clamp(22px, 2.6vw, 34px); }
.jr-lead { margin: 0; max-width: 34ch; font-weight: 300; font-size: clamp(24px, 2.3vw, 34px); line-height: 1.3; color: var(--ink-soft); }
.jr-lead--s { max-width: 44ch; font-size: clamp(22px, 1.9vw, 28px); }
.jr-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin: 0; }
.jr-art { margin: 0; justify-self: end; width: min(100%, 400px); }
.jr-art .j-frame { animation: jr-unveil 1.5s var(--ease) both; }
@keyframes jr-unveil {
  from { clip-path: inset(0 0 100% 0); }
  to { clip-path: inset(0 0 0 0); }
}
@media (max-width: 859px) {
  .jr-hero { grid-template-columns: 1fr; }
  .jr-art { justify-self: start; width: min(78%, 320px); }
}
@media (prefers-reduced-motion: reduce) {
  .jr-art .j-frame { animation: none; }
  .tf-bar-back .ar { transition: none; }
}

/* ----------------------------------------------------------- les entrées */
.jr-entries { display: flex; flex-direction: column; gap: clamp(28px, 3vw, 40px); }
.jr-filters { display: flex; flex-wrap: wrap; gap: 6px 22px; font-family: var(--label); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }
.jr-filters a { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; min-width: 44px; border-bottom: 1px solid transparent; }
.jr-filters a[aria-current] { color: var(--ink); border-bottom-color: var(--sienna); }
.jr-filters .c { font-size: 10.5px; color: var(--sienna-deep); letter-spacing: .06em; }
.jr-month {
  margin: clamp(10px, 2vw, 24px) 0 0; padding-top: 18px; border-top: 1px solid rgba(107,94,82,.28);
  font-family: var(--label); font-weight: 400; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-muted);
}
.jr-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: clamp(18px, 2vw, 26px); }
.jr-card {
  display: flex; flex-direction: column; gap: 12px; padding: 26px 28px 22px;
  background: var(--letter); box-shadow: 0 24px 40px -30px rgba(60,40,20,.45);
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}
.jr-card:hover { transform: translateY(-4px); box-shadow: 0 30px 46px -28px rgba(60,40,20,.5); }
.jr-card-top { display: flex; justify-content: space-between; gap: 12px; margin: 0; font-family: var(--label); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--sienna-deep); }
.jr-card-top time { color: var(--ink-muted); white-space: nowrap; }
.jr-card-t { margin: 0; font-weight: 400; font-size: 27px; line-height: 1.12; text-wrap: balance; }
.jr-card-t em { color: var(--sienna); }
.jr-card-x { margin: 0; font-size: 18px; line-height: 1.5; color: var(--ink-soft); flex: 1; }
.jr-card-f { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0; padding-top: 12px; border-top: 1px solid rgba(107,94,82,.2); font-family: var(--label); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }
.jr-card-f a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.jr-more { color: var(--sienna-deep); }
.jr-empty { margin: 0; color: var(--ink-muted); }
@media (prefers-reduced-motion: reduce) { .jr-card, .jr-card:hover { transition: none; transform: none; } }

/* ----------------------------------------------------------- l'activité */
.jr-activity { display: flex; flex-direction: column; gap: clamp(26px, 3vw, 40px); background: var(--lin); }
.jr-graph-box { padding: clamp(20px, 2.4vw, 32px); background: var(--mat); border: 1px solid rgba(199,167,101,.55); }
.jr-graph { display: block; width: 100%; height: auto; }
.jr-graph .m { font-family: var(--label); font-size: 10px; fill: var(--ink-muted); }
.jr-graph .l0, .jr-legend .l0 { fill: #E4D9C6; background: #E4D9C6; }
.jr-graph .l1, .jr-legend .l1 { fill: #E6C6AE; background: #E6C6AE; }
.jr-graph .l2, .jr-legend .l2 { fill: #D79A78; background: #D79A78; }
.jr-graph .l3, .jr-legend .l3 { fill: #B4532F; background: #B4532F; }
.jr-graph .l4, .jr-legend .l4 { fill: #7A3119; background: #7A3119; }
.jr-graph--mois { display: none; }
@media (max-width: 859px) {
  .jr-graph--an { display: none; }
  .jr-graph--mois { display: block; }
}
.jr-graph-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px 40px; flex-wrap: wrap; }
.jr-graph-txt { margin: 0; max-width: 60ch; font-size: 18px; color: var(--ink-soft); }
.jr-graph-txt a { border-bottom: 1px solid var(--sienna); }
.jr-legend { display: flex; align-items: center; gap: 4px; margin: 0; font-family: var(--label); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.jr-legend i { display: block; width: 11px; height: 11px; }
.jr-legend span:first-child { margin-right: 6px; }
.jr-legend span:last-child { margin-left: 6px; }

/* ----------------------------------------------------------- une entrée */
.jr-entry { padding: clamp(56px, 7vw, 110px) var(--padX) var(--padY); }
.jr-entry-head { display: flex; flex-direction: column; gap: 22px; max-width: min(100%, 1100px); }
.jr-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0; font-family: var(--label); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-muted); }
.jr-kicker a { color: var(--sienna-deep); display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.jr-entry-grid { display: grid; grid-template-columns: minmax(0, var(--measure)) minmax(0, 300px); justify-content: space-between; gap: clamp(36px, 6vw, 110px); margin-top: clamp(36px, 4vw, 60px); }
@media (max-width: 1023px) { .jr-entry-grid { grid-template-columns: minmax(0, 1fr); } }
.jr-prose { max-width: var(--measure); }
.jr-prose p, .jr-prose ul, .jr-prose ol, .jr-prose blockquote { margin: 0 0 1.05em; }
.jr-prose ul, .jr-prose ol { padding-left: 1.3em; }
.jr-prose li { margin-bottom: .35em; }
.jr-prose li::marker { color: var(--sienna); font-family: var(--label); font-size: .8em; }
.jr-prose strong { font-weight: 600; }
.jr-prose a { border-bottom: 1px solid var(--sienna); overflow-wrap: anywhere; }
.jr-prose blockquote { padding: 4px 0 4px 22px; border-left: 2px solid var(--sienna); font-style: italic; font-size: 1.12em; color: var(--ink-soft); }
.jr-prose blockquote p { margin: 0; }
.jr-sign { margin-top: 1.6em; font-style: italic; font-size: 24px; color: var(--sienna-deep); }
.jr-project {
  align-self: start; position: sticky; top: 80px;
  display: flex; flex-direction: column; gap: 10px; padding: 24px 26px;
  background: var(--mat); border: 1px solid rgba(199,167,101,.55);
}
@media (max-width: 1023px) { .jr-project { position: static; } }
.jr-project p { margin: 0; }
.jr-project .n { font-family: var(--label); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--sienna-deep); }
.jr-project .t { font-size: 27px; line-height: 1.1; }
.jr-project .d { font-size: 17px; line-height: 1.45; color: var(--ink-soft); }
.jr-project .l { display: flex; flex-direction: column; font-family: var(--label); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; }
.jr-project .l a { display: inline-flex; align-items: center; min-height: 44px; border-bottom: 1px solid rgba(107,94,82,.2); }

.jr-pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; padding: 0 var(--padX) var(--padY); }
.jr-pager a { display: flex; flex-direction: column; gap: 8px; padding: 22px 0; border-top: 1px solid rgba(107,94,82,.3); }
.jr-pager .next { grid-column: 2; text-align: right; }
.jr-pager .k { font-family: var(--label); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-muted); }
.jr-pager .t { font-size: 24px; line-height: 1.2; }
.jr-pager .t em { color: var(--sienna); }
@media (max-width: 640px) {
  .jr-pager { grid-template-columns: 1fr; }
  .jr-pager .next { grid-column: 1; text-align: left; }
}

/* ----------------------------------------------------------- page d'un projet, 404 */
.jr-project-head { display: flex; flex-direction: column; gap: clamp(20px, 2.4vw, 30px); background: var(--sky); padding-top: clamp(56px, 7vw, 110px); }
.jr-project-links { display: flex; flex-wrap: wrap; gap: 6px 28px; margin: 0; font-family: var(--label); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.jr-project-links a { display: inline-flex; align-items: center; min-height: 44px; border-bottom: 1px solid var(--sienna); }
.jr-entries--project { padding-top: clamp(40px, 5vw, 72px); }
.jr-h2-s { font-size: clamp(32px, 3.4vw, 52px); }
.jr-404 { display: flex; flex-direction: column; gap: 26px; min-height: 60vh; background: var(--sky); }

/* ----------------------------------------------------------- pied de page (minuit) */
.j-foot { background: var(--midnight); color: var(--moon); padding: clamp(56px, 6vw, 96px) var(--padX) 36px; }
.j-foot p { margin: 0; }
.j-foot-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.4fr); gap: 36px clamp(30px, 5vw, 80px); padding-bottom: clamp(36px, 4vw, 56px); border-bottom: 1px solid rgba(174,182,200,.15); }
@media (max-width: 859px) { .j-foot-grid { grid-template-columns: 1fr; } }
.j-foot-sign .t { font-size: 28px; color: var(--night-ink); }
.j-foot-sign .s { margin-top: 6px; font-size: 18px; color: var(--moon-dim); }
.j-foot-links { display: flex; flex-direction: column; font-family: var(--label); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; }
.j-foot-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--night-ink); }
.j-foot-credit { font-size: 16px; line-height: 1.5; color: var(--moon-dim); }
.j-foot-credit .n { margin-bottom: 8px; font-family: var(--label); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.j-foot-end { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; padding-top: 22px; font-family: var(--label); font-size: 10.5px; letter-spacing: .08em; color: var(--moon-dim); }