/* ============================================================
   Melanie Inzirillo — site styles (shared across both variations)
   ============================================================ */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--font-body); color: var(--fg-1); background: var(--bg-1); }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ============ NAV ============ */
.mi-nav { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--nav-border, var(--border-1)); padding: 14px 36px; display: flex; align-items: center; gap: 28px; background: var(--nav-bg, rgba(245,239,227,0.85)); }
.mi-nav__brand { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-size: 18px; color: var(--fg-1); }
.mi-nav__brand img { width: 42px; height: 42px; object-fit: contain; }
.mi-nav__brand small { display: block; font-family: var(--font-body); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-3); margin-top: 2px; }
.mi-nav__tabs { display: flex; gap: 4px; margin-left: auto; }
.mi-nav__tab { font-family: var(--font-body); font-size: 13.5px; padding: 9px 16px; border-radius: 999px; color: var(--fg-2); cursor: pointer; transition: all var(--dur-fast) var(--ease-soft); border: none; background: transparent; }
.mi-nav__tab:hover { color: var(--fg-1); }
.mi-nav__tab.is-active { background: var(--nav-active-bg, var(--tsc-cream-300)); color: var(--fg-1); }
.mi-nav__cta { font-family: var(--font-body); font-size: 14px; padding: 10px 20px; border-radius: 999px; background: var(--tsc-gold); color: var(--tsc-cream-100); border: none; cursor: pointer; box-shadow: var(--shadow-gold); transition: all var(--dur-fast) var(--ease-soft); font-weight: 500; }
.mi-nav__cta:hover { background: var(--tsc-gold-600); transform: translateY(-1px); }
@media (max-width: 720px) { .mi-nav__tabs { display: none; } }

/* ============ SECTION SCAFFOLD ============ */
.mi-section { padding: 100px 28px; max-width: 1180px; margin: 0 auto; position: relative; }
.mi-section--narrow { max-width: 880px; }
.mi-section__head { max-width: 720px; margin: 0 auto 60px; text-align: center; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.mi-section__head h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(34px, 4.5vw, 54px); line-height: 1.08; letter-spacing: -0.01em; margin: 0; color: var(--fg-1); }
.mi-section__head h2 em { color: var(--fg-accent); font-style: italic; }
.mi-section__head p { margin: 0; font-size: 17px; color: var(--fg-2); line-height: 1.65; max-width: 560px; }
.mi-eyebrow { font-family: var(--font-body); font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--fg-accent); font-weight: 500; white-space: nowrap; }

/* ============ BUTTONS ============ */
.mi-btn { font-family: var(--font-body); font-weight: 500; font-size: 14px; border-radius: 10px; padding: 13px 26px; border: 1px solid transparent; cursor: pointer; transition: all var(--dur-fast) var(--ease-soft); display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.mi-btn--lg { font-size: 15px; padding: 16px 32px; }
.mi-btn--primary { background: var(--tsc-gold); color: var(--tsc-cream-100); box-shadow: var(--shadow-gold); }
.mi-btn--primary:hover { background: var(--tsc-gold-600); transform: translateY(-1px); }
.mi-btn--secondary { background: var(--btn-secondary-bg, transparent); color: var(--fg-1); border-color: var(--btn-secondary-border, var(--tsc-brown-300)); }
.mi-btn--secondary:hover { background: var(--btn-secondary-hover, var(--tsc-cream-300)); }
.mi-btn--ghost { background: transparent; color: var(--fg-accent); padding: 13px 0; }
.mi-btn--ghost:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ============ ABOUT ============ */
.mi-about { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 60px; align-items: center; }
@media (max-width: 820px) { .mi-about { grid-template-columns: 1fr; gap: 36px; } }
.mi-about__portrait { aspect-ratio: 4/5; border-radius: 24px; background: var(--portrait-bg, linear-gradient(135deg, var(--tsc-gold-400), var(--tsc-brown-400))); position: relative; overflow: hidden; box-shadow: var(--shadow-lg); display: flex; align-items: center; justify-content: center; }
.mi-about__portrait::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 30% 30%, rgba(245,239,227,0.18), transparent 45%), radial-gradient(circle at 70% 80%, rgba(90,70,50,0.25), transparent 50%); }
.mi-about__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; z-index: 1; }
.mi-about__initial { font-family: var(--font-display); font-style: italic; font-size: 220px; color: var(--tsc-cream-100); opacity: 0.85; line-height: 1; position: relative; z-index: 1; }
.mi-about__caption { position: absolute; bottom: 16px; left: 16px; right: 16px; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tsc-cream-100); opacity: 0.7; text-align: center; }
.mi-about__text { display: flex; flex-direction: column; gap: 20px; }
.mi-about__text h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(32px, 4vw, 48px); line-height: 1.08; letter-spacing: -0.01em; margin: 4px 0 0; color: var(--fg-1); }
.mi-about__text h2 em { color: var(--fg-accent); font-style: italic; }
.mi-about__text p { font-size: 16.5px; line-height: 1.7; color: var(--fg-2); margin: 0; }
.mi-about__sig { font-family: var(--font-display); font-style: italic; font-size: 22px; color: var(--fg-accent); margin-top: 8px; }

/* ============ LECTURE — three pillars ============ */
.mi-lecture { background: var(--lecture-bg, var(--tsc-cream-100)); padding: 100px 28px; }
.mi-lecture__inner { max-width: 1180px; margin: 0 auto; }
.mi-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 60px; }
@media (max-width: 820px) { .mi-pillars { grid-template-columns: 1fr; } }
.mi-pillar { background: var(--card-bg, var(--bg-3)); border: 1px solid var(--card-border, var(--border-1)); border-radius: 22px; padding: 36px 30px; display: flex; flex-direction: column; gap: 14px; transition: transform var(--dur-base) var(--ease-soft), box-shadow var(--dur-base) var(--ease-soft); }
.mi-pillar:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.mi-pillar__glyph { font-family: var(--font-display); font-style: italic; font-size: 36px; color: var(--fg-accent); line-height: 1; }
.mi-pillar h3 { font-family: var(--font-display); font-weight: 400; font-size: 26px; line-height: 1.15; margin: 0; color: var(--fg-1); }
.mi-pillar p { font-size: 15px; line-height: 1.65; color: var(--fg-2); margin: 0; }
.mi-pillar__tag { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-accent); font-weight: 500; }

/* ============ PROCESS — 3 steps ============ */
.mi-process__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 20px; position: relative; }
@media (max-width: 820px) { .mi-process__list { grid-template-columns: 1fr; } }
.mi-step { display: flex; flex-direction: column; gap: 14px; padding: 28px 24px; border-radius: 18px; background: var(--card-bg, var(--bg-3)); border: 1px solid var(--card-border, var(--border-1)); position: relative; }
.mi-step__num { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-accent); font-weight: 500; }
.mi-step h3 { font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 1.2; margin: 0; color: var(--fg-1); }
.mi-step p { font-size: 14.5px; line-height: 1.6; color: var(--fg-2); margin: 0; }
.mi-step__icon { width: 48px; height: 48px; border-radius: 14px; background: var(--tsc-gold-100); color: var(--tsc-gold-700); display: flex; align-items: center; justify-content: center; }

/* ============ FOR WHO ============ */
.mi-forwho { background: var(--forwho-bg, var(--tsc-cream-100)); padding: 100px 28px; }
.mi-forwho__inner { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
@media (max-width: 820px) { .mi-forwho__inner { grid-template-columns: 1fr; } }
.mi-forwho__col { background: var(--card-bg, var(--bg-3)); border: 1px solid var(--card-border, var(--border-1)); border-radius: 22px; padding: 36px 32px; }
.mi-forwho__col h3 { font-family: var(--font-display); font-weight: 400; font-size: 26px; margin: 0 0 6px; color: var(--fg-1); display: flex; align-items: center; gap: 10px; }
.mi-forwho__col .icon { width: 32px; height: 32px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.mi-forwho__col.for .icon { background: rgba(111,138,76,0.18); color: #6F8A4C; }
.mi-forwho__col.not .icon { background: rgba(184,85,58,0.16); color: #B8553A; }
.mi-forwho__col p.sub { font-size: 13.5px; color: var(--fg-3); margin: 0 0 18px; }
.mi-forwho__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.mi-forwho__col li { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; line-height: 1.55; color: var(--fg-1); }
.mi-forwho__col li svg { flex-shrink: 0; margin-top: 2px; }
.mi-forwho__col.for li svg { color: #6F8A4C; }
.mi-forwho__col.not li svg { color: #B8553A; opacity: 0.7; }
.mi-forwho__col.not li { color: var(--fg-2); }

/* ============ PRICING ============ */
.mi-pricing__card { max-width: 540px; margin: 0 auto; background: var(--card-bg, var(--bg-3)); border: 1px solid var(--card-border, var(--border-1)); border-radius: 24px; padding: 44px 40px; box-shadow: var(--shadow-lg); position: relative; overflow: hidden; }
.mi-pricing__badge { position: absolute; top: 18px; right: 18px; background: var(--tsc-gold); color: var(--tsc-cream-100); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; font-weight: 500; }
.mi-pricing__name { font-family: var(--font-display); font-weight: 400; font-size: 32px; margin: 0 0 6px; color: var(--fg-1); }
.mi-pricing__sub { font-size: 14px; color: var(--fg-3); margin: 0 0 28px; }
.mi-pricing__price { display: flex; align-items: baseline; gap: 12px; margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--card-border, var(--border-1)); }
.mi-pricing__price strong { font-family: var(--font-display); font-weight: 400; font-size: 64px; line-height: 1; color: var(--fg-accent); }
.mi-pricing__price small { font-size: 14px; color: var(--fg-3); }
.mi-pricing__price del { font-family: var(--font-display); font-size: 26px; color: var(--fg-3); text-decoration-color: var(--tsc-gold); }
.mi-pricing__features { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.mi-pricing__features li { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; line-height: 1.55; color: var(--fg-1); }
.mi-pricing__features li svg { color: var(--fg-accent); flex-shrink: 0; margin-top: 3px; }
.mi-pricing__foot { font-size: 12px; color: var(--fg-3); text-align: center; margin-top: 12px; }

/* ============ TESTIMONIALS ============ */
.mi-testimonials__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 820px) { .mi-testimonials__grid { grid-template-columns: 1fr; } }
.mi-quote { background: var(--card-bg, var(--bg-3)); border: 1px solid var(--card-border, var(--border-1)); border-radius: 18px; padding: 28px; display: flex; flex-direction: column; gap: 18px; box-shadow: var(--shadow-sm); }
.mi-quote svg.mark { color: var(--tsc-gold-300); }
.mi-quote blockquote { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 18px; line-height: 1.45; color: var(--fg-1); margin: 0; }
.mi-quote figcaption { display: flex; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--card-border, var(--border-1)); }
.mi-quote__avatar { width: 38px; height: 38px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 15px; color: var(--tsc-cream-100); flex-shrink: 0; }
.mi-quote figcaption strong { display: block; font-size: 13.5px; color: var(--fg-1); font-weight: 600; }
.mi-quote figcaption em { font-style: normal; font-size: 12px; color: var(--fg-3); }

/* ============ FAQ ============ */
.mi-faq__list { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.mi-faq details { background: var(--card-bg, var(--bg-3)); border: 1px solid var(--card-border, var(--border-1)); border-radius: 14px; overflow: hidden; }
.mi-faq summary { list-style: none; cursor: pointer; padding: 20px 24px; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-family: var(--font-display); font-size: 18px; color: var(--fg-1); }
.mi-faq summary::-webkit-details-marker { display: none; }
.mi-faq__icon { font-family: var(--font-display); font-size: 28px; color: var(--fg-accent); width: 28px; text-align: center; line-height: 1; }
.mi-faq p { padding: 0 24px 22px; margin: 0; font-size: 15px; line-height: 1.65; color: var(--fg-2); }

/* ============ BOOKING ============ */
.mi-booking { background: var(--booking-bg, var(--tsc-brown-500)); padding: 100px 28px; position: relative; overflow: hidden; }
.mi-booking__inner { max-width: 720px; margin: 0 auto; position: relative; z-index: 1; }
.mi-booking__head { text-align: center; color: var(--booking-fg, var(--tsc-cream-100)); margin-bottom: 40px; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.mi-booking__head .mi-eyebrow { color: var(--tsc-gold-300); }
.mi-booking__head h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(32px, 4.5vw, 48px); line-height: 1.08; margin: 0; color: inherit; }
.mi-booking__head h2 em { color: var(--tsc-gold-300); font-style: italic; }
.mi-booking__head p { font-size: 16px; line-height: 1.6; opacity: 0.85; margin: 0; max-width: 520px; }
.mi-booking__form { background: var(--bg-3); border-radius: 24px; padding: 40px 36px; box-shadow: var(--shadow-lg); }
@media (max-width: 600px) { .mi-booking__form { padding: 30px 22px; } }

.mi-steps { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 32px; }
.mi-steps__dot { width: 10px; height: 10px; border-radius: 999px; background: var(--tsc-cream-300); transition: all var(--dur-base) var(--ease-soft); }
.mi-steps__dot.is-done { background: var(--tsc-gold); }
.mi-steps__dot.is-active { background: var(--tsc-gold); width: 32px; }

.mi-step-panel { display: flex; flex-direction: column; gap: 20px; min-height: 360px; }
.mi-step-panel__title { font-family: var(--font-display); font-size: 28px; font-weight: 400; margin: 0; color: var(--fg-1); }
.mi-step-panel__sub { font-size: 14px; color: var(--fg-3); margin: -10px 0 4px; }

.mi-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 520px) { .mi-grid-2 { grid-template-columns: 1fr; } }

.mi-field { display: flex; flex-direction: column; gap: 6px; }
.mi-field label { font-size: 12px; font-weight: 500; color: var(--fg-2); letter-spacing: 0.04em; }
.mi-field input, .mi-field textarea, .mi-field select { font-family: var(--font-body); font-size: 15px; padding: 12px 14px; border-radius: 8px; border: 1px solid var(--border-1); background: var(--bg-2); color: var(--fg-1); outline: none; transition: all var(--dur-fast) var(--ease-soft); }
.mi-field input:focus, .mi-field textarea:focus, .mi-field select:focus { border-color: var(--tsc-gold); box-shadow: 0 0 0 3px rgba(200,146,50,0.18); background: var(--bg-3); }
.mi-field textarea { resize: vertical; min-height: 100px; }

/* Sélecteur de créneau natif (remplace l'embed Calendly) */
.mi-slots { display: block; }

/* Calendrier mensuel */
.mi-cal { max-width: 420px; margin: 0 auto; }
.mi-cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.mi-cal__title { font-family: var(--font-display); font-size: 21px; color: var(--fg-1); text-transform: capitalize; }
.mi-cal__nav { width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--border-1); background: var(--bg-2); color: var(--fg-2); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all var(--dur-fast) var(--ease-soft); }
.mi-cal__nav:hover:not(:disabled) { border-color: var(--tsc-gold-300); color: var(--tsc-gold-300); }
.mi-cal__nav:disabled { opacity: 0.28; cursor: default; }
.mi-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.mi-cal__dow { text-align: center; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); padding-bottom: 8px; }
.mi-cal__cell { aspect-ratio: 1 / 1; border: none; background: transparent; border-radius: 999px; font-family: var(--font-body); font-size: 15px; color: var(--fg-3); cursor: default; display: flex; align-items: center; justify-content: center; padding: 0; }
.mi-cal__cell.is-empty { visibility: hidden; }
.mi-cal__cell.is-available { background: rgba(200,146,50,0.14); color: var(--tsc-gold-300); font-weight: 600; cursor: pointer; transition: all var(--dur-fast) var(--ease-soft); }
.mi-cal__cell.is-available:hover { background: rgba(200,146,50,0.30); }
.mi-cal__cell.is-selected { background: var(--tsc-gold); color: var(--tsc-cream-100); }
.mi-cal__times-head { font-size: 14px; color: var(--fg-2); font-weight: 500; text-align: center; margin: 22px 0 14px; }

.mi-slots__times { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.mi-slots__time { padding: 12px; border-radius: 10px; border: 1px solid var(--border-1); background: var(--bg-2); cursor: pointer; text-align: center; font-family: var(--font-body); font-size: 15px; color: var(--fg-1); transition: all var(--dur-fast) var(--ease-soft); }
.mi-slots__time:hover { border-color: var(--tsc-gold-300); }
.mi-slots__time.is-active { border-color: var(--tsc-gold); background: var(--tsc-gold-100); color: var(--tsc-gold-800); font-weight: 600; }
.mi-slots__tz { font-size: 12px; color: var(--fg-3); margin-top: 14px; }
.mi-slots__msg { padding: 28px 20px; text-align: center; color: var(--fg-3); font-size: 14px; background: var(--bg-2); border: 1px solid var(--border-1); border-radius: 12px; line-height: 1.6; }

/* Lien visio sur l'écran de confirmation */
.mi-confirm__zoom { margin: 4px auto; max-width: 460px; padding: 14px 18px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--border-1); font-size: 13px; color: var(--fg-3); display: flex; flex-direction: column; gap: 6px; word-break: break-all; text-align: left; }
.mi-confirm__zoom a { color: var(--tsc-gold-300); }

/* Autocomplétion ville (lieu de naissance) */
.mi-city { position: relative; }
.mi-city input { width: 100%; box-sizing: border-box; }
.mi-city__menu { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30; background: var(--bg-3); border: 1px solid var(--border-1); border-radius: 10px; box-shadow: var(--shadow-lg); max-height: 240px; overflow-y: auto; }
.mi-city__item { padding: 11px 14px; font-size: 14px; color: var(--fg-2); cursor: pointer; transition: background var(--dur-fast) var(--ease-soft); }
.mi-city__item:hover, .mi-city__item.is-active { background: rgba(200,146,50,0.16); color: var(--fg-1); }

.mi-topic-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mi-topic { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border-1); background: var(--bg-2); font-size: 13px; cursor: pointer; transition: all var(--dur-fast) var(--ease-soft); color: var(--fg-2); }
.mi-topic:hover { border-color: var(--tsc-gold-300); color: var(--fg-1); }
.mi-topic.is-selected { background: var(--tsc-gold); color: var(--tsc-cream-100); border-color: var(--tsc-gold); }

.mi-summary { background: var(--bg-2); border: 1px solid var(--border-1); border-radius: 12px; padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.mi-summary__row { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; }
.mi-summary__row .lbl { color: var(--fg-3); }
.mi-summary__row .val { color: var(--fg-1); font-weight: 500; text-align: right; }
.mi-summary__total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 14px; border-top: 1px solid var(--border-1); }
.mi-summary__total .val { font-family: var(--font-display); font-size: 28px; color: var(--fg-accent); }
.mi-summary__total del { font-family: var(--font-display); font-size: 16px; color: var(--fg-3); margin-right: 6px; }

.mi-payment-methods { display: flex; flex-direction: column; gap: 10px; }
.mi-pm { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 12px; border: 1px solid var(--border-1); background: var(--bg-2); cursor: pointer; transition: all var(--dur-fast) var(--ease-soft); }
.mi-pm:hover { border-color: var(--tsc-gold-300); }
.mi-pm.is-selected { border-color: var(--tsc-gold); background: var(--tsc-gold-50); }
.mi-pm__radio { width: 18px; height: 18px; border-radius: 999px; border: 1.5px solid var(--tsc-brown-300); position: relative; flex-shrink: 0; }
.mi-pm.is-selected .mi-pm__radio { border-color: var(--tsc-gold); }
.mi-pm.is-selected .mi-pm__radio::after { content: ''; position: absolute; inset: 3px; border-radius: 999px; background: var(--tsc-gold); }
.mi-pm__name { font-weight: 500; color: var(--fg-1); }
.mi-pm__sub { font-size: 12px; color: var(--fg-3); }

.mi-confirm { text-align: center; padding: 30px 0; display: flex; flex-direction: column; gap: 16px; align-items: center; }
.mi-confirm__icon { width: 64px; height: 64px; border-radius: 999px; background: var(--tsc-gold-100); color: var(--tsc-gold-700); display: flex; align-items: center; justify-content: center; }
.mi-confirm h3 { font-family: var(--font-display); font-size: 32px; font-weight: 400; margin: 0; color: var(--fg-1); }
.mi-confirm p { font-size: 15px; color: var(--fg-2); line-height: 1.6; max-width: 460px; margin: 0; }

.mi-actions { display: flex; gap: 12px; margin-top: 12px; padding-top: 20px; border-top: 1px solid var(--border-1); }
.mi-actions__right { margin-left: auto; }

/* ============ FOOTER ============ */
.mi-footer { background: var(--footer-bg, var(--tsc-brown-700)); color: var(--footer-fg, var(--tsc-cream-200)); padding: 60px 28px 28px; }
.mi-footer__inner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr 2fr; gap: 60px; padding-bottom: 40px; border-bottom: 1px solid rgba(245, 239, 227, 0.12); }
@media (max-width: 720px) { .mi-footer__inner { grid-template-columns: 1fr; gap: 32px; } }
.mi-footer__brand img { width: 70px; height: 64px; object-fit: contain; margin-bottom: 14px; filter: brightness(0) invert(1) opacity(0.85); }
.mi-footer__brand p { font-size: 13.5px; line-height: 1.6; max-width: 280px; opacity: 0.7; margin: 0; }
.mi-footer__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.mi-footer__cols h6 { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tsc-gold-300); margin: 0 0 14px; font-weight: 500; }
.mi-footer__cols a { display: block; padding: 6px 0; font-size: 13.5px; opacity: 0.75; }
.mi-footer__cols a:hover { opacity: 1; }
.mi-footer__bottom { max-width: 1180px; margin: 0 auto; padding-top: 24px; display: flex; justify-content: space-between; font-size: 12px; opacity: 0.6; flex-wrap: wrap; gap: 12px; }

/* ============ MOTIF — sunburst behind sections ============ */
.mi-motif-burst { position: absolute; pointer-events: none; opacity: 0.06; mix-blend-mode: multiply; }
.mi-motif-burst img { width: 100%; height: auto; }

/* ============================================================
   MOBILE — smartphone refinements
   ============================================================ */
@media (max-width: 600px) {
  /* Nav — tighter, brand + CTA fit on one line */
  .mi-nav { padding: 11px 16px; gap: 12px; }
  .mi-nav__brand { font-size: 16px; gap: 9px; }
  .mi-nav__brand img { width: 34px; height: 34px; }
  .mi-nav__cta { font-size: 13px; padding: 9px 15px; margin-left: auto; }

  /* Section scaffold — less vertical air, comfy side gutters */
  .mi-section { padding: 60px 20px; }
  .mi-section__head { margin-bottom: 40px; gap: 12px; }
  .mi-section__head p { font-size: 15.5px; }
  .mi-lecture, .mi-forwho, .mi-booking { padding-left: 20px; padding-right: 20px; }
  .mi-lecture, .mi-forwho { padding-top: 64px; padding-bottom: 64px; }
  .mi-booking { padding-top: 64px; padding-bottom: 72px; }

  /* About */
  .mi-about__text p { font-size: 15.5px; line-height: 1.65; }

  /* Pillars / steps / cards — a touch more breathing room inside */
  .mi-pillar { padding: 30px 24px; }
  .mi-forwho__col { padding: 30px 24px; }
  .mi-pricing__card { padding: 36px 26px; }

  /* Pricing price scaling */
  .mi-pricing__price strong { font-size: 52px; }

  /* Booking form fields stack & buttons go full-width */
  .mi-step-panel { min-height: 0; }
  .mi-actions { flex-direction: column-reverse; gap: 10px; }
  .mi-actions__right { margin-left: 0; width: 100%; }
  .mi-actions__right .mi-btn { width: 100%; justify-content: center; }
  .mi-actions > .mi-btn--secondary { width: 100%; justify-content: center; }

  /* Footer bottom stacks */
  .mi-footer__bottom { flex-direction: column; gap: 6px; }
}

/* iOS: prevent input zoom by keeping font-size >= 16px on focus targets */
@media (max-width: 600px) {
  .mi-field input, .mi-field textarea, .mi-field select { font-size: 16px; }
}