/**
 * Kanadenn Child — Responsive Fixes
 * Patch mobile-first couvrant P1+P2+P3 de l'audit responsive 2026-05-25.
 * Chargé APRÈS style.css ; surcharge ciblée, zéro régression.
 *
 * Breakpoints standardisés (mobile-first) :
 *   ≤ 360px  : ultra-small phones (iPhone SE 1, vieux Android)
 *   ≤ 480px  : phones
 *   ≤ 768px  : tablets portrait
 *   ≤ 1024px : tablets landscape / small desktops
 *   ≥ 1200px : large desktops
 */

/* ============================================================
   0. GLOBAL — Anti-overflow ciblé mobile uniquement
   (Les règles globales agressives ont été retirées pour ne pas
    casser le layout desktop / sticky positioning.)
   ============================================================ */
@media (max-width: 820px) {
  html, body {
    max-width: 100%;
    overflow-x: hidden;
  }
}

/* Médias : sécurité responsive sans toucher aux iframes vidéo
   (les iframes embed ont leur propre wrapper plus bas) */
img:not([width]), video, svg:not([width]) {
  max-width: 100%;
  height: auto;
}

/* ============================================================
   1. P1.1 — Carte sonore : éliminer overflow horizontal 100vw
   (On corrige UNIQUEMENT le débordement causé par
    style.css:3886 — la grille mobile est gérée par le plugin
    `kanadenn-carte-sonore` qui a 3 rangées : controls/map/panel.)
   ============================================================ */
body.page-carte-sonore #k-carte-wrapper {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Sur mobile : on AUGMENTE la hauteur de la zone carte (380px par défaut
   du plugin = trop court) pour profiter de l'écran */
@media (max-width: 768px) {
  body.page-carte-sonore #k-carte-wrapper {
    grid-template-rows: auto 60vh auto !important;
    height: auto !important;
  }
  body.page-carte-sonore #k-carte-map {
    min-height: 60vh !important;
    height: 100% !important;
  }
  body.page-carte-sonore #k-carte-panel {
    padding: 16px !important;
    max-height: 50dvh;
    overflow-y: auto;
  }
}

@media (max-width: 480px) {
  body.page-carte-sonore #k-carte-wrapper {
    grid-template-rows: auto 65vh auto !important;
  }
  body.page-carte-sonore #k-carte-map {
    min-height: 65vh !important;
  }
}

/* ============================================================
   2. P1.2 + P1.3 — Menu mobile : reset complet (annule le
   transform translate(-50%) hérité de style.css ligne 7820+)
   ============================================================ */
@media (max-width: 820px) {
  .kn-nav__menu {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    right: -110vw !important;
    width: min(340px, 100vw) !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    padding: 88px 24px 24px !important;
    gap: 0 !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #0a0014 !important;
    border-left: 1px solid rgba(255,255,255,0.06) !important;
    box-shadow: -8px 0 24px rgba(0,0,0,.5);
    z-index: 500 !important;
    transition: right .3s cubic-bezier(.65,.05,.36,1) !important;
    box-sizing: border-box !important;
  }
  .kn-nav__menu.is-open { right: 0 !important; }

  .kn-nav__link {
    display: flex !important;
    align-items: center !important;
    padding: 14px 4px !important;
    margin: 0 !important;
    width: 100% !important;
    font-size: clamp(15px, 4vw, 18px) !important;
    text-align: left !important;
    min-height: 44px;
    box-sizing: border-box !important;
    border-bottom: 1px solid rgba(255,255,255,0.04) !important;
  }

  /* Overlay : doit couvrir le contenu derrière le menu */
  .kn-nav__overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(5, 0, 12, .65) !important;
    z-index: 400 !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
  }
  .kn-nav__overlay.is-visible {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

@media (max-width: 480px) {
  .kn-nav__menu {
    width: 100vw !important;
    right: -110vw !important;
    padding: 80px 20px 24px !important;
  }
  .kn-nav__menu.is-open { right: 0 !important; }
}

/* P2.3 — Burger menu : touch target 44+ (mobile-only, NE PAS forcer display sur desktop) */
@media (max-width: 820px) {
  .kn-nav__burger {
    width: 44px !important;
    height: 44px !important;
    padding: 8px !important;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .kn-nav__burger { width: 48px !important; height: 48px !important; }
}

/* CTA header : compact en mobile */
@media (max-width: 640px) {
  .kn-nav__cta {
    padding: 8px 14px !important;
    font-size: 13px !important;
  }
}
@media (max-width: 420px) {
  .kn-nav__cta {
    display: none !important; /* gain de place, CTA disponible dans menu déroulé */
  }
}

.kn-nav__brand {
  font-size: clamp(18px, 5vw, 26px) !important;
}

/* ============================================================
   3. P1.4 — Hero homepage : tailles fluides mobile
   ============================================================ */
.kn-home-hero { min-height: 100dvh; }

@media (max-width: 720px) {
  .kn-home-hero__title {
    font-size: clamp(40px, 11vw, 72px) !important;
    line-height: 1.05 !important;
  }
  .kn-home-hero__sub {
    font-size: clamp(15px, 4vw, 20px) !important;
  }
  .kn-home-hero__eyebrow {
    font-size: clamp(11px, 3vw, 14px) !important;
  }
}

@media (max-width: 480px) {
  .kn-home-hero__title {
    font-size: clamp(34px, 9.5vw, 48px) !important;
  }
  .kn-home-hero__btn {
    padding: 14px 20px !important;
    font-size: 14px !important;
    width: 100% !important;
  }
  .kn-home-hero__actions {
    flex-direction: column !important;
    gap: 12px !important;
    width: 100%;
  }
}

/* ============================================================
   4. P1.5 — Grille « vedettes » & cards compositeurs
   ============================================================ */
.kn-grid--vedettes,
.kn-grid--compositeurs,
.kn-grid--oeuvres,
.kn-grid--productions {
  gap: clamp(12px, 2.4vw, 24px) !important;
}

@media (max-width: 540px) {
  .kn-grid--vedettes,
  .kn-grid--compositeurs,
  .kn-grid--oeuvres,
  .kn-grid--productions {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .kn-card {
    padding: 14px !important;
  }
  .kn-card__title {
    font-size: clamp(15px, 4vw, 18px) !important;
  }
  .kn-card__thumb,
  .kn-card__image {
    max-height: 260px;
    object-fit: cover;
  }
}

@media (min-width: 541px) and (max-width: 768px) {
  .kn-grid--vedettes,
  .kn-grid--compositeurs,
  .kn-grid--oeuvres {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ============================================================
   5. P1.6 — Sections : padding fluide
   ============================================================ */
.kn-section {
  padding: clamp(40px, 8vw, 96px) clamp(16px, 4vw, 56px) !important;
}

@media (max-width: 768px) {
  .kn-section {
    padding: clamp(32px, 6vw, 60px) clamp(14px, 4vw, 24px) !important;
  }
}

@media (max-width: 480px) {
  .kn-section {
    padding: 32px 14px !important;
  }
}

@media (max-width: 360px) {
  .kn-section {
    padding: 28px 12px !important;
  }
}

.kn-container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(14px, 4vw, 32px);
  box-sizing: border-box;
}

@media (max-width: 360px) {
  .kn-container { padding: 0 10px; }
}

/* ============================================================
   6. P1.7 — Frise / Chronologie : toolbar responsive
   ============================================================ */
.kn-frise-toolbar {
  padding: clamp(0.75rem, 2vh, 1rem) clamp(1rem, 4vw, 2rem) !important;
}

@media (max-width: 640px) {
  .kn-frise-toolbar__inner {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
  }
  .kn-frise-filters,
  .kn-frise-filters--right,
  .kn-frise-filters--left {
    width: 100% !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    justify-content: flex-start !important;
  }
  .kn-frise-search,
  .kn-frise-search input {
    width: 100% !important;
  }
  .kn-frise-period-btn,
  .kn-frise-toggle {
    flex: 1 1 auto;
    min-height: 40px;
    font-size: 13px !important;
  }
}

/* Chronologie : conteneur SVG/canvas scroll horizontal contrôlé */
.kn-chrono-wrap,
.kn-frise-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

@media (max-width: 768px) {
  .kn-chrono-svg,
  .kn-frise-svg {
    min-width: 720px;
  }
}

/* ============================================================
   7. P1.8 — Footer : 1 colonne sur ultra-small
   ============================================================ */
@media (max-width: 480px) {
  .kn-footer__container { grid-template-columns: 1fr !important; gap: 24px !important; }
  .kn-footer__stats-inner {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .kn-footer__stat-num {
    font-size: clamp(22px, 7vw, 30px) !important;
  }
  .kn-footer__stat-label {
    font-size: 13px !important;
  }
}

@media (min-width: 481px) and (max-width: 720px) {
  .kn-footer__stats-inner {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ============================================================
   8. P2.5 — Matrimoine layout
   ============================================================ */
.kn-matrimoine__inner {
  gap: clamp(24px, 5vw, 60px) !important;
}

@media (max-width: 800px) {
  .kn-matrimoine__inner {
    grid-template-columns: 1fr !important;
    gap: clamp(20px, 4vw, 40px) !important;
  }
  .kn-matrimoine__image,
  .kn-matrimoine__media {
    max-width: 100%;
    margin: 0 auto;
  }
}

/* ============================================================
   9. P2.6 — Filtres / SearchWP / FacetWP
   ============================================================ */
.kn-searchbar input,
.kn-facette__select,
.kn-facette select,
.facetwp-facet select,
.facetwp-facet input[type=text],
.facetwp-facet input[type=search] {
  min-height: 44px;
  font-size: 15px !important;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

@media (max-width: 640px) {
  .kn-searchbar {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .kn-facettes {
    flex-direction: column !important;
    gap: 12px !important;
  }
  .kn-facette {
    width: 100% !important;
  }
}

/* Chips / tags : touch target augmenté */
.kn-chip,
.facetwp-checkbox,
.facetwp-radio {
  min-height: 36px;
  padding: 8px 14px !important;
  display: inline-flex;
  align-items: center;
  line-height: 1.2;
}

@media (max-width: 480px) {
  .kn-chip,
  .facetwp-checkbox,
  .facetwp-radio { min-height: 40px; font-size: 13px !important; }
}

/* ============================================================
   10. P2.7 — Iframes vidéo : aspect-ratio wrapper
   ============================================================ */
.kn-fiche-oeuvre__iframe-wrap,
.kn-video-wrap,
.kn-youtube-wrap,
.kn-iframe-responsive {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 12px;
  background: #000;
}

.kn-fiche-oeuvre__iframe-wrap iframe,
.kn-video-wrap iframe,
.kn-youtube-wrap iframe,
.kn-iframe-responsive iframe {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0;
}

/* Embeds WordPress génériques */
.wp-block-embed iframe,
.wp-block-embed__wrapper iframe,
.entry-content iframe[src*="youtube"],
.entry-content iframe[src*="vimeo"] {
  width: 100% !important;
  aspect-ratio: 16 / 9;
  height: auto !important;
}

/* ============================================================
   11. P2.8 — Tailles de police globales en clamp()
   ============================================================ */
.kn-prose h1, .entry-content h1 { font-size: clamp(26px, 5.5vw, 40px) !important; line-height: 1.15; }
.kn-prose h2, .entry-content h2 { font-size: clamp(22px, 4.5vw, 32px) !important; line-height: 1.2; }
.kn-prose h3, .entry-content h3 { font-size: clamp(19px, 3.6vw, 26px) !important; line-height: 1.25; }
.kn-prose h4, .entry-content h4 { font-size: clamp(17px, 3vw, 22px) !important; line-height: 1.3; }
.kn-prose p, .entry-content p, .kn-prose li, .entry-content li {
  font-size: clamp(15px, 2.2vw, 17px) !important;
  line-height: 1.6;
}

.kn-section-title { font-size: clamp(22px, 4.2vw, 36px) !important; line-height: 1.2; }
.kn-section-eyebrow { font-size: clamp(11px, 2.4vw, 13px) !important; letter-spacing: 0.12em; }

/* ============================================================
   12. P2 — Single compositeur / œuvre : layout responsive
   ============================================================ */
@media (max-width: 900px) {
  .kn-fiche-compositeur,
  .kn-fiche-oeuvre,
  .kn-fiche__layout {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .kn-fiche__sidebar,
  .kn-fiche__aside {
    position: static !important;
    width: 100% !important;
    max-width: 100%;
    top: auto !important;
  }
  .kn-fiche__portrait,
  .kn-fiche-compositeur__portrait {
    max-width: 320px;
    margin: 0 auto;
  }
}

@media (max-width: 540px) {
  .kn-fiche-compositeur__header,
  .kn-fiche-oeuvre__header {
    flex-direction: column !important;
    text-align: center;
    gap: 16px !important;
  }
  .kn-fiche-compositeur__meta,
  .kn-fiche-oeuvre__meta {
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px !important;
  }
  .kn-fiche__tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    white-space: nowrap;
  }
  .kn-fiche__tab {
    flex: 0 0 auto;
    min-height: 44px;
  }
}

/* Tableaux dans fiches : scroll horizontal contrôlé */
.kn-prose table,
.entry-content table {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
}

/* ============================================================
   13. P3 — Polish général
   ============================================================ */

/* Boutons génériques : touch target 44+ */
.kn-btn,
.kn-cta,
.wp-block-button__link,
button.kn-button {
  min-height: 44px;
  padding: 12px 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
}

@media (max-width: 480px) {
  .kn-btn,
  .kn-cta,
  .wp-block-button__link {
    width: 100%;
    max-width: 100%;
  }
}

/* Liens cliquables dans listes : zone confortable */
.kn-list a,
.kn-nav-secondary a {
  padding: 10px 0;
  display: inline-block;
  min-height: 36px;
}

/* Sticky elements : disable sur mobile (problème UX) */
@media (max-width: 768px) {
  .kn-fiche__sidebar.is-sticky,
  .kn-sticky-mobile-off { position: static !important; top: auto !important; }
}

/* Modale / lightbox : fullscreen mobile */
@media (max-width: 600px) {
  .kn-modal,
  .kn-lightbox {
    width: 100vw !important;
    height: 100dvh !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }
}

/* Page 404 : centrage + tailles */
@media (max-width: 600px) {
  .kn-404__title { font-size: clamp(48px, 18vw, 96px) !important; }
  .kn-404__message { font-size: clamp(15px, 4vw, 18px) !important; }
}

/* Pages mediation/concert/radio : héro vidéo + cards */
@media (max-width: 768px) {
  .kn-mediation__hero,
  .kn-radio__hero,
  .kn-concert__hero {
    padding: clamp(32px, 6vw, 60px) clamp(14px, 4vw, 24px) !important;
    text-align: center;
  }
  .kn-mediation__grid,
  .kn-radio__grid,
  .kn-concert__grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* Search page : résultats en cards 1-col mobile */
@media (max-width: 640px) {
  .kn-search-results,
  .kn-search__results {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .kn-search-result {
    padding: 14px !important;
  }
}

/* Archives & taxonomies */
@media (max-width: 768px) {
  .kn-archive__header,
  .kn-taxonomy__header {
    padding: clamp(32px, 6vw, 60px) clamp(14px, 4vw, 24px) !important;
    text-align: center;
  }
  .kn-archive__title,
  .kn-taxonomy__title {
    font-size: clamp(24px, 6vw, 36px) !important;
  }
}

/* Helper accessibilité */
.kn-sr-only,
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   14. Anti-régression : empêcher overflow horizontal global
   ============================================================ */
.kn-section,
.kn-container,
.kn-grid,
.kn-card,
header.kn-nav,
footer.kn-footer {
  max-width: 100%;
}

/* Menu slide-out : pointer-events seulement quand fermé sur MOBILE (sinon casse les clics desktop) */
@media (max-width: 820px) {
  .kn-nav__menu:not(.is-open) {
    pointer-events: none;
  }
  .kn-nav__menu.is-open {
    pointer-events: auto;
  }
}

/* ============================================================
   15. Préférences utilisateur : reduce-motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ════════════════════════════════════════════════════════════
   16. AMÉLIORATIONS UX MOBILE — Correctifs ciblés du 2026-05-25
   ════════════════════════════════════════════════════════════ */

/* ─── A. Page Cartographie — toolbar #k-carte-controls ─── */
@media (max-width: 820px) {
  body.page-carte-sonore #k-carte-controls {
    padding: 10px 12px !important;
    overflow: hidden;
    box-sizing: border-box;
  }
  /* Ligne 1 : chips scrollables horizontalement */
  body.page-carte-sonore .k-controls-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding: 4px 0 8px;
    margin: 0 -12px;
    padding-left: 12px;
    padding-right: 12px;
  }
  body.page-carte-sonore .k-ctrl-chip {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    min-height: 38px;
    padding: 8px 14px !important;
    font-size: 13px !important;
  }
  body.page-carte-sonore .k-ctrl-sep { display: none !important; }
  body.page-carte-sonore .k-ctrl-label {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 12px !important;
    padding: 0 4px;
    align-self: center;
  }
  /* Ligne 2 : timeline — 2 rangées (label/count en haut, range en bas) */
  body.page-carte-sonore .k-controls-timeline {
    display: grid !important;
    grid-template-columns: auto 1fr 1fr auto !important;
    grid-template-areas:
      "label count count count"
      "min   from to    max" !important;
    gap: 6px 8px !important;
    padding: 10px 4px !important;
    font-size: 12px !important;
    align-items: center;
  }
  body.page-carte-sonore .k-tl-label { grid-area: label; }
  body.page-carte-sonore .k-tl-count {
    grid-area: count;
    text-align: right;
    font-size: 11px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body.page-carte-sonore .k-tl-min { grid-area: min; font-size: 11px; }
  body.page-carte-sonore .k-tl-max { grid-area: max; font-size: 11px; }
  body.page-carte-sonore #k-tl-from { grid-area: from; min-width: 0 !important; }
  body.page-carte-sonore #k-tl-to { grid-area: to; min-width: 0 !important; }
}

@media (max-width: 480px) {
  body.page-carte-sonore .k-ctrl-chip {
    font-size: 12px !important;
    padding: 7px 12px !important;
  }
  body.page-carte-sonore .k-controls-timeline {
    grid-template-columns: auto 1fr auto !important;
    grid-template-areas:
      "label count count"
      "min   from  max"
      "min   to    max" !important;
  }
}

/* ─── B. Page Compositeurs — facettes en drawer mobile (renforcé) ─── */
@media (max-width: 900px) {
  /* Le drawer doit être hors écran par défaut, peu importe quel CSS le casse */
  .kn-facettes {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: -100% !important;
    width: min(320px, 88vw) !important;
    max-width: 88vw !important;
    height: 100dvh !important;
    z-index: 450 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    background: #0a0318 !important;
    padding: 80px 20px 24px !important;
    box-shadow: 4px 0 24px rgba(0,0,0,.6) !important;
    transition: left .3s cubic-bezier(.65,.05,.36,1) !important;
    box-sizing: border-box;
  }
  .kn-facettes.open,
  .kn-facettes.is-open {
    left: 0 !important;
  }
  /* Bouton flottant "Filtres" : on RESPECTE le style original
     (position: fixed; bottom: 24px; right: 24px;) défini inline
     dans search-kanadenn.php. On force juste display + dimensions. */
  #kn-toggle-filters.kn-toggle-filters {
    display: inline-flex !important;
    position: fixed !important;
    bottom: 24px !important;
    right: 24px !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    min-height: 48px !important;
    max-width: none !important;
    padding: 12px 22px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    z-index: 300 !important;
    margin: 0 !important;
  }
  /* Quand le drawer est ouvert, on cache le bouton (évite chevauchement) */
  body:has(.kn-facettes.open) #kn-toggle-filters,
  body:has(.kn-facettes.is-open) #kn-toggle-filters {
    opacity: 0;
    pointer-events: none;
  }
  /* Layout search : full width (sans place pour sidebar fixe car en drawer) */
  .kn-search-layout {
    grid-template-columns: 1fr !important;
    padding: 16px 0 60px !important;
    gap: 0 !important;
  }
  /* Overlay quand drawer ouvert */
  .kn-facettes::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(5,0,12,.55);
    z-index: -1;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
  }
}

/* ─── C. Cards compositeur — layout HORIZONTAL compact sur mobile
   (photo gauche carrée 120px, infos à droite — façon liste) ─── */
@media (max-width: 640px) {
  .kn-grid--results {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .kn-card {
    display: grid !important;
    grid-template-columns: 120px 1fr !important;
    align-items: stretch !important;
    padding: 0 !important;
    min-height: 120px;
    overflow: hidden;
  }
  .kn-card__link {
    display: grid !important;
    grid-template-columns: 120px 1fr !important;
    align-items: stretch !important;
    width: 100%;
  }
  .kn-card__thumb,
  .kn-card__thumb--placeholder {
    aspect-ratio: 1 / 1 !important;
    width: 120px !important;
    height: 120px !important;
    min-height: 120px !important;
    max-height: 120px !important;
    flex: 0 0 120px !important;
  }
  .kn-card__initial {
    font-size: 40px !important;
  }
  .kn-card__body {
    padding: 12px 14px !important;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
  }
  .kn-card__title {
    font-size: 15px !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    /* Truncate long names */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .kn-card__dates {
    font-size: 12px !important;
    margin: 0 !important;
    opacity: .75;
  }
  .kn-card__tags {
    font-size: 11px !important;
    margin: 0 !important;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }
  .kn-tag,
  .kn-tag--dept {
    font-size: 10px !important;
    padding: 2px 8px !important;
  }
  /* Badge période : plus petit + bien collé en haut */
  .kn-card__periode-bar {
    top: 6px !important;
    left: 6px !important;
    padding: 3px 8px !important;
    font-size: 9px !important;
    letter-spacing: 0.05em;
  }
  .kn-card__periode-bar span {
    font-size: 9px !important;
  }
}

/* Tablette 641-768 : 2 colonnes verticales classiques */
@media (min-width: 641px) and (max-width: 768px) {
  .kn-grid--results {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  .kn-card__thumb,
  .kn-card__thumb--placeholder {
    aspect-ratio: 1 / 1 !important;
    width: auto !important;
    height: auto !important;
  }
}

/* ─── D. Page Chronologie — éviter overflow droite & toolbar lisible ─── */
@media (max-width: 820px) {
  /* Stage et canvas : scrollable horizontalement */
  .kn-chrono-stage {
    padding: 0 !important;
    margin: 1rem auto !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    max-width: 100vw;
  }
  .kn-chrono-canvas {
    min-height: 420px !important;
    min-width: 720px;  /* force scroll horizontal pour révéler les noeuds */
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }
  /* Toolbar : déjà en colonne par chronologie.css, on renforce */
  .kn-chrono-toolbar {
    padding: 0.75rem 1rem !important;
  }
  .kn-chrono-toolbar__inner {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
  }
  .kn-chrono-filters {
    flex-wrap: wrap !important;
    gap: 0.4rem !important;
  }
  .kn-chrono-filters--right {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
  }
  .kn-chrono-search,
  .kn-chrono-search input {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    min-height: 40px;
  }
  .kn-chrono-title { font-size: clamp(28px, 7vw, 44px) !important; }
  .kn-chrono-lede  { font-size: clamp(14px, 3.5vw, 17px) !important; }
  .kn-chrono-hero { padding: 1.5rem 1rem !important; text-align: center; }
  .kn-chrono-count { font-size: 12px !important; }
  /* Labels SVG : un peu plus petits */
  .kn-chrono-canvas text { font-size: 11px; }
}

@media (max-width: 480px) {
  .kn-chrono-canvas {
    min-width: 640px;
    min-height: 380px !important;
  }
}

/* ─── E. Header Cartographie — eyebrow & titre ─── */
@media (max-width: 640px) {
  body.page-carte-sonore .kn-page__header,
  body.page-carte-sonore .kn-eyebrow {
    text-align: center;
    padding: 24px 16px 12px !important;
  }
  body.page-carte-sonore h1.kn-page__title {
    font-size: clamp(32px, 9vw, 54px) !important;
  }
  body.page-carte-sonore .kn-eyebrow {
    font-size: clamp(11px, 3vw, 13px) !important;
    line-height: 1.4;
  }
}

/* Fin du fichier — responsive-fixes.css */