/* ============================================================
   LES HEURES FLÂNEUSES — Système de design
   Direction : "Encre et brique" — éditorial, chaud, vivant.
   Ambiance liée à l'heure réelle du visiteur (voir time-ambience.js).
   ============================================================ */

:root {
  /* Palette de base ("jour") */
  --paper:        #EFE7D8; /* fond — lin, papier vieilli */
  --paper-raised: #F6F0E4; /* cartes, surfaces légèrement plus claires */
  --ink:          #24201B; /* texte — quasi noir, chaud */
  --ink-soft:     #5B5348; /* texte secondaire */
  --brick:        #A8462F; /* accent primaire — tampon postal */
  --brick-deep:   #7E3220; /* accent primaire, hover/actif */
  --pine:         #2B4E45; /* accent froid — malle de voyage */
  --brass:        #C79A56; /* accent muet — tags, filets */
  --line:         rgba(36,32,27,.14);

  --accent: var(--brick);
  --accent-deep: var(--brick-deep);
  --ambient-a: #F2E4C8;
  --ambient-b: #EFE7D8;

  --font-display: 'InterVariable', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'InterVariable', 'Inter', ui-sans-serif, system-ui, sans-serif;
}

/* Bascule d'ambiance selon l'heure réelle du visiteur */
html[data-daytime="morning"] {
  --ambient-a: #F3D9C9;
  --ambient-b: #EFE7D8;
}
html[data-daytime="midday"] {
  --ambient-a: #F2E4C8;
  --ambient-b: #EFE7D8;
}
html[data-daytime="evening"] {
  --ambient-a: #E8B77A;
  --ambient-b: #E4CFA3;
  --accent: #C1622B;
  --accent-deep: #9A4B1F;
}
html[data-daytime="night"] {
  --paper:        #1B1815;
  --paper-raised: #241F1A;
  --ink:          #EFE3D3;
  --ink-soft:     #B8AA98;
  --line:         rgba(239,231,216,.14);
  --ambient-a:    #2E2620;
  --ambient-b:    #1B1815;
  --accent:       #D97A54;
  --accent-deep:  #B85C38;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  transition: background-color .6s ease, color .6s ease;
}

h1, h2, h3, h4, .font-display {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}

/* Voile atmosphérique — traduit "Les Heures" en ambiance vivante plutôt qu'en simple toggle jour/nuit */
#ambient {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 120% 55% at 50% -10%, var(--ambient-a), transparent 70%);
  opacity: .55;
}
html[data-daytime="night"] #ambient { opacity: .4; }

/* ---- Liens : le mot grossit au survol (plutôt qu'un soulignement) ----
   inline-block pour que transform s'applique ; l'origine à gauche évite que le texte
   déborde à gauche du conteneur. */
.ink-link, .title-link {
  display: inline-block;
  color: inherit;
  text-decoration: none;
  transform-origin: left center;
  transition: transform .25s cubic-bezier(.22,1,.36,1), color .2s ease;
}
.ink-link:hover, .ink-link:focus-visible { transform: scale(1.1); color: var(--accent); }
/* Titres (souvent sur plusieurs lignes, texte plus grand) : agrandissement plus discret */
.title-link:hover, .title-link:focus-visible { transform: scale(1.03); color: var(--accent); }
.ink-link:focus-visible, .title-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
@media (prefers-reduced-motion: reduce) {
  .ink-link:hover, .title-link:hover { transform: none; }
}

/* Filets et bordures qui suivent la palette plutôt que le gris Tailwind par défaut */
.hairline { border-color: var(--line) !important; }
.paper-surface { background: var(--paper-raised); }

/* Skeleton de chargement, partagé entre les pages */
.skeleton {
  background: linear-gradient(90deg, var(--paper-raised) 25%, var(--line) 50%, var(--paper-raised) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }

/* ============================================================
   NAVBAR — "La promenade" : la ligne d'horizon est un cadran du jour.
   Le soleil se place selon l'heure réelle (nav.js) et glisse sous
   la rubrique survolée.
   ============================================================ */
#site-header { --sun-x: 50%; }
.nav-bar { height: 4rem; transition: height .3s cubic-bezier(.22,1,.36,1); }
#site-header.is-condensed .nav-bar { height: 3rem; }
.nav-logo-img { transition: width .3s ease, height .3s ease; }
#site-header.is-condensed .nav-logo-img { width: 30px !important; height: 30px !important; }

.nav-link[aria-current="page"] { color: var(--accent); font-weight: 600; }

.nav-clock {
  display: inline-flex; align-items: baseline; gap: .5rem;
  font-family: var(--font-display); font-style: italic; font-size: .8rem;
  color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.nav-clock .nav-band { display: none; }
@media (min-width: 1024px) { .nav-clock .nav-band { display: inline; } .nav-clock .nav-band::before { content: "·"; margin-right: .5rem; } }

.nav-horizon { position: relative; height: 1px; background: var(--line); }
.nav-horizon-elapsed {
  position: absolute; left: 0; top: 0; height: 1px; width: var(--sun-x);
  background: var(--accent); transition: width .7s cubic-bezier(.22,1,.36,1);
}
.nav-sun {
  position: absolute; top: 50%; left: var(--sun-x); width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent); transform: translate(-50%, -50%);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent), 0 0 14px 3px color-mix(in srgb, var(--accent) 45%, transparent);
  transition: left .7s cubic-bezier(.22,1,.36,1);
}
html[data-daytime="night"] .nav-sun { background: var(--ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ink) 12%, transparent), 0 0 12px 2px color-mix(in srgb, var(--ink) 25%, transparent); }
@media (prefers-reduced-motion: reduce) {
  .nav-bar, .nav-logo-img, .nav-horizon-elapsed, .nav-sun { transition: none; }
}

#mobile-menu a { font-family: var(--font-display); font-style: italic; font-size: 1.5rem; line-height: 1.2; padding: .8rem .25rem; border-bottom: 1px solid var(--line); border-radius: 0; color: var(--ink); }
#mobile-menu a:last-child { border-bottom: 0; }