/* =========================================================================
   journal.css — Le carnet : intro, chapitres (étapes), jours, fiches, ours
   ========================================================================= */

/* Intro */
.journal-intro { text-align: center; margin: 1rem auto 4.5rem; max-width: 48ch; }
.journal-intro__dates {
  text-transform: uppercase; letter-spacing: .26em;
  font-size: .74rem; font-weight: 600; color: var(--accent);
  margin-bottom: 1.3rem;
}
.journal-intro__lead { font-family: var(--serif); font-size: clamp(1.35rem, 2.3vw, 1.72rem); font-style: italic; color: var(--ink-soft); line-height: 1.5; }
.journal-intro__sign { font-family: var(--serif); font-style: italic; font-size: 1.08rem; color: var(--accent); margin: 1.4rem 0 0; }

/* Chapitre = nouvelle étape (grande image cinématique + texte en surimpression) */
.chapter {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  margin: 4.5rem 0 2.6rem;
  min-height: clamp(360px, 56vh, 560px);
  display: flex; align-items: flex-end;
  box-shadow: var(--shadow-lg);
}
.chapter__media { position: absolute; inset: 0; }
.chapter__media .photo { height: 100%; }
/* L'image est sur-dimensionnée pour pouvoir glisser (parallax.js) sans laisser de vide. */
.chapter[data-parallax] .chapter__media .photo { position: relative; height: 122%; top: -11%; will-change: transform; }
.chapter::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,17,13,0) 28%, rgba(20,17,13,.55) 68%, rgba(20,17,13,.86) 100%);
}
.chapter__overlay { position: relative; z-index: 1; color: #fff; padding: clamp(1.7rem, 4vw, 3rem) clamp(1.6rem, 4vw, 3rem); max-width: 760px; }
.chapter__kicker {
  display: flex; align-items: center; gap: .7rem;
  text-transform: uppercase; letter-spacing: .22em;
  font-size: .72rem; font-weight: 600; color: #f0d9a8;
}
.chapter__no {
  font-family: var(--serif); font-size: 1rem; letter-spacing: 0;
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  border: 1px solid rgba(240,217,168,.55);
  display: inline-flex; align-items: center; justify-content: center;
}
.chapter__title { font-size: clamp(2.2rem, 5.5vw, 3.8rem); margin: .55rem 0 .6rem; }
.chapter__blurb { max-width: 56ch; opacity: .95; margin: 0; font-size: 1.02rem; line-height: 1.55; }

/* Notes manuscrites de routard, gribouillées en marge sous chaque chapitre */
.fieldnotes {
  position: relative;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(244px, 1fr));
  gap: 1.1rem 1.4rem; margin: 0 .2rem 2.6rem;
}
.fieldnote {
  position: relative; background: #fffdf3;
  border: 1px solid #ece2cb; border-radius: 3px;
  padding: 1.05rem 1.15rem 1rem;
  box-shadow: 2px 4px 12px rgba(28,27,25,.09);
  transform: rotate(-1.1deg);
  transition: transform .3s ease, box-shadow .3s ease;
}
.fieldnote--b { transform: rotate(1deg); background: #fdfaef; }
.fieldnote:hover { transform: rotate(0) translateY(-2px); box-shadow: var(--shadow-md); z-index: 1; }
.fieldnote::before {                       /* bout de scotch translucide */
  content: ""; position: absolute; top: -9px; left: 50%;
  width: 58px; height: 19px; transform: translateX(-50%) rotate(-3deg);
  background: linear-gradient(180deg, rgba(206,188,128,.4), rgba(206,188,128,.18));
  border: 1px solid rgba(180,160,90,.22);
}
.fieldnote__tag {
  display: inline-block; font-family: var(--sans);
  font-size: .58rem; text-transform: uppercase; letter-spacing: .2em;
  font-weight: 700; color: var(--accent); margin-bottom: .1rem;
}
.fieldnote__text { font-family: var(--hand); font-size: 1.36rem; line-height: 1.24; color: #38322a; margin: 0; }

/* Jour : colonne gauche (repère) + contenu.
   padding-left = marge pour la barre d'accent du jour actif (sinon « Jour X » colle). */
.day { display: grid; grid-template-columns: 116px 1fr; gap: 1.5rem; padding: 2rem 0 2rem 1.4rem; border-bottom: 1px solid var(--line); }
.day__rail { display: flex; flex-direction: column; gap: .15rem; position: sticky; top: calc(var(--nav-h) + 12px); align-self: start; }
.day__num { font-family: var(--serif); font-size: 1.4rem; font-weight: 700; color: var(--accent); }
.day__date { font-size: .82rem; color: var(--ink-soft); text-transform: capitalize; }
.day__kind { font-size: .68rem; text-transform: uppercase; letter-spacing: .14em; color: var(--ink-faint); margin-top: .25rem; }
.day__content { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.day__alert {
  background: #fbf1e9; border-left: 3px solid var(--accent);
  color: var(--accent-dk); font-size: .86rem;
  padding: .55rem .8rem; border-radius: var(--r-sm); margin: 0;
}

/* Bandeau de transport */
.transfer {
  display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: baseline;
  background: var(--paper-2); border-radius: var(--r-sm);
  padding: .55rem .85rem; font-size: .85rem;
}
.transfer__route { font-weight: 600; }
.transfer__arrow { color: var(--accent); }
.transfer__meta { color: var(--ink-soft); }

/* Fiche activité */
.act {
  display: grid; grid-template-columns: 240px 1fr;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease;
}
.act:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.act__media { position: relative; min-height: 100%; }
.act__media .photo { height: 100%; min-height: 170px; }
.act__body { padding: 1.1rem 1.2rem 1.2rem; display: flex; flex-direction: column; gap: .55rem; min-width: 0; }
.act__head { display: flex; flex-direction: column; gap: .45rem; }
.act__name { font-size: 1.18rem; }

/* Note d'envie discrète (0 à 3 étoiles dorées) */
.act__stars { color: var(--gold); font-size: .82rem; letter-spacing: .16em; line-height: 1; opacity: .9; }
.act--feature .act__stars { font-size: .95rem; }

/* Incontournables = fiches « vedette » plus grandes, image plus généreuse */
.act--feature { grid-template-columns: 300px 1fr; }
.act--feature .act__media .photo { min-height: 230px; }
.act--feature .act__name { font-size: 1.42rem; }
.act--feature .act__blurb { font-size: 1rem; }
.act__blurb { margin: 0; font-size: .93rem; color: var(--ink-soft); }
.act__note { margin: 0; font-size: .82rem; color: var(--forest); font-style: italic; }
.act__link { font-size: .82rem; font-weight: 600; text-decoration: none; }
.act__link:hover { text-decoration: underline; }

/* Encart ours */
.bear-card {
  position: relative;
  display: grid; grid-template-columns: 220px 1fr;
  border: 2px solid var(--forest); border-radius: var(--r-md);
  overflow: hidden; background: #f6f3ea;
}
.bear-card__media .photo { height: 100%; min-height: 180px; }
.bear-card__body { padding: 1.1rem 1.2rem; }
.bear-card__tag {
  display: inline-block; background: var(--forest); color: #fff;
  font-size: .72rem; font-weight: 600; letter-spacing: .08em;
  padding: .2rem .6rem; border-radius: 999px; margin-bottom: .5rem;
}
.bear-card__body h4 { font-size: 1.25rem; margin-bottom: .4rem; }
.bear-card__body p { font-size: .92rem; color: var(--ink-soft); }

/* Alternatives */
.alternatives { margin: 1.2rem 0 .4rem; }
.alternatives__title { font-size: 1.05rem; color: var(--ink-soft); font-style: italic; margin-bottom: .9rem; }
.alternatives__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.alt-card { background: var(--card); border: 1px dashed var(--line-strong); border-radius: var(--r-md); overflow: hidden; transition: transform .25s ease, box-shadow .25s ease, border-color .25s; }
.alt-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--accent); }
.alt-card__media { height: 140px; overflow: hidden; }
.alt-card__media .photo { height: 100%; }
.alt-card__body { padding: .8rem .9rem .95rem; }
.alt-card__body strong { display: block; font-size: .96rem; }
.alt-card__meta { font-size: .76rem; color: var(--accent); font-weight: 600; }
.alt-card__body p { margin: .4rem 0 0; font-size: .83rem; color: var(--ink-soft); }
.alt-card__note { font-size: .76rem; color: var(--forest); font-style: italic; margin: .45rem 0 0 !important; }

/* Encadré final : combines de routard (bloc vert sapin, façon sidebar magazine) */
.tips {
  margin: 4.5rem 0 1rem;
  padding: clamp(1.8rem, 4vw, 3rem);
  background: var(--forest); color: #f3ede3;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}
.tips__kicker { text-transform: uppercase; letter-spacing: .24em; font-size: .72rem; font-weight: 600; color: var(--gold); }
.tips__title { color: #fff; font-size: clamp(1.6rem, 3vw, 2.1rem); margin: .35rem 0 .5rem; }
.tips__lead { color: rgba(243,237,227,.78); font-style: italic; font-family: var(--serif); max-width: 52ch; margin: 0; }
.tips__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.3rem 1.8rem; margin-top: 1.8rem; }
.tip { display: flex; gap: .85rem; align-items: flex-start; }
.tip__icon { font-size: 1.35rem; line-height: 1.2; flex: none; }
.tip__title { display: block; color: #fff; font-family: var(--sans); font-weight: 700; font-size: .92rem; margin-bottom: .2rem; }
.tip__text { font-size: .84rem; color: rgba(243,237,227,.82); margin: 0; line-height: 1.5; }

/* Traçabilité du prix : d'où vient le tarif (officiel 2026 / estimé) */
.act__pricesrc {
  display: block; margin-top: .3rem;
  font-family: var(--sans); font-size: .6rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint);
}
.act__pricesrc--est { color: var(--accent); }

/* ---- Croquis "faits main" en marge (doodles.js) ---- */
.doodle { pointer-events: none; display: inline-block; line-height: 0; color: var(--gold); }
.doodle svg { display: block; width: 100%; height: 100%; }
/* petit cœur inline dans la signature de l'intro */
.doodle--sign { width: 1.05em; height: 1.05em; vertical-align: -.16em; margin-left: .15rem; color: var(--accent); opacity: .82; }
/* croquis discret sur la photo de chapitre */
.doodle--chapter {
  position: absolute; top: 1.1rem; right: 1.2rem; z-index: 2;
  width: clamp(40px, 7vw, 60px); height: clamp(40px, 7vw, 60px);
  color: #f0d9a8; opacity: .5; transform: rotate(-8deg);
}
/* patte d'ours dans le coin de l'encart ours */
.doodle--bear {
  position: absolute; bottom: 12px; left: 12px; z-index: 3;
  width: 46px; height: 46px; color: #fff; opacity: .55; transform: rotate(-12deg);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
}
/* flèche manuscrite qui pointe vers les bristols de notes */
.doodle--notes {
  position: absolute; top: -28px; right: 10px;
  width: 60px; height: 36px; color: var(--accent); opacity: .45; transform: rotate(5deg);
}
@media (max-width: 720px) { .doodle--notes { display: none; } }

/* =====================================================================
   Mise en page du Carnet : le récit (gauche) + la carte collante (droite)
   qui suit le défilement et vole vers le jour qu'on lit.
   ===================================================================== */
.journal-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 2.8rem;
  align-items: start;
}
.journal-col { min-width: 0; }
.journal-aside { position: sticky; top: calc(var(--nav-h) + 1.1rem); align-self: start; }
.journal-map-wrap {
  position: relative;
  height: calc(100vh - var(--nav-h) - 2.4rem);
  max-height: 760px;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-md);
}
#journal-map { position: absolute; inset: 0; height: 100%; z-index: 1; }
.journal-map__badge {
  position: absolute; left: 12px; top: 12px; z-index: 2;
  background: rgba(28,27,25,.82); color: var(--paper);
  font-size: .8rem; font-weight: 600; letter-spacing: .02em;
  padding: .4rem .85rem; border-radius: 999px;
  backdrop-filter: blur(4px);
  box-shadow: var(--shadow-sm);
  max-width: calc(100% - 24px);
  transition: opacity .3s;
}

/* Jour actif (surligné en miroir de la carte) */
.day { transition: background .35s ease, box-shadow .35s ease; border-radius: var(--r-md); }
.day.is-active { background: linear-gradient(90deg, rgba(154,59,38,.07), transparent 62%); box-shadow: inset 3px 0 0 var(--accent); }
.day.is-active .day__num { color: var(--accent-dk); }

/* Responsive */
@media (max-width: 920px) {
  .journal-layout { grid-template-columns: 1fr; gap: 1rem; }
  /* La carte devient un bandeau collant en haut qui se met à jour au scroll. */
  .journal-aside { position: sticky; top: var(--nav-h); z-index: 5; margin: 0 0 1.2rem; }
  .journal-map-wrap { height: 32vh; min-height: 200px; max-height: 340px; }
}
@media (max-width: 680px) {
  .day { grid-template-columns: 1fr; gap: .8rem; padding-left: 1rem; }
  .day__rail { flex-direction: row; align-items: baseline; gap: .6rem; position: static; }
  .act, .act--feature { grid-template-columns: 1fr; }
  .act__media .photo, .act--feature .act__media .photo { min-height: 200px; }
  .bear-card { grid-template-columns: 1fr; }
}