/* =========================================================================
   Matrix Digital — methode.css
   Expérience « système de croissance » : scènes animées SVG + teaser home
   + page storytelling. Léger (CSS/SVG), mobile simplifié, reduced-motion safe.
   ========================================================================= */

/* ---------------------------------------------------------------- *
   SCÈNES ANIMÉES (réutilisables)
 * ---------------------------------------------------------------- */
.mx-mscene { position: relative; width: 100%; max-width: 340px; margin: 0 auto; aspect-ratio: 1 / 1; }
.mx-mscene__svg { width: 100%; height: 100%; overflow: visible; }
.mx-mscene__glow {
    position: absolute; inset: 12%; border-radius: 50%;
    background: radial-gradient(circle, var(--mx-glow), transparent 70%);
    filter: blur(26px); opacity: 0.8;
}
.mx-mscene circle, .mx-mscene rect, .mx-mscene line, .mx-mscene path { transform-box: fill-box; transform-origin: center; }

/* — Audit / radar (cyan) — */
.mx-mscene--audit .mx-mscene__glow { background: radial-gradient(circle, rgba(var(--mx-cyan-rgb), 0.30), transparent 70%); }
.mx-mscene__ring  { fill: none; stroke: rgba(var(--mx-cyan-rgb), 0.32); stroke-width: 1.4; }
.mx-mscene__cross { stroke: rgba(var(--mx-cyan-rgb), 0.18); stroke-width: 1; }
.mx-mscene__sweep { transform-origin: 100px 100px; animation: mxSpin 4s linear infinite; }
.mx-mscene__sweep path { fill: rgba(var(--mx-cyan-rgb), 0.20); }
.mx-mscene__blips circle { fill: var(--mx-cyan); animation: mxBlip 2.2s ease-in-out infinite; }
.mx-mscene__blips circle:nth-child(2) { animation-delay: 0.5s; }
.mx-mscene__blips circle:nth-child(3) { animation-delay: 1s; }
.mx-mscene__blips circle:nth-child(4) { animation-delay: 1.5s; }

/* — Structure / blocs (bleu) — */
.mx-mscene--structure .mx-mscene__glow { background: radial-gradient(circle, rgba(var(--mx-blue-rgb), 0.28), transparent 70%); }
.mx-mscene__blocks rect {
    fill: rgba(var(--mx-blue-rgb), 0.16); stroke: rgba(var(--mx-blue-rgb), 0.55); stroke-width: 1.5;
    animation: mxBuild 4s ease-in-out infinite;
}
.mx-mscene__blocks rect:nth-child(1) { animation-delay: 0s; }
.mx-mscene__blocks rect:nth-child(2) { animation-delay: 0.15s; }
.mx-mscene__blocks rect:nth-child(3) { animation-delay: 0.3s; }
.mx-mscene__blocks rect:nth-child(4) { animation-delay: 0.5s; }
.mx-mscene__blocks rect:nth-child(5) { animation-delay: 0.65s; }
.mx-mscene__blocks rect:nth-child(6) { animation-delay: 0.85s; }

/* — Croissance / flux (magenta) — */
.mx-mscene--croissance .mx-mscene__glow { background: radial-gradient(circle, rgba(var(--mx-magenta-rgb), 0.26), transparent 70%); }
.mx-mscene__bars rect {
    fill: rgba(var(--mx-magenta-rgb), 0.22); stroke: rgba(var(--mx-magenta-rgb), 0.5); stroke-width: 1.4;
    transform-origin: center bottom; animation: mxGrow 3.4s ease-in-out infinite;
}
.mx-mscene__bars rect:nth-child(2) { animation-delay: 0.2s; }
.mx-mscene__bars rect:nth-child(3) { animation-delay: 0.4s; }
.mx-mscene__bars rect:nth-child(4) { animation-delay: 0.6s; }
.mx-mscene__curve { fill: none; stroke: var(--mx-magenta); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 260; stroke-dashoffset: 260; animation: mxDraw 3.4s ease-in-out infinite; }
.mx-mscene__spark { fill: #fff; animation: mxSpark 3.4s ease-in-out infinite; }

/* — Optimisation / système vivant (violet) — */
.mx-mscene--optimisation .mx-mscene__glow { background: radial-gradient(circle, rgba(var(--mx-violet-rgb), 0.30), transparent 70%); }
.mx-mscene__links line { stroke: rgba(var(--mx-violet-rgb), 0.45); stroke-width: 1.5; stroke-dasharray: 4 5; animation: mxDash 1.4s linear infinite; }
.mx-mscene__nodes circle { fill: rgba(var(--mx-violet-rgb), 0.7); animation: mxNode 2.6s ease-in-out infinite; }
.mx-mscene__nodes circle:nth-child(2) { animation-delay: 0.4s; }
.mx-mscene__nodes circle:nth-child(3) { animation-delay: 0.8s; }
.mx-mscene__nodes circle:nth-child(4) { animation-delay: 1.2s; }
.mx-mscene__nodes circle:nth-child(5) { animation-delay: 1.6s; }
.mx-mscene__core { fill: var(--mx-violet); animation: mxCore 2.2s ease-in-out infinite; }

@keyframes mxSpin  { to { transform: rotate(360deg); } }
@keyframes mxBlip  { 0%, 100% { opacity: 0.2; transform: scale(0.5); } 50% { opacity: 1; transform: scale(1.3); } }
@keyframes mxBuild { 0% { opacity: 0; transform: translateY(12px) scale(0.8); } 22%, 82% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-6px) scale(0.96); } }
@keyframes mxGrow  { 0% { transform: scaleY(0); } 55%, 100% { transform: scaleY(1); } }
@keyframes mxDraw  { 0% { stroke-dashoffset: 260; } 65%, 100% { stroke-dashoffset: 0; } }
@keyframes mxSpark { 0%, 55% { opacity: 0; transform: scale(0); } 70% { opacity: 1; transform: scale(1.4); } 100% { opacity: 0.8; transform: scale(1); } }
@keyframes mxDash  { to { stroke-dashoffset: -18; } }
@keyframes mxNode  { 0%, 100% { opacity: 0.4; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes mxCore  { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }

/* ---------------------------------------------------------------- *
   TEASER ACCUEIL
 * ---------------------------------------------------------------- */
/* ⚠️ `overflow: clip` et surtout PAS `hidden` : `hidden` fait de la section un
   conteneur de défilement et TUE le position:sticky du système à l'intérieur
   (il repart avec la page — « il remonte », constaté par Jack le 17/07).
   `clip` découpe les halos du fond exactement pareil, sans créer de scroller. */
.mx-methode-tease { position: relative; overflow: clip; }
.mx-methode-tease__bg {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(ellipse at 78% 28%, rgba(var(--mx-violet-rgb), 0.14), transparent 58%),
        radial-gradient(ellipse at 15% 80%, rgba(var(--mx-cyan-rgb), 0.10), transparent 58%);
}
.mx-methode-tease > .mx-container { position: relative; z-index: 1; }

.mx-mtease { display: grid; grid-template-columns: 1fr; gap: var(--gap-lg); align-items: center; }
@media (min-width: 900px) { .mx-mtease { grid-template-columns: 1fr 1fr; gap: var(--gap-xl); } }

.mx-mtease__stage { position: relative; min-height: 300px; display: grid; place-items: center; }
.mx-mtease__scene {
    position: absolute; inset: 0; display: grid; place-items: center;
    opacity: 0; transform: scale(0.9); pointer-events: none;
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.mx-mtease__scene.is-active { opacity: 1; transform: none; }
.mx-mtease__scene-label {
    position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);
    font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mx-muted); white-space: nowrap;
}

.mx-mtease__steps { display: flex; flex-direction: column; gap: 10px; list-style: none; margin: 0; padding: 0; }
.mx-mtease__step {
    position: relative; overflow: hidden;
    width: 100%; display: flex; gap: 14px; align-items: flex-start; text-align: left;
    padding: 16px 18px; border-radius: 14px;
    background: transparent; border: 1px solid var(--mx-border);
    color: var(--mx-off-white); cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.mx-mtease__step:hover { transform: translateX(3px); border-color: rgba(var(--mx-blue-rgb), 0.45); }
.mx-mtease__step.is-active { background: rgba(255, 255, 255, 0.04); border-color: rgba(var(--mx-blue-rgb), 0.55); }
.mx-mtease__step-num {
    flex: 0 0 auto; font-size: 1.1rem; font-weight: 700;
    background: var(--mx-gradient-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.mx-mtease__step-titre { display: block; font-family: var(--font-display); font-weight: 700; }
.mx-mtease__step-tag { display: block; color: var(--mx-muted); font-size: 0.85rem; margin-top: 2px; }
.mx-mtease__step-bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--mx-gradient); }
.mx-mtease__step.is-active .mx-mtease__step-bar { width: 100%; transition: width 3.6s linear; }

.mx-methode-tease__cta { box-shadow: 0 0 26px rgba(var(--mx-violet-rgb), 0.45); }
.mx-methode-tease__cta:hover { box-shadow: 0 0 46px rgba(var(--mx-violet-rgb), 0.7); }

/* ---------------------------------------------------------------- *
   PAGE NOTRE MÉTHODE
 * ---------------------------------------------------------------- */
.mx-methode-probleme__title, .mx-methode-philo__title { font-size: clamp(1.6rem, 4vw, 2.4rem); margin: 12px 0 16px; }
.mx-methode-probleme__text, .mx-methode-philo__text { color: var(--mx-muted); font-size: 1.1rem; line-height: 1.8; }

.mx-mstep { display: grid; grid-template-columns: 1fr; gap: var(--gap-lg); align-items: center; padding-block: clamp(32px, 6vw, 72px); }
.mx-mstep + .mx-mstep { border-top: 1px solid var(--mx-border); }
@media (min-width: 900px) {
    .mx-mstep { grid-template-columns: 1fr 1fr; gap: var(--gap-xl); }
    .mx-mstep--reverse .mx-mstep__visual { order: 2; }
}
.mx-mstep__visual { display: grid; place-items: center; }
.mx-mstep__visual .mx-mscene { max-width: 380px; }
.mx-mstep__num {
    display: inline-block; font-size: clamp(2.4rem, 6vw, 3.4rem); font-weight: 700; line-height: 1;
    background: var(--mx-gradient-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.mx-mstep__titre { font-size: clamp(1.5rem, 3.5vw, 2.2rem); margin: 6px 0 4px; }
.mx-mstep__tag { color: var(--mx-cyan); font-weight: 600; margin-bottom: 14px; }
.mx-mstep__desc { color: var(--mx-muted); font-size: 1.05rem; line-height: 1.8; }

/* ---------------------------------------------------------------- *
   MOBILE simplifié + reduced-motion
 * ---------------------------------------------------------------- */
@media (max-width: 600px) {
    .mx-mscene { max-width: 220px; }
    .mx-mtease__stage { min-height: 240px; }
}
@media (prefers-reduced-motion: reduce) {
    .mx-mscene * { animation: none !important; }
    .mx-mscene__sweep { display: none; }
    .mx-mscene__curve { stroke-dashoffset: 0; }
    .mx-mscene__blocks rect { opacity: 1 !important; transform: none !important; }
    .mx-mtease__step.is-active .mx-mtease__step-bar { transition: none; }
}

/* =========================================================================
   LE SYSTÈME MATRIX — objet vivant unique, multi-états (scan/build/growth/optimize)
   ========================================================================= */
.mx-msys {
    --sys: var(--mx-cyan); --sys-rgb: var(--mx-cyan-rgb);
    position: relative; width: 100%; max-width: 380px; margin: 0 auto; aspect-ratio: 1 / 1;
}
.mx-msys.is-build    { --sys: var(--mx-blue);    --sys-rgb: var(--mx-blue-rgb); }
.mx-msys.is-growth   { --sys: var(--mx-magenta); --sys-rgb: var(--mx-magenta-rgb); }
.mx-msys.is-optimize { --sys: var(--mx-violet);  --sys-rgb: var(--mx-violet-rgb); }
.mx-msys__glow {
    position: absolute; inset: 14%; border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--sys-rgb), 0.32), transparent 70%);
    filter: blur(30px); transition: background 0.6s;
}
.mx-msys__svg { position: relative; width: 100%; height: 100%; overflow: visible; }

/* Anneau d'énergie (progression) */
.mx-msys__energy-track { fill: none; stroke: rgba(255, 255, 255, 0.07); stroke-width: 3; }
.mx-msys__energy {
    fill: none; stroke: var(--sys); stroke-width: 3; stroke-linecap: round;
    stroke-dasharray: 679; stroke-dashoffset: 509;
    transition: stroke-dashoffset 0.8s var(--ease), stroke 0.6s;
    filter: drop-shadow(0 0 6px rgba(var(--sys-rgb), 0.6));
}
.is-build .mx-msys__energy    { stroke-dashoffset: 340; }
.is-growth .mx-msys__energy   { stroke-dashoffset: 170; }
.is-optimize .mx-msys__energy { stroke-dashoffset: 0; }

/* Lignes de données */
.mx-msys__data line { stroke: rgba(var(--sys-rgb), 0.4); stroke-width: 1.5; stroke-dasharray: 3 6; animation: mxDash 1.2s linear infinite; transition: stroke 0.6s; }

/* Orbites */
.mx-msys__orbit { transform-box: view-box; transform-origin: 120px 120px; animation: mxSpin 22s linear infinite; }
.mx-msys__orbit--2 { animation-duration: 15s; animation-direction: reverse; }
.mx-msys__orbit-ring { fill: none; stroke: rgba(var(--sys-rgb), 0.22); stroke-width: 1.4; transition: stroke 0.6s; }
.mx-msys__node { fill: var(--sys); transform-box: fill-box; transform-origin: center; animation: mxNode 2.6s ease-in-out infinite; transition: fill 0.6s; }
.mx-msys__node:nth-child(3) { animation-delay: 0.4s; }
.mx-msys__node:nth-child(4) { animation-delay: 0.8s; }
.mx-msys__node:nth-child(5) { animation-delay: 1.2s; }

/* Core vivant */
.mx-msys__core-outer { fill: rgba(var(--sys-rgb), 0.10); stroke: rgba(var(--sys-rgb), 0.4); stroke-width: 1; transition: 0.6s; }
.mx-msys__core { fill: rgba(var(--sys-rgb), 0.28); transform-box: fill-box; transform-origin: center; animation: mxCorePulse 2.4s ease-in-out infinite; transition: fill 0.6s; }
.mx-msys__core-dot { fill: var(--sys); filter: drop-shadow(0 0 7px rgba(var(--sys-rgb), 0.9)); transition: fill 0.6s; }
.is-growth .mx-msys__core   { animation-duration: 1.3s; }
.is-optimize .mx-msys__core { animation-duration: 0.9s; }

/* Overlays par état */
.mx-msys__ov { opacity: 0; transition: opacity 0.5s; }
.is-scan .mx-msys__scan,
.is-build .mx-msys__build,
.is-growth .mx-msys__flow,
.is-optimize .mx-msys__loop { opacity: 1; }

.mx-msys__scan { transform-box: view-box; transform-origin: 120px 120px; }
.mx-msys__scan path { fill: rgba(var(--sys-rgb), 0.18); }
.is-scan .mx-msys__scan { animation: mxSpin 3.5s linear infinite; }

.mx-msys__build rect { fill: rgba(var(--sys-rgb), 0.18); stroke: rgba(var(--sys-rgb), 0.55); stroke-width: 1.4; transform-box: fill-box; transform-origin: center; }
.is-build .mx-msys__build rect { animation: mxPop 0.6s var(--ease) both; }
.is-build .mx-msys__build rect:nth-child(2) { animation-delay: 0.12s; }
.is-build .mx-msys__build rect:nth-child(3) { animation-delay: 0.24s; }
.is-build .mx-msys__build rect:nth-child(4) { animation-delay: 0.36s; }

.mx-msys__p { fill: var(--sys); }
.is-growth .mx-msys__p--up    { animation: mxFlowUp 1.5s ease-out infinite; }
.is-growth .mx-msys__p--right { animation: mxFlowRight 1.5s ease-out infinite 0.25s; }
.is-growth .mx-msys__p--down  { animation: mxFlowDown 1.5s ease-out infinite 0.5s; }
.is-growth .mx-msys__p--left  { animation: mxFlowLeft 1.5s ease-out infinite 0.75s; }

.mx-msys__loop-ring { fill: none; stroke: rgba(var(--sys-rgb), 0.5); stroke-width: 1.5; stroke-dasharray: 10 8; transform-box: view-box; transform-origin: 120px 120px; }
.is-optimize .mx-msys__loop-ring { animation: mxSpin 6s linear infinite; }
.mx-msys__loop-arrow { fill: none; stroke: var(--sys); stroke-width: 2.5; stroke-linecap: round; }

@keyframes mxCorePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.16); } }
@keyframes mxPop { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } }
@keyframes mxFlowUp    { 0% { transform: translateY(0); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(-84px); opacity: 0; } }
@keyframes mxFlowRight { 0% { transform: translateX(0); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateX(84px); opacity: 0; } }
@keyframes mxFlowDown  { 0% { transform: translateY(0); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(84px); opacity: 0; } }
@keyframes mxFlowLeft  { 0% { transform: translateX(0); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateX(-84px); opacity: 0; } }

/* État-label du teaser */
.mx-mtease__state-label { position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mx-muted); white-space: nowrap; }

/* ---- Page méthode : système STICKY + étapes qui défilent ---- */
.mx-msys-layout { display: grid; grid-template-columns: 1fr; gap: var(--gap-lg); }
@media (min-width: 900px) { .mx-msys-layout { grid-template-columns: 0.9fr 1.1fr; gap: var(--gap-xl); align-items: start; } }
.mx-msys-sticky { position: relative; text-align: center; }
/* Desktop : le système occupe toute la hauteur d'écran et se tient AU CENTRE.
   Avant il collait tout en haut, laissant un demi-écran de vide sous lui
   (entouré en rouge par Jack le 17/07). Une colonne sticky doit remplir le
   viewport et centrer son contenu, sinon elle a l'air abandonnée. */
@media (min-width: 900px) {
    .mx-msys-sticky {
        position: sticky;
        top: var(--mx-header-h);
        height: calc(100vh - var(--mx-header-h));
        display: grid;
        place-content: center;
        gap: 10px;
    }
}
/* Mobile : le système reste épinglé en HAUT et évolue pendant qu'on défile. */
@media (max-width: 899px) {
    .mx-msys-sticky {
        position: sticky; top: var(--mx-header-h); z-index: 3;
        padding: 14px 0 12px; margin-bottom: 6px;
        background: var(--mx-black);
        border-bottom: 1px solid var(--mx-border);
    }
    .mx-msys-sticky .mx-msys { max-width: 148px; }
    .mx-msys-sticky__label { margin-top: 6px; }
    .mx-msys-steps { gap: clamp(48px, 30vh, 160px); }
}
.mx-msys-sticky__label { display: block; margin-top: 16px; color: var(--mx-muted); letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.75rem; transition: color 0.4s; }
.mx-msys-steps { display: flex; flex-direction: column; gap: clamp(40px, 12vh, 110px); }
.mx-msys-step { transition: opacity 0.4s; }
@media (min-width: 900px) { .mx-msys-step { opacity: 0.35; } .mx-msys-step.is-active { opacity: 1; } }
.mx-msys-step__num { display: inline-block; font-size: clamp(2.2rem, 6vw, 3.2rem); font-weight: 700; line-height: 1; background: var(--mx-gradient-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.mx-msys-step__titre { font-size: clamp(1.5rem, 3.5vw, 2.1rem); margin: 6px 0 4px; }
.mx-msys-step__tag { color: var(--mx-cyan); font-weight: 600; margin-bottom: 12px; }
.mx-msys-step__desc { color: var(--mx-muted); font-size: 1.05rem; line-height: 1.8; }

@media (max-width: 600px) { .mx-msys { max-width: 230px; } }
@media (prefers-reduced-motion: reduce) {
    .mx-msys__orbit, .mx-msys__core, .mx-msys__node, .mx-msys__data line, .mx-msys__scan, .mx-msys__loop-ring { animation: none !important; }
    .mx-msys__p { display: none; }
}

/* Robustesse sticky mobile : un item de grille étiré bloque position:sticky. */
@media (max-width: 899px) {
    .mx-msys-layout { align-items: start; }
    .mx-msys-sticky { align-self: start; }
}

/* =========================================================================
   MODE CLAIR — le Système garde son canvas SOMBRE (conçu pour le fond noir :
   glows + anneaux fins). Évite l'effet "éléments épars" sur fond blanc.
   ========================================================================= */
/* Desktop : le système dans un cadre sombre encadré. */
@media (min-width: 900px) {
    :root[data-theme="light"] .mx-mtease__stage,
    :root[data-theme="light"] .mx-msys-sticky {
        background: radial-gradient(ellipse at 50% 42%, #12141f 0%, #07070d 78%);
        border: 1px solid rgba(20, 30, 80, 0.10);
        border-radius: 22px;
        padding: clamp(22px, 3vw, 34px);
        box-shadow: 0 20px 50px rgba(20, 30, 80, 0.10);
    }
}
/* Mobile : on PRÉSERVE la barre sticky compacte (sinon elle casse) — juste un
   fond sombre opaque pour que le système reste lisible et masque le défilement. */
@media (max-width: 899px) {
    :root[data-theme="light"] .mx-msys-sticky { background: #08080e; }
    :root[data-theme="light"] .mx-mtease__stage {
        background: radial-gradient(ellipse at 50% 42%, #12141f 0%, #07070d 82%);
        border: 1px solid rgba(20, 30, 80, 0.10);
        border-radius: 18px;
        padding: 22px 14px;
    }
}
:root[data-theme="light"] .mx-mtease__state-label,
:root[data-theme="light"] .mx-msys-sticky__label { color: #aab2cc; }