/* ─── Mobile overrides — apply on top of pm-base.css ───
   Pages that include this stylesheet are sized for 320→768px viewports.
   We narrow paddings, stack grids, and shrink type. */

:root { --pm-edge: 20px; }

/* responsive #1 : fluide partout, ne pas geler à 390px (cassait iPad portrait + iPhones Plus/Pro Max) */
html, body { max-width: 100%; overflow-x: hidden; }

/* perf F1 : hero photo mobile sert 800.webp (-225KB vs 1600.webp) — !important bat le style inline */
.pm-hero-photo[style*="photo-deer-fur"] {
  background-image: url('../img/photos/photo-deer-fur-800.webp') !important;
}

/* Containers & sections */
.pm-container,
.pm-container--narrow,
.pm-container--reading { padding: 0 var(--pm-edge); }
.pm-container--reading > * { max-width: 100%; }
.pm-section { padding: 56px 0; }
.pm-section--sm { padding: 36px 0; }
.pm-section--lg { padding: 72px 0; }

/* Type — knock display sizes down */
/* Échelle mobile réduite -15% session #131 */
.pm-display-1 { font-size: 34px !important; line-height: 1.05 !important; }
.pm-display-2 { font-size: 28px !important; line-height: 1.08 !important; }
.pm-h1 { font-size: 24px !important; line-height: 1.1 !important; }
.pm-h2 { font-size: 20px !important; line-height: 1.15 !important; }
.pm-h3 { font-size: 16px !important; }
.pm-lead { font-size: 14px !important; }

/* HEADER — replace nav with burger */
.pm-header__inner {
  padding: 12px var(--pm-edge) !important;
  gap: 12px !important;
}
.pm-header .pm-nav,
.pm-header__phone { display: none !important; }
.pm-header__inner::after {
  content: "";
  margin-left: auto;
  width: 28px; height: 18px;
  background:
    linear-gradient(currentColor, currentColor) top / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) bottom / 100% 2px no-repeat;
  color: var(--pm-felix-the-cat);
}
/* HTML attribute width=113 + CSS height: 28 → ratio cassé. width: auto laisse le browser respecter le ratio source (2.36:1) à partir de height 28 → ~66px. */
.pm-header__inner > a:first-child img { height: 28px !important; width: auto !important; }

/* HERO — stack columns */
.pm-hero,
.pm-hero__inner,
[class*="hero"] [style*="grid-template-columns"] {
  grid-template-columns: 1fr !important;
}
.pm-hero { padding: 32px 0 48px !important; }

/* Hero with photo background — force cover so photo fills the whole section */
section[style*="photo-deer-fur"],
section[style*="photo-cat-fur"] {
  background-size: cover !important;
  background-position: center !important;
  min-height: 560px !important;
  padding-top: 56px !important;
  padding-bottom: 56px !important;
}

/* Generic — collapse 2/3/4-col grids */
[style*="grid-template-columns: 1fr 1fr"],
[style*="grid-template-columns:1fr 1fr"],
[style*="grid-template-columns: 1.25fr 1fr"],
[style*="grid-template-columns: 1.6fr 1fr"],
[style*="repeat(2, 1fr)"],
[style*="repeat(3, 1fr)"],
[style*="repeat(4, 1fr)"]:not(.pm-mob-carousel),
[style*="320px 1fr"],
[style*="minmax(220px, 320px) 1fr"] {
  grid-template-columns: 1fr !important;
  gap: 24px !important;
}

/* Carousel — horizontal scroll-snap on the "cas concrets" 4-up grid */
.pm-section--sm .pm-container > div:last-child[style*="repeat(4, 1fr)"] {
  display: flex !important;
  grid-template-columns: none !important;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 20px;
  gap: 12px !important;
  padding: 0 20px 8px !important;
  margin: 0 -20px !important;
  scrollbar-width: none;
}
.pm-section--sm .pm-container > div:last-child[style*="repeat(4, 1fr)"]::-webkit-scrollbar { display: none; }
.pm-section--sm .pm-container > div:last-child[style*="repeat(4, 1fr)"] > * {
  flex: 0 0 78%;
  scroll-snap-align: start;
}

/* Reassurance bar — 2x2 instead of single line */
.pm-reassure { padding: 20px 0 !important; }
.pm-reassure__inner {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px 20px !important;
  justify-items: start !important;
}
.pm-reassure__item {
  white-space: normal !important;
  font-size: 12px !important;
  align-items: flex-start;
}
.pm-reassure__icon { width: 28px !important; height: 28px !important; }
.pm-reassure__icon svg { width: 12px !important; height: 12px !important; }

/* App section — show only one phone, push back into frame */
#app .pm-container > div { gap: 32px !important; }
#app [style*="perspective"] {
  margin-right: 0 !important;
  justify-content: center !important;
  flex-wrap: wrap;
}
#app [style*="perspective"] > div:nth-child(2) { display: none !important; }

/* Trip types — toggles stack on top, content below */
#trajets .pm-container > div:last-child {
  padding: 0 !important;
}
#trajets [style*="320px 1fr"] {
  grid-template-columns: 1fr !important;
  gap: 16px !important;
}
#trajets [style*="320px 1fr"] > div:last-child {
  padding: 28px 22px !important;
}

/* Mobile — hide toggle buttons & desktop panel; show inline panels with icon next to title */
#trajets .pm-trip-panel-desktop { display: none !important; }
#trajets .pm-trip-button {
  display: none !important;
}
#trajets .pm-trip-panel-mobile {
  display: block !important;
  max-height: none !important;
  overflow: visible !important;
}
#trajets .pm-trip-panel-mobile__inner {
  margin-bottom: 12px !important;
  padding: 28px 24px !important;
}
#trajets .pm-trip-panel-mobile__inner h3 {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
}
/* The icon circle, injected via the original toggle's icon — render via ::after with inline data isn't possible.
   So instead: append an icon element in JSX. */

/* Footer */
.pm-footer .pm-container { padding: 48px 20px !important; }
.pm-footer__grid,
.pm-footer [style*="grid-template-columns"] {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 24px !important;
}
.pm-footer__grid > *:first-child,
.pm-footer [style*="grid-template-columns"] > *:first-child {
  grid-column: 1 / -1;
}

/* Forms — full-width inputs */
input, textarea, select { max-width: 100% !important; box-sizing: border-box; }
form [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

/* Simulator — stack vertically on mobile, button below as full-width pill */
.pm-sim {
  grid-template-columns: 1fr !important;
  border-radius: 18px !important;
  padding: 6px !important;
}
.pm-sim__field {
  padding: 14px 16px !important;
}
.pm-sim__field + .pm-sim__field {
  border-left: 0 !important;
  border-top: 1px solid var(--pm-cream-300) !important;
}
.pm-sim__cta {
  padding: 6px 0 0 !important;
}
.pm-sim__cta button {
  width: 100% !important;
  justify-content: center !important;
  padding: 18px 24px !important;
  font-size: 17px !important;
  border-radius: 14px !important;
}

/* Buttons — full width on key CTAs */
.pm-btn--lg { width: 100%; justify-content: center; }

/* Photos & placeholders — fill the whole surface on mobile */
.pm-placeholder,
[class*="placeholder"] {
  aspect-ratio: 16 / 10 !important;
}
.pm-placeholder img,
[class*="placeholder"] img,
section img:not([src*="logo"]):not([src*="wordmark"]):not([src*="icon"]) {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Blog cards / article body */
article img, .pm-card img, [class*="card"] img { max-width: 100% !important; height: auto !important; }

/* Article TOC — hide desktop sidebar, show mobile collapsible, collapse grid */
.pm-toc-desktop { display: none !important; }
.pm-toc-mobile { display: block !important; }
article > div[style*="grid-template-columns"][style*="var(--pm-edge)"] {
  display: block !important;
  padding: 0 var(--pm-edge) !important;
}
article > div[style*="grid-template-columns"][style*="var(--pm-edge)"] > div:empty { display: none !important; }

/* Article hero — tighten gap between header and breadcrumb */
article > section:first-of-type {
  padding-top: 20px !important;
  padding-bottom: 36px !important;
  min-height: 0 !important;
  align-items: flex-start !important;
}
article > section:first-of-type nav {
  margin-bottom: 14px !important;
}

/* ─── Mobile — Theme 2026 home overrides on clean classes ─── */

/* Header — show burger, hide desktop nav */
.pm-header__burger {
  display: inline-flex !important;
  align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: transparent; border: 0; cursor: pointer;
  padding: 0;
  margin-left: auto;
}
.pm-header__burger span {
  display: block; width: 22px; height: 2px;
  background: var(--pm-felix-the-cat);
  margin: 4px 0;
  transition: transform .25s, opacity .25s;
}
.pm-header__inner::after { display: none !important; }
.pm-header .pm-nav,
.pm-header__phone { display: none !important; }
/* CTA orange "Ouvrir l'app" visible dans le header mobile (à côté du burger). */
.pm-header__cta { margin-left: auto !important; }
.pm-header__cta .pm-btn--primary {
  display: inline-flex !important;
  padding: 10px 16px !important;
  font-size: 14px !important;
}

/* Mobile menu panel — slide-in depuis la droite + fade overlay */
.pm-mobile-menu {
  display: block !important;
  position: fixed; inset: 0;
  background: rgba(20,24,45,0);
  color: var(--pm-polar-bear);
  z-index: 100;
  pointer-events: none;
  transition: background .35s ease-out;
}
.pm-mobile-menu.is-open {
  background: rgba(20,24,45,0.96);
  pointer-events: auto;
}
.pm-mobile-menu[hidden] { display: none !important; }
.pm-mobile-menu__inner {
  display: flex; flex-direction: column;
  height: 100%;
  padding: 24px 20px 32px;
  gap: 24px;
  /* Slide-in depuis la droite */
  transform: translateX(24px);
  opacity: 0;
  transition: transform .4s cubic-bezier(.2,.7,.3,1), opacity .3s ease-out;
}
.pm-mobile-menu.is-open .pm-mobile-menu__inner {
  transform: translateX(0);
  opacity: 1;
}
.pm-mobile-menu__top {
  display: flex; justify-content: space-between; align-items: center;
}
.pm-mobile-menu__close {
  background: transparent; border: 0; color: var(--pm-polar-bear);
  font-size: 32px; line-height: 1; cursor: pointer; padding: 4px 12px;
  transition: transform .25s cubic-bezier(.2,.7,.3,1);
}
.pm-mobile-menu__close:hover,
.pm-mobile-menu__close:focus-visible {
  transform: rotate(90deg);
}
.pm-mobile-menu__nav { flex: 1; }
.pm-mobile-menu__list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.pm-mobile-menu__list li {
  /* Stagger : chaque item entre en cascade quand le panel est open */
  opacity: 0;
  transform: translateX(12px);
  transition: opacity .35s ease-out, transform .4s cubic-bezier(.2,.7,.3,1);
}
.pm-mobile-menu.is-open .pm-mobile-menu__list li {
  opacity: 1;
  transform: translateX(0);
}
.pm-mobile-menu.is-open .pm-mobile-menu__list li:nth-child(1) { transition-delay: .12s; }
.pm-mobile-menu.is-open .pm-mobile-menu__list li:nth-child(2) { transition-delay: .18s; }
.pm-mobile-menu.is-open .pm-mobile-menu__list li:nth-child(3) { transition-delay: .24s; }
.pm-mobile-menu.is-open .pm-mobile-menu__list li:nth-child(4) { transition-delay: .30s; }
.pm-mobile-menu.is-open .pm-mobile-menu__list li:nth-child(5) { transition-delay: .36s; }
.pm-mobile-menu.is-open .pm-mobile-menu__list li:nth-child(n+6) { transition-delay: .42s; }
.pm-mobile-menu__list a {
  display: block;
  padding: 16px 0;
  border-bottom: 1px solid rgba(249,247,232,0.12);
  color: var(--pm-polar-bear);
  text-decoration: none;
  font: var(--pm-text-h3);
  position: relative;
  transition: color .2s ease-out, padding-left .25s cubic-bezier(.2,.7,.3,1);
}
.pm-mobile-menu__list a:hover,
.pm-mobile-menu__list a:focus-visible {
  color: var(--pm-driver-skin);
  padding-left: 8px;
}
.pm-mobile-menu__cta {
  display: flex; flex-direction: column; gap: 16px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s ease-out .42s, transform .4s cubic-bezier(.2,.7,.3,1) .42s;
}
.pm-mobile-menu.is-open .pm-mobile-menu__cta {
  opacity: 1;
  transform: translateY(0);
}
.pm-mobile-menu__phone {
  text-align: center;
  color: var(--pm-driver-skin);
  font-size: 18px; font-weight: 600;
  text-decoration: none;
}

/* Respect reduced-motion (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
  .pm-mobile-menu,
  .pm-mobile-menu__inner,
  .pm-mobile-menu__list li,
  .pm-mobile-menu__cta,
  .pm-mobile-menu__close,
  .pm-mobile-menu__list a {
    transition: opacity .15s !important;
    transform: none !important;
    transition-delay: 0s !important;
  }
}

/* Hero photo — narrower, lower min-height */
.pm-hero-photo {
  background-size: cover !important;
  min-height: 560px !important;
  padding: 56px 0 !important;
}
.pm-hero-photo__title { font-size: 38px !important; }
.pm-hero-photo__lead { font-size: 14px !important; }
.pm-hero-photo__note { margin-left: 0 !important; }
.pm-hero-break { display: none !important; }
/* Monogramme chat : caché sur mobile pour libérer l'espace */
.pm-hero-photo::after { display: none !important; }

/* Section header centred — narrower */
.pm-section-header { margin-bottom: 36px !important; }

/* Photos cas concrets — flèches navigation masquées sur mobile (swipe natif) */
.pm-cas-nav { display: none !important; }

/* Photos cas concrets — horizontal scroll-snap */
.pm-cas-grid {
  display: flex !important;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 20px;
  gap: 12px !important;
  padding: 0 20px 8px !important;
  margin: 0 -20px !important;
  scrollbar-width: none;
}
.pm-cas-grid::-webkit-scrollbar { display: none; }
.pm-cas-grid > * {
  flex: 0 0 78%;
  scroll-snap-align: start;
}

/* Trip types — toggles + accordion mobile */
.pm-trip {
  grid-template-columns: 1fr !important;
  gap: 16px !important;
  padding: 0 !important;
}
.pm-trip-panels-desktop { display: none !important; }
.pm-trip-panel-mobile { display: block !important; }
.pm-trip-button { display: none !important; }

/* Process — stack en colonne */
.pm-process {
  grid-template-columns: 1fr !important;
  gap: 16px !important;
}

/* App section — stack, hide second phone */
.pm-app-section__inner {
  grid-template-columns: 1fr !important;
  gap: 32px !important;
}
.pm-app-section__title { font-size: 28px !important; }
.pm-app-section__phones {
  margin-right: 0 !important;
  justify-content: center !important;
}
.pm-app-section__phone--right { display: none !important; }

/* Témoignages slider — auto-scroll mobile */
.pm-testimonials { padding: 56px 0 !important; }
.pm-testimonials__header { margin-bottom: 28px !important; }
.pm-testimonials__title { font-size: 26px !important; }
.pm-testimonials__sub { font-size: 14px !important; }
.pm-testimonials__track { gap: 16px !important; }
.pm-testimonials__slide {
  flex: 0 0 86vw !important;
  max-width: 360px !important;
  padding: 18px 18px 16px !important;
  min-height: 160px !important;
  gap: 8px !important;
}
.pm-testimonials__quote { font-size: 12.5px !important; line-height: 1.5 !important; }
.pm-testimonials__author { font-size: 10px !important; }

/* Articles — head stack + grid 1 col */
.pm-articles__head {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 16px !important;
}
.pm-articles__grid {
  grid-template-columns: 1fr !important;
  gap: 24px !important;
}

/* Contact CTA form — full width */
.pm-contact-cta__form { padding: 24px 20px !important; border-radius: 16px !important; }

/* ═══════════════════════════════════════════════════════════════════
   SINGLE — Article mobile (Sprint 3 session #133)
   ═══════════════════════════════════════════════════════════════════ */

/* Hero compact */
.pm-single__hero {
  min-height: 320px !important;
  padding: 64px 0 36px !important;
}
.pm-single__title { font-size: 28px !important; line-height: 1.1 !important; }
.pm-single__lead { font-size: 14px !important; }
.pm-single__crumbs { font-size: 12px !important; }

/* Méta : auteur au-dessus, share centré dessous */
.pm-single__meta {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 16px !important;
}
.pm-single__share {
  margin-left: 0 !important;
  align-items: flex-start !important;
  width: 100%;
}

/* Body : single column, TOC desktop caché, TOC mobile visible.
   Le padding edge gauche/droite est conservé depuis pm-base.css (= 20px mobile). */
.pm-single__body--with-toc {
  grid-template-columns: 1fr !important;
  column-gap: 0 !important;
}
.pm-toc-desktop { display: none !important; }
.pm-toc-mobile { display: block; }

/* Prose plus serré */
.pm-prose { font-size: 16px !important; line-height: 1.7 !important; }
.pm-prose h2 { font-size: 22px !important; margin: 32px 0 12px !important; }
.pm-prose h3 { font-size: 17px !important; margin: 24px 0 10px !important; }
.pm-prose blockquote { font-size: 18px !important; margin: 24px 0 !important; padding-left: 18px !important; }

/* Encart : vertical (icon au-dessus) */
.pm-encart-cta {
  flex-direction: column !important;
  align-items: flex-start !important;
  padding: 20px !important;
  gap: 14px !important;
}
.pm-encart-cta__icon { width: 56px !important; }

/* CTA réservation : stack */
.pm-cta-reserve { padding: 48px 0 !important; }
.pm-cta-reserve__inner {
  grid-template-columns: 1fr !important;
  gap: 24px !important;
}
.pm-cta-reserve__deco { display: none !important; }
.pm-cta-reserve__title { font-size: 28px !important; }
.pm-cta-reserve__lead { font-size: 15px !important; }
.pm-cta-reserve__actions { flex-direction: column !important; align-items: stretch !important; }
.pm-cta-reserve__actions .pm-btn { width: 100% !important; }

/* Related : 1 colonne */
.pm-related__header {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 16px !important;
}
.pm-related__grid {
  grid-template-columns: 1fr !important;
  gap: 20px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   ARCHIVE — Blog index mobile (Sprint 4 session #133)
   ═══════════════════════════════════════════════════════════════════ */

.pm-archive__hero {
  min-height: 320px !important;
  padding: 56px 0 36px !important;
}
.pm-archive__title { font-size: 30px !important; line-height: 1.1 !important; }
.pm-archive__lead { font-size: 14px !important; }
.pm-archive__crumbs { font-size: 12px !important; }

/* Filtres : scroll horizontal au lieu de wrap */
.pm-blog-filters {
  flex-wrap: nowrap !important;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 -20px;
  padding: 0 20px;
  scroll-padding-left: 20px;
}
.pm-blog-filters::-webkit-scrollbar { display: none; }
.pm-blog-filters .pm-chip--button { flex-shrink: 0; }

/* Featured : 1 colonne, cover en premier */
.pm-featured-card {
  grid-template-columns: 1fr !important;
  gap: 16px !important;
  margin-bottom: 40px !important;
}
.pm-featured-card__cover { aspect-ratio: 16 / 10 !important; }
.pm-featured-card__title { font-size: 22px !important; }

/* Grid 1 colonne */
.pm-blog-grid {
  grid-template-columns: 1fr !important;
  gap: 32px !important;
}

/* Pagination : un peu plus compacte */
.pm-pagination { margin-top: 48px !important; gap: 4px !important; }
.pm-pagination__item .page-numbers {
  min-width: 36px !important;
  height: 36px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   PAGE — Template générique mobile (Sprint 5-bis session #133)
   ═══════════════════════════════════════════════════════════════════ */

.pm-page__hero { padding: 48px 0 36px !important; }
.pm-page__title { font-size: 26px !important; line-height: 1.1 !important; }
.pm-page__lead { font-size: 14px !important; }
.pm-page__crumbs { font-size: 12px !important; }

.pm-page__body { padding: 36px var(--pm-edge) 56px !important; }
.pm-page__body--with-toc {
  grid-template-columns: 1fr !important;
  column-gap: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   SECTION PRATIQUE (Phase 3 — Où + Combien)
   ═══════════════════════════════════════════════════════════════════ */
.pm-pratique { padding: 56px 0 !important; }
.pm-pratique__title { font-size: 30px !important; margin-bottom: 28px !important; }
.pm-pratique__grid {
  grid-template-columns: 1fr !important;
  gap: 20px !important;
}
.pm-pratique__card { padding: 24px 20px !important; }
.pm-pratique__h3 { font-size: 22px !important; }
.pm-pratique__list { font-size: 14px !important; line-height: 1.65 !important; }
.pm-pratique__aerogare { font-size: 13px !important; }
.pm-pratique__cta {
  width: 100% !important;
  text-align: center !important;
  padding: 14px 16px !important;
}

/* ─── Smooth scroll offset adapté au header sticky mobile (~64px) ─── */
html { scroll-padding-top: 76px !important; }