/* =====================================================================
   Punto Amor — pages de contenu (menus, chef, acces)
   =====================================================================
   Complement de styles.css, jamais un remplacement : les variables, les
   polices, la navigation, le pied de page et les animations viennent de la
   feuille principale. On ne redefinit ici que ce qui n'existe pas encore,
   la mise en page de pages de lecture.

   Convention Nocturne (voir styles.css) : les noms de variables sont
   historiques mais inverses — `--cream` est un fond SOMBRE, `--ink` un
   texte CLAIR. Toute regle ajoutee ici doit la respecter.
   ===================================================================== */

/* ---------- Ossature ---------- */
.page {
  padding-top: 180px;
  padding-bottom: 140px;
}
.page__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 40px;
}
.page__narrow { max-width: 820px; }

/* ---------- En-tete de page ---------- */
.page__head { margin-bottom: 90px; }
.page__eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 28px;
}
.page__title {
  font-family: var(--display);
  font-size: clamp(42px, 6vw, 86px);
  line-height: 0.98;
  font-weight: 400;
  color: var(--ink);
  margin: 0;
}
.page__title em {
  font-family: var(--serif);
  font-style: italic;
  color: var(--gold);
}
.page__lead {
  margin-top: 36px;
  max-width: 620px;
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.75;
  color: var(--ink-soft);
}

/* ---------- Fil d'Ariane ---------- */
.breadcrumb {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 36px;
}
.breadcrumb a { color: var(--ink-soft); text-decoration: none; transition: color .3s ease; }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb span { opacity: 0.45; margin: 0 10px; }

/* ---------- Corps de texte ---------- */
.prose { max-width: 680px; }
.prose h2 {
  font-family: var(--display);
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 400;
  color: var(--ink);
  margin: 72px 0 24px;
  line-height: 1.15;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 48px 0 16px;
  font-weight: 400;
}
.prose p {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.85;
  color: var(--ink-soft);
  margin: 0 0 22px;
}
.prose strong { color: var(--ink); font-weight: 500; }
.prose em { font-family: var(--serif); font-style: italic; color: var(--ink); }
.prose a { color: var(--gold); text-decoration: none; border-bottom: 1px solid rgba(197, 163, 104, 0.35); }
.prose a:hover { border-bottom-color: var(--gold); }

/* ---------- Tableau de donnees (distances, horaires) ---------- */
.page-table {
  width: 100%;
  border-collapse: collapse;
  margin: 40px 0;
  font-family: var(--sans);
}
.page-table caption {
  text-align: left;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  padding-bottom: 18px;
}
.page-table th,
.page-table td {
  text-align: left;
  padding: 16px 18px 16px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  color: var(--ink-soft);
}
.page-table th {
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
}
.page-table td:first-child { color: var(--ink); }
.page-table td:last-child,
.page-table th:last-child { text-align: right; padding-right: 0; }
.page-table tr:last-child td { border-bottom: none; }

/* ---------- Carte de menu detaillee ---------- */
.menu-detail {
  display: grid;
  /* Deux colonnes, pas un auto-fit : a quatre menus, l'auto-fit donnait
     trois cartes sur une ligne et une seule en dessous, avec deux cellules
     vides qui laissaient voir le fond de la grille. */
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin: 56px 0;
}
.menu-detail__item {
  background: var(--cream);
  padding: 44px 36px;
  display: flex;
  flex-direction: column;
}
.menu-detail__item--featured { background: var(--ink); }
.menu-detail__item--featured .menu-detail__name,
.menu-detail__item--featured .menu-detail__price { color: #15110a; }
.menu-detail__item--featured .menu-detail__desc,
.menu-detail__item--featured .menu-detail__line { color: rgba(18, 16, 8, 0.72); }
.menu-detail__item--featured .menu-detail__wine { border-color: rgba(18, 16, 8, 0.18); }

.menu-detail__num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  color: var(--gold);
  letter-spacing: 0.2em;
  margin-bottom: 20px;
}
.menu-detail__name {
  font-family: var(--display);
  font-size: 30px;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.1;
  margin: 0 0 16px;
}
.menu-detail__name em { font-family: var(--serif); font-style: italic; color: var(--gold); }
.menu-detail__desc {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0 0 28px;
  flex: 1;
}
.menu-detail__line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  padding: 12px 0;
}
.menu-detail__price {
  font-family: var(--display);
  font-size: 24px;
  color: var(--ink);
}
.menu-detail__wine {
  border-top: 1px solid var(--line);
  margin-top: 4px;
  font-size: 12px;
}

/* ---------- Parcours du chef ---------- */
.timeline { margin: 56px 0; max-width: 680px; }
.timeline__item {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 32px;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}
.timeline__item:last-child { border-bottom: none; }
.timeline__year {
  font-family: var(--display);
  font-size: 22px;
  color: var(--ink-soft);
  line-height: 1.2;
}
.timeline__item--current .timeline__year { color: var(--gold); }
.timeline__text {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
}
.timeline__item--current .timeline__text { color: var(--ink); }
.timeline__text strong { color: var(--ink); font-weight: 500; }

/* ---------- Encart ---------- */
.callout {
  border: 1px solid var(--line);
  border-left: 2px solid var(--gold);
  padding: 32px 36px;
  margin: 48px 0;
  max-width: 680px;
}
.callout p { margin: 0 0 14px; font-family: var(--serif); font-size: 16px; line-height: 1.75; color: var(--ink-soft); }
.callout p:last-child { margin-bottom: 0; }
.callout strong { color: var(--ink); }

/* ---------- Appel a l'action ---------- */
.page-cta {
  margin-top: 90px;
  padding-top: 56px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.page-cta__text {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--ink-soft);
  margin: 0;
  flex: 1;
  min-width: 260px;
}

/* ---------- Portrait ---------- */
.page-portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.page-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }

.page-split {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 80px;
  align-items: start;
}

/* ---------- Selecteur de langue de page ---------- */
.page-lang {
  display: inline-flex;
  gap: 2px;
  margin-bottom: 40px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px;
}
.page-lang button {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 8px 18px;
  border-radius: 999px;
  transition: color .3s ease, background .3s ease;
}
.page-lang button:hover { color: var(--ink); }
.page-lang button.active { color: var(--cream); background: var(--gold); }

/* ---------- Adaptation mobile ---------- */
@media (max-width: 900px) {
  .page-split { grid-template-columns: 1fr; gap: 48px; }
  .page-portrait { max-width: 420px; }
}
@media (max-width: 760px) {
  .menu-detail { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .page { padding-top: 130px; padding-bottom: 90px; }
  .page__inner { padding: 0 20px; }
  .page__head { margin-bottom: 56px; }
  .menu-detail__item { padding: 32px 24px; }
  .timeline__item { grid-template-columns: 70px 1fr; gap: 20px; }
  .timeline__year { font-size: 18px; }
  .page-table th, .page-table td { font-size: 13px; padding: 13px 10px 13px 0; }
  .callout { padding: 24px 22px; }
}

/* ============ CURSEUR — CORRECTIF (oct. 2026) ============
   styles.css masque le curseur systeme (`cursor: none`, sous
   @media hover+pointer:fine) parce que l'accueil en dessine un sur mesure :
   un point dore et son anneau, animes par app.js a partir des elements
   #cursor et #cursorRing presents dans index.html.

   Ces pages ne chargent pas app.js et ne portent pas ces deux elements :
   la regle s'appliquait quand meme et il ne restait AUCUN pointeur a
   l'ecran. On rend donc la fleche du systeme, qui ressort blanche sur le
   fond sombre.

   Ce fichier n'est charge que par les pages de contenu : l'accueil garde
   son curseur sur mesure, intact. `!important` est necessaire — plusieurs
   regles de styles.css posent `cursor: none` avec une specificite de
   classe, superieure a celle des selecteurs ci-dessous. */
@media (hover: hover) and (pointer: fine) {
  body,
  body * { cursor: auto !important; }

  a, a *,
  button, button *,
  [role="button"],
  [data-lang],
  .nav__toggle, .nav__toggle * { cursor: pointer !important; }
}