/*
Theme Name: MonPrompt 1a - Éditorial chaleureux
Theme URI: https://monprompt.com/
Author: monprompt.com
Description: Thème du redesign MonPrompt, direction « 1a Éditorial chaleureux » : serif Newsreader, palette crème et mocha, méthode CRAFT animée. Accueil responsive desktop 1440 / mobile 390.
Version: 1.4.1
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: monprompt
Tags: blog, portfolio, custom-colors, custom-menu, translation-ready, responsive
*/

/* ==========================================================================
   1. Tokens - direction 1a
   ========================================================================== */

:root {
  /* Fonds */
  --mp-paper: #fdfbf7;
  --mp-sand: #f3ede6;
  --mp-sand-soft: #f9f5ef;
  --mp-white: #ffffff;

  /* Encres */
  --mp-ink: #171412;
  --mp-ink-raised: #221c18;
  --mp-ink-line: #3a3029;

  /* Accents */
  --mp-mocha: #a47864;
  --mp-mocha-dark: #8a5f4d;
  --mp-terracotta: #e27d60;

  /* Textes */
  --mp-muted: #7f6e66;
  --mp-faint: #a99a90;
  --mp-label: #6b5d54;
  --mp-on-dark: #cbbfb5;
  --mp-on-dark-strong: #e8dfd5;

  /* Traits */
  --mp-border: #d8cfc6;
  --mp-border-soft: #efe8e0;
  --mp-border-mid: #e5ddd3;

  /* Typo */
  --mp-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --mp-sans: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Gouttière : 64px à 1440, 20px en mobile - identique à la maquette */
  --mp-gutter: clamp(20px, 4.4444vw, 64px);
  --mp-wrap: 1312px;

  --mp-radius-sm: 4px;
  --mp-radius: 8px;
  --mp-radius-md: 12px;
  --mp-radius-lg: 14px;
  --mp-radius-xl: 16px;
  --mp-radius-pill: 999px;
}

/* ==========================================================================
   2. Base
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--mp-paper);
  color: var(--mp-ink);
  font-family: var(--mp-sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--mp-mocha); text-decoration: none; }
a:hover { color: var(--mp-mocha-dark); }

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

h1, h2, h3, h4 { font-family: var(--mp-serif); margin: 0; }

.mp-wrap {
  max-width: var(--mp-wrap);
  margin-inline: auto;
}

.mp-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.mp-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--mp-ink);
  color: var(--mp-paper);
  padding: 12px 20px;
  font: 600 14px var(--mp-sans);
}
.mp-skip-link:focus { left: 0; color: var(--mp-paper); }

:focus-visible {
  outline: 2px solid var(--mp-terracotta);
  outline-offset: 2px;
}

/* ==========================================================================
   3. Animations
   ========================================================================== */

@keyframes mp-craft-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@keyframes mp-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

/* Sans JS, tout est visible d'emblée. Avec JS, on masque puis on rejoue
   l'entrée quand la section arrive dans le viewport. */
.mp-js .mp-anim { opacity: 0; }
.mp-js .is-in .mp-anim {
  animation: mp-craft-in 0.5s var(--mp-delay, 0s) both;
}

.mp-caret {
  display: inline-block;
  width: 8px;
  height: 15px;
  background: var(--mp-terracotta);
  margin-left: 5px;
  vertical-align: -2px;
  animation: mp-blink 1s step-end infinite;
}

@media (prefers-reduced-motion: reduce) {
  .mp-js .mp-anim,
  .mp-js .is-in .mp-anim { opacity: 1; animation: none; }
  .mp-caret { animation: none; }
  * { scroll-behavior: auto !important; }
}

html { scroll-behavior: smooth; }

/* ==========================================================================
   4. Bandeau sponsor
   ========================================================================== */

.mp-sponsorbar {
  background: var(--mp-ink);
  color: var(--mp-on-dark);
  font: 400 12px var(--mp-sans);
  text-align: center;
  padding: 7px var(--mp-gutter);
}
.mp-sponsorbar strong { color: var(--mp-paper); font-weight: 600; }
.mp-sponsorbar a { color: var(--mp-mocha); }
.mp-sponsorbar a:hover { color: var(--mp-terracotta); }
.mp-sponsorbar__short { display: none; }

/* ==========================================================================
   5. En-tête
   ========================================================================== */

.mp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px var(--mp-gutter);
  border-bottom: 1px solid var(--mp-border-soft);
  background: var(--mp-paper);
}

.mp-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--mp-ink);
  flex: none;
}
.mp-logo:hover { color: var(--mp-ink); }
.mp-logo__word {
  font: 700 24px var(--mp-serif);
  letter-spacing: -0.01em;
}
.mp-logo__dot { color: var(--mp-terracotta); }

.mp-nav {
  display: flex;
  gap: 32px;
  font: 500 14px var(--mp-sans);
}
.mp-nav a { color: var(--mp-muted); }
.mp-nav a:hover,
.mp-nav .current-menu-item > a { color: var(--mp-ink); }

.mp-header__tools {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: none;
}

.mp-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--mp-sand);
  border-radius: var(--mp-radius);
  padding: 8px 14px;
  width: 200px;
}
.mp-search__icon { color: var(--mp-faint); font-size: 14px; line-height: 1; }
.mp-search input {
  border: 0;
  background: none;
  width: 100%;
  font: 400 13px var(--mp-sans);
  color: var(--mp-ink);
  padding: 0;
}
.mp-search input::placeholder { color: var(--mp-faint); opacity: 1; }
.mp-search input:focus { outline: none; }
.mp-search:focus-within { outline: 2px solid var(--mp-mocha); outline-offset: 2px; }

.mp-lang {
  display: flex;
  border: 1px solid var(--mp-border);
  border-radius: var(--mp-radius-pill);
  overflow: hidden;
  font: 600 11px var(--mp-sans);
}
.mp-lang button {
  padding: 5px 10px;
  color: var(--mp-muted);
  background: none;
}
.mp-lang button[aria-pressed="true"] {
  background: var(--mp-ink);
  color: var(--mp-paper);
}

.mp-btn-signin {
  background: var(--mp-mocha);
  color: #fff;
  border-radius: var(--mp-radius);
  padding: 10px 20px;
  font: 700 13px var(--mp-sans);
  display: inline-block;
  white-space: nowrap;
}
.mp-btn-signin:hover { background: var(--mp-mocha-dark); color: #fff; }

/* Barre mobile : icône recherche + burger */
.mp-header__mobile { display: none; align-items: center; gap: 14px; }
.mp-iconbtn { font: 400 18px var(--mp-sans); color: var(--mp-muted); line-height: 1; }
.mp-burger { display: flex; flex-direction: column; gap: 4px; padding: 4px 0; }
.mp-burger span {
  width: 20px;
  height: 2px;
  background: var(--mp-ink);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.mp-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.mp-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.mp-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mp-drawer {
  display: none;
  border-bottom: 1px solid var(--mp-border-soft);
  background: var(--mp-paper);
  padding: 16px 20px 24px;
}
.mp-drawer.is-open { display: block; }
.mp-drawer .mp-search { width: 100%; margin-bottom: 16px; }
.mp-drawer__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font: 500 16px var(--mp-sans);
  margin-bottom: 18px;
}
.mp-drawer__nav a {
  color: var(--mp-ink);
  padding: 11px 0;
  border-bottom: 1px solid var(--mp-border-soft);
}
.mp-drawer__foot { display: flex; align-items: center; gap: 12px; }
.mp-drawer__foot .mp-btn-signin { flex: 1; text-align: center; }

/* ==========================================================================
   6. Hero
   ========================================================================== */

.mp-hero {
  padding: 72px var(--mp-gutter) 56px;
}
.mp-hero__inner {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 64px;
  align-items: center;
}

.mp-hero__title {
  font: 800 66px/1.05 var(--mp-serif);
  margin: 0 0 24px;
}
.mp-hero__title .mp-logo__dot { color: var(--mp-terracotta); }
/* La coupe « Copie. Teste. / Publie. » n'existe qu'en desktop 1440. */
.mp-hero__break { display: none; }
@media (min-width: 1181px) { .mp-hero__break { display: inline; } }

.mp-hero__lead {
  font: 400 19px/1.6 var(--mp-sans);
  color: var(--mp-muted);
  margin: 0 0 32px;
  max-width: 470px;
}

.mp-hero__cta { display: flex; gap: 14px; flex-wrap: wrap; }

.mp-btn-primary {
  background: var(--mp-ink);
  color: var(--mp-paper);
  border-radius: var(--mp-radius);
  padding: 14px 28px;
  font: 700 15px var(--mp-sans);
  display: inline-block;
}
.mp-btn-primary:hover { background: #2a2320; color: var(--mp-paper); }

.mp-btn-ghost {
  color: var(--mp-mocha);
  border: 1px solid var(--mp-border);
  border-radius: var(--mp-radius);
  padding: 14px 28px;
  font: 600 15px var(--mp-sans);
  display: inline-block;
  background: none;
}
.mp-btn-ghost:hover { border-color: var(--mp-mocha); color: var(--mp-mocha-dark); }

.mp-stats { display: flex; gap: 40px; margin-top: 44px; }
.mp-stats__num { font: 700 28px var(--mp-serif); }
.mp-stats__label {
  font: 500 12px var(--mp-sans);
  color: var(--mp-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.mp-stats__label--short { display: none; }

.mp-mosaic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.mp-tile {
  height: 190px;
  border-radius: var(--mp-radius-lg);
  position: relative;
  overflow: hidden;
}
.mp-tile--text {
  background: var(--mp-ink);
  display: flex;
  align-items: center;
  padding: 0 18px;
}
.mp-tile--text span.mp-tile__quote {
  font: italic 400 13px/1.6 var(--mp-serif);
  color: var(--mp-on-dark);
}
.mp-tile--video { display: flex; align-items: center; justify-content: center; }

.mp-play {
  width: 44px;
  height: 44px;
  border-radius: var(--mp-radius-pill);
  background: rgba(253, 251, 247, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mp-ink);
  font-size: 15px;
}

.mp-badge {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: rgba(23, 20, 18, 0.75);
  color: #fff;
  font: 600 10px var(--mp-sans);
  padding: 4px 8px;
  border-radius: var(--mp-radius-sm);
  letter-spacing: 0.02em;
}
.mp-badge--onDark { background: rgba(253, 251, 247, 0.15); }

/* ==========================================================================
   7. CRAFT
   ========================================================================== */

.mp-craft {
  background: var(--mp-ink);
  color: var(--mp-paper);
  padding: 72px var(--mp-gutter);
}
.mp-craft__inner {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 72px;
  align-items: start;
}

.mp-eyebrow {
  font: 600 12px var(--mp-sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mp-terracotta);
  margin-bottom: 18px;
}

.mp-craft__title { font: 700 48px/1.1 var(--mp-serif); margin: 0 0 20px; }
.mp-craft__lead {
  font: 400 16px/1.7 var(--mp-sans);
  color: var(--mp-faint);
  margin: 0 0 28px;
}

.mp-craft__list { display: flex; flex-direction: column; gap: 10px; }
.mp-craft__row {
  display: flex;
  gap: 18px;
  align-items: baseline;
  background: var(--mp-ink-raised);
  border-radius: 10px;
  padding: 16px 20px;
}
.mp-craft__letter {
  font: 700 30px var(--mp-serif);
  color: var(--mp-terracotta);
  width: 28px;
  flex: none;
}
.mp-craft__name { font: 600 16px var(--mp-sans); }
.mp-craft__desc { font: 400 13px var(--mp-sans); color: var(--mp-faint); }
.mp-craft__desc--short { display: none; }

.mp-terminal-col { position: sticky; top: 32px; }

.mp-terminal {
  background: var(--mp-ink-raised);
  border: 1px solid var(--mp-ink-line);
  border-radius: var(--mp-radius-lg);
  overflow: hidden;
}
.mp-terminal__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--mp-ink-line);
}
.mp-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--mp-radius-pill);
  background: var(--mp-ink-line);
}
.mp-dot--live { background: var(--mp-terracotta); }
.mp-terminal__caption {
  font: 500 12px var(--mp-sans);
  color: var(--mp-faint);
  margin-left: 8px;
}
.mp-terminal__body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  font: 400 14px/1.6 var(--mp-sans);
}
.mp-terminal__key {
  color: var(--mp-terracotta);
  font: 700 12px var(--mp-sans);
  letter-spacing: 0.1em;
}
.mp-terminal__val { color: var(--mp-on-dark-strong); }
.mp-terminal__foot {
  padding: 16px 24px;
  border-top: 1px solid var(--mp-ink-line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.mp-terminal__note { font: 500 12px var(--mp-sans); color: var(--mp-faint); }
.mp-btn-copy-accent {
  background: var(--mp-terracotta);
  color: var(--mp-ink);
  border-radius: 6px;
  padding: 8px 16px;
  font: 700 12px var(--mp-sans);
  white-space: nowrap;
}

/* ==========================================================================
   8. Feed
   ========================================================================== */

.mp-feed { padding: 64px var(--mp-gutter); }

.mp-feed__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--mp-border-mid);
  margin-bottom: 28px;
}

.mp-tabs { display: flex; gap: 28px; font: 600 14px var(--mp-sans); }
.mp-tabs a {
  color: var(--mp-muted);
  padding: 12px 4px;
  border-bottom: 2px solid transparent;
}
.mp-tabs a:hover { color: var(--mp-ink); }
.mp-tabs a.is-active {
  color: var(--mp-ink);
  border-bottom-color: var(--mp-mocha);
}

.mp-chips {
  display: flex;
  gap: 8px;
  font: 600 12px var(--mp-sans);
  padding-bottom: 8px;
}
.mp-chip {
  border: 1px solid var(--mp-border);
  color: var(--mp-muted);
  border-radius: var(--mp-radius-pill);
  padding: 6px 14px;
  white-space: nowrap;
}
.mp-chip:hover { border-color: var(--mp-mocha); color: var(--mp-mocha); }
.mp-chip.is-active {
  background: var(--mp-ink);
  border-color: var(--mp-ink);
  color: #fff;
}

.mp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.mp-card {
  border: 1px solid var(--mp-border-soft);
  border-radius: var(--mp-radius-md);
  overflow: hidden;
  background: var(--mp-white);
  display: flex;
  flex-direction: column;
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.mp-card:hover { border-color: var(--mp-border); transform: translateY(-2px); }

.mp-card__media {
  height: 180px;
  position: relative;
  display: block;
  overflow: hidden;
}
.mp-card__media img { width: 100%; height: 100%; object-fit: cover; }
.mp-card__media--text {
  background: var(--mp-ink);
  display: flex;
  align-items: center;
  padding: 0 22px;
}
.mp-card__quote {
  font: italic 400 13px/1.6 var(--mp-serif);
  color: var(--mp-on-dark);
}
.mp-card__media--video { display: flex; align-items: center; justify-content: center; }
.mp-card__media .mp-badge { top: 10px; bottom: auto; }
.mp-badge--new {
  position: absolute;
  top: 10px;
  right: 10px;
  left: auto;
  bottom: auto;
  background: var(--mp-terracotta);
  color: #fff;
  font: 700 10px var(--mp-sans);
  padding: 4px 8px;
  border-radius: var(--mp-radius-sm);
}

.mp-card__body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.mp-card__title {
  font: 700 16px var(--mp-serif);
  margin: 0 0 8px;
}
.mp-card__title a { color: var(--mp-ink); }
.mp-card__title a:hover { color: var(--mp-mocha); }

.mp-card__tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.mp-tag {
  background: var(--mp-sand);
  font: 500 11px var(--mp-sans);
  color: var(--mp-muted);
  padding: 3px 8px;
  border-radius: var(--mp-radius-sm);
}

.mp-card__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: auto;
}
.mp-btn-copy {
  background: var(--mp-mocha);
  color: #fff;
  border-radius: 6px;
  padding: 7px 14px;
  font: 700 12px var(--mp-sans);
  white-space: nowrap;
}
.mp-btn-copy:hover { background: var(--mp-mocha-dark); }
.mp-btn-copy.is-done { background: var(--mp-ink); }
.mp-likes { font: 500 12px var(--mp-sans); color: var(--mp-faint); white-space: nowrap; }

.mp-card--sponsor {
  border: 1px dashed var(--mp-border);
  border-radius: var(--mp-radius-md);
  background: var(--mp-sand-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
}
.mp-card--sponsor:hover { transform: none; }
.mp-card--sponsor .mp-sponsor__label {
  font: 600 10px var(--mp-sans);
  letter-spacing: 0.14em;
  color: var(--mp-faint);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.mp-sponsor__name { font: 700 18px var(--mp-serif); margin-bottom: 8px; }
.mp-sponsor__text { font: 400 13px var(--mp-sans); color: var(--mp-muted); margin-bottom: 16px; }
.mp-sponsor__cta {
  border: 1px solid var(--mp-mocha);
  color: var(--mp-mocha);
  border-radius: 6px;
  padding: 8px 18px;
  font: 600 12px var(--mp-sans);
}
.mp-sponsor__cta:hover { background: var(--mp-mocha); color: #fff; }

.mp-feed__more { text-align: center; margin-top: 36px; }
.mp-btn-outline {
  border: 1px solid var(--mp-border);
  color: var(--mp-ink);
  border-radius: var(--mp-radius);
  padding: 12px 32px;
  font: 600 14px var(--mp-sans);
  display: inline-block;
}
.mp-btn-outline:hover { border-color: var(--mp-ink); color: var(--mp-ink); }

.mp-empty {
  border: 1px dashed var(--mp-border);
  border-radius: var(--mp-radius-md);
  padding: 40px;
  text-align: center;
  color: var(--mp-muted);
  font: 400 15px var(--mp-sans);
}

/* ==========================================================================
   9. Top créateurs
   ========================================================================== */

.mp-creators { padding: 0 var(--mp-gutter) 64px; }
.mp-creators__box {
  background: var(--mp-sand);
  border-radius: var(--mp-radius-xl);
  padding: 40px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.mp-creators__title { font: 700 28px var(--mp-serif); margin: 0 0 6px; }
.mp-creators__sub { font: 400 14px var(--mp-sans); color: var(--mp-muted); }
.mp-creators__list { display: flex; gap: 28px; flex-wrap: wrap; }
.mp-creator { display: flex; align-items: center; gap: 12px; color: var(--mp-ink); }
.mp-creator:hover { color: var(--mp-mocha); }
.mp-avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--mp-radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font: 600 15px var(--mp-sans);
  flex: none;
  overflow: hidden;
}
.mp-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mp-creator__name { font: 600 14px var(--mp-sans); }
.mp-creator__meta { font: 400 12px var(--mp-sans); color: var(--mp-faint); }

/* ==========================================================================
   10. Pied de page
   ========================================================================== */

.mp-footer {
  background: var(--mp-ink);
  color: var(--mp-faint);
  padding: 56px var(--mp-gutter) 32px;
}
.mp-footer__cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 40px;
}
.mp-footer .mp-logo { margin-bottom: 14px; color: var(--mp-paper); }
.mp-footer .mp-logo__word { font-size: 20px; color: var(--mp-paper); }
.mp-footer__about { font: 400 13px/1.6 var(--mp-sans); max-width: 260px; }
.mp-footer__col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font: 400 13px var(--mp-sans);
}
.mp-footer__heading {
  font: 600 12px var(--mp-sans);
  color: var(--mp-paper);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.mp-footer__col a { color: var(--mp-faint); }
.mp-footer__col a:hover { color: var(--mp-paper); }
.mp-footer__mobilenav,
.mp-footer__mobilebrand { display: none; }

.mp-footer__bottom {
  border-top: 1px solid var(--mp-ink-line);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font: 400 12px var(--mp-sans);
  flex-wrap: wrap;
}
.mp-footer__copy--short { display: none; }

/* ==========================================================================
   11. Page générique (archives, recherche, articles)
   ========================================================================== */

.mp-page { padding: 64px var(--mp-gutter); }
.mp-page__title { font: 800 46px/1.1 var(--mp-serif); margin: 0 0 12px; }
.mp-page__lead { font: 400 17px/1.6 var(--mp-sans); color: var(--mp-muted); margin: 0 0 40px; }
.mp-page__content { font: 400 16px/1.75 var(--mp-sans); max-width: 720px; }
.mp-page__content h2 { font: 700 30px var(--mp-serif); margin: 36px 0 12px; }
.mp-page__content h3 { font: 700 22px var(--mp-serif); margin: 28px 0 10px; }
.mp-pagination {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 40px;
  font: 600 14px var(--mp-sans);
}
.mp-pagination .page-numbers {
  border: 1px solid var(--mp-border);
  border-radius: var(--mp-radius);
  padding: 10px 16px;
  color: var(--mp-ink);
}
.mp-pagination .page-numbers.current {
  background: var(--mp-ink);
  border-color: var(--mp-ink);
  color: var(--mp-paper);
}

/* ==========================================================================
   12. Toast copie
   ========================================================================== */

.mp-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateY(12px);
  background: var(--mp-ink);
  color: var(--mp-paper);
  font: 600 13px var(--mp-sans);
  padding: 12px 22px;
  border-radius: var(--mp-radius);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 200;
}
.mp-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ==========================================================================
   13. Responsive
   ========================================================================== */

/* --- Tablette large : la mosaïque et le terminal passent dessous --------- */
@media (max-width: 1180px) {
  .mp-hero__inner { grid-template-columns: 1fr; gap: 44px; }
  .mp-hero__lead { max-width: none; }
  .mp-craft__inner { grid-template-columns: 1fr; gap: 44px; }
  .mp-terminal-col { position: static; }
  .mp-hero__title { font-size: 56px; }
  .mp-craft__title { font-size: 40px; }
  .mp-grid { grid-template-columns: repeat(3, 1fr); }
  .mp-footer__cols { grid-template-columns: 1fr 1fr 1fr; }
  .mp-footer__brand { grid-column: 1 / -1; }
}

/* --- Tablette : nav en tiroir ------------------------------------------- */
@media (max-width: 960px) {
  .mp-nav,
  .mp-header__tools { display: none; }
  .mp-header__mobile { display: flex; }
  .mp-header { padding: 14px var(--mp-gutter); }
  .mp-logo svg { width: 24px; height: 24px; }
  .mp-logo__word { font-size: 19px; }

  .mp-grid { grid-template-columns: repeat(2, 1fr); }

  .mp-creators__box { flex-direction: column; align-items: flex-start; padding: 32px; }
  .mp-creators__list { flex-direction: column; gap: 18px; }

  .mp-feed__head { flex-direction: column; align-items: stretch; gap: 0; }
  .mp-chips {
    overflow-x: auto;
    padding-bottom: 14px;
    scrollbar-width: none;
  }
  .mp-chips::-webkit-scrollbar { display: none; }
}

/* --- Mobile 390 : valeurs de la maquette -------------------------------- */
@media (max-width: 640px) {
  .mp-sponsorbar { font-size: 11px; padding: 6px 12px; }
  .mp-sponsorbar__long { display: none; }
  .mp-sponsorbar__short { display: inline; }

  .mp-hero { padding: 40px var(--mp-gutter) 32px; }
  .mp-hero__title { font: 800 40px/1.08 var(--mp-serif); margin-bottom: 16px; }
  .mp-hero__lead { font-size: 15px; margin-bottom: 24px; }
  .mp-hero__cta { flex-direction: column; gap: 10px; }
  .mp-btn-primary,
  .mp-btn-ghost { padding: 14px; text-align: center; display: block; }

  .mp-stats { justify-content: space-between; gap: 12px; margin-top: 28px; }
  .mp-stats__num { font-size: 22px; }
  .mp-stats__label { font-size: 10px; letter-spacing: 0.06em; }
  .mp-stats__label--long { display: none; }
  .mp-stats__label--short { display: block; }

  /* La mosaïque du hero est décorative : elle disparaît, comme sur la maquette 390. */
  .mp-mosaic { display: none; }

  .mp-craft { padding: 40px var(--mp-gutter); }
  .mp-eyebrow { font-size: 11px; letter-spacing: 0.2em; margin-bottom: 12px; }
  .mp-craft__title { font: 700 30px/1.15 var(--mp-serif); margin-bottom: 12px; }
  .mp-craft__lead { font-size: 14px; margin-bottom: 20px; }
  .mp-craft__list { gap: 8px; }
  .mp-craft__row { gap: 14px; padding: 14px 16px; }
  .mp-craft__letter { font-size: 24px; width: 22px; }
  .mp-craft__name { font-size: 14px; }
  .mp-craft__desc { font-size: 12px; }
  .mp-craft__desc--long { display: none; }
  .mp-craft__desc--short { display: inline; }
  .mp-craft__row .mp-craft__name,
  .mp-craft__row .mp-craft__desc { display: inline; }

  .mp-terminal__body { padding: 18px; gap: 14px; font-size: 13px; }
  .mp-terminal__foot { flex-direction: column; align-items: flex-start; gap: 12px; }

  .mp-feed { padding: 32px var(--mp-gutter); }
  /* En 390, les onglets deviennent des pastilles, comme sur la maquette. */
  .mp-feed__head { border-bottom: 0; margin-bottom: 4px; }
  .mp-tabs {
    gap: 8px;
    font-size: 12px;
    overflow-x: auto;
    padding-bottom: 8px;
    scrollbar-width: none;
  }
  .mp-tabs::-webkit-scrollbar { display: none; }
  .mp-tabs a {
    border: 1px solid var(--mp-border);
    border-radius: var(--mp-radius-pill);
    padding: 7px 14px;
    white-space: nowrap;
  }
  .mp-tabs a.is-active {
    background: var(--mp-ink);
    border-color: var(--mp-ink);
    color: #fff;
  }
  .mp-chips { padding-bottom: 20px; }
  .mp-chip { padding: 7px 14px; }
  .mp-grid { grid-template-columns: 1fr; gap: 16px; }
  .mp-card__media { height: 160px; }
  .mp-card__media--text { height: 130px; padding: 0 18px; }
  .mp-card__body { padding: 14px; }
  .mp-card__title { margin-bottom: 10px; }
  .mp-card__tags { display: none; }
  .mp-btn-copy { padding: 8px 14px; }
  .mp-feed__more { margin-top: 24px; }
  .mp-btn-outline { padding: 12px 28px; }

  /* L'artboard 390 s'arrête au fil : le terminal CRAFT et le bandeau
     « Top créateurs » ne s'affichent pas, et le fil montre 3 cartes. */
  .mp-terminal-col { display: none; }
  .mp-creators { display: none; }
  .mp-feed .mp-grid > *:nth-child(n + 4) { display: none; }

  /* Pied de page mobile : logo, une ligne de liens, la mention. */
  .mp-footer { padding: 32px var(--mp-gutter); font-size: 12px; }
  .mp-footer__cols { display: none; }
  .mp-footer .mp-logo__word { font-size: 17px; }
  .mp-footer__mobilebrand { display: flex; margin-bottom: 12px; }
  .mp-footer__mobilenav {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
  }
  .mp-footer__mobilenav a { color: var(--mp-faint); }
  .mp-footer__mobilenav a:hover { color: var(--mp-paper); }
  .mp-footer__bottom { border-top: 0; padding-top: 0; }
  .mp-footer__copy--long,
  .mp-footer__lang { display: none; }
  .mp-footer__copy--short { display: inline; }

  .mp-page { padding: 40px var(--mp-gutter); }
  .mp-page__title { font-size: 32px; }
}