/* Ported from design prototype: Moulin de Plaisance - Le Moulin.html */

/* ───── Page header (breadcrumb + title) ───── */
  .gite-head { padding: 32px 0 24px; }
  .breadcrumb {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; color: var(--ink-soft); margin-bottom: 18px;
  }
  .breadcrumb a { color: inherit; text-decoration: none; opacity: 0.78; }
  .breadcrumb a:hover { opacity: 1; color: var(--ink); }
  .breadcrumb .sep { opacity: 0.4; }

  .gite-head-grid {
    display: grid; grid-template-columns: 1fr; gap: 32px;
    align-items: end; padding-bottom: 32px;
    border-bottom: 1px solid var(--line);
  }
  @media (min-width: 900px) {
    .gite-head-grid { grid-template-columns: 1.4fr 1fr; gap: 64px; }
  }
  .gite-head-grid h1 {
    font-weight: 600; font-size: clamp(56px, 8vw, 96px);
    line-height: 0.95; letter-spacing: -0.03em; margin: 0;
  }
  .gite-head-grid h1 .alt { color: var(--blue-deep); font-weight: 400; font-style: italic; }
  .gite-head-meta { display: flex; flex-direction: column; gap: 18px; }
  .key-figures {
    display: grid; grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--line-strong);
    border-bottom: 1px solid var(--line-strong);
  }
  @media (max-width: 520px) {
    .key-figures { grid-template-columns: repeat(2, 1fr); }
    .key-figures .figure:nth-child(2) { border-right: 0; }
    .key-figures .figure:nth-child(1),
    .key-figures .figure:nth-child(2) { border-bottom: 1px solid var(--line); }
  }
  .key-figures .figure {
    display: flex; flex-direction: column; gap: 8px;
    padding: 18px 18px 16px; border-right: 1px solid var(--line);
  }
  .key-figures .figure:last-child { border-right: 0; }
  .key-figures .v {
    font-size: 26px; font-weight: 600; color: var(--ink);
    letter-spacing: -0.02em; line-height: 1;
  }
  .key-figures .v small { font-size: 15px; font-weight: 500; color: var(--ink-soft); letter-spacing: 0; }
  .key-figures .l {
    font-size: 10.5px; font-weight: 500; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--stone);
  }

  /* ───── Hero diptych (avant / aujourd'hui) ───── */
  .moulin-hero {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  }
  @media (max-width: 700px) { .moulin-hero { grid-template-columns: 1fr; } }
  .moulin-hero figure { margin: 0; }
  .moulin-hero .frame { aspect-ratio: 4/5; border-radius: var(--r-sm); }
  .moulin-hero figcaption {
    display: flex; align-items: center; gap: 8px; margin-top: 12px;
  }

  /* ───── Frise de dates ───── */
  .timeline-ribbon {
    border-top: 1px solid var(--line-strong);
    border-bottom: 1px solid var(--line-strong);
    display: grid; grid-template-columns: repeat(6, 1fr);
  }
  @media (max-width: 760px) {
    .timeline-ribbon { grid-template-columns: repeat(3, 1fr); }
    .timeline-ribbon .tl-node:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
  }
  .tl-node {
    padding: 22px 18px; border-right: 1px solid var(--line);
    display: flex; flex-direction: column; gap: 6px;
  }
  .tl-node:last-child { border-right: 0; }
  @media (max-width: 760px) {
    .tl-node:nth-child(3n) { border-right: 0; }
  }
  .tl-node .yr {
    font-size: 22px; font-weight: 600; color: var(--blue-deep); letter-spacing: -0.01em;
  }
  .tl-node .ev { font-size: 13px; color: var(--ink-soft); line-height: 1.4; }

  /* ───── Époques (récit) ───── */
  .era + .era { border-top: 1px solid var(--line); }
  .era-marker {
    display: grid; grid-template-columns: 1fr; gap: 18px;
    align-items: end; margin-bottom: 48px;
  }
  @media (min-width: 900px) {
    .era-marker { grid-template-columns: auto 1fr; gap: 48px; align-items: baseline; }
  }
  .era-marker .century {
    font-weight: 600; font-size: clamp(40px, 6vw, 72px);
    line-height: 0.95; letter-spacing: -0.03em; color: var(--ink); white-space: nowrap;
  }
  .era-marker .century .span { display: block; font-size: 0.32em; font-weight: 500;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--stone); margin-top: 12px; }
  .era-marker h2 { color: var(--ink); }

  .era-grid {
    display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start;
  }
  @media (min-width: 900px) {
    .era-grid { grid-template-columns: 1.35fr 1fr; gap: 72px; }
    .era-grid.reverse .era-media { order: -1; }
  }
  .era-body .description { font-size: 17px; line-height: 1.7; color: var(--ink-soft); margin: 0; }
  .era-body .description + .description { margin-top: 18px; }
  .era-body .description strong { color: var(--ink); font-weight: 600; }

  .era-media figure { margin: 0; }
  .era-media .frame { border-radius: var(--r-sm); }
  .era-media figcaption {
    display: flex; align-items: flex-start; gap: 8px; margin-top: 12px;
  }
  .era-media .stack-figs { display: grid; grid-template-columns: 1fr; gap: 24px; }

  /* Encart anecdote */
  .anecdote {
    margin-top: 32px; padding: 28px 32px;
    border-left: 3px solid var(--blue);
    background: var(--blue-soft);
    border-radius: 0 var(--r-md) var(--r-md) 0;
  }
  .anecdote .lbl {
    font-family: var(--font-body); font-weight: 600; font-size: 11px;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue-deep); margin-bottom: 12px;
  }
  .anecdote p { font-size: 17px; line-height: 1.6; color: var(--ink); margin: 0; text-wrap: pretty; }
  .anecdote.wheat { border-left-color: var(--wheat); background: var(--wheat-soft); }
  .anecdote.wheat .lbl { color: var(--wheat-deep); }

  /* ───── Galerie restauration ───── */
  .resto-gallery { margin-top: 64px; padding-top: 48px; border-top: 1px solid var(--line); }
  .resto-gallery .rg-head { margin-bottom: 32px; max-width: 62ch; }
  .resto-gallery .rg-head .lbl {
    font-family: var(--font-body); font-weight: 600; font-size: 11px;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue-deep); margin-bottom: 12px;
  }
  .resto-gallery .rg-head p { font-size: 16px; line-height: 1.6; color: var(--ink-soft); margin: 0; text-wrap: pretty; }
  .rg-grid { display: grid; grid-template-columns: 1fr; gap: 20px 20px; }
  @media (min-width: 640px) { .rg-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 960px) { .rg-grid { grid-template-columns: repeat(6, 1fr); } }
  .rg-grid figure { margin: 0; }
  .rg-grid .frame { border-radius: var(--r-sm); }
  .rg-grid figcaption { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; line-height: 1.4; }
  .rg-portrait .frame { aspect-ratio: 3 / 4; }
  .rg-land .frame { aspect-ratio: 3 / 2; }
  @media (min-width: 960px) {
    .rg-portrait { grid-column: span 2; }
    .rg-land { grid-column: span 3; }
  }

  /* ───── Ce qu'il reste (relics) ───── */
  .relics-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
  @media (min-width: 800px) { .relics-grid { grid-template-columns: repeat(3, 1fr); } }
  .relic {
    background: #ffffff; border: 1px solid var(--line); border-radius: var(--r-md);
    overflow: hidden; display: flex; flex-direction: column;
  }
  .relic .frame { aspect-ratio: 4/3; }
  .relic .body { padding: 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
  .relic .body .mono { color: var(--blue-deep); }

  /* ───── Séjour CTA (les 2 gîtes) ───── */
  .stay-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
  @media (min-width: 800px) { .stay-grid { grid-template-columns: 1fr 1fr; } }
  .stay-card {
    position: relative; border-radius: var(--r-md); overflow: hidden;
    text-decoration: none; color: inherit; display: block;
    min-height: 420px; isolation: isolate;
  }
  .stay-card img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    z-index: -2; transition: transform .8s cubic-bezier(.2,.7,.3,1);
  }
  .stay-card::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(to top, rgba(20,24,30,0.88) 0%, rgba(20,24,30,0.35) 48%, rgba(20,24,30,0.08) 100%);
  }
  .stay-card:hover img { transform: scale(1.04); }
  .stay-card .copy { position: absolute; left: 0; right: 0; bottom: 0; padding: 32px; color: #fff; }
  .stay-card .copy .role {
    font-family: var(--font-body); font-weight: 500; font-size: 11px;
    letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.78); margin-bottom: 10px;
  }
  .stay-card .copy h3 { color: #fff; font-size: 30px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; margin: 0; }
  .stay-card .copy p { color: rgba(255,255,255,0.86); font-size: 15px; line-height: 1.5; margin: 12px 0 0; max-width: 36ch; }
  .stay-card .copy .go {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 18px;
    font-size: 14px; font-weight: 600; color: #fff;
  }
  .stay-card:hover .copy .go .arrow { transform: translateX(3px); }

  /* ───── Sources ───── */
  .sources-list { display: grid; grid-template-columns: 1fr; gap: 0; }
  .source-row {
    display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: baseline;
    padding: 18px 0; border-top: 1px solid var(--line);
  }
  .source-row:first-child { border-top: 0; }
  .source-row .what { font-size: 15px; color: var(--ink); }
  .source-row .where { font-size: 13px; color: var(--stone); }