/* ==========================================================================
 * app/design-src/masterclass/shell.css — header, navigation, footer MASTERCLASS
 * Mobile-first STRICT (rule 000 §1). Distinct du chrome du site central.
 * ========================================================================== */

.masterclass-body {
  color: var(--color-ink-soft);
  background: var(--color-bg);
  background-image: none;
}

@import url("../../components/cookie-consent.css");

/* Base neutre pour les pages atelier/connexion (qui ne chargent plus main.css). */
body[data-theme="masterclass"] .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: 0.85em 1.6em;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-ink);
  background: transparent;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--motion-base) var(--easing-smooth),
              border-color var(--motion-base) var(--easing-smooth),
              color var(--motion-base) var(--easing-smooth);
}

body[data-theme="masterclass"] .btn--secondary:hover,
body[data-theme="masterclass"] .btn--secondary:focus-visible {
  color: var(--mc-accent);
  border-color: var(--mc-accent);
}

body[data-theme="masterclass"] .btn--primary,
.mc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: 0.85em 1.6em;
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-small);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--mc-on-accent);
  background: var(--mc-accent);
  border: 1px solid var(--mc-accent);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--motion-base) var(--easing-smooth),
              border-color var(--motion-base) var(--easing-smooth),
              color var(--motion-base) var(--easing-smooth);
}

body[data-theme="masterclass"] .btn--primary:hover,
body[data-theme="masterclass"] .btn--primary:focus-visible,
.mc-btn:hover,
.mc-btn:focus-visible {
  background: var(--mc-accent-strong);
  border-color: var(--mc-accent-strong);
  color: var(--mc-on-accent);
}

.mc-btn--ghost {
  color: var(--color-ink);
  background: transparent;
  border-color: var(--color-line-strong);
}

.mc-btn--ghost:hover,
.mc-btn--ghost:focus-visible {
  color: var(--mc-accent);
  background: transparent;
  border-color: var(--mc-accent);
}

/* === HEADER =========================================================== */
.mc-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-line);
}

.mc-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-sm) var(--space-md);
}

.mc-brand {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.05;
  text-decoration: none;
}

.mc-brand__name {
  font-family: var(--font-serif);
  font-weight: var(--fw-medium);
  font-size: clamp(15px, 3.4vw, 19px);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink);
}

.mc-brand__sub {
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--mc-terracotta);
}

/* Navigation principale — masquee derriere le burger en mobile */
.mc-nav {
  display: none;
}

.mc-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  list-style: none;
  padding: 0;
  margin: 0;
}

.mc-nav__link {
  font-size: var(--fs-small);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-soft);
  text-decoration: none;
  transition: color var(--motion-fast) var(--easing-smooth);
}

.mc-nav__link:hover,
.mc-nav__link:focus-visible,
.mc-nav__link--active {
  color: var(--mc-accent);
}

.mc-header__actions {
  display: none;
  align-items: center;
  gap: var(--space-md);
}

.mc-header__atelier {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--fs-small);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink);
  text-decoration: none;
}

.mc-header__atelier:hover,
.mc-header__atelier:focus-visible {
  color: var(--mc-accent);
}

.mc-header__atelier svg {
  width: 18px;
  height: 18px;
}

/* Burger mobile — disclosure accessible */
.mc-burger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-ink);
  background: none;
  border: 0;
}

.mc-burger__icon {
  width: 22px;
  height: 14px;
  position: relative;
}

.mc-burger__icon::before,
.mc-burger__icon::after,
.mc-burger__icon span {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: var(--color-ink);
}

.mc-burger__icon::before { top: 0; }
.mc-burger__icon span     { top: 50%; transform: translateY(-50%); }
.mc-burger__icon::after  { bottom: 0; }

/* Panneau mobile */
.mc-mobile-panel {
  display: none;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-bottom: 1px solid var(--color-line);
  background: var(--color-bg-secondary);
}

.mc-mobile-panel[data-open="true"] {
  display: flex;
}

.mc-mobile-panel a {
  font-size: var(--fs-small);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink);
  text-decoration: none;
}

.mc-mobile-panel a:hover,
.mc-mobile-panel a:focus-visible {
  color: var(--mc-accent);
}

.mc-mobile-panel__bridge {
  margin-top: var(--space-xs);
}

/* === CONTENU ========================================================== */
.masterclass-content {
  min-height: 50vh;
}

/* === FOOTER =========================================================== */
.mc-footer {
  margin-top: var(--space-2xl);
  padding: var(--space-xl) var(--space-md) var(--space-lg);
  background: var(--mc-band);
  border-top: 1px solid var(--color-line);
}

.mc-footer__inner {
  max-width: var(--container-max);
  margin: 0 auto;
}

.mc-footer__top {
  display: grid;
  gap: var(--space-lg);
}

.mc-footer__brand-name {
  font-family: var(--font-serif);
  font-weight: var(--fw-medium);
  font-size: var(--text-lg, 19px);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink);
}

.mc-footer__brand-sub {
  display: block;
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--mc-terracotta);
}

.mc-footer__phrase {
  margin: var(--space-sm) 0 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-subtitle);
  color: var(--mc-terracotta);
}

.mc-footer__col-title {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-ink);
}

.mc-footer__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: var(--fs-small);
}

.mc-footer__list a {
  color: var(--color-ink-soft);
  text-decoration: none;
}

.mc-footer__list a:hover,
.mc-footer__list a:focus-visible {
  color: var(--mc-accent);
}

.mc-footer__social {
  display: flex;
  gap: var(--space-sm);
}

.mc-footer__social a {
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-pill);
  color: var(--color-ink-soft);
}

.mc-footer__social a:hover,
.mc-footer__social a:focus-visible {
  color: var(--mc-accent);
  border-color: var(--mc-accent);
}

.mc-footer__social svg {
  width: 16px;
  height: 16px;
}

.mc-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-line);
  font-size: var(--fs-small);
  color: var(--color-ink-soft);
}

.mc-footer__lang {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
}

.mc-footer__lang-link {
  color: var(--color-ink-soft);
  text-decoration: none;
}

.mc-footer__lang-link--active {
  color: var(--mc-accent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.mc-footer__bridge-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--mc-accent);
  text-decoration: none;
}

/* === DESKTOP ========================================================== */
@media (min-width: 64rem) {
  .mc-nav,
  .mc-header__actions {
    display: flex;
  }

  .mc-burger {
    display: none;
  }

  .mc-mobile-panel {
    display: none !important;
  }

  .mc-footer__top {
    grid-template-columns: 1.6fr repeat(4, 1fr);
    gap: var(--space-xl);
  }

  .mc-footer__bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}