/* ============================================================
   Kassiopée — Livret · Surcouche RESPONSIVE
   ------------------------------------------------------------
   Chargée APRÈS app-v2.css. L'expérience mobile (< 768px) reste
   strictement identique : aucune de ces règles ne s'active en
   dessous de 768px. On adapte uniquement tablette et ordinateur.
   ============================================================ */

/* ─────────────────────────────────────────────
   TABLETTE  ·  ≥ 768px
   Colonne élargie, navigation basse conservée,
   listes de cartes passées sur 2 colonnes.
   ───────────────────────────────────────────── */
@media (min-width: 768px) {
  body { background: var(--k-cream); }

  #root {
    max-width: 760px;
    box-shadow: 0 0 70px rgba(43, 38, 32, 0.20);
  }
  .k-header,
  .k-bottom-nav { max-width: 760px; }

  /* Héros un peu moins haut sur grand écran */
  .k-hero { height: 54vh; min-height: 420px; max-height: 560px; }
  .k-section-hero { height: 240px; }

  /* Listes de cartes → grille 2 colonnes */
  .k-cards-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding: 18px 20px;
    align-items: start;
  }

  /* Longueur de ligne de lecture maîtrisée */
  .k-hero__sub { max-width: 42ch; }
  .k-welcome__body { max-width: 60ch; }

  /* Itinéraires vélo : cartes en 2 colonnes, vignettes agrandies */
  .k-velo-itin-list {
    display: grid !important; /* surpasse le display:flex inline */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
  }
  .k-velo-itinerary__photos { width: 104px !important; }
}

/* ─────────────────────────────────────────────
   ORDINATEUR  ·  ≥ 1080px
   La barre d'onglets du bas devient un menu
   latéral vertical ; l'en-tête passe en pleine
   largeur ; le contenu est centré en colonne.
   ───────────────────────────────────────────── */
@media (min-width: 1080px) {
  :root { --k-side: 248px; --k-topbar: 66px; }

  body {
    background: var(--k-cream);
    justify-content: stretch;
    align-items: stretch;
  }

  #root {
    max-width: none;
    width: 100%;
    box-shadow: none;
    background: var(--k-paper);
  }

  /* ── En-tête : barre supérieure pleine largeur ── */
  .k-header {
    left: 0; right: 0; transform: none;
    width: 100%; max-width: none;
    height: var(--k-topbar);
    padding: 0 30px;
  }
  .k-header__logo { height: 34px; }

  /* ── Menu latéral (ex-barre du bas) ── */
  .k-bottom-nav {
    left: 0; right: auto; transform: none;
    top: var(--k-topbar); bottom: 0;
    width: var(--k-side); max-width: none;
    height: auto;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 4px;
    padding: 22px 14px;
    border-top: none;
    border-right: 1px solid var(--k-line);
    background: color-mix(in srgb, var(--k-paper) 97%, transparent);
  }
  .k-nav-item {
    flex: 0 0 auto;
    flex-direction: row;
    justify-content: flex-start;
    gap: 14px;
    padding: 13px 16px;
    border-radius: 12px;
    transition: background 0.18s, color 0.18s;
  }
  .k-nav-item:hover { background: var(--k-cream); }
  .k-nav-item--active { background: var(--k-cream); }
  .k-nav-item--active::before {
    top: 12px; bottom: 12px; left: 0; right: auto;
    width: 3px; height: auto;
    border-radius: 0 3px 3px 0;
  }
  .k-nav-label {
    font-size: 13.5px;
    letter-spacing: 0.01em;
    text-transform: none;
    line-height: 1.2;
  }
  .k-nav-item--velos .k-nav-velo-bubble { width: 38px; height: 26px; }

  /* ── Zone de contenu : sous l'en-tête, à droite du menu ── */
  .k-tabs-content {
    margin-top: var(--k-topbar);
    margin-bottom: 0;
    margin-left: var(--k-side);
    background: var(--k-paper);
  }

  /* Colonne de lecture centrée (max 1040px) */
  .k-tab {
    padding-left: max(0px, calc((100% - 1040px) / 2));
    padding-right: max(0px, calc((100% - 1040px) / 2));
  }

  /* Héros contenu dans la colonne */
  .k-hero { height: clamp(360px, 44vh, 520px); min-height: 0; }
  .k-section-hero { height: 260px; }

  /* Listes de cartes → grille fluide 2 colonnes */
  .k-cards-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 18px;
    padding: 24px 16px;
    align-items: start;
  }

  /* Barres collantes (sous-onglets / filtres) : rester dans la colonne */
  .k-sub-tabs, .k-filters { top: 0; }

  /* Longueur de ligne maîtrisée pour les blocs de texte larges */
  .k-hero__sub { max-width: 44ch; }
  .k-welcome__body { max-width: 64ch; }

  /* Tarifs vélo : 2 colonnes pour remplir la largeur */
  .k-velo-price-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  /* ── Modale carte vélo : centrée façon fenêtre ── */
  .k-velo-map-overlay { align-items: center; justify-content: center; }
  .k-velo-map-modal {
    width: min(860px, 92%);
    height: 80vh;
    border-radius: 16px;
  }

  /* Le panneau Tweaks flotte en bas à droite (plus de barre d'onglets) */
  .k-tweaks { bottom: 18px; }

  /* Itinéraires vélo : vignettes encore un peu plus grandes */
  .k-velo-itin-list { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
  .k-velo-itinerary__photos { width: 124px !important; }

  /* Photos Maison (accordéon) : plus hautes, proportions plus généreuses */
  .k-accordion-photo { height: 260px; }
  .k-accordion-photo .k-sp { height: 260px !important; } /* surpasse le height:180 inline */
}

/* ─────────────────────────────────────────────
   GRAND ÉCRAN  ·  ≥ 1500px
   Colonne un peu plus généreuse, 3 colonnes
   possibles pour les listes de cartes.
   ───────────────────────────────────────────── */
@media (min-width: 1500px) {
  .k-tab {
    padding-left: max(0px, calc((100% - 1180px) / 2));
    padding-right: max(0px, calc((100% - 1180px) / 2));
  }
}