/* ══════════════════════════════
   TABLET
══════════════════════════════ */
@media (max-width: 980px) {
  .tl-card {
    width: clamp(440px, 70vw, 700px);
  }
  .tl-desc {
    gap: 1rem;
  }
  .tl-photo {
    min-height: 220px;
  }
}
/* ══════════════════════════════
   MOBILE
══════════════════════════════ */
@media (max-width: 640px) {
  .tl-card {
    width: calc(100vw - 60px);
    left: 36px !important;
    right: auto !important;
    top: 28px;
    transform: none;
    clip-path: circle(0% at 11px 50%) !important;
    padding: 1.2rem;
  }
  .tl-stop.visible .tl-card {
    clip-path: circle(150% at 11px 50%) !important;
  }
  .tl-desc {
    flex-direction: column;
    gap: 1rem;
  }
  .tl-desc .desc,
  .tl-photo {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .tl-photo {
    min-height: 220px;
    width: 100%;
  }
}


/* Style pour mobile */
  @media (max-width: 768px) {
      .container {
        flex-direction: column;
        margin: 10px;
        padding: 10px;
      }

      .details-panel {
        max-height: none;
        margin-bottom: 20px;
      }

      .map-container {
        height: 400px;
      }
    }

/* ══════════════════════════════
   PAGE SPÉCIALITÉS
   .la_ferme / .prod_fro / .millas
══════════════════════════════ */



/* ══════════════════════════════
   RESPONSIVE — TABLET  (≤ 980px)
══════════════════════════════ */
@media (max-width: 980px) {
  .split,
  .split.reverse {
    flex-direction: column;
  }

  .story-image img {
    height: 340px;
  }

  .fromages-grid {
    flex-wrap: wrap;
  }

  .fromage-card {
    max-width: 47%;
    flex: 1 1 47%;
  }

  .tl-card {
    width: clamp(440px, 70vw, 700px);
  }

  .tl-desc {
    gap: 1rem;
  }

  .tl-photo {
    min-height: 220px;
  }

  /* spécialités tablet */
  .ferme,
  .prod_fro > div {
    flex-direction: column;
  }

  .ferme img,
  .prod_fro img {
    max-width: 100%;
    height: 300px;
  }

  .millas_jaune {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }

  .millas_jaune img {
    grid-column: 1;
    grid-row: 2;
    height: 280px;
  }

  .millas_jaune p {
    grid-row: 3;
  }
}


/* ══════════════════════════════
   RESPONSIVE — MOBILE  (≤ 640px)
══════════════════════════════ */
@media (max-width: 640px) {
  .container {
    width: min(100% - 28px, 100%);
  }

  .hero {
    min-height: 54vh;
    height: 100vh;
  }

  .page-intro {
    padding: 3.5rem 0 2rem;
  }

  .page-intro p,
  .story-text p,
  .fromage-card p {
    text-align: left;
  }

  .story-text {
    padding: 1.35rem;
  }

  .story-image img {
    height: 250px;
  }

  .card_fromages {
    padding: 3rem 0 4.5rem;
  }

  .fromages-grid {
    flex-direction: column;
  }

  .fromage-card {
    max-width: 100%;
    flex: 1 1 100%;
  }

  .fromage-photo {
    height: 220px;
  }

  .fromage-body {
    padding: 1.2rem;
  }

  /* Timeline mobile */
  .tl-card {
    width: calc(100vw - 60px);
    left: 36px !important;
    right: auto !important;
    top: 28px;
    transform: none;
    clip-path: circle(0% at 11px 50%) !important;
    padding: 1.2rem;
  }

  .tl-stop.visible .tl-card {
    clip-path: circle(150% at 11px 50%) !important;
  }

  .tl-desc {
    flex-direction: column;
    gap: 1rem;
  }

  .tl-desc .desc,
  .tl-photo {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .tl-photo {
    min-height: 220px;
    width: 100%;
  }

  /* spécialités mobile */
  .la_ferme,
  .prod_fro,
  .millas {
    padding: 2.5rem 0;
  }

  .ferme img,
  .prod_fro img {
    height: 240px;
  }

  .la_ferme p,
  .prod_fro p,
  .millas_jaune p,
  .millas_blanc p {
    text-align: left;
  }
}