/* ==========================================================================
   Mega-Hosting — landing Minecraft
   Portage du design "Mega-Hosting.dc.html" (Claude Design) vers du CSS réel :
   les styles inline et les attributs `style-hover` du fichier source ont été
   convertis en classes, avec ajout des points de rupture responsive.
   ========================================================================== */

/* Fontes locales : aucune dépendance à Google Fonts sur le chemin critique. */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url('/assets/fonts/poppins-400-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url('/assets/fonts/poppins-500-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url('/assets/fonts/poppins-600-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url('/assets/fonts/poppins-700-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: optional;
  src: url('/assets/fonts/poppins-800-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: optional;
  src: url('/assets/fonts/jetbrains-mono-latin.woff2') format('woff2');
}

/* Les fallbacks reprennent les métriques des fontes finales. Si une fonte
   n'est pas disponible au premier rendu, le texte conserve donc sa largeur
   et sa hauteur quand le navigateur termine son chargement. */
@font-face {
  font-family: 'Poppins Fallback';
  font-style: normal;
  font-weight: 400;
  src: local('Arial'), local('Liberation Sans'), local('Arimo');
  size-adjust: 107.24%;
  ascent-override: 105%;
  descent-override: 35%;
  line-gap-override: 10%;
}

@font-face {
  font-family: 'Poppins Fallback';
  font-style: normal;
  font-weight: 500;
  src: local('Arial'), local('Liberation Sans'), local('Arimo');
  size-adjust: 108.96%;
  ascent-override: 105%;
  descent-override: 35%;
  line-gap-override: 10%;
}

@font-face {
  font-family: 'Poppins Fallback';
  font-style: normal;
  font-weight: 600;
  src: local('Arial Bold'), local('Liberation Sans Bold'), local('Arimo Bold');
  size-adjust: 104.51%;
  ascent-override: 105%;
  descent-override: 35%;
  line-gap-override: 10%;
}

@font-face {
  font-family: 'Poppins Fallback';
  font-style: normal;
  font-weight: 700;
  src: local('Arial Bold'), local('Liberation Sans Bold'), local('Arimo Bold');
  size-adjust: 106.07%;
  ascent-override: 105%;
  descent-override: 35%;
  line-gap-override: 10%;
}

@font-face {
  font-family: 'Poppins Fallback';
  font-style: normal;
  font-weight: 800;
  src: local('Arial Bold'), local('Liberation Sans Bold'), local('Arimo Bold');
  size-adjust: 107.39%;
  ascent-override: 105%;
  descent-override: 35%;
  line-gap-override: 10%;
}

@font-face {
  font-family: 'JetBrains Mono Fallback';
  font-style: normal;
  font-weight: 400 600;
  src: local('Menlo'), local('Consolas'), local('Liberation Mono');
  size-adjust: 99.66%;
  ascent-override: 102%;
  descent-override: 30%;
  line-gap-override: 0%;
}

:root {
  --mc-bg:        #0b0718;
  --mc-bg-alt:    #100a22;
  --mc-bg-deep:   #08050f;
  --mc-bg-term:   #0a0616;

  --mc-text:      #f4f1ff;
  --mc-text-soft: #ded7f5;
  --mc-muted:     #b6aed4;
  --mc-dim:       #a79fc4;
  --mc-dimmer:    #9a91bd;
  --mc-faint:     #8f86b3;
  --mc-faintest:  #6f6790;

  --mc-violet:    #7c5cff;
  --mc-magenta:   #c05ce8;
  --mc-lilac:     #a78bfa;
  --mc-lilac-lt:  #c4b5fd;
  --mc-mint:      #3ee0b8;

  --mc-line:      rgba(255, 255, 255, .08);
  --mc-line-soft: rgba(255, 255, 255, .06);
  --mc-surface:   rgba(255, 255, 255, .035);

  --mc-grad:      linear-gradient(135deg, #7c5cff, #c05ce8);
  --mc-shadow:    0 14px 34px rgba(124, 92, 255, .4);

  --mc-max:       1200px;
  --mc-mono:      'JetBrains Mono', 'JetBrains Mono Fallback', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* --------------------------------------------------------------- Base --- */

body.mc-page {
  margin: 0;
  background: var(--mc-bg);
  color: var(--mc-text);
  font-family: 'Poppins', 'Poppins Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

/* Liens : inversion demandée par rapport au design source. Le lien porte la
   couleur du texte de base et vire au lilas au survol (le design faisait
   l'inverse : lilas au repos, blanc au survol).
   `:where()` maintient la spécificité à (0,0,1) / (0,1,1) pour que les règles
   à classe — boutons, nav, footer, CTA d'offre — continuent de l'emporter. */
:where(.mc-page) a { color: var(--mc-text); text-decoration: none; }
:where(.mc-page) a:hover,
:where(.mc-page) a:focus-visible { color: var(--mc-lilac-lt); }

.mc-page img { max-width: 100%; }

/* Reset de marges à specificité nulle (`:where`) : sans ça, `.mc-page p`
   (0,1,1) l'emporterait sur les classes à sélecteur simple type `.mc-lead`
   (0,1,0) et écraserait leur `margin-top`. */
:where(.mc-page) :where(h1, h2, h3, p) { margin: 0; }
.mc-page h1, .mc-page h2, .mc-page h3 { font-weight: 800; letter-spacing: -.03em; }

.mc-page :focus-visible {
  outline: 2px solid var(--mc-lilac);
  outline-offset: 3px;
  border-radius: 6px;
}

.mc-wrap { max-width: var(--mc-max); margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.mc-wrap--narrow { max-width: 1000px; }
.mc-wrap--tight  { max-width: 760px; }

.mc-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Sections alternées, comme dans le design source. Chaque bande garde son
   propre rythme vertical (86 / 90 / 82 / 76px selon la section) : c'est réglé
   par --mc-pad plutôt que par une valeur unique. */
.mc-band        { background: var(--mc-bg); }
.mc-band--alt   { background: var(--mc-bg-alt); border-top: 1px solid var(--mc-line-soft); }
.mc-band--edge  { border-top: 1px solid var(--mc-line-soft); }
.mc-band > .mc-wrap {
  padding-top: var(--mc-pad, 86px);
  padding-bottom: var(--mc-pad, 86px);
}
#offres { --mc-pad: 90px; }
#avis   { --mc-pad: 82px; }
#web    { --mc-pad: 76px; }

.mc-kicker {
  font-size: 12px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--mc-lilac);
}
.mc-kicker--quiet { color: var(--mc-faint); }

.mc-lead {
  font-size: 16px; line-height: 1.6; color: var(--mc-muted);
  margin-top: var(--mc-lead-mt, 14px);
}

/* ------------------------------------------------------------ Boutons --- */

.mc-btn {
  display: inline-block;
  font-size: 15px; font-weight: 600;
  padding: 15px 26px;
  border-radius: 12px;
  border: 1px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: filter .18s ease, background-color .18s ease, border-color .18s ease;
}

.mc-btn--primary {
  background: var(--mc-grad);
  color: #fff;
  box-shadow: var(--mc-shadow);
}
.mc-btn--primary:hover,
.mc-btn--primary:focus-visible { color: #fff; filter: brightness(1.12); }

.mc-btn--ghost {
  border-color: rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .04);
  color: #e9e4ff;
}
.mc-btn--ghost:hover,
.mc-btn--ghost:focus-visible { color: #fff; background: rgba(255, 255, 255, .09); }

.mc-btn--sm { font-size: 14px; padding: 13px 22px; border-radius: 11px; }

/* ------------------------------------------------------------- Topbar --- */

.mc-site-chrome {
  position: sticky; top: 0; z-index: 50;
}
.mc-topbar {
  background: linear-gradient(90deg, #5b2ce0, #9333ea);
  display: flex; align-items: center; justify-content: center;
  gap: 14px; padding: 9px 20px;
  font-size: 13px; font-weight: 500; letter-spacing: .01em;
  text-align: center;
}
.mc-topbar code {
  background: rgba(0, 0, 0, .28);
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 6px; padding: 3px 9px;
  font-family: var(--mc-mono); font-size: 12px; font-weight: 600;
}

/* ------------------------------------------------------------- Header --- */

.mc-header {
  position: relative;
  background: rgba(11, 7, 24, .82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.mc-header__inner {
  max-width: var(--mc-max); margin: 0 auto;
  padding: 14px 24px;
  display: flex; align-items: center; gap: 12px 28px;
}

.mc-brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.mc-brand img { height: 26px; width: auto; display: block; }
.mc-brand span { font-size: 19px; font-weight: 700; letter-spacing: -.02em; color: #fff; }

.mc-nav {
  display: flex; align-items: center; gap: 8px 22px;
  flex-wrap: wrap; min-width: 0; flex-shrink: 1;
  font-size: 14px; font-weight: 500; margin-left: 8px;
}
.mc-nav a { color: var(--mc-muted); }
.mc-nav a:hover, .mc-nav a:focus-visible { color: #fff; }

.mc-header__actions {
  display: flex; align-items: center; justify-content: flex-end;
  flex-wrap: wrap; flex-shrink: 0; gap: 10px 14px;
  margin-left: auto;
}
.mc-header__actions > a:not(.mc-btn) {
  font-size: 14px; font-weight: 500; color: var(--mc-muted);
}
.mc-header__actions > a:not(.mc-btn):hover { color: #fff; }

.mc-header .mc-btn--primary {
  font-size: 14px; padding: 10px 18px; border-radius: 10px;
  white-space: nowrap; box-shadow: 0 8px 24px rgba(124, 92, 255, .35);
}

/* Bouton de langue */
.mc-lang {
  display: flex; align-items: center; gap: 7px;
  background: none;
  border: 1px solid rgba(255, 255, 255, .14);
  color: var(--mc-muted);
  border-radius: 8px; padding: 6px 10px;
  font-family: inherit; font-size: 12px; font-weight: 600;
  letter-spacing: .04em; cursor: pointer;
  transition: color .18s ease, border-color .18s ease;
}
.mc-lang:hover { color: #fff; border-color: rgba(255, 255, 255, .3); }
.mc-lang svg { border-radius: 2px; display: block; }
.mc-lang [data-flag] { display: none; align-items: center; gap: 7px; }
.mc-lang [data-flag].is-on { display: flex; }

/* Bouton burger — absent du design (desktop only), ajouté pour le mobile. */
.mc-burger {
  display: none;
  margin-left: auto;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 10px;
  padding: 9px 11px;
  cursor: pointer;
}
.mc-burger span {
  display: block; width: 18px; height: 2px; border-radius: 2px;
  background: var(--mc-text-soft);
}
.mc-burger span + span { margin-top: 4px; }

/* --------------------------------------------------------------- Hero --- */

.mc-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(1100px 620px at 78% 18%, rgba(124, 92, 255, .32), transparent 62%),
    radial-gradient(800px 500px at 8% 90%, rgba(192, 92, 232, .16), transparent 60%),
    var(--mc-bg);
}
.mc-hero__texture {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .7; pointer-events: none; user-select: none;
  animation: mc-float 9s ease-in-out infinite;
}
.mc-hero__inner {
  position: relative;
  max-width: var(--mc-max); margin: 0 auto;
  padding: 88px 24px 96px;
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: 56px; align-items: center;
}

.mc-hero h1 {
  font-size: clamp(38px, 5.2vw, 64px);
  line-height: 1.03; letter-spacing: -.035em;
  margin: 0; text-wrap: balance;
}

/* Hero sans visuel (page web) : une seule colonne, et un titre plus mesuré —
   la phrase y est bien plus longue que sur l'accueil. */
.mc-hero__inner--solo { grid-template-columns: minmax(0, 820px); }
.mc-hero__inner--solo h1 { font-size: clamp(32px, 3.9vw, 50px); line-height: 1.08; margin-top: 14px; }
.mc-hero__inner--solo .mc-hero__sub { max-width: 640px; }
.mc-hero__grad {
  background: linear-gradient(100deg, #a78bfa, #e879f9 55%, #3ee0b8);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mc-hero__sub {
  font-size: 17px; line-height: 1.6; color: var(--mc-muted);
  margin-top: 20px; max-width: 520px;
}

.mc-checks { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 11px; }
.mc-checks li {
  display: flex; align-items: center; gap: 10px;
  font-size: 15px; color: var(--mc-text-soft);
}
.mc-checks li::before { content: "✓"; color: var(--mc-mint); font-weight: 700; }

.mc-hero__cta { display: flex; gap: 14px; margin-top: 32px; flex-wrap: wrap; }

.mc-trust {
  display: flex; align-items: center; gap: 14px;
  margin-top: 30px; color: var(--mc-dimmer); font-size: 13px;
}
.mc-stars { color: var(--mc-mint); font-size: 15px; letter-spacing: 2px; }

.mc-trustpilot {
  display: inline-flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin-top: 30px; padding: 10px 13px; border: 1px solid var(--mc-line);
  border-radius: 10px; color: var(--mc-text); background: rgba(255,255,255,.025);
  font-size: 13px; font-weight: 700; text-decoration: none;
  transition: border-color .2s ease, transform .2s ease, background .2s ease;
}
.mc-trustpilot:hover { color: var(--mc-text); border-color: rgba(64,224,182,.65); background: rgba(64,224,182,.08); transform: translateY(-1px); }
.mc-trustpilot__stars { display: inline-flex; gap: 2px; }
.mc-trustpilot__stars i { width: 17px; height: 17px; display: grid; place-items: center; font-style: normal; font-size: 12px; line-height: 1; color: #fff; background: #00b67a; }
.mc-trustpilot__stars i:last-child { background: linear-gradient(90deg,#00b67a 50%,#69727a 50%); }
.mc-trustpilot__rating { color: var(--mc-muted); font-weight: 600; }
.mc-trustpilot__brand { color: #fff; white-space: nowrap; }
.mc-trustpilot__brand b { color: #00b67a; font-size: 17px; vertical-align: -1px; }

@keyframes mc-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-18px); }
}
@keyframes mc-pulse {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}

/* ------------------------------------------------ Mockup panel (hero) --- */

.mc-mockup { position: relative; }
.mc-mockup::before {
  content: ""; position: absolute; inset: -24px;
  background: radial-gradient(closest-side, rgba(124, 92, 255, .4), transparent 72%);
  filter: blur(18px);
}
.mc-mockup__frame {
  position: relative;
  background: linear-gradient(180deg, rgba(30, 20, 58, .95), rgba(17, 11, 36, .95));
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 20px;
  box-shadow: 0 40px 90px rgba(0, 0, 0, .55);
  overflow: hidden;
}
.mc-mockup__bar {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--mc-line);
  background: rgba(255, 255, 255, .03);
}
.mc-dot { width: 10px; height: 10px; border-radius: 50%; display: block; }
.mc-dot--r { background: #ff5f57; }
.mc-dot--y { background: #febc2e; }
.mc-dot--g { background: #28c840; }
.mc-mockup__host {
  margin-left: 8px; font-family: var(--mc-mono);
  font-size: 12px; color: var(--mc-dimmer);
}
.mc-mockup__body { padding: 22px; }

.mc-mockup__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.mc-mockup__name { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.mc-mockup__ip {
  font-family: var(--mc-mono); font-size: 12px;
  color: var(--mc-dimmer); margin-top: 3px;
}
.mc-badge-live {
  display: flex; align-items: center; gap: 7px;
  background: rgba(62, 224, 184, .12);
  border: 1px solid rgba(62, 224, 184, .35);
  color: var(--mc-mint);
  border-radius: 999px; padding: 5px 12px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.mc-badge-live i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--mc-mint); display: block;
  animation: mc-pulse 2s ease-in-out infinite;
}

.mc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 20px; }
.mc-stat {
  background: rgba(255, 255, 255, .045);
  border: 1px solid var(--mc-line);
  border-radius: 12px; padding: 13px;
}
.mc-stat__k {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--mc-dimmer);
}
.mc-stat__v { font-size: 22px; font-weight: 700; margin-top: 4px; }
.mc-stat__v small { font-size: 13px; color: var(--mc-dimmer); font-weight: 500; }
.mc-stat__v--mint { color: var(--mc-mint); }

.mc-term {
  background: var(--mc-bg-term);
  border: 1px solid var(--mc-line);
  border-radius: 12px; padding: 15px; margin-top: 14px;
  font-family: var(--mc-mono); font-size: 12px; line-height: 1.85;
  color: #8f86b3;
  overflow-x: auto;
}
.mc-term__t { color: #5f5786; }
.mc-term__ok { color: var(--mc-mint); }
.mc-term__info { color: var(--mc-lilac-lt); }

.mc-mockup__actions { display: flex; gap: 10px; margin-top: 14px; }
.mc-mockup__actions > * {
  flex: 1; text-align: center; border-radius: 10px; padding: 10px;
  font-size: 13px; font-weight: 600;
}
.mc-mockup__actions .is-primary { background: var(--mc-grad); color: #fff; }
.mc-mockup__actions .is-ghost {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  color: var(--mc-text-soft);
}

/* --------------------------------------------------------- Fonctions --- */

.mc-head { max-width: 640px; }
.mc-head--center { margin-left: auto; margin-right: auto; text-align: center; }

/* Le design source donne une taille propre à chaque titre de section
   (40 / 42 / 38 / 32 / 46px) : --mc-h2 porte la valeur cible, le clamp ne
   sert qu'à la réduire sur petit écran. */
.mc-head h2 {
  font-size: clamp(28px, 3.4vw, var(--mc-h2, 38px));
  line-height: var(--mc-h2-lh, 1.12);
  margin-top: 14px;
}
.mc-head h2:first-child { margin-top: 0; }   /* sections sans kicker (avis, FAQ) */

#features { --mc-h2: 40px; }
#offres   { --mc-h2: 42px; --mc-h2-lh: 1.1; }
#avis     { --mc-lead-mt: 12px; }
#modpacks { --mc-lead-mt: 12px; }

.mc-grid { display: grid; gap: 18px; margin-top: var(--mc-grid-mt, 44px); }
.mc-grid--3 { grid-template-columns: repeat(3, 1fr); }
.mc-grid--4 { grid-template-columns: repeat(4, 1fr); gap: 16px; }

#avis     .mc-grid { --mc-grid-mt: 40px; }
#modpacks .mc-grid { --mc-grid-mt: 38px; }

.mc-card {
  background: var(--mc-surface);
  border: 1px solid var(--mc-line);
  border-radius: 16px; padding: 26px;
  transition: border-color .18s ease, background-color .18s ease;
}
.mc-card:hover {
  border-color: rgba(167, 139, 250, .45);
  background: rgba(255, 255, 255, .06);
}
.mc-card__icon {
  width: 42px; height: 42px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(124, 92, 255, .35), rgba(192, 92, 232, .25));
  border: 1px solid rgba(255, 255, 255, .12);
  display: flex; align-items: center; justify-content: center;
  font-size: 19px;
}
.mc-card__t { font-size: 17px; font-weight: 700; margin-top: 16px; }
.mc-card__d { font-size: 14px; line-height: 1.6; color: var(--mc-dim); margin-top: 8px; }

/* ------------------------------------------------------------ Tarifs --- */

.mc-plans { align-items: start; --mc-grid-mt: 48px; }

.mc-plan {
  background: var(--mc-surface);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 18px; padding: 26px;
  transition: border-color .18s ease;
  display: flex; flex-direction: column;
}
.mc-plan:hover { border-color: rgba(167, 139, 250, .5); }

.mc-plan--hot {
  position: relative;
  background: linear-gradient(180deg, rgba(62, 224, 184, .1), rgba(124, 92, 255, .12));
  border-color: rgba(62, 224, 184, .45);
  box-shadow: 0 24px 60px rgba(62, 224, 184, .12);
}
.mc-plan__tag {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--mc-mint); color: #04241c;
  font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px; white-space: nowrap;
}
.mc-plan__name {
  font-size: 13px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #c9c0ea;
}
.mc-plan--hot .mc-plan__name { color: var(--mc-mint); }
.mc-plan__price {
  display: flex; align-items: baseline; gap: 6px;
  margin-top: 14px; white-space: nowrap;
}
.mc-plan__price b { font-size: 38px; font-weight: 800; letter-spacing: -.03em; }
.mc-plan__price span { font-size: 13px; color: var(--mc-dimmer); font-weight: 400; }
.mc-plan__price .mc-plan__vat {
  font-size: 15px; font-weight: 600; letter-spacing: 0; margin-left: 5px;
}
.mc-plan__ram {
  font-family: var(--mc-mono); font-size: 13px;
  color: var(--mc-mint); margin-top: 10px;
}
.mc-plan__d {
  font-size: 14px; line-height: 1.6; color: var(--mc-dim);
  margin-top: 14px; flex: 1;
}
.mc-plan--hot .mc-plan__d { color: #c6bfe0; }
.mc-plan__cta {
  display: block; text-align: center; margin-top: 18px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .05);
  color: #e9e4ff;
  font-size: 14px; font-weight: 600; padding: 12px; border-radius: 10px;
  transition: background-color .18s ease, filter .18s ease;
}
.mc-plan__cta:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.mc-plan__cta--hot {
  background: linear-gradient(135deg, #3ee0b8, #7c5cff);
  border-color: transparent; color: #04241c; font-weight: 700;
}
.mc-plan__cta--hot:hover { color: #04241c; filter: brightness(1.1); }

.mc-notes {
  display: flex; justify-content: center; gap: 26px; flex-wrap: wrap;
  margin-top: 30px; color: var(--mc-faint); font-size: 13px; text-align: center;
}
.mc-compare { display: flex; justify-content: center; margin-top: 22px; }
.mc-compare a { font-size: 14px; font-weight: 600; }

/* ------------------------------------------------------------- Avis --- */

.mc-review {
  background: var(--mc-surface);
  border: 1px solid var(--mc-line);
  border-radius: 16px; padding: 22px;
}
.mc-review__stars { color: var(--mc-mint); font-size: 14px; letter-spacing: 2px; }
.mc-review p { font-size: 14px; line-height: 1.65; color: var(--mc-text-soft); margin-top: 12px; }
.mc-review cite {
  display: block; font-style: normal;
  font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--mc-faint); margin-top: 16px;
}

/* --------------------------------------------------------- Modpacks --- */

.mc-split {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}

.mc-pack {
  background: var(--mc-surface);
  border: 1px solid var(--mc-line);
  border-radius: 16px; overflow: hidden;
  transition: border-color .18s ease;
}
.mc-pack:hover { border-color: rgba(167, 139, 250, .45); }

.mc-pack__thumb {
  position: relative; height: 180px;
  background: #16102e;
  border-bottom: 1px solid var(--mc-line);
  overflow: hidden;
  isolation: isolate;
}
.mc-pack__thumb img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; display: block;
  object-fit: cover;
  transition: transform .35s ease;
  z-index: 1;
}
.mc-pack__thumb--atm::before {
  content: "";
  position: absolute; inset: -24px;
  background: url("/assets/img/modpacks/all-the-mods-10.webp") center / cover no-repeat;
  filter: blur(18px) brightness(.5);
  transform: scale(1.08);
}
.mc-pack__thumb--atm img {
  object-fit: contain;
  padding: 8px 0;
}
.mc-pack:hover .mc-pack__thumb img { transform: scale(1.025); }
.mc-pack__body { padding: 18px; }
.mc-pack__t { font-size: 16px; font-weight: 700; }
.mc-pack__meta { font-size: 13px; color: var(--mc-dimmer); margin-top: 4px; }
.mc-pack__ram {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--mc-line);
  font-size: 13px; color: var(--mc-dim);
}
.mc-pack__ram b { font-family: var(--mc-mono); font-weight: 400; color: var(--mc-mint); }

/* ---------------------------------------------------------------- FAQ --- */

.mc-faq-title { text-align: center; font-size: clamp(28px, 3.4vw, 38px); line-height: 1.12; }
.mc-faq { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 40px; }
.mc-faq details {
  background: var(--mc-surface);
  border: 1px solid var(--mc-line);
  border-radius: 14px; padding: 18px 20px;
  height: fit-content;
}
.mc-faq summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; cursor: pointer; list-style: none;
  font-size: 15px; font-weight: 600;
}
.mc-faq summary::-webkit-details-marker { display: none; }
.mc-faq summary::marker { content: ""; }
.mc-faq .mc-plus {
  color: var(--mc-lilac); font-size: 18px;
  transition: transform .2s ease; flex-shrink: 0;
}
.mc-faq details[open] .mc-plus { transform: rotate(45deg); }
.mc-faq p { font-size: 14px; line-height: 1.65; color: var(--mc-dim); margin-top: 12px; }

/* ---------------------------------------------------------------- Web --- */

.mc-web { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: center; }
.mc-web h2 { font-size: clamp(26px, 3vw, 32px); line-height: 1.15; margin-top: 12px; }
.mc-web__sub { font-size: 15px; line-height: 1.65; color: var(--mc-dim); margin-top: 12px; }
.mc-web__link { display: inline-block; margin-top: 20px; font-size: 14px; font-weight: 600; }

.mc-web__cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.mc-web__card {
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 14px; padding: 20px;
}
.mc-web__card h3 {
  font-size: 13px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--mc-dimmer);
}
.mc-web__price { font-size: 26px; font-weight: 800; margin-top: 10px; }
.mc-web__per { font-size: 12px; color: var(--mc-faint); }
.mc-web__d { font-size: 13px; color: var(--mc-dim); margin-top: 12px; line-height: 1.6; }

/* -------------------------------------------------------------- CTA --- */

.mc-cta {
  position: relative; overflow: hidden;
  background:
    radial-gradient(700px 420px at 50% 0%, rgba(124, 92, 255, .35), transparent 65%),
    var(--mc-bg-alt);
  border-top: 1px solid var(--mc-line-soft);
  text-align: center;
}
.mc-cta > .mc-wrap { padding-top: 92px; padding-bottom: 92px; }
.mc-cta h2 { font-size: clamp(32px, 4.4vw, 46px); line-height: 1.08; letter-spacing: -.035em; }
.mc-cta p { font-size: 17px; line-height: 1.6; color: var(--mc-muted); margin-top: 16px; }
.mc-cta__row { display: flex; gap: 14px; justify-content: center; margin-top: 30px; flex-wrap: wrap; }

/* ================================================ Page hébergement web === */

/* Fil d'Ariane */
.mc-crumbs {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  list-style: none; margin: 0 0 18px; padding: 0;
  font-size: 13px; color: var(--mc-faint);
}
.mc-crumbs li { display: flex; align-items: center; gap: 8px; }
.mc-crumbs li + li::before { content: "›"; color: var(--mc-faintest); }
.mc-crumbs a { color: var(--mc-muted); }
.mc-crumbs [aria-current] { color: var(--mc-text-soft); }

/* Sélecteur mensuel / annuel */
.mc-toggle {
  display: inline-flex; gap: 4px; margin: 28px auto 0;
  padding: 4px; border-radius: 12px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--mc-line);
}
.mc-toggle button {
  display: flex; align-items: center; gap: 8px;
  background: none; border: 0; cursor: pointer;
  border-radius: 9px; padding: 9px 16px;
  font-family: inherit; font-size: 14px; font-weight: 600;
  color: var(--mc-muted);
  transition: background-color .18s ease, color .18s ease;
}
.mc-toggle button:hover { color: #fff; }
.mc-toggle button.is-active { background: var(--mc-grad); color: #fff; }
/* Seul le badge « Recommandé » est pastillé — pas le libellé du bouton. */
.mc-toggle__tag {
  font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  background: rgba(62, 224, 184, .16); border: 1px solid rgba(62, 224, 184, .4);
  color: var(--mc-mint); border-radius: 999px; padding: 2px 7px;
}
.mc-toggle button.is-active .mc-toggle__tag { background: rgba(0, 0, 0, .25); border-color: rgba(255, 255, 255, .3); color: #fff; }

.mc-toggle-wrap { display: flex; justify-content: center; }

/* Compléments carte d'offre pour la page web */
.mc-plan__desc { font-size: 13px; color: var(--mc-dimmer); margin-top: 6px; }
.mc-plan__equiv { font-size: 12px; color: var(--mc-faint); margin-top: 6px; min-height: 32px; }
.mc-plan__features {
  list-style: none; margin: 16px 0 0; padding: 0;
  display: grid; gap: 9px; flex: 1;
}
.mc-plan__features li {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 14px; line-height: 1.5; color: var(--mc-dim);
}
.mc-plan__features li::before { content: "✓"; color: var(--mc-mint); font-weight: 700; flex-shrink: 0; }
.mc-plan--hot .mc-plan__features li { color: #c6bfe0; }

/* Tableau comparatif — défile horizontalement plutôt que d'élargir la page */
.mc-table-wrap {
  margin-top: 22px; overflow-x: auto;
  border: 1px solid var(--mc-line); border-radius: 16px;
  background: var(--mc-surface);
}
.mc-table { width: 100%; border-collapse: collapse; min-width: 720px; font-size: 14px; }
.mc-table caption {
  caption-side: top; text-align: left; padding: 18px 20px 0;
  font-size: 13px; color: var(--mc-faint);
}
.mc-table th, .mc-table td { padding: 14px 20px; text-align: left; }
.mc-table thead th {
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--mc-dimmer); border-bottom: 1px solid var(--mc-line);
  white-space: nowrap;
}
.mc-table tbody tr + tr { border-top: 1px solid var(--mc-line-soft); }
.mc-table tbody th { font-weight: 700; color: var(--mc-text); }
.mc-table td { color: var(--mc-dim); }
.mc-table tbody tr:hover { background: rgba(255, 255, 255, .03); }

/* ------------------------------------------------------- Pages légales --- */

.mc-legal__hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(70% 170% at 85% 20%, rgba(192, 92, 232, .2), transparent 68%),
    radial-gradient(65% 160% at 10% 90%, rgba(62, 224, 184, .1), transparent 70%),
    var(--mc-bg-alt);
  border-bottom: 1px solid var(--mc-line-soft);
}
.mc-legal__hero .mc-wrap { padding-top: 82px; padding-bottom: 72px; }
.mc-legal__hero h1 {
  max-width: 850px; margin-top: 12px;
  font-size: clamp(34px, 5vw, 58px); line-height: 1.08;
}
.mc-legal__hero p:last-child {
  max-width: 700px; margin-top: 18px;
  color: var(--mc-muted); font-size: 16px; line-height: 1.7;
}
.mc-legal__document {
  max-width: 940px; margin: 0 auto; padding: 64px 24px 96px;
  text-align: left !important;
}
.mc-legal__document > div,
.mc-legal__document article {
  margin: 0 !important; padding: 26px 28px;
  background: var(--mc-surface);
  border: 1px solid var(--mc-line);
  border-radius: 16px;
}
.mc-legal__document > div + div,
.mc-legal__document article + article { margin-top: 18px !important; }
.mc-legal__document h2,
.mc-legal__document h3 {
  margin: 0 !important; color: var(--mc-text) !important;
  font-family: Poppins, system-ui, sans-serif !important;
  font-size: clamp(16px, 2vw, 19px); line-height: 1.45;
  letter-spacing: -.01em;
}
.mc-legal__document p {
  margin: 13px 0 0 !important;
  color: var(--mc-muted) !important;
  font-size: 15px !important; line-height: 1.85;
}
.mc-legal__document a {
  color: var(--mc-mint); text-decoration: underline;
  text-decoration-color: rgba(62, 224, 184, .38);
  text-underline-offset: 3px;
}
.mc-legal__document a:hover { color: #fff; text-decoration-color: currentColor; }
.mc-legal__document ul { color: var(--mc-muted); line-height: 1.75; }
.mh-legal-form { display: grid; gap: 18px; margin-top: 22px; }
.mh-legal-form label { display: grid; gap: 8px; color: var(--mc-text); font-size: 14px; font-weight: 600; }
.mh-legal-form label span { color: var(--mc-muted); font-size: 12px; font-weight: 400; }
.mh-legal-form input:not([type="checkbox"]), .mh-legal-form select, .mh-legal-form textarea {
  width: 100%; padding: 12px 13px; border: 1px solid var(--mc-line); border-radius: 10px;
  background: #0f0a1d; color: var(--mc-text); font: 400 14px Poppins, system-ui, sans-serif;
}
.mh-legal-form textarea { resize: vertical; }
.mh-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mh-form-check { grid-template-columns: 20px 1fr !important; align-items: start; font-weight: 400 !important; }
.mh-form-check input { width: 18px; height: 18px; accent-color: var(--mc-mint); }
.mh-form-errors, .mh-form-success { margin-top: 16px; padding: 14px 16px; border-radius: 10px; font-size: 14px; line-height: 1.6; }
.mh-form-errors { border: 1px solid #ff718b; background: rgba(255, 69, 101, .1); color: #ffdce2; }
.mh-form-success { border: 1px solid var(--mc-mint); background: rgba(62, 224, 184, .1); color: #d7fff5; }
.mh-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
/* Lien de relance dans les cartes de réassurance */
.mc-card__link { display: inline-block; margin-top: 14px; font-size: 14px; font-weight: 600; }

/* Bandeau de renvoi vers l'autre offre */
.mc-cross {
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px; flex-wrap: wrap;
  background: linear-gradient(120deg, rgba(124, 92, 255, .16), rgba(62, 224, 184, .1));
  border: 1px solid rgba(167, 139, 250, .3);
  border-radius: 20px; padding: 30px 32px;
}
.mc-cross h2 { font-size: clamp(24px, 2.6vw, 30px); line-height: 1.15; margin-top: 10px; }
.mc-cross p { font-size: 15px; line-height: 1.6; color: var(--mc-muted); margin-top: 10px; max-width: 560px; }

/* ------------------------------------------------------------ Footer --- */

.mc-footer { background: var(--mc-bg-deep); border-top: 1px solid rgba(255, 255, 255, .07); }
.mc-footer__grid {
  max-width: var(--mc-max); margin: 0 auto;
  padding: 56px 24px 26px;
  display: grid; grid-template-columns: 1.3fr repeat(4, 1fr); gap: 32px;
}
.mc-footer__blurb {
  font-size: 13px; line-height: 1.7; color: var(--mc-faint);
  margin-top: 14px; max-width: 280px;
}
.mc-footer h3 {
  font-size: 12px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: #fff;
}
.mc-footer ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 9px; }
.mc-footer li a { font-size: 13px; color: var(--mc-faint); }
.mc-footer li a:hover { color: #fff; }

.mc-social {
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 18px; width: 42px; height: 42px; border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .05);
  color: var(--mc-lilac-lt);
  transition: background-color .18s ease, border-color .18s ease;
}
.mc-social + .mc-social { margin-left: 10px; }
.mc-social:hover { color: #fff; background: #5865f2; border-color: #5865f2; }
.mc-social--ig:hover { background: #d62976; border-color: #d62976; }

.mc-footer__legal {
  max-width: var(--mc-max); margin: 0 auto;
  padding: 18px 24px 40px;
  border-top: 1px solid var(--mc-line-soft);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  font-size: 12px; color: var(--mc-faintest);
}
.mc-footer__legal > :last-child { text-align: right; }
.mc-footer__credit a { color: var(--mc-faint); font-weight: 600; }
.mc-footer__credit a:hover { color: #fff; }
.mc-footer__heart { color: #e879f9; margin: 0 2px; }

/* ---------------------------------------------------- Scroll reveals --- */

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

.mc-reveal {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition:
    opacity .65s cubic-bezier(.22, 1, .36, 1),
    transform .65s cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--mc-reveal-delay, 0ms);
  will-change: opacity, transform;
}
.mc-reveal--soft { transform: translate3d(0, 16px, 0) scale(.985); }
.mc-reveal--left { transform: translate3d(-30px, 0, 0); }
.mc-reveal--right { transform: translate3d(30px, 0, 0); }
.mc-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  will-change: auto;
}

/* -------------------------------------------------------- Responsive --- */

@media (max-width: 1080px) {
  .mc-hero__inner { grid-template-columns: 1fr; gap: 44px; padding-top: 64px; padding-bottom: 72px; }
  .mc-hero__sub { max-width: none; }
  .mc-web { grid-template-columns: 1fr; gap: 34px; }
  .mc-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .mc-footer__grid { grid-template-columns: 1fr 1fr 1fr; gap: 32px; }
  .mc-cross { padding: 26px; }
}

@media (max-width: 900px) {
  .mc-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .mc-faq { grid-template-columns: 1fr; }
  .mc-band > .mc-wrap { padding-top: 64px; padding-bottom: 64px; }

  /* Nav repliée derrière le burger */
  .mc-burger { display: block; }
  .mc-header__inner { flex-wrap: wrap; }
  .mc-nav,
  .mc-header__actions {
    display: none; width: 100%; margin-left: 0;
    padding-top: 14px; border-top: 1px solid var(--mc-line);
  }
  .mc-header__inner.is-open .mc-nav,
  .mc-header__inner.is-open .mc-header__actions { display: flex; }
  .mc-nav { flex-direction: column; align-items: flex-start; gap: 14px; }
  .mc-header__inner.is-open .mc-header__actions { justify-content: flex-start; }
  .mc-header .mc-btn--primary { width: 100%; }
}

@media (max-width: 680px) {
  .mc-wrap { padding-left: 18px; padding-right: 18px; }
  .mc-grid--3,
  .mc-grid--4,
  .mc-web__cards { grid-template-columns: 1fr; }
  .mc-stats { grid-template-columns: 1fr 1fr; }
  .mc-footer__grid { grid-template-columns: 1fr 1fr; padding-top: 44px; gap: 28px; }
  .mc-footer__grid > :first-child { grid-column: 1 / -1; }
  .mc-footer__blurb { max-width: none; }
  .mc-toggle { width: 100%; }
  .mc-toggle button { flex: 1; justify-content: center; padding: 10px 8px; }
  .mc-topbar { flex-direction: column; gap: 8px; }
  .mc-hero__cta .mc-btn,
  .mc-cta__row .mc-btn { flex: 1 1 auto; }
  .mc-mockup__actions { flex-wrap: wrap; }
  .mc-notes { gap: 10px 20px; }
  .mc-legal__hero .mc-wrap { padding-top: 58px; padding-bottom: 54px; }
  .mc-legal__document { padding: 38px 18px 64px; }
  .mc-legal__document > div,
  .mc-legal__document article { padding: 22px 20px; }
  .mh-form-grid { grid-template-columns: 1fr; }
  .mc-footer__legal { grid-template-columns: 1fr; text-align: left; }
  .mc-footer__legal > :last-child { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mc-reveal,
  .mc-reveal--soft,
  .mc-reveal--left,
  .mc-reveal--right,
  .mc-reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .mc-page *,
  .mc-page *::before,
  .mc-page *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}