.mc-page { background: var(--color-carbon-950); }
.mc-page .section { position: relative; overflow: clip; }
.mc-page .section::before { position: absolute; inset: 0; pointer-events: none; content: ""; background-image: linear-gradient(120deg, transparent 0 47%, rgb(137 148 157 / 5%) 47.1% 47.3%, transparent 47.4%); }
.mc-page .container--wide, .mc-page .container { position: relative; z-index: 1; }
.mc-section-heading { min-width: 0; }
.mc-section-heading .intro { margin-block-end: 0; }
.mc-hero { min-height: 650px; display: grid; align-items: center; isolation: isolate; }
.mc-hero__media, .mc-hero__media::after { position: absolute; inset: 0; }
.mc-hero__media { z-index: -2; }
.mc-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.mc-hero__media::after { content: ""; background: linear-gradient(90deg, var(--color-carbon-950) 0%, rgb(8 11 15 / 94%) 32%, rgb(8 11 15 / 42%) 67%, rgb(8 11 15 / 20%) 100%); }
.mc-hero__inner { width: min(100% - (var(--container-padding) * 2), 100rem); margin-inline: auto; }
.mc-hero__copy { width: min(100%, 36.25rem); min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.mc-hero__copy > * { min-width: 0; margin: 0; }
.mc-hero__copy h1 { font-size: clamp(3.5rem, 7vw, 4.5rem); }
.mc-hero__note { max-width: 35rem; padding: var(--space-4); border-inline-start: 2px solid var(--color-electric-cyan); }
.mc-hero__note p { margin: 0; color: var(--color-titanium-300); font-size: var(--text-meta); line-height: var(--leading-meta); }
.mc-hero__actions { align-items: stretch; }
.mc-hero__actions > * { width: auto; min-width: 0; }
.mc-progression { background: var(--color-carbon-900); }
.mc-progression__heading { width: min(100%, 42.5rem); }
.mc-progression__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); margin-top: var(--space-7); }
.mc-progress-card { min-width: 0; min-height: 100%; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); }
.mc-progress-card > * { margin: 0; min-width: 0; }
.mc-progress-card p { max-width: 32rem; color: var(--color-titanium-300); }
.mc-card-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-width: 0; }
.mc-number { color: var(--color-electric-cyan); font-family: var(--font-heading); font-size: 2rem; font-weight: var(--weight-extrabold); letter-spacing: var(--tracking-label); line-height: 1; }
.mc-roadmap__heading { width: min(100%, 38.75rem); }
.mc-map { margin: var(--space-7) 0 0; border: 1px solid var(--color-border); background: var(--color-carbon-900); }
.mc-map__visual { position: relative; width: 100%; aspect-ratio: 2 / 1; overflow: hidden; }
.mc-map__visual::after { position: absolute; inset: 0; pointer-events: none; content: ""; background: repeating-linear-gradient(135deg, rgb(242 246 248 / 5%) 0 1px, transparent 1px 8px); }
.mc-map__visual img { width: 100%; height: 100%; object-fit: cover; }
.mc-map__caption { padding: var(--space-3) var(--space-4); color: var(--color-titanium-300); font-size: var(--text-meta); line-height: var(--leading-meta); }
.mc-map__point { position: absolute; z-index: 2; width: 2.25rem; height: 2.25rem; display: grid; place-items: center; padding: 0; border: 1px solid var(--color-electric-cyan); border-radius: 50%; background: var(--color-carbon-950); color: var(--color-ice-white); font-family: var(--font-heading); font-weight: var(--weight-bold); }
.mc-map__point--city { top: 28%; left: 23%; }.mc-map__point--coast { top: 58%; left: 43%; }.mc-map__point--relief { top: 28%; left: 66%; }.mc-map__point--night { top: 62%; left: 78%; }
.mc-map__destinations { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-4); }
.mc-map__destinations > div { min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); color: var(--color-titanium-300); font-size: var(--text-meta); line-height: var(--leading-meta); }
.mc-map__destinations strong { color: var(--color-ice-white); }
.mc-roadmap__notes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); margin-top: var(--space-6); }
.mc-annotation { min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); background: var(--color-carbon-900); border: 1px solid var(--color-border-subtle); }
.mc-annotation > * { margin: 0; min-width: 0; }.mc-annotation h3 { font-size: var(--text-card-title); }.mc-annotation p { color: var(--color-titanium-300); }
.mc-annotation--fact { grid-column: 3 / span 1; border-inline-start-color: var(--color-electric-cyan); }.mc-annotation--opinion { grid-column: 4 / span 1; border-inline-start-color: var(--color-racing-yellow); }
.mc-checklist { background: var(--color-carbon-900); }
.mc-checklist__heading { width: min(100%, 37.5rem); }
.mc-checklist__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); margin-top: var(--space-7); }
.mc-checklist__column { min-width: 0; display: flex; flex-direction: column; gap: var(--space-6); padding-inline-start: var(--space-5); border-inline-start: 1px solid var(--color-electric-cyan); }
.mc-step { min-width: 0; display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--space-3); }.mc-step > * { min-width: 0; }.mc-step__number { color: var(--color-electric-cyan); font-family: var(--font-heading); font-size: 2rem; font-weight: var(--weight-extrabold); line-height: 1; }.mc-step h3 { font-size: var(--text-card-title); }.mc-step p { max-width: 24.5rem; color: var(--color-titanium-300); }
.mc-three-times__layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: calc(var(--gutter) * 2); align-items: start; }
.mc-driving-image { min-width: 0; margin: 0; overflow: hidden; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-card); background: var(--color-carbon-900); }.mc-driving-image img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }.mc-driving-image figcaption { padding: var(--space-3); color: var(--color-titanium-500); font-size: var(--text-meta); line-height: var(--leading-meta); }
.mc-three-times__content { min-width: 0; display: flex; flex-direction: column; gap: var(--space-5); }.mc-three-times__content > * { min-width: 0; margin: 0; }.mc-three-times__content h2 { width: min(100%, 35rem); }.mc-time { min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }.mc-time > * { margin: 0; }.mc-time h3 { font-size: var(--text-card-title); }.mc-time p { max-width: 31.25rem; color: var(--color-titanium-300); }
.mc-approach { background: var(--color-carbon-900); }.mc-approach__heading { width: min(100%, 40.625rem); }.mc-approach__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); margin-top: var(--space-7); }.mc-approach-card { min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); }.mc-approach-card > * { margin: 0; }.mc-approach-card h3 { font-size: var(--text-card-title); }.mc-approach-card p { max-width: 26.875rem; color: var(--color-titanium-300); }.mc-opinion { width: min(100%, 56rem); min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-6); padding: var(--space-5); border: 1px solid rgb(244 197 66 / 45%); border-inline-start: 3px solid var(--color-racing-yellow); background: var(--color-carbon-800); }.mc-opinion > * { margin: 0; }.mc-opinion p { max-width: 43.75rem; color: var(--color-titanium-300); }
.mc-garage__heading { width: min(100%, 38.75rem); }.mc-garage__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); margin-top: var(--space-7); }.mc-garage-card { position: relative; min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); overflow: hidden; background: var(--color-carbon-900); border: 1px solid var(--color-border-subtle); }.mc-garage-card::before { position: absolute; inset: 0; pointer-events: none; content: ""; opacity: .1; background: linear-gradient(135deg, transparent 20%, var(--color-electric-cyan) 20.5%, transparent 21%), linear-gradient(30deg, transparent 68%, var(--color-titanium-500) 68.5%, transparent 69%); }.mc-garage-card > * { position: relative; margin: 0; }.mc-garage-card h3 { font-size: var(--text-card-title); }.mc-garage-card p { max-width: 32rem; color: var(--color-titanium-300); }
.mc-diagnostic { background: var(--color-carbon-900); }.mc-diagnostic__heading { width: min(100%, 36.25rem); }.mc-diagnostic__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); margin-top: var(--space-7); }.mc-signal { min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); min-height: 10rem; padding: var(--space-5); background: var(--color-carbon-800); border: 1px solid var(--color-border-subtle); }.mc-signal > * { margin: 0; }.mc-signal h3 { font-size: var(--text-card-title); }.mc-signal p { max-width: 20.625rem; color: var(--color-titanium-300); }.mc-signal:nth-child(4) { border-inline-start: 3px solid var(--color-racing-yellow); }
.mc-explore__heading { width: min(100%, 35rem); }.mc-explore__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); margin-top: var(--space-7); }.mc-explore-tile { position: relative; min-width: 0; min-height: 23rem; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-3); padding: var(--space-5); overflow: hidden; color: var(--color-ice-white); text-decoration: none; border: 1px solid var(--color-border); background-color: var(--color-carbon-900); background-image: linear-gradient(0deg, rgb(8 11 15 / 98%) 0%, rgb(8 11 15 / 65%) 57%, rgb(8 11 15 / 16%) 100%), url('/public/media/mode-carriere-ressources-paddock.webp'); background-size: cover; transition: border-color var(--transition-base), transform var(--transition-fast); }.mc-explore-tile::after { position: absolute; right: var(--space-5); bottom: var(--space-4); left: var(--space-5); height: 2px; content: ""; background: var(--color-electric-cyan); transform: scaleX(0); transform-origin: left; transition: transform var(--transition-base); }.mc-explore-tile:hover { color: var(--color-ice-white); border-color: var(--color-electric-cyan); }.mc-explore-tile:hover::after, .mc-explore-tile:focus-visible::after { transform: scaleX(1); }.mc-explore-tile > * { position: relative; z-index: 1; min-width: 0; margin: 0; }.mc-explore-tile h3 { font-size: var(--text-card-title); }.mc-explore-tile p { max-width: 17rem; color: var(--color-titanium-300); }.mc-tile-link { color: var(--color-electric-cyan); font-family: var(--font-heading); font-weight: var(--weight-bold); letter-spacing: var(--tracking-label); text-transform: uppercase; }.mc-explore-tile--cars { background-position: 15% center; }.mc-explore-tile--tracks { background-position: 50% center; }.mc-explore-tile--drift { background-position: 85% center; }
.mc-closing { padding-bottom: var(--space-9); }.mc-closing__panel { width: min(100%, 53rem); min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); margin-inline: auto; padding: var(--space-7); background: var(--color-carbon-800); border: 1px solid var(--color-border); border-top-color: var(--color-racing-yellow); }.mc-closing__panel::before { width: 100%; height: 1px; content: ""; background: linear-gradient(90deg, var(--color-racing-yellow), transparent); }.mc-closing__panel > * { min-width: 0; margin: 0; }.mc-closing__panel h2 { max-width: 37.5rem; }.mc-closing__panel p { max-width: 37.5rem; color: var(--color-titanium-300); }.mc-closing__panel .button { align-self: flex-start; width: auto; }
@media (max-width: 1000px) { .mc-hero { min-height: 560px; }.mc-hero__media::after { background: linear-gradient(90deg, var(--color-carbon-950) 0%, rgb(8 11 15 / 86%) 45%, rgb(8 11 15 / 35%) 100%); }.mc-roadmap__notes { grid-template-columns: repeat(2, minmax(0, 1fr)); }.mc-annotation--fact, .mc-annotation--opinion { grid-column: auto; }.mc-three-times__layout { grid-template-columns: 1fr; gap: var(--space-6); }.mc-driving-image { width: min(100%, 40rem); }.mc-driving-image img { aspect-ratio: 4 / 3; }.mc-three-times__content h2 { width: min(100%, 35rem); } }
@media (max-width: 900px) { .mc-progression__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.mc-progression__grid > :last-child { grid-column: 1 / -1; }.mc-garage__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.mc-garage__grid > :last-child { grid-column: 1 / -1; }.mc-explore__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.mc-explore__grid > :last-child { grid-column: 1 / -1; }.mc-checklist__grid { grid-template-columns: 1fr; }.mc-checklist__column { width: 100%; }.mc-hero__copy { width: min(100%, 32rem); } }
@media (max-width: 820px) { .mc-approach__grid { grid-template-columns: 1fr; }.mc-approach-card p { max-width: 32rem; } }
@media (max-width: 720px) { .mc-diagnostic__grid { grid-template-columns: 1fr; }.mc-signal p { max-width: 30rem; } }
@media (max-width: 620px) { .mc-hero { min-height: 0; display: flex; flex-direction: column; align-items: stretch; padding-block: var(--space-7) 0; }.mc-hero__media { position: relative; order: 2; width: min(100% - (var(--container-padding) * 2), 100rem); aspect-ratio: 4 / 3; margin: var(--space-6) auto 0; overflow: hidden; border-radius: var(--radius-card); }.mc-hero__media::after { background: linear-gradient(0deg, rgb(8 11 15 / 55%), transparent 55%); }.mc-hero__inner { width: min(100% - (var(--container-padding) * 2), 100rem); }.mc-hero__copy { width: 100%; }.mc-hero__copy h1 { font-size: clamp(3rem, 14vw, 3.125rem); line-height: 1; }.mc-hero__actions { flex-direction: column; }.mc-hero__actions > * { width: 100%; }.mc-map__visual { aspect-ratio: 4 / 3; }.mc-map__destinations { grid-template-columns: 1fr; gap: var(--space-2); }.mc-roadmap__notes { grid-template-columns: 1fr; }.mc-checklist__column { padding-inline-start: var(--space-4); }.mc-garage__grid, .mc-explore__grid, .mc-progression__grid { grid-template-columns: 1fr; }.mc-progression__grid > :last-child, .mc-garage__grid > :last-child, .mc-explore__grid > :last-child { grid-column: auto; }.mc-explore-tile { min-height: 18rem; aspect-ratio: 16 / 10; }.mc-closing__panel { padding: var(--space-5); }.mc-closing__panel .button { width: 100%; }.mc-map__point { width: 2rem; height: 2rem; } }
@media (prefers-reduced-motion: reduce) { .mc-explore-tile, .mc-explore-tile::after { transition: none; } }