/* Michel Lelong's Music House — static rebuild stylesheet
   Visual design: TwentySixteen — white content area, #6f8db7 header/sidebar.
   Layout: two-column (content 70% + sidebar 25%) matching the live WP site.
*/

/* ============================================================
   Reset & base
   ============================================================ */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: Merriweather, Georgia, "Times New Roman", serif;
  font-size: 1rem;
  line-height: 1.75;
  color: #1a1a1a;
  background: #d1d1d1;
}

a { color: #1a1a1a; text-decoration: underline; }
a:hover, a:focus { color: #000; }

img { max-width: 100%; height: auto; display: block; }

h1, h2 {
  font-family: Boogaloo, "Comic Sans MS", cursive;
  font-weight: 400;
  line-height: 1.3;
  margin: 1.5rem 0 0.75rem;
  color: #1a1a1a;
}
h3, h4, h5, h6 {
  font-family: Boogaloo, "Comic Sans MS", cursive;
  font-weight: 400;
  line-height: 1.3;
  margin: 1.5rem 0 0.75rem;
  color: #1a1a1a;
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.1rem; }
h4 { font-size: 1rem; }

p { margin: 0 0 1rem; }

ul, ol { margin: 0 0 1rem 1.5rem; }
li { margin-bottom: 0.25rem; }

blockquote {
  border-left: 4px solid #6f8db7;
  background: rgba(111, 141, 183, 0.08);
  border-radius: 0 4px 4px 0;
  margin: 1.5rem 0;
  padding: 1rem 1.5rem;
  color: inherit;
  font-style: normal;
}
blockquote h2, blockquote h3, blockquote h4 {
  margin-top: 0.5rem;
}
blockquote > *:first-child { margin-top: 0; }

table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.9rem;
  background-color: #ffffff;
}
th, td {
  border: 1px solid rgba(0, 0, 0, 0.2);
  padding: 0.5rem 0.75rem;
  text-align: left;
}
th { background: rgba(0, 0, 0, 0.08); font-weight: 700; }
tr:nth-child(even) { background: rgba(0, 0, 0, 0.04); }

hr { border: none; border-top: 1px solid rgba(0, 0, 0, 0.15); margin: 2rem 0; }

audio { width: 100%; margin: 0.5rem 0; }

.btn {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  background: #1a1a1a;
  color: #ffffff;
  text-decoration: none;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 1rem;
  font-family: inherit;
  transition: background 0.2s;
  font-weight: 400;
}
.btn:hover { background: #333; color: #ffffff; }

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 100000;
}
.skip-link:focus {
  position: fixed;
  top: 8px;
  left: 8px;
  width: auto;
  height: auto;
  padding: 0.5rem 1rem;
  background: #ffffff;
  color: #1a1a1a;
  font-size: 0.875rem;
  font-weight: 400;
  text-decoration: none;
  border-radius: 3px;
  z-index: 100001;
}

/* ============================================================
   Page & site wrapper — TwentySixteen structure
   Blue #6f8db7 throughout (matches live site); dark text #1a1a1a = 5.11:1 ✓ WCAG AA.
   ============================================================ */
#page.site {
  background-color: #6f8db7;
  color: #1a1a1a;
  max-width: 90%;
  margin: 0 auto;
  min-height: 100vh;
}

/* White content background */
#primary.content-area {
  background: #fff;
}

.site-inner {
  /* inner container — no extra padding; sections handle their own */
}

/* ============================================================
   Header — blue #6f8db7 background, site branding + header image
   ============================================================ */
.site-header {
  background-color: #6f8db7;
  padding: 2rem 2.5rem;
}

.site-header-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.site-branding { flex: 1; }

.site-title {
  font-family: Boogaloo, "Comic Sans MS", cursive;
  font-size: 1.5rem;
  font-weight: 400;
  margin: 0;
  line-height: 1.2;
}

/* Site title: 24px normal = large text; #fcfcfc on #6f8db7 = 3.12:1 ≥ 3:1 large text AA ✓ */
.site-title a {
  color: #fcfcfc;
  text-decoration: none;
}
.site-title a:hover { color: #fff; text-decoration: underline; }

/* Site description: small italic — use dark (#1a1a1a) on #6f8db7 = 5.26:1 ✓ */
.site-description {
  font-size: 0.85rem;
  color: #1a1a1a;
  font-style: italic;
  margin: 0.25rem 0 0;
}

/* Header controls: hamburger + lang switcher — dark text on blue bg = 5.26:1 ✓ */
.header-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.hamburger {
  display: none;
  background: none;
  border: 1px solid rgba(0, 0, 0, 0.3);
  cursor: pointer;
  padding: 0.4rem 0.6rem;
  color: #1a1a1a;
  font-size: 1.25rem;
  line-height: 1;
  border-radius: 3px;
}
.hamburger:hover { background: rgba(0, 0, 0, 0.1); }

.lang-switcher {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.lang-switcher a, .lang-switcher span {
  font-family: Boogaloo, "Comic Sans MS", cursive;
  font-size: 0.85rem;
  font-weight: 400;
  padding: 0.25rem 0.5rem;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 3px;
  text-decoration: none;
  color: #1a1a1a;
}
.lang-switcher a:hover { background: rgba(0, 0, 0, 0.1); }
.lang-switcher a.active,
.lang-switcher span.active {
  background: rgba(0, 0, 0, 0.1);
  border-color: #1a1a1a;
}

/* Header image — full width below site-header-main */
.header-image {
  width: 100%;
  overflow: hidden;
  margin-top: 0.5rem;
}
.header-image img {
  width: 100%;
  object-fit: cover;
  display: block;
  max-height: 373px;
}

/* ============================================================
   Two-column content layout
   ============================================================ */
.site-content {
  display: flex;
  align-items: flex-start;
  gap: 0;
  overflow: hidden;
}

.content-area {
  flex: 1;
  min-width: 0;
  padding-top: 2.5rem;
  padding-bottom: 3rem;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

.site-main { /* no extra margin needed */ }

.page-content {
  padding: 0;
}

.page-subtitle {
  font-size: 1rem;
  color: #444;
  margin-top: -0.25rem;
  margin-bottom: 1.25rem;
  font-style: italic;
}

/* Article-level spacing */
.page-content > * + * { margin-top: 0; }
.page-content h1:first-child { margin-top: 0; }

/* Sections with WP block columns can escape the 72ch limit */
.page-content > div:has(div[style*="display: flex"]) {
  max-width: none;
}

/* ============================================================
   Sidebar (right column) — light #f4f6f9 background, blue widget titles
   ============================================================ */
.sidebar.widget-area {
  background-color: #f4f6f9;
  border-left: 1px solid rgba(111, 141, 183, 0.2);
  width: 28%;
  min-width: 200px;
  flex-shrink: 0;
  padding-top: 1.5rem;
  padding-bottom: 2rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.widget {
  margin-bottom: 2rem;
}

/* Hide "Menu FR" / "Menu EN" widget title — redundant label */
.widget_nav_menu .widget-title { display: none; }

.widget-title {
  font-family: Boogaloo, "Comic Sans MS", cursive;
  font-size: 0.85rem;
  font-weight: 400;
  background: #6f8db7;
  color: #fff;
  margin: 0 -1.5rem 0.75rem;
  padding: 0.4rem 0.75rem;
}

/* Sidebar navigation — vertical list */
.sidebar .menu,
.sidebar .sub-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
}

/* Top-level items — fond bleu comme des en-têtes de section */
.sidebar .menu > li {
  border-bottom: none;
}
.sidebar .menu > li > a {
  display: block;
  padding: 0.35rem 0.75rem;
  margin: 0 -1.5rem 0;
  background: #6f8db7;
  color: #fff;
  text-decoration: none;
  font-family: Merriweather, Georgia, serif;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.35;
}
.sidebar .menu > li > a:hover { background: #5a7aa0; }
.sidebar .menu > li.current-menu-item > a { background: #4d6b8f; }

/* Level 2 sub-menu */
.sidebar .menu > li > .sub-menu {
  padding: 0.25rem 0 0.35rem 0.75rem;
  border-left: 2px solid rgba(111,141,183,0.3);
  margin-left: 0;
  margin-bottom: 0.15rem;
}
.sidebar .menu > li > .sub-menu > li {
  border-bottom: none;
}
.sidebar .menu > li > .sub-menu > li > a {
  display: block;
  padding: 0.2rem 0;
  color: #1a1a1a;
  text-decoration: none;
  font-family: Merriweather, Georgia, serif;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.4;
}
.sidebar .menu > li > .sub-menu > li > a:hover { text-decoration: underline; }

/* Level 3 — small, subtle */
.sidebar .sub-menu .sub-menu {
  padding-left: 0.6rem;
  border-left: 1px solid rgba(0,0,0,0.1);
}
.sidebar .sub-menu .sub-menu li a {
  font-size: 0.7rem;
  color: rgba(26,26,26,0.7);
  padding: 0.15rem 0;
  font-family: Merriweather, Georgia, serif;
}

/* Level 4 — hidden, too deep */
.sidebar .sub-menu .sub-menu .sub-menu {
  display: none;
}

/* ============================================================
   Footer
   ============================================================ */
#colophon.site-footer {
  background: transparent;
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  color: #1a1a1a;
  padding: 2rem 2.5rem;
  font-size: 0.875rem;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

/* .footer-heading replaces <h4> in footer to avoid heading-order Lighthouse violation */
.footer-section .footer-heading {
  color: #1a1a1a;
  font-family: Boogaloo, "Comic Sans MS", cursive;
  font-size: 0.9rem;
  font-weight: 400;
  margin: 0 0 0.75rem;
}

.footer-section a { color: #1a1a1a; }
.footer-section a:hover { color: #000; text-decoration: underline; }

.footer-copy {
  margin-top: 1rem;
  text-align: center;
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  padding-top: 1rem;
  color: #1a1a1a;
  font-size: 0.8rem;
}
.footer-copy a { color: #1a1a1a; }
.footer-copy a:hover { color: #000; }

/* ============================================================
   Gallery
   ============================================================ */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.4rem;
  margin: 1rem 0 2rem;
}

.gallery-grid a,
.gallery-grid figure { display: block; overflow: hidden; border-radius: 4px; margin: 0; }
.gallery-grid img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  transition: transform 0.25s;
  display: block;
}
.gallery-grid a:hover img,
.gallery-grid figure:hover img { transform: scale(1.06); }
.gallery-grid figcaption {
  font-size: 0.75rem;
  color: #555;
  padding: 0.25rem 0.35rem;
  font-style: italic;
  line-height: 1.3;
}

/* Gallery page gets wider content area */
.page-gallery .page-content {
  max-width: none;
}

/* ============================================================
   Audio page
   ============================================================ */
.page-audio audio {
  width: 100%;
  margin: 0.25rem 0 1rem;
}

/* ============================================================
   Guestbook
   ============================================================ */
.guestbook-entry {
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  padding: 1.25rem 0;
}

.guestbook-entry:last-child { border-bottom: none; }

.guestbook-author {
  font-weight: 400;
  font-family: Boogaloo, "Comic Sans MS", cursive;
  font-size: 0.9rem;
  color: #1a1a1a;
}

.guestbook-date {
  font-size: 0.8rem;
  color: #1a1a1a;
  margin-left: 0.5rem;
}

.guestbook-text {
  margin-top: 0.5rem;
  line-height: 1.65;
}

.guestbook-pagination {
  display: flex;
  gap: 0.5rem;
  margin: 1.5rem 0;
  flex-wrap: wrap;
}

.guestbook-pagination a,
.guestbook-pagination span {
  padding: 0.4rem 0.8rem;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 3px;
  text-decoration: none;
  color: #1a1a1a;
  font-family: Boogaloo, "Comic Sans MS", cursive;
  font-size: 0.85rem;
}

.guestbook-pagination span.current {
  background: rgba(255, 255, 255, 0.15);
  border-color: #1a1a1a;
}

.guestbook-form-section { margin-top: 2rem; }
.guestbook-form-section h3 { margin-bottom: 1rem; }

.form-group { margin-bottom: 1rem; }
.form-group label { display: block; font-weight: 600; margin-bottom: 0.35rem; font-size: 0.9rem; }
.form-group input,
.form-group textarea {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 3px;
  font-size: 1rem;
  font-family: inherit;
  background: #ffffff;
  color: #1a1a1a;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: #595959; }
.form-group textarea { resize: vertical; }

/* ============================================================
   PayPal catalog
   ============================================================ */
.paypal-form {
  display: inline-block;
  margin: 0.25rem 0;
}
.paypal-form input[type="image"] {
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
}

/* ============================================================
   Petit Futé widget
   ============================================================ */
#fileContent_240085 { text-align: center; margin: 1rem 0; }

/* ============================================================
   Leaflet map
   ============================================================ */
.leaflet-container { border-radius: 4px; }

/* ============================================================
   Responsive — mobile
   ============================================================ */
@media (max-width: 768px) {
  h1 { font-size: 1.4rem; }
  h2 { font-size: 1.1rem; }

  /* Show hamburger on mobile */
  .hamburger { display: block; }

  .site-content {
    flex-direction: column;
    padding: 0;
  }

  .content-area {
    width: 100%;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    border-right: none;
  }

  /* Sidebar hidden off-screen on mobile, slides in as drawer */
  .sidebar.widget-area {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    max-width: 320px;
    height: 100%;
    overflow-y: auto;
    z-index: 999;
    background: #f4f6f9;
    border-left: 2px solid #6f8db7;
    padding: 1.5rem 1.25rem;
    transition: right 0.25s ease;
    min-width: 0;
  }

  .sidebar.widget-area.mobile-open {
    right: 0;
  }

  .widget-title {
    margin-left: -1.25rem;
    margin-right: -1.25rem;
  }

  .footer-inner { flex-direction: column; }
}

@media (max-width: 480px) {
  .site-title { font-size: 1.1rem; }
  .site-header { padding: 1rem 4.5%; }
}

/* ============================================================
   Utility
   ============================================================ */
.text-center { text-align: center; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mb-1 { margin-bottom: 1rem; }

.guestbook-loading { color: #1a1a1a; font-style: italic; }

/* Hide elements based on language switcher availability */
.lang-switch-hidden { display: none !important; }

/* ============================================================
   WordPress / Gutenberg block patterns cleanup
   The scraper preserved WP block HTML; we style it to look clean.
   ============================================================ */

/* Figure+caption pattern: <div><figure>…</figure><div><p>caption</p></div></div> */
.page-content > div > figure,
.page-content > div > div > figure {
  margin: 0;
}

.page-content > div > figure + div,
.page-content > div > div > figure + div {
  font-size: 0.85rem;
  color: #555;
  font-style: italic;
  margin-top: 0.35rem;
  margin-bottom: 1.25rem;
}

/* Figure+caption blocks: stack vertically — image full width, caption below */
.page-content > div:has(> figure) {
  margin: 1.75rem 0;
}
.page-content > div:has(> figure) figure {
  margin: 0;
}
.page-content > div:has(> figure) figure img {
  width: 100%;
  border-radius: 4px;
}
.page-content > div:has(> figure) > div {
  font-size: 0.82rem;
  color: #555;
  font-style: italic;
  margin-top: 0.4rem;
  line-height: 1.4;
  padding: 0 0.25rem;
}

/* Group blocks from Gutenberg */
.wp-block-group__inner-container {
  /* strip the nesting */
}

/* Generic nested div blocks — normalize display */
.page-content > div > div[style*="flex-basis:100%"] {
  width: 100%;
}

/* Inline flex columns (FR/EN testimonials on home) */
.page-content div[style*="display: flex"] {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

/* The testimonials wrapper needs a bit more room */
.page-content > div > div[style*="flex-basis:100%"] > div > div[style*="display: flex"] {
  max-width: none;
}

/* WP button block */
.wp-block-button__link,
.wp-element-button {
  display: inline-block;
  padding: 0.6rem 1.5rem;
  background: #1a1a1a;
  color: #fff !important;
  text-decoration: none !important;
  border-radius: 3px;
  font-family: Boogaloo, "Comic Sans MS", cursive;
  font-size: 0.9rem;
  font-weight: 400;
  transition: background 0.2s;
}
.wp-block-button__link:hover,
.wp-element-button:hover {
  background: #333;
}

/* Centered button wrapper */
.is-content-justification-center {
  text-align: center;
  margin: 1.5rem 0;
}

/* Deprecated <center> tag */
center {
  display: block;
  text-align: center;
  margin: 1rem 0;
}

/* Resized figure from Gutenberg */
figure.is-resized {
  display: inline-block;
  margin: 1rem 0;
}

/* ============================================================
   Content images
   ============================================================ */

/* Images directly in paragraphs — float right for portrait shots */
.page-content p > img:only-child {
  float: right;
  margin: 0 0 1rem 1.5rem;
  border-radius: 3px;
  max-width: 260px;
}

/* Full-width standalone figures */
.page-content > figure {
  margin: 1.5rem 0;
}
.page-content > figure img {
  width: 100%;
  border-radius: 3px;
}
.page-content > figure figcaption {
  font-size: 0.85rem;
  color: #555;
  font-style: italic;
  margin-top: 0.4rem;
}

/* ============================================================
   Guestbook author line
   ============================================================ */
.guestbook-author-line {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.35rem;
}

/* ============================================================
   Sidebar — flatten deep nesting visually
   ============================================================ */
.sidebar .sub-menu .sub-menu {
  padding-left: 0.5rem;
  border-left: 2px solid rgba(111,141,183,0.25);
  margin-top: 0.2rem;
}
.sidebar .sub-menu .sub-menu .sub-menu {
  display: none; /* hide 4th-level menus — too deep */
}

/* WP "media on right" block */
.has-media-on-the-right {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: start;
  margin: 1.5rem 0;
}

/* Sidebar heading cleanup */
.sidebar .widget-title {
  text-transform: none;
  font-size: 0.75rem;
  letter-spacing: 0.03em;
}

/* Header image: reduce max-height slightly — too tall */
.header-image img {
  max-height: 260px;
}

/* Give h1 on page a stronger visual anchor */
.page-content h1 {
  font-size: 1.6rem;
  border-bottom: 2px solid rgba(111, 141, 183, 0.35);
  padding-bottom: 0.6rem;
  margin-top: 0;
  margin-bottom: 1.25rem;
}

/* h2 — section dividers with a subtle left accent */
.page-content h2 {
  font-size: 1.15rem;
  margin-top: 2.25rem;
  margin-bottom: 0.6rem;
  padding-left: 0.75rem;
  border-left: 3px solid #6f8db7;
}

/* h3 — lighter, no border */
.page-content h3 {
  font-size: 1rem;
  margin-top: 1.5rem;
  margin-bottom: 0.4rem;
  color: #333;
}

/* h4 — run-in label style */
.page-content h4 {
  font-size: 0.9rem;
  margin-top: 1.25rem;
  margin-bottom: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #555;
}

/* Tighten consecutive headings */
.page-content h2 + p,
.page-content h3 + p,
.page-content h1 + p { margin-top: 0; }

/* Clearfix for floated images */
.page-content::after {
  content: "";
  display: table;
  clear: both;
}

/* ============================================================
   Mobile adjustments for block patterns
   ============================================================ */
@media (max-width: 768px) {
  .page-content div[style*="display: flex"] {
    grid-template-columns: 1fr !important;
  }

  .page-content p > img:only-child {
    float: none;
    margin: 1rem 0;
    max-width: 100%;
  }

  .has-media-on-the-right {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Design system components (shared)
   ============================================================ */

/* page-hero */
.page-content .page-hero {
  margin: 0 0 2rem;
  padding: 2rem 2rem;
  background: linear-gradient(135deg, rgba(111,141,183,0.15) 0%, rgba(111,141,183,0.05) 100%);
  border-bottom: 1px solid rgba(111,141,183,0.2);
  border-radius: 6px;
}
.page-content .page-hero h1 { margin: 0 0 0.5rem; border-bottom: none; padding-bottom: 0; }
.page-content .page-hero .page-subtitle {
  margin: 0;
  color: #555;
  font-size: 1rem;
  font-style: italic;
}

/* section-lead */
.section-lead {
  font-size: 1.05rem;
  color: #444;
  line-height: 1.75;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(111,141,183,0.2);
}

/* info-banner */
.info-banner {
  background: rgba(111,141,183,0.10);
  border-left: 4px solid #6f8db7;
  border-radius: 0 6px 6px 0;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.info-banner .info-icon { font-size: 1.2rem; flex-shrink: 0; line-height: 1.6; }
.info-banner p { margin: 0; font-size: 0.95rem; }

/* contact-strip */
.contact-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  background: #6f8db7;
  color: #fff;
  border-radius: 6px;
  padding: 1rem 1.5rem;
  margin: 1.5rem 0;
  font-family: Boogaloo, cursive;
  font-size: 1rem;
}
.contact-strip a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.5); }
.contact-strip a:hover { border-bottom-color: #fff; }
.contact-strip .contact-item { display: flex; align-items: center; gap: 0.4rem; }

/* location-card / location-grid */
.location-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin: 1.5rem 0;
}
.location-card {
  border: 1px solid rgba(111,141,183,0.25);
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
}
.location-card-header {
  background: #6f8db7;
  color: #fff;
  padding: 0.75rem 1rem;
  font-family: Boogaloo, cursive;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
}
.location-card-body { padding: 1rem 1.25rem 1.25rem; }
.location-card-body .location-address { margin: 0 0 0.85rem; font-size: 0.95rem; line-height: 1.55; }
.location-map {
  width: 100%;
  height: 260px;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 4px;
  margin: 0.25rem 0 0.85rem;
}
.location-actions { margin: 0; font-size: 0.9rem; }
.location-actions a {
  display: inline-block;
  padding: 0.4rem 0.85rem;
  border: 1px solid #6f8db7;
  border-radius: 4px;
  color: #6f8db7;
  text-decoration: none;
  font-family: Boogaloo, cursive;
  transition: background 0.15s, color 0.15s;
}
.location-actions a:hover { background: #6f8db7; color: #fff; }


/* ============================================================
   Galerie photo — composants mlmh- (round 1)
   ============================================================ */
.mlmh-gallery-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.25rem 0 2rem;
  padding: 0.75rem 1rem;
  background: rgba(111,141,183,0.08);
  border-radius: 6px;
}
.mlmh-gallery-nav a {
  display: inline-block;
  padding: 0.35rem 0.85rem;
  background: #fff;
  color: #6f8db7;
  border: 1px solid rgba(111,141,183,0.3);
  border-radius: 999px;
  font-family: Boogaloo, cursive;
  font-size: 0.95rem;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.mlmh-gallery-nav a:hover,
.mlmh-gallery-nav a:focus {
  background: #6f8db7;
  color: #fff;
}

.mlmh-gallery-section {
  margin: 2rem 0 2.5rem;
  scroll-margin-top: 1rem;
}
.mlmh-gallery-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  border-bottom: 2px solid rgba(111,141,183,0.25);
  padding-bottom: 0.4rem;
  margin-bottom: 0.5rem;
}
.mlmh-gallery-section-header h2 {
  margin: 0;
  border-bottom: none;
  padding-bottom: 0;
}
.mlmh-gallery-count {
  font-family: Inconsolata, monospace;
  font-size: 0.8rem;
  color: #6f8db7;
  background: rgba(111,141,183,0.12);
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
}
.mlmh-gallery-intro {
  font-size: 0.92rem;
  color: #555;
  font-style: italic;
  margin: 0.25rem 0 0.75rem;
}

/* ============================================================
   Homepage — composants ajoutés round 1 (homepage-agent)
   ============================================================ */

/* page-hero (déjà DS) — déclinaison compacte pour les pages article */
.page-content .page-hero {
  margin: 0 0 2rem;
  padding: 1.75rem 1.75rem 1.5rem;
  background: linear-gradient(135deg, rgba(111,141,183,0.15) 0%, rgba(111,141,183,0.05) 100%);
  border-radius: 6px;
  border: 1px solid rgba(111,141,183,0.2);
}
.page-content .page-hero h1 {
  margin: 0 0 0.5rem;
  border-bottom: none;
  padding-bottom: 0;
}
.page-content .page-hero .page-subtitle {
  margin: 0;
  font-size: 1rem;
  color: #555;
  font-style: italic;
}

/* info-banner / contact-strip / section-lead / testimonial-grid / lang-split
   sont déjà définis dans le design system — on les réutilise tels quels.
   Quelques ajustements / nouveaux composants spécifiques homepage : */

.section-lead {
  font-size: 1.08rem;
  color: #333;
  line-height: 1.75;
  margin: 0 0 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(111,141,183,0.2);
}

.info-banner {
  background: rgba(111,141,183,0.10);
  border-left: 4px solid #6f8db7;
  border-radius: 0 6px 6px 0;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.info-banner .info-icon { font-size: 1.2rem; flex-shrink: 0; line-height: 1.6; }
.info-banner p { margin: 0; font-size: 0.95rem; }

.contact-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  align-items: center;
  background: #6f8db7;
  color: #fff;
  border-radius: 6px;
  padding: 1rem 1.5rem;
  margin: 1.5rem 0;
  font-family: Boogaloo, cursive;
  font-size: 1.05rem;
}
.contact-strip a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.5); }
.contact-strip a:hover { border-bottom-color: #fff; }
.contact-strip .contact-item { display: flex; align-items: center; gap: 0.45rem; }

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  margin: 1.25rem 0 2rem;
}
.testimonial-item {
  background: rgba(111,141,183,0.07);
  border-radius: 6px;
  padding: 1.5rem 1.25rem 1.1rem;
  position: relative;
}
.testimonial-item::before {
  content: '\201C';
  font-family: Georgia, serif;
  font-size: 3rem;
  color: rgba(111,141,183,0.35);
  position: absolute;
  top: 0.1rem;
  left: 0.7rem;
  line-height: 1;
}
.testimonial-item p {
  margin: 0 0 0.75rem;
  padding-left: 1rem;
  font-size: 0.92rem;
  font-style: italic;
  line-height: 1.55;
}
.testimonial-author {
  font-family: Boogaloo, cursive;
  font-size: 0.9rem;
  color: #6f8db7;
  padding-left: 1rem;
}
.testimonial-author a { color: #6f8db7; }

.lang-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin: 1rem 0 2rem;
}
.lang-split-col {
  padding: 1.25rem;
  background: #fafbfc;
  border-radius: 6px;
  border: 1px solid rgba(111,141,183,0.2);
}
.lang-split-title {
  font-family: Boogaloo, cursive;
  font-size: 1.15rem;
  margin: 0 0 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.lang-split-flag-img { display: inline-block; vertical-align: middle; }
.lang-split-col p { margin: 0; font-size: 0.92rem; color: #444; }
@media (max-width: 600px) { .lang-split { grid-template-columns: 1fr; } }

/* --- mlmh-section-heading : titres de section sobres --- */
.mlmh-section-heading {
  font-family: Boogaloo, cursive;
  font-size: 1.4rem;
  color: #6f8db7;
  margin: 2rem 0 1rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid rgba(111,141,183,0.25);
}

/* --- mlmh-hero-media : duo photo portrait + photo scène --- */
.mlmh-hero-media {
  display: grid;
  grid-template-columns: minmax(180px, 280px) 1fr;
  gap: 1.25rem;
  align-items: start;
  margin: 1.5rem 0 2rem;
}
.mlmh-hero-media figure { margin: 0; }
.mlmh-hero-media img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  display: block;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.mlmh-hero-media figcaption {
  font-family: Boogaloo, cursive;
  font-size: 0.9rem;
  color: #555;
  margin-top: 0.4rem;
  text-align: center;
}
@media (max-width: 640px) {
  .mlmh-hero-media { grid-template-columns: 1fr; }
}

/* --- mlmh-cta-row + mlmh-cta : boutons d'appel à l'action --- */
.mlmh-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.5rem 0;
}
.mlmh-cta {
  display: inline-block;
  padding: 0.7rem 1.1rem;
  border-radius: 6px;
  font-family: Boogaloo, cursive;
  font-size: 1rem;
  text-decoration: none;
  background: #fff;
  color: #6f8db7;
  border: 2px solid #6f8db7;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.mlmh-cta:hover {
  background: rgba(111,141,183,0.12);
  transform: translateY(-1px);
}
.mlmh-cta-primary {
  background: #6f8db7;
  color: #fff;
}
.mlmh-cta-primary:hover {
  background: #5d7aa4;
  color: #fff;
}

/* --- mlmh-feature-badge : médaille / badge de reconnaissance externe --- */
.mlmh-feature-badge {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: #fafbfc;
  border: 1px solid rgba(111,141,183,0.2);
  border-radius: 6px;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
}
.mlmh-feature-badge img {
  width: 80px;
  height: auto;
  border-radius: 3px;
  flex-shrink: 0;
}
.mlmh-feature-badge p {
  margin: 0;
  font-size: 0.95rem;
  color: #444;
}

/* --- mlmh-legal-note : mentions légales en pied d'article --- */
.mlmh-legal-note {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(0,0,0,0.08);
  font-size: 0.8rem;
  color: #777;
  line-height: 1.55;
}

/* ============================================================
   BIOGRAPHIE — composants mlmh-bio
   ============================================================ */

/* Bio intro — portrait + accroche + facts */
.mlmh-bio-intro {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 2rem;
  align-items: start;
  margin: 1.5rem 0 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(111,141,183,0.2);
}
.mlmh-bio-portrait {
  margin: 0;
}
.mlmh-bio-portrait img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.mlmh-bio-portrait figcaption {
  margin-top: 0.5rem;
  font-family: Boogaloo, cursive;
  font-size: 0.95rem;
  color: #6f8db7;
  text-align: center;
}
.mlmh-bio-intro-text .section-lead { margin-top: 0; }
.mlmh-bio-facts {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem 1rem;
}
.mlmh-bio-facts li {
  font-size: 0.9rem;
  padding: 0.5rem 0.75rem;
  background: rgba(111,141,183,0.08);
  border-left: 3px solid #6f8db7;
  border-radius: 0 4px 4px 0;
}
.mlmh-bio-facts strong {
  display: block;
  font-family: Boogaloo, cursive;
  color: #6f8db7;
  font-weight: normal;
  font-size: 1rem;
}
@media (max-width: 600px) {
  .mlmh-bio-intro { grid-template-columns: 1fr; gap: 1.25rem; }
  .mlmh-bio-portrait { max-width: 220px; margin: 0 auto; }
  .mlmh-bio-facts { grid-template-columns: 1fr; }
}

/* Timeline */
.mlmh-timeline {
  position: relative;
  margin: 1.5rem 0 2.5rem;
  padding-left: 1rem;
}
.mlmh-timeline::before {
  content: "";
  position: absolute;
  left: 7rem;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 2px;
  background: rgba(111,141,183,0.3);
}
.mlmh-timeline-item {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  position: relative;
}
.mlmh-timeline-year {
  text-align: right;
  font-family: Boogaloo, cursive;
  font-size: 1rem;
  color: #6f8db7;
  padding-top: 0.15rem;
  line-height: 1.3;
}
.mlmh-timeline-body {
  position: relative;
  padding-left: 1.25rem;
}
.mlmh-timeline-body::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 0.5rem;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #6f8db7;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(111,141,183,0.4);
}
.mlmh-timeline-body h3 {
  margin: 0 0 0.35rem;
  font-size: 1rem;
  color: #1a1a1a;
  text-transform: none;
  letter-spacing: 0;
}
.mlmh-timeline-body p { margin: 0; font-size: 0.95rem; line-height: 1.65; }
@media (max-width: 600px) {
  .mlmh-timeline { padding-left: 0; }
  .mlmh-timeline::before { left: 6px; }
  .mlmh-timeline-item { grid-template-columns: 1fr; gap: 0.25rem; }
  .mlmh-timeline-year { text-align: left; padding-left: 1.25rem; }
  .mlmh-timeline-body::before { top: -1.3rem; left: 0; }
}

/* Publications list */
.mlmh-pub-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0 1.5rem;
  counter-reset: pub;
}
.mlmh-pub-list li {
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: 1rem;
  padding: 0.75rem 0.5rem;
  border-bottom: 1px solid rgba(111,141,183,0.15);
  align-items: baseline;
}
.mlmh-pub-list li:last-child { border-bottom: none; }
.mlmh-pub-year {
  font-family: Boogaloo, cursive;
  font-size: 1rem;
  color: #6f8db7;
}
.mlmh-pub-list div { font-size: 0.92rem; line-height: 1.55; }
@media (max-width: 600px) {
  .mlmh-pub-list li { grid-template-columns: 1fr; gap: 0.2rem; }
}

/* H2 sub-note */
.mlmh-h2-note {
  font-family: Merriweather, Georgia, serif;
  font-size: 0.7em;
  font-weight: normal;
  color: #888;
  font-style: italic;
  margin-left: 0.4em;
}

/* ============================================================
   /tarifs/ — composants partagés (page-hero, section-lead,
   price-grid/price-card, info-banner, contact-strip) +
   composants spécifiques préfixés mlmh-
   ============================================================ */

/* page-hero (DS) */
.page-content .page-hero {
  margin: 0 0 1.75rem;
  padding: 1.75rem 1.5rem;
  background: linear-gradient(135deg, rgba(111,141,183,0.18) 0%, rgba(111,141,183,0.05) 100%);
  border-left: 4px solid #6f8db7;
  border-radius: 6px;
}
.page-content .page-hero h1 { margin: 0 0 0.4rem; padding: 0; border-bottom: none; }
.page-content .page-hero .page-subtitle {
  margin: 0;
  font-family: Merriweather, Georgia, serif;
  font-size: 1.05rem;
  color: #444;
  font-style: italic;
}

/* section-lead (DS) */
.page-content .section-lead {
  font-size: 1.05rem;
  color: #333;
  line-height: 1.75;
  margin: 0 0 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(111,141,183,0.2);
}

/* price-grid / price-card (DS) */
.page-content .price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}
.page-content .price-card {
  border: 1px solid rgba(111,141,183,0.3);
  border-radius: 6px;
  padding: 1.25rem;
  background: #fafbfc;
  display: flex;
  flex-direction: column;
}
.page-content .price-card h3 {
  margin: 0 0 0.35rem;
  font-family: Boogaloo, cursive;
  font-size: 1.1rem;
  color: #6f8db7;
}
.page-content .price-card h3 a { color: inherit; text-decoration: none; border-bottom: 1px dashed rgba(111,141,183,0.5); }
.page-content .price-card .price-amount {
  font-family: Boogaloo, cursive;
  font-size: 1.6rem;
  color: #1a1a1a;
  display: block;
  margin: 0.1rem 0 0.5rem;
  line-height: 1.1;
}
.page-content .price-card p {
  font-size: 0.9rem;
  color: #555;
  margin: 0;
  line-height: 1.5;
}

/* Carte tarif mise en avant (adhésion, promo, etc.) */
.page-content .mlmh-price-card-highlight {
  background: rgba(111,141,183,0.10);
  border-color: #6f8db7;
  border-width: 2px;
}
.page-content .mlmh-price-card-highlight .price-amount { color: #6f8db7; }

/* info-banner (DS) */
.page-content .info-banner {
  background: rgba(111,141,183,0.10);
  border-left: 4px solid #6f8db7;
  border-radius: 0 6px 6px 0;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.page-content .info-banner .info-icon { font-size: 1.4rem; flex-shrink: 0; line-height: 1.4; }
.page-content .info-banner p { margin: 0; font-size: 0.98rem; }

/* contact-strip (DS) */
.page-content .contact-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.75rem;
  align-items: center;
  background: #6f8db7;
  color: #fff;
  border-radius: 6px;
  padding: 1rem 1.5rem;
  margin: 1rem 0 0.5rem;
  font-family: Boogaloo, cursive;
  font-size: 1.1rem;
}
.page-content .contact-strip a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.5); }
.page-content .contact-strip a:hover { border-bottom-color: #fff; }
.page-content .contact-strip .contact-item { display: inline-flex; align-items: center; gap: 0.5rem; }

/* mlmh-pdf-cta — bouton de téléchargement riche (NOUVEAU) */
.mlmh-pdf-cta {
  display: flex;
  justify-content: center;
  margin: 1.5rem 0 2rem;
}
.mlmh-pdf-cta-link.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.9rem 1.5rem;
  text-decoration: none;
  border-radius: 6px;
  background: #6f8db7;
  color: #fff;
  box-shadow: 0 2px 6px rgba(111,141,183,0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.mlmh-pdf-cta-link.wp-block-button__link:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(111,141,183,0.45);
  color: #fff;
}
.mlmh-pdf-cta-icon { font-size: 1.8rem; line-height: 1; }
.mlmh-pdf-cta-text { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.mlmh-pdf-cta-title { font-family: Boogaloo, cursive; font-size: 1.15rem; }
.mlmh-pdf-cta-sub { font-family: Merriweather, Georgia, serif; font-size: 0.78rem; opacity: 0.85; font-style: italic; }

/* mlmh-conditions-grid — grille de conditions/modalités (NOUVEAU) */
.mlmh-conditions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin: 1.25rem 0 1.75rem;
}
.mlmh-condition {
  background: #fafbfc;
  border: 1px solid rgba(111,141,183,0.2);
  border-radius: 6px;
  padding: 1rem 1.15rem;
}
.mlmh-condition-title {
  font-family: Boogaloo, cursive;
  font-size: 1rem;
  color: #6f8db7;
  margin: 0 0 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.mlmh-condition p { margin: 0; font-size: 0.92rem; color: #444; line-height: 1.55; }

@media (max-width: 600px) {
  .page-content .page-hero { padding: 1.25rem 1rem; }
  .mlmh-pdf-cta-link.wp-block-button__link { width: 100%; justify-content: center; }
}

/* ===== Round 2 — page Basse : curriculum grid + style tags ===== */
.mlmh-curriculum-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin: 1.25rem 0 2rem;
}
.mlmh-curriculum-card {
  background: #fafbfc;
  border: 1px solid rgba(111,141,183,0.25);
  border-radius: 6px;
  padding: 1.1rem 1.25rem;
}
.mlmh-curriculum-card h3 {
  font-family: Boogaloo, cursive;
  font-size: 1.15rem;
  color: #6f8db7;
  margin: 0 0 0.6rem;
  border-bottom: 1px solid rgba(111,141,183,0.2);
  padding-bottom: 0.35rem;
}
.mlmh-curriculum-card ul {
  margin: 0;
  padding-left: 1.1rem;
}
.mlmh-curriculum-card li {
  font-size: 0.92rem;
  line-height: 1.55;
  margin-bottom: 0.25rem;
}

.mlmh-style-tags {
  list-style: none;
  margin: 1rem 0 1.5rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.mlmh-style-tags li {
  display: inline-block;
  padding: 0.35rem 0.9rem;
  background: rgba(111,141,183,0.12);
  border: 1px solid rgba(111,141,183,0.3);
  border-radius: 999px;
  font-family: Boogaloo, cursive;
  font-size: 0.95rem;
  color: #6f8db7;
}

.mlmh-basse-figure {
  margin: 1.5rem 0;
  text-align: center;
}
.mlmh-basse-figure img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.mlmh-basse-petitfute {
  margin: 2rem 0 1rem;
  text-align: center;
  opacity: 0.85;
}
.mlmh-basse-petitfute img { max-width: 100px; height: auto; }

/* ============================================================
   Round 2 — Ukulélé page (mlmh-uku-*, mlmh-level-pill, mlmh-tag-list)
   ============================================================ */

/* --- mlmh-level-row + mlmh-level-pill : pastilles niveaux --- */
.mlmh-level-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0.75rem 0 1.5rem;
}
.mlmh-level-pill {
  display: inline-block;
  padding: 0.4rem 1rem;
  background: rgba(111,141,183,0.12);
  color: #6f8db7;
  border: 1px solid rgba(111,141,183,0.35);
  border-radius: 999px;
  font-family: Boogaloo, cursive;
  font-size: 1rem;
  letter-spacing: 0.02em;
}

/* --- mlmh-tag-list : liste à puces stylée (chevron bleu) --- */
.mlmh-tag-list {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 1.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.4rem 1.25rem;
}
.mlmh-tag-list li {
  position: relative;
  padding: 0.35rem 0 0.35rem 1.4rem;
  font-size: 0.95rem;
  border-bottom: 1px dashed rgba(111,141,183,0.18);
}
.mlmh-tag-list li::before {
  content: '♪';
  position: absolute;
  left: 0.1rem;
  top: 0.3rem;
  color: #6f8db7;
  font-size: 1rem;
  line-height: 1.2;
}

/* --- mlmh-uku-video : iframe vidéo centrée et responsive --- */
.mlmh-uku-video {
  margin: 1.5rem 0;
  text-align: center;
}
.mlmh-uku-video iframe {
  max-width: 100%;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

/* --- mlmh-uku-petitfute : widget Petit Futé centré --- */
.mlmh-uku-petitfute {
  text-align: center;
  margin: 2rem 0 1rem;
  padding: 1rem;
  border-top: 1px solid rgba(111,141,183,0.2);
}
.mlmh-uku-petitfute img { display: inline-block; }

/* ============================================================
   Banjo / Instrument page components (round 2)
   ============================================================ */

/* mlmh-instrument-video — wrapper responsive pour iframe YouTube */
.mlmh-instrument-video {
  position: relative;
  max-width: 640px;
  margin: 1.5rem auto;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(111,141,183,0.25);
  background: #000;
}
.mlmh-instrument-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* mlmh-section-heading — h2 avec accent bleu (utilisé sur pages instrument) */
.page-content h2.mlmh-section-heading {
  font-family: Boogaloo, cursive;
  color: #1a1a1a;
  border-bottom: none;
  padding-bottom: 0;
  margin-top: 2.25rem;
  margin-bottom: 1rem;
  padding-left: 0.85rem;
  border-left: 4px solid #6f8db7;
  line-height: 1.2;
}

/* mlmh-cta-row / mlmh-cta — rangée de boutons CTA */
.mlmh-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.25rem 0 1.75rem;
}
.mlmh-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.65rem 1.2rem;
  border-radius: 6px;
  font-family: Boogaloo, cursive;
  font-size: 1rem;
  text-decoration: none;
  background: #fff;
  color: #6f8db7;
  border: 1.5px solid #6f8db7;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.mlmh-cta:hover { background: rgba(111,141,183,0.10); transform: translateY(-1px); }
.mlmh-cta-primary {
  background: #6f8db7;
  color: #fff;
  box-shadow: 0 2px 6px rgba(111,141,183,0.35);
}
.mlmh-cta-primary:hover { background: #5d7aa3; color: #fff; }

/* mlmh-styles-grid — grille des styles enseignés sur les pages instrument */
.mlmh-styles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin: 1.25rem 0 1.75rem;
}
.mlmh-style-card {
  background: #fafbfc;
  border: 1px solid rgba(111,141,183,0.25);
  border-radius: 6px;
  padding: 1rem 1.15rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.mlmh-style-card:hover {
  border-color: #6f8db7;
  box-shadow: 0 2px 8px rgba(111,141,183,0.15);
}
.mlmh-style-card h3 {
  font-family: Boogaloo, cursive;
  font-size: 1.05rem;
  color: #6f8db7;
  margin: 0 0 0.4rem;
}
.mlmh-style-card p { margin: 0; font-size: 0.92rem; color: #444; line-height: 1.55; }

@media (max-width: 600px) {
  .mlmh-cta { width: 100%; justify-content: center; }
}

/* ============================================================
   AUTOHARP (round 2) — composants page cours d'instrument
   ============================================================ */

/* --- mlmh-video-frame : conteneur vidéo responsive 16:9 --- */
.mlmh-video-frame {
  position: relative;
  width: 100%;
  max-width: 720px;
  margin: 1.5rem auto;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(111,141,183,0.18);
  background: #000;
}
.mlmh-video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* --- mlmh-instrument-explainer : grille de cartes "qu'est-ce que cet instrument" --- */
.mlmh-instrument-explainer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
  margin: 1.25rem 0 2rem;
}
.mlmh-instrument-card {
  background: #fafbfc;
  border: 1px solid rgba(111,141,183,0.25);
  border-top: 3px solid #6f8db7;
  border-radius: 6px;
  padding: 1.25rem 1.15rem;
}
.mlmh-instrument-card-icon {
  font-size: 1.8rem;
  line-height: 1;
  margin-bottom: 0.5rem;
}
.mlmh-instrument-card h3 {
  font-family: Boogaloo, cursive;
  font-size: 1.1rem;
  color: #6f8db7;
  margin: 0 0 0.5rem;
  border: none;
  padding: 0;
}
.mlmh-instrument-card p {
  margin: 0;
  font-size: 0.92rem;
  color: #444;
  line-height: 1.55;
}

/* --- mlmh-petitfute : conteneur centré pour le widget Petit Futé --- */
.mlmh-petitfute {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 2rem 0 0.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(111,141,183,0.15);
  opacity: 0.85;
}

/* ============================================================
   GUITARE BLUES (round 2) — composants page cours d'instrument
   ============================================================ */

/* --- mlmh-instrument-section : section thématique avec un peu d'air --- */
.mlmh-instrument-section { margin: 2rem 0; scroll-margin-top: 1rem; }

/* --- mlmh-media-row : deux figures côte à côte, responsive --- */
.mlmh-media-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  justify-content: center;
  margin: 1.25rem 0 1.5rem;
}
.mlmh-media-row figure { margin: 0; max-width: 240px; }
.mlmh-media-row figure img { width: 100%; height: auto; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.10); }
.mlmh-media-row figcaption { font-size: 0.8rem; color: #555; font-style: italic; margin-top: 0.4rem; text-align: center; line-height: 1.4; }

/* --- mlmh-video-wrap : iframe vidéo centrée responsive 16:9 --- */
.mlmh-video-wrap {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin: 1.5rem auto;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(111,141,183,0.20);
  background: #000;
}
.mlmh-video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* --- mlmh-program-list : liste de programme à 2 colonnes (chevron bleu) --- */
.mlmh-program-list {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 1.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0.4rem 1.5rem;
}
.mlmh-program-list li {
  position: relative;
  padding: 0.4rem 0 0.4rem 1.5rem;
  font-size: 0.95rem;
  line-height: 1.55;
  border-bottom: 1px dashed rgba(111,141,183,0.18);
}
.mlmh-program-list li::before {
  content: '▸';
  position: absolute;
  left: 0.2rem;
  top: 0.4rem;
  color: #6f8db7;
  font-size: 0.95rem;
}

/* --- mlmh-level-grid / mlmh-level-card : niveaux côte à côte (débutant / perfectionnement) --- */
.mlmh-level-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
  margin: 1.25rem 0 1.75rem;
}
.mlmh-level-card {
  background: #fafbfc;
  border: 1px solid rgba(111,141,183,0.25);
  border-top: 3px solid #6f8db7;
  border-radius: 6px;
  padding: 1.25rem 1.35rem;
}
.mlmh-level-header { margin-bottom: 0.75rem; }
.mlmh-level-header h3 {
  font-family: Boogaloo, cursive;
  font-size: 1.2rem;
  color: #1a1a1a;
  margin: 0.4rem 0 0;
  border: none;
  padding: 0;
}
.mlmh-level-badge {
  display: inline-block;
  font-family: Inconsolata, monospace;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: rgba(111,141,183,0.15);
  color: #6f8db7;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
}
.mlmh-level-badge-adv { background: #6f8db7; color: #fff; }
.mlmh-level-card p { font-size: 0.93rem; line-height: 1.7; margin: 0 0 0.75rem; }
.mlmh-level-card p:last-child { margin-bottom: 0; }

/* ============================================================
   Round 3 — Violon américain page
   ============================================================ */
/* mlmh-fiddle-tag — petite étiquette inline dans le h1 du hero */
.mlmh-fiddle-tag {
  font-family: 'Inconsolata', monospace;
  font-size: 0.55em;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: #6f8db7;
  background: rgba(111,141,183,0.12);
  padding: 0.15em 0.55em;
  border-radius: 999px;
  vertical-align: middle;
  margin-left: 0.4em;
  white-space: nowrap;
}

/* ============================================================
   Round 4 — Cours enfants / Éveil musical
   ============================================================ */
.mlmh-enfants-intro {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5rem;
  align-items: center;
  margin: 1.25rem 0 1.5rem;
}
.mlmh-enfants-mascot {
  margin: 0;
  flex-shrink: 0;
}
.mlmh-enfants-mascot img {
  display: block;
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 50%;
  background: #f5f7fb;
  padding: 0.4rem;
  box-shadow: 0 2px 8px rgba(111,141,183,0.18);
}
.mlmh-enfants-intro .section-lead {
  margin: 0;
}
.mlmh-enfants-pricing-note {
  font-size: 0.92rem;
  color: #555;
  margin: -0.4rem 0 1rem;
}
.mlmh-enfants-pricing-sub {
  font-family: 'Boogaloo', cursive;
  font-size: 1.4rem;
  color: #6f8db7;
  margin: 1.5rem 0 0.75rem;
  letter-spacing: 0.02em;
}
.mlmh-enfants-pricing-sub small {
  font-family: 'Merriweather', serif;
  font-size: 0.7em;
  color: #777;
  font-weight: normal;
  margin-left: 0.4em;
}
@media (max-width: 600px) {
  .mlmh-enfants-intro {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .mlmh-enfants-mascot {
    justify-self: center;
  }
}

/* ============================================================
   Round 4 — Cours à distance : mlmh-steps (étapes numérotées)
   ============================================================ */
.mlmh-steps {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 1.75rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
  counter-reset: mlmh-step;
}
.mlmh-steps > li {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 1rem;
  align-items: start;
  background: #fafbfc;
  border: 1px solid rgba(111,141,183,0.22);
  border-left: 3px solid #6f8db7;
  border-radius: 6px;
  padding: 1rem 1.15rem;
}
.mlmh-steps .mlmh-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: #6f8db7;
  color: #fff;
  font-family: Boogaloo, cursive;
  font-size: 1.35rem;
  line-height: 1;
}
.mlmh-steps .mlmh-step-body h3 {
  font-family: Boogaloo, cursive;
  font-size: 1.15rem;
  color: #1a1a1a;
  margin: 0 0 0.35rem;
  border: none;
  padding: 0;
}
.mlmh-steps .mlmh-step-body p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #333;
}
@media (min-width: 720px) {
  .mlmh-steps {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
}

/* ================================================================
   Round 5 — Vente de tablatures
   - mlmh-order-options / mlmh-order-card : deux options de commande
   - mlmh-tab-price-grid : variante price-grid avec formulaire PayPal
   - mlmh-paypal-form : formulaire PayPal stylé
   - mlmh-tab-samples / mlmh-tab-sample : aperçus de tablatures manuscrites
   ================================================================ */
.mlmh-order-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 1.5rem 0;
}
@media (min-width: 720px) {
  .mlmh-order-options { grid-template-columns: 1fr 1fr; }
}
.mlmh-order-card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "num title"
    "num sub"
    "num link";
  column-gap: 1rem;
  row-gap: 0.35rem;
  align-items: start;
  padding: 1.4rem 1.4rem;
  background: #fff;
  border: 1px solid #d8e2ee;
  border-left: 4px solid #6f8db7;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
a.mlmh-order-card:hover {
  box-shadow: 0 6px 18px rgba(111, 141, 183, 0.18);
  transform: translateY(-2px);
  border-left-color: #4a6b94;
}
.mlmh-order-num {
  grid-area: num;
  font-family: Boogaloo, cursive;
  font-size: 2.2rem;
  line-height: 1;
  color: #6f8db7;
  background: #eef3fa;
  width: 2.6rem;
  height: 2.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.mlmh-order-title {
  grid-area: title;
  font-family: Boogaloo, cursive;
  font-size: 1.35rem;
  color: #2c3e50;
}
.mlmh-order-sub {
  grid-area: sub;
  font-size: 0.92rem;
  line-height: 1.5;
  color: #444;
}
.mlmh-order-sub a { color: #4a6b94; }
.mlmh-order-link {
  grid-area: link;
  font-family: Inconsolata, monospace;
  font-size: 0.85rem;
  color: #6f8db7;
  font-weight: 700;
  margin-top: 0.3rem;
}
.mlmh-order-card-alt {
  background: #f7faff;
  border-left-color: #b8a86f;
}

/* PayPal form inside a price-card */
.mlmh-paypal-form {
  margin: 1rem 0 0;
  display: flex;
  justify-content: center;
}
.mlmh-paypal-form input[type="image"] {
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.mlmh-paypal-form input[type="image"]:hover {
  opacity: 0.85;
  transform: scale(1.03);
}
.mlmh-tab-price-grid .price-card {
  display: flex;
  flex-direction: column;
}
.mlmh-tab-price-grid .price-card > p { flex: 1; }

/* Tablature samples */
.mlmh-tab-samples {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin: 1.5rem 0;
  justify-items: center;
}
@media (min-width: 600px) {
  .mlmh-tab-samples { grid-template-columns: 1fr 1fr; }
}
.mlmh-tab-sample {
  margin: 0;
  padding: 1rem;
  background: #fff;
  border: 1px solid #e4e9f0;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  text-align: center;
  max-width: 360px;
}
.mlmh-tab-sample img {
  max-width: 100%;
  height: auto;
  border-radius: 3px;
  display: block;
  margin: 0 auto;
}
.mlmh-tab-sample figcaption {
  margin-top: 0.7rem;
  font-family: Inconsolata, monospace;
  font-size: 0.85rem;
  color: #555;
  font-style: italic;
}

/* ============================================================
   mlmh-event-card — fiche événement / stage du calendrier
   ============================================================ */
.mlmh-event-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  background: #fff;
  border: 1px solid rgba(111, 141, 183, 0.28);
  border-radius: 10px;
  overflow: hidden;
  margin: 1.75rem 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}
.mlmh-event-date {
  background: linear-gradient(135deg, #6f8db7 0%, #8aa6cb 100%);
  color: #fff;
  padding: 1.1rem 1.25rem;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 0.65rem;
  font-family: Boogaloo, cursive;
  letter-spacing: 0.5px;
}
.mlmh-event-month {
  font-size: 1.4rem;
  text-transform: uppercase;
}
.mlmh-event-day {
  font-size: 1.9rem;
  line-height: 1;
}
.mlmh-event-body {
  padding: 1.25rem 1.4rem 1.4rem;
}
.mlmh-event-title {
  font-family: Boogaloo, cursive;
  font-size: 1.65rem;
  color: #1a1a1a;
  margin: 0 0 0.4rem;
  border: none;
  padding: 0;
}
.mlmh-event-lead {
  font-size: 1rem;
  color: #444;
  margin: 0 0 1rem;
  font-style: italic;
}
.mlmh-event-meta {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.95rem;
  color: #333;
}
.mlmh-event-meta li {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
}
.mlmh-event-meta li > span:first-child {
  flex: 0 0 1.25rem;
}
.mlmh-event-details {
  background: #f6f8fb;
  border: 1px solid rgba(111, 141, 183, 0.22);
  border-radius: 6px;
  padding: 0.6rem 0.9rem;
  margin: 0.5rem 0 1rem;
  font-size: 0.92rem;
}
.mlmh-event-details summary {
  cursor: pointer;
  font-family: Inconsolata, monospace;
  font-weight: 700;
  color: #4a6b94;
  letter-spacing: 0.3px;
}
.mlmh-event-details[open] summary {
  margin-bottom: 0.5rem;
}
.mlmh-event-details ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mlmh-event-details li {
  padding: 0.2rem 0;
  border-bottom: 1px dashed rgba(111, 141, 183, 0.18);
}
.mlmh-event-details li:last-child {
  border-bottom: none;
}
.mlmh-event-prices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin: 0.75rem 0 1rem;
}
.mlmh-event-price {
  background: #f6f8fb;
  border: 1px solid rgba(111, 141, 183, 0.25);
  border-radius: 6px;
  padding: 0.6rem 0.4rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.mlmh-event-price-amount {
  font-family: Boogaloo, cursive;
  font-size: 1.4rem;
  color: #4a6b94;
  line-height: 1;
}
.mlmh-event-price-label {
  font-family: Inconsolata, monospace;
  font-size: 0.8rem;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.mlmh-event-note {
  font-size: 0.88rem;
  color: #555;
  background: #fffaf0;
  border-left: 3px solid #d4a657;
  padding: 0.5rem 0.75rem;
  border-radius: 0 4px 4px 0;
  margin: 0 0 1rem;
}
.mlmh-event-figure {
  margin: 0.75rem 0;
}
.mlmh-event-figure img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  display: block;
}
.mlmh-event-figure figcaption {
  font-size: 0.85rem;
  color: #666;
  font-style: italic;
  margin-top: 0.4rem;
  text-align: center;
}
@media (min-width: 720px) {
  .mlmh-event-card {
    grid-template-columns: 160px 1fr;
  }
  .mlmh-event-date {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 1.5rem 0.75rem;
  }
  .mlmh-event-month {
    font-size: 1.5rem;
  }
  .mlmh-event-day {
    font-size: 2.4rem;
  }
}

/* =====================================================================
   Round 5 — Page Programmes de stages (mlmh-prog-*)
   ===================================================================== */

.mlmh-prog-section {
  margin: 2.8rem 0;
  padding: 1.6rem 1.6rem 1.8rem;
  background: #fafbfd;
  border: 1px solid #e6eaf1;
  border-left: 4px solid #6f8db7;
  border-radius: 6px;
}

.mlmh-prog-section > p {
  margin-top: 0.4rem;
}

.mlmh-prog-grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 1.6rem;
  align-items: start;
  margin-top: 1.2rem;
}

.mlmh-prog-grid-reverse {
  grid-template-columns: 1fr 300px;
}
.mlmh-prog-grid-reverse .mlmh-prog-figure {
  order: 2;
}
.mlmh-prog-grid-reverse .mlmh-prog-body {
  order: 1;
}

.mlmh-prog-figure {
  margin: 0;
  background: #fff;
  border: 1px solid #e6eaf1;
  border-radius: 4px;
  padding: 0.5rem;
  text-align: center;
}

.mlmh-prog-figure img {
  max-width: 100%;
  height: auto;
  border-radius: 2px;
  display: block;
  margin: 0 auto;
}

.mlmh-prog-figure-portrait img {
  max-width: 200px;
}

.mlmh-prog-figure figcaption {
  font-size: 0.78rem;
  color: #555;
  margin-top: 0.5rem;
  font-style: italic;
  line-height: 1.3;
}

.mlmh-prog-body {
  min-width: 0;
}

.mlmh-prog-content-title {
  font-family: 'Inconsolata', monospace;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6f8db7;
  margin: 1.1rem 0 0.5rem;
  font-weight: 700;
}

@media (max-width: 720px) {
  .mlmh-prog-grid,
  .mlmh-prog-grid-reverse {
    grid-template-columns: 1fr;
  }
  .mlmh-prog-grid-reverse .mlmh-prog-figure,
  .mlmh-prog-grid-reverse .mlmh-prog-body {
    order: initial;
  }
  .mlmh-prog-section {
    padding: 1.2rem 1rem 1.4rem;
  }
}

/* ============================================================
   Livre d'or — refonte (round 6)
   ============================================================ */
.mlmh-guestbook-form-intro {
  margin: 0.25rem 0 1rem;
  color: #555;
  font-size: 0.95rem;
}

.mlmh-field-hint {
  font-weight: 400;
  color: #777;
  font-size: 0.8rem;
  font-style: italic;
  margin-left: 0.25rem;
}

.mlmh-guestbook-form {
  background: #f7f9fc;
  border: 1px solid #dde4ee;
  border-left: 4px solid #6f8db7;
  border-radius: 6px;
  padding: 1.5rem;
  margin-top: 0.5rem;
}

.mlmh-guestbook-form .form-group input:focus,
.mlmh-guestbook-form .form-group textarea:focus {
  outline: none;
  border-color: #6f8db7;
  box-shadow: 0 0 0 3px rgba(111, 141, 183, 0.18);
}

.mlmh-guestbook-form button[type="submit"] {
  margin-top: 0.5rem;
}

@media (max-width: 600px) {
  .mlmh-guestbook-form { padding: 1rem; }
}

/* ============================================================
   Round 6 — page CD : grille de discographie (mlmh-album-*)
   ============================================================ */

.mlmh-album-grid {
  display: grid;
  gap: 1.5rem;
  margin: 1.5rem 0 2rem;
}

.mlmh-album-card {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 1.5rem;
  background: #fff;
  border: 1px solid #e3e9f1;
  border-left: 4px solid #6f8db7;
  border-radius: 8px;
  padding: 1.25rem 1.25rem 1.25rem 1.4rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  align-items: start;
}

.mlmh-album-cover {
  position: relative;
  align-self: start;
}

.mlmh-album-cover img {
  display: block;
  width: 100%;
  max-width: 220px;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}

.mlmh-album-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: #6f8db7;
  color: #fff;
  font-family: 'Inconsolata', monospace;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.2rem 0.55rem;
  border-radius: 3px;
}

.mlmh-album-body { min-width: 0; }

.mlmh-album-head {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin-bottom: 0.6rem;
}

.mlmh-album-title {
  font-family: 'Boogaloo', cursive;
  font-size: 1.9rem;
  font-weight: normal;
  color: #2c3e50;
  margin: 0;
  line-height: 1.1;
}

.mlmh-album-year {
  font-family: 'Inconsolata', monospace;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6f8db7;
  background: #eef3fa;
  padding: 0.18rem 0.55rem;
  border-radius: 3px;
}

.mlmh-album-artists {
  font-size: 0.95rem;
  color: #4a5763;
}

.mlmh-album-pricing {
  background: #fff8e1;
  border-left: 3px solid #d4a017;
  padding: 0.6rem 0.85rem;
  margin: 0.7rem 0;
  border-radius: 0 4px 4px 0;
}

.mlmh-album-tracks {
  margin: 0.6rem 0 0.4rem;
  font-size: 0.92rem;
}

.mlmh-album-tracks summary {
  cursor: pointer;
  font-family: 'Inconsolata', monospace;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6f8db7;
  font-weight: 700;
  padding: 0.3rem 0;
  user-select: none;
}

.mlmh-album-tracks summary:hover { color: #4d6d99; }

.mlmh-album-tracks p {
  margin: 0.5rem 0;
  color: #4a5763;
  line-height: 1.6;
}

.mlmh-album-card .mlmh-cta-row {
  margin-top: 0.9rem;
}

@media (max-width: 640px) {
  .mlmh-album-card {
    grid-template-columns: 1fr;
    padding: 1rem;
  }
  .mlmh-album-cover {
    max-width: 200px;
    margin: 0 auto;
  }
  .mlmh-album-title { font-size: 1.65rem; }
}

/* ============================================================
   EN Homepage — grid of section cards (Round 7)
   ============================================================ */
.mlmh-en-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0 2rem;
}
.mlmh-en-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1rem 1.1rem;
  background: #fff;
  border: 1px solid #dfe6ef;
  border-left: 4px solid #6f8db7;
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.mlmh-en-card:hover,
.mlmh-en-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(111, 141, 183, 0.18);
  border-left-color: #4a6b96;
  text-decoration: none;
}
.mlmh-en-card-title {
  font-family: 'Boogaloo', cursive;
  font-size: 1.35rem;
  color: #4a6b96;
  letter-spacing: 0.3px;
}
.mlmh-en-card-text {
  font-size: 0.95rem;
  line-height: 1.4;
  color: #444;
}
@media (max-width: 600px) {
  .mlmh-en-grid { grid-template-columns: 1fr; }
}


/* EN Biography — masters gallery */
.mlmh-en-bio-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  margin: 1.5rem 0 2rem;
}
.mlmh-en-bio-gallery figure {
  margin: 0;
  background: #fff;
  border: 1px solid #e3e8f0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(111, 141, 183, 0.08);
  display: flex;
  flex-direction: column;
}
.mlmh-en-bio-gallery img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.mlmh-en-bio-gallery figcaption {
  font-size: 0.85rem;
  color: #4a5a73;
  padding: 0.6rem 0.8rem;
  border-top: 1px solid #eef1f6;
  font-style: italic;
  text-align: center;
  background: #f7f9fc;
}

/* ============================================================
   Menu — current page & ancestor highlighting
   ============================================================ */
.sidebar .menu > li.current-menu-item > a,
.sidebar .menu > li.current-menu-ancestor > a {
  background: #4d6b8f;
  border-left: 3px solid #fff;
}

.sidebar .menu > li > .sub-menu > li.current-menu-item > a {
  font-weight: 700;
  color: #1a1a1a;
  text-decoration: underline;
}

.sidebar .menu > li > .sub-menu > li.current-menu-ancestor > a {
  font-weight: 700;
  color: #6f8db7;
}

/* ============================================================
   METHODE GUITARE CELTIQUE — page produit méthode (Round 8)
   ============================================================ */

.mlmh-method-card { margin-top: 1rem; }

.mlmh-method-specs {
  list-style: none;
  margin: 0.4rem 0 0.5rem;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem 1.1rem;
  font-size: 0.92rem;
  color: #4a5763;
}

.mlmh-method-specs li {
  padding: 0.25rem 0;
  border-bottom: 1px dotted #e3e9f1;
  line-height: 1.4;
}

.mlmh-method-specs strong {
  display: block;
  font-family: 'Inconsolata', monospace;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6f8db7;
  font-weight: 700;
  margin-bottom: 0.1rem;
}

.mlmh-method-techniques {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1.2rem 0 1.4rem;
}

.mlmh-method-tech {
  background: #f6f9fd;
  border: 1px solid #e3e9f1;
  border-top: 3px solid #6f8db7;
  border-radius: 6px;
  padding: 1rem 1.1rem;
}

.mlmh-method-tech h3 {
  font-family: 'Boogaloo', cursive;
  font-size: 1.4rem;
  font-weight: normal;
  color: #2c3e50;
  margin: 0 0 0.4rem;
  line-height: 1.1;
}

.mlmh-method-tech h3 span {
  display: inline-block;
  font-family: 'Inconsolata', monospace;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6f8db7;
  background: #eef3fa;
  padding: 0.15rem 0.5rem;
  border-radius: 3px;
  vertical-align: middle;
  margin-left: 0.4rem;
}

.mlmh-method-tech p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: #3a4654;
}

@media (max-width: 640px) {
  .mlmh-method-specs { grid-template-columns: 1fr; }
  .mlmh-method-techniques { grid-template-columns: 1fr; }
}

/* ============================================================
   /cd/chroniques-cd/ — chroniques presse
   ============================================================ */

.mlmh-chroniques-section {
  margin: 2.4rem 0 1.6rem;
}

.mlmh-chroniques-album {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 1.4rem;
  align-items: center;
  background: #f5f8fc;
  border: 1px solid #e3e9f1;
  border-left: 4px solid #6f8db7;
  border-radius: 8px;
  padding: 1.1rem 1.3rem;
  margin-bottom: 1.4rem;
}

.mlmh-chroniques-cover img {
  display: block;
  width: 100%;
  max-width: 180px;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}

.mlmh-chroniques-album-body p { margin: 0.45rem 0; font-size: 0.95rem; }
.mlmh-chroniques-title { margin: 0 0 0.4rem !important; }

@media (max-width: 640px) {
  .mlmh-chroniques-album {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .mlmh-chroniques-cover { max-width: 160px; margin: 0 auto; }
}

.mlmh-press-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.1rem;
  margin: 1rem 0 1.5rem;
}

.mlmh-press-card {
  position: relative;
  background: #fff;
  border: 1px solid #e3e9f1;
  border-top: 3px solid #6f8db7;
  border-radius: 6px;
  padding: 1.1rem 1.2rem 1.1rem;
  margin: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  display: flex;
  flex-direction: column;
}

.mlmh-press-card-highlight {
  background: #eef3fa;
  border-top-width: 4px;
}

.mlmh-press-source {
  font-family: 'Inconsolata', monospace;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #4d6d99;
  margin-bottom: 0.7rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
}

.mlmh-press-meta {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.78rem;
  color: #7a8694;
  font-style: italic;
}

.mlmh-press-badge {
  background: #d4a017;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.15rem 0.5rem;
  border-radius: 3px;
}

.mlmh-press-quote {
  margin: 0;
  padding: 0 0 0 1.1rem;
  position: relative;
  font-family: 'Merriweather', Georgia, serif;
  font-size: 0.98rem;
  line-height: 1.65;
  color: #2c3e50;
  font-style: italic;
  flex: 1;
}

.mlmh-press-quote::before {
  content: "\201C";
  position: absolute;
  left: -0.1rem;
  top: -0.4rem;
  font-family: 'Boogaloo', cursive;
  font-size: 2.6rem;
  line-height: 1;
  color: #6f8db7;
  font-style: normal;
  opacity: 0.55;
}

.mlmh-press-author {
  margin-top: 0.8rem;
  font-size: 0.88rem;
  color: #6f8db7;
  font-family: 'Inconsolata', monospace;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ---------------------------------------------------------------------------
   Round 8 — Cours à distance banjo/basse/autoharp : lien méthode détaillée
   --------------------------------------------------------------------------- */
.mlmh-method-link {
  margin-top: 0.75rem;
  font-size: 0.95rem;
  color: #444;
  font-style: italic;
}

/* ============================================================
   Extraits MP3 page (round 8)
   ============================================================ */
.mlmh-extrait-section {
  background: #fff;
  border: 1px solid #e3e9f1;
  border-left: 4px solid #6f8db7;
  border-radius: 8px;
  padding: 1.5rem 1.5rem 1.5rem 1.65rem;
  margin: 1.75rem 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  scroll-margin-top: 1rem;
}

.mlmh-extrait-header {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 1.5rem;
  align-items: start;
  margin-bottom: 1rem;
}

.mlmh-extrait-header-bare {
  grid-template-columns: 1fr;
}

.mlmh-extrait-cover img {
  display: block;
  width: 100%;
  max-width: 160px;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}

.mlmh-extrait-cover-double {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.mlmh-extrait-cover-double img {
  max-width: 76px;
}

.mlmh-extrait-intro { min-width: 0; }

.mlmh-extrait-kind {
  display: inline-block;
  font-family: 'Inconsolata', monospace;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6f8db7;
  background: #eef3fa;
  padding: 0.2rem 0.55rem;
  border-radius: 3px;
  margin-bottom: 0.5rem;
}

.mlmh-extrait-title {
  font-family: 'Boogaloo', cursive;
  font-size: 2rem;
  font-weight: normal;
  color: #2c3e50;
  margin: 0 0 0.35rem;
  line-height: 1.1;
}

.mlmh-extrait-meta {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  color: #4a5763;
  font-style: italic;
}

.mlmh-extrait-desc {
  margin: 0;
  color: #4a5763;
  line-height: 1.55;
}

.mlmh-tracklist {
  list-style: none;
  margin: 1.25rem 0 0.5rem;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}

.mlmh-track {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.35rem;
  padding: 0.7rem 0.85rem;
  background: #fafbfd;
  border: 1px solid #eaeef4;
  border-radius: 5px;
}

.mlmh-track:hover {
  border-color: #cdd9e8;
}

.mlmh-track-title {
  font-weight: 700;
  color: #2c3e50;
  font-size: 0.98rem;
  line-height: 1.35;
}

.mlmh-track-author {
  font-weight: 400;
  font-style: italic;
  color: #7c8693;
  font-size: 0.88rem;
  margin-left: 0.25rem;
}

.mlmh-track audio {
  width: 100%;
  margin: 0;
  height: 36px;
}

.mlmh-track-coming {
  align-items: center;
  grid-template-columns: 1fr auto;
  background: #fff8e1;
  border-color: #f0e0a8;
}

.mlmh-track-coming-tag {
  font-family: 'Inconsolata', monospace;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #8a6d1c;
  background: #fff;
  border: 1px solid #e6cf7f;
  padding: 0.15rem 0.5rem;
  border-radius: 3px;
}

.mlmh-extrait-section .mlmh-cta-row {
  margin-top: 1.1rem;
}

@media (max-width: 640px) {
  .mlmh-extrait-section {
    padding: 1.1rem 1rem;
  }
  .mlmh-extrait-header {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .mlmh-extrait-cover {
    max-width: 140px;
  }
  .mlmh-extrait-title {
    font-size: 1.7rem;
  }
}

/* mlmh-tab-shop-banner — bandeau "nouveau site tablatures" */
.mlmh-tab-shop-banner {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: #fff8e1;
  border: 2px solid #f59e0b;
  border-radius: 8px;
  padding: 1rem 1.3rem;
  margin: 1.5rem 0;
}
.mlmh-tab-shop-banner__icon {
  font-size: 2rem;
  flex-shrink: 0;
  line-height: 1;
}
.mlmh-tab-shop-banner__body {
  flex: 1;
}
.mlmh-tab-shop-banner__title {
  font-family: 'Boogaloo', cursive;
  font-size: 1.15rem;
  color: #92400e;
  margin: 0 0 0.25rem;
}
.mlmh-tab-shop-banner__text {
  margin: 0 0 0.6rem;
  font-size: 0.95rem;
  color: #444;
}
.mlmh-tab-shop-banner__link {
  display: inline-block;
  background: #f59e0b;
  color: #fff !important;
  font-family: 'Boogaloo', cursive;
  font-size: 1rem;
  padding: 0.45rem 1.1rem;
  border-radius: 5px;
  text-decoration: none !important;
  transition: background 0.2s;
}
.mlmh-tab-shop-banner__link:hover {
  background: #d97706;
}