/* ==========================================================
   PAGE D'ACCUEIL (vitrine publique)
   Point d'entrée pour un visiteur non connecté — présentation
   du site avant inscription. Pas de sidebar (skipAppShell).
========================================================== */

.mpr-home-shell{
    display:flex;
    flex-direction:column;
    min-height:100vh;
    background:var(--mpr-background);
}

/* ---- Navigation ---- */

.mpr-home-nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    row-gap:10px;
    padding:20px 36px;
    background:var(--mpr-surface);
    border-bottom:1px solid var(--mpr-border);
}

.mpr-home-logo img{
    height:28px;
    display:block;
}

.mpr-home-nav-actions{
    display:flex;
    align-items:center;
    gap:12px;
}

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

.mpr-home-hero{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    max-width:720px;
    margin:0 auto;
    padding:72px 20px 56px;
}

.mpr-home-hero .mpr-badge{
    margin-bottom:16px;
}

.mpr-home-hero h1{
    font-size:40px;
    line-height:1.15;
    margin:0 0 18px;
}

.mpr-home-hero p{
    font-size:var(--mpr-font-md);
    color:var(--mpr-text-light);
    line-height:1.6;
    margin:0 0 28px;
}

.mpr-home-hero p strong{
    color:var(--mpr-text);
}

.mpr-home-hero-actions{
    display:flex;
    align-items:center;
    gap:12px;
}

.mpr-home-hero-trust{
    display:flex;
    align-items:center;
    gap:6px;
    margin:18px 0 0;
    font-size:var(--mpr-font-sm);
    color:var(--mpr-text-light);
}

.mpr-home-hero-trust svg{
    width:14px;
    height:14px;
    flex-shrink:0;
}

/* ==========================================================
   MODÈLE CALIBRÉ SUR VOS COURSES
   Preuve concrète (liste des paramètres réels + illustration)
   que la prédiction n'est pas une formule générique — placée
   entre le hero et la roue "Comment ça marche".
========================================================== */

.mpr-home-model{
    max-width:1100px;
    width:100%;
    margin:0 auto;
    padding:24px 20px 48px;
    text-align:center;
}

.mpr-home-model-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:16px;
    text-align:left;
    margin-top:24px;
}

.mpr-home-model-item h3{
    margin:14px 0 10px;
}

.mpr-home-model-item ul{
    margin:0;
    padding-left:18px;
    display:flex;
    flex-direction:column;
    gap:6px;
}

.mpr-home-model-item li{
    font-size:var(--mpr-font-sm);
    color:var(--mpr-text-light);
    line-height:1.5;
}

.mpr-home-model-proof{
    max-width:640px;
    margin:32px auto 0;
    padding:24px;
    background:var(--mpr-surface);
    border:1px solid var(--mpr-border);
    border-radius:var(--mpr-radius);
}

.mpr-home-model-chart{
    width:100%;
    height:auto;
    display:block;
}

.mpr-home-model-chart-grid{
    stroke:var(--mpr-border);
    stroke-width:1;
    opacity:.6;
}

.mpr-home-model-chart-ref{
    stroke:var(--mpr-primary-light);
    stroke-width:1;
    stroke-dasharray:4 4;
}

.mpr-home-model-chart-ref-label{
    fill:var(--mpr-text-light);
    font-size:11px;
}

.mpr-home-model-chart-line{
    fill:none;
    stroke:var(--mpr-primary);
    stroke-width:3;
    stroke-linejoin:round;
    stroke-linecap:round;
}

.mpr-home-model-chart-dot{
    fill:var(--mpr-surface);
    stroke:var(--mpr-primary);
    stroke-width:2;
}

.mpr-home-model-chart-tick{
    fill:var(--mpr-text-light);
    font-size:11px;
}

.mpr-home-model-chart-axis-title{
    fill:var(--mpr-text-light);
    font-size:12px;
    font-weight:var(--mpr-weight-semibold);
}

.mpr-home-model-proof-caption{
    margin:16px 0 0;
    font-size:var(--mpr-font-sm);
    color:var(--mpr-text-light);
    line-height:1.55;
}

/* ---- Étapes ---- */

.mpr-home-steps{
    max-width:1100px;
    width:100%;
    margin:0 auto;
    padding:24px 20px 32px;
    text-align:center;
}

.mpr-home-steps-title{
    margin-bottom:6px;
}

.mpr-home-steps-subtitle{
    margin-bottom:8px;
}

/* ==========================================================
   ROUE DES MODULES
   6 points positionnés sur un cercle (coordonnées précalculées,
   pas de trigonométrie CSS) ; chaque point ouvre un popup avec
   description + illustration, au survol (desktop) ou au clic
   (tactile).
========================================================== */

.mpr-wheel{
    position:relative;
    width:640px;
    height:640px;
    max-width:100%;
    margin:40px auto 0;
}

.mpr-wheel-ring{
    position:absolute;
    inset:30px;
    border:2px dashed var(--mpr-border);
    border-radius:50%;
}

.mpr-wheel-node{
    position:absolute;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    width:150px;
    padding:10px;
    background:none;
    border:none;
    border-radius:14px;
    cursor:pointer;
    font-family:inherit;
    transition:transform .18s ease;
}

.mpr-wheel-node:hover,
.mpr-wheel-node.is-open{
    transform:translate(-50%,-50%) scale(1.06);
    z-index:5;
}

.mpr-wheel-node-icon{
    width:52px;
    height:52px;
    border-radius:50%;
    background:var(--mpr-surface);
    border:1px solid var(--mpr-border);
    box-shadow:var(--mpr-shadow);
    color:var(--mpr-primary);
    display:flex;
    align-items:center;
    justify-content:center;
}

.mpr-wheel-node-icon svg{
    width:22px;
    height:22px;
}

.mpr-wheel-node-label{
    font-size:var(--mpr-font-sm);
    font-weight:var(--mpr-weight-semibold);
    color:var(--mpr-text);
    line-height:1.3;
}

/* Point mis en avant : différenciant, couleur pleine */

.mpr-wheel-node-highlight .mpr-wheel-node-icon{
    background:var(--mpr-primary);
    border-color:var(--mpr-primary);
    color:#fff;
}

/* ---- Positions (précalculées pour un cercle de rayon 290px) ---- */

.mpr-wheel-pos-top{           left:320px; top:30px;  transform:translate(-50%,-50%); }
.mpr-wheel-pos-upper-right{   left:571px; top:175px; transform:translate(-50%,-50%); }
.mpr-wheel-pos-lower-right{   left:571px; top:465px; transform:translate(-50%,-50%); }
.mpr-wheel-pos-bottom{        left:320px; top:610px; transform:translate(-50%,-50%); }
.mpr-wheel-pos-lower-left{    left:69px;  top:465px; transform:translate(-50%,-50%); }
.mpr-wheel-pos-upper-left{    left:69px;  top:175px; transform:translate(-50%,-50%); }

.mpr-wheel-pos-top:hover, .mpr-wheel-pos-top.is-open,
.mpr-wheel-pos-upper-right:hover, .mpr-wheel-pos-upper-right.is-open,
.mpr-wheel-pos-lower-right:hover, .mpr-wheel-pos-lower-right.is-open,
.mpr-wheel-pos-bottom:hover, .mpr-wheel-pos-bottom.is-open,
.mpr-wheel-pos-lower-left:hover, .mpr-wheel-pos-lower-left.is-open,
.mpr-wheel-pos-upper-left:hover, .mpr-wheel-pos-upper-left.is-open{
    transform:translate(-50%,-50%) scale(1.06);
}

/* ---- Popup (description + illustration) ---- */

.mpr-wheel-popup{
    position:absolute;
    width:280px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
    padding:16px;
    background:var(--mpr-surface);
    border:1px solid var(--mpr-border);
    border-radius:14px;
    box-shadow:0 12px 28px rgba(0,0,0,.12);
    text-align:left;

    opacity:0;
    visibility:hidden;
    transform:translateY(4px);
    transition:opacity .15s ease, transform .15s ease;
    pointer-events:none;
    z-index:10;
}

.mpr-wheel-node:hover .mpr-wheel-popup,
.mpr-wheel-node.is-open .mpr-wheel-popup{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.mpr-wheel-popup img{
    width:100%;
    height:auto;
    display:block;
    border-radius:8px;
    border:1px solid var(--mpr-border);
}

.mpr-wheel-popup strong{
    font-size:var(--mpr-font-base);
    color:var(--mpr-text);
}

.mpr-wheel-popup span{
    font-size:var(--mpr-font-sm);
    color:var(--mpr-text-light);
    line-height:1.5;
}

.mpr-wheel-popup-badge{
    align-self:flex-start;
}

/* Direction d'ouverture (haut/bas) */

.mpr-wheel-popup-below{ top:calc(100% + 14px); }
.mpr-wheel-popup-above{ bottom:calc(100% + 14px); }

/* Alignement horizontal */

.mpr-wheel-popup-center{ left:50%; transform:translateX(-50%) translateY(4px); }
.mpr-wheel-popup-center.mpr-wheel-popup-below,
.mpr-wheel-node:hover .mpr-wheel-popup-center,
.mpr-wheel-node.is-open .mpr-wheel-popup-center{ transform:translateX(-50%) translateY(0); }

.mpr-wheel-popup-left{ left:0; }
.mpr-wheel-popup-right{ right:0; }

/* ---- Cycle : le point "Enrichir" referme visuellement la boucle ---- */

.mpr-wheel-node-highlight .mpr-wheel-popup{
    border-color:var(--mpr-primary);
}

/* ---- À venir ---- */

.mpr-home-upcoming{
    max-width:1100px;
    width:100%;
    margin:0 auto;
    padding:24px 20px 48px;
    text-align:center;
}

.mpr-home-upcoming-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
    text-align:left;
    margin-top:24px;
}

.mpr-home-upcoming-item .mpr-status-pill{
    margin-bottom:12px;
}

.mpr-home-upcoming-item h3{
    margin:14px 0 8px;
}

.mpr-home-upcoming-item p{
    font-size:var(--mpr-font-sm);
    color:var(--mpr-text-light);
    line-height:1.55;
    margin:0;
}

/* ---- Bandeau CTA de clôture ---- */

.mpr-home-cta{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:8px;
    max-width:1100px;
    width:calc(100% - 40px);
    margin:0 auto 64px;
    padding:48px 20px;
    background:var(--mpr-primary);
    border-radius:var(--mpr-radius);
}

.mpr-home-cta h2{
    color:#fff;
    margin:0;
}

.mpr-home-cta p{
    color:rgba(255,255,255,.85);
    margin:0 0 12px;
}

.mpr-home-cta .mpr-btn-primary{
    background:#fff;
    color:var(--mpr-primary);
}

.mpr-home-cta .mpr-btn-primary:hover{
    background:rgba(255,255,255,.9);
}

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

@media (max-width:900px){
    .mpr-home-upcoming-grid{
        grid-template-columns:1fr;
    }
    .mpr-home-model-grid{
        grid-template-columns:1fr;
    }
    .mpr-home-model-proof{
        padding:20px 16px;
    }
}

/* En dessous de cette largeur, le cercle laisse place à une liste
   verticale — les popups deviennent des volets qui s'ouvrent dans le
   flux (accordéon) plutôt que des popups flottants, impossibles à bien
   positionner de façon fiable sur petit écran. */
@media (max-width:820px){

    .mpr-wheel{
        width:100%;
        height:auto;
        margin-top:16px;
    }

    .mpr-wheel-ring{
        display:none;
    }

    .mpr-wheel-node,
    .mpr-wheel-node:hover,
    .mpr-wheel-node.is-open{
        position:static;
        flex-direction:row;
        flex-wrap:wrap;
        align-items:center;
        justify-content:flex-start;
        gap:14px;
        width:100%;
        text-align:left;
        padding:14px 16px;
        background:var(--mpr-surface);
        border:1px solid var(--mpr-border);
        border-radius:12px;
        margin-bottom:10px;
        transform:none;
    }

    .mpr-wheel-node-icon{
        flex-shrink:0;
    }

    .mpr-wheel-popup{
        position:static;
        flex:1 0 100%;
        width:100%;
        display:none;
        opacity:1;
        visibility:visible;
        transform:none;
        box-shadow:none;
        pointer-events:auto;
        left:auto;
        right:auto;
        top:auto;
        bottom:auto;
    }

    .mpr-wheel-node:hover .mpr-wheel-popup,
    .mpr-wheel-node.is-open .mpr-wheel-popup{
        display:flex;
    }
}

@media (max-width:700px){

    .mpr-home-nav{
        padding:16px 20px;
    }

    .mpr-home-hero{
        padding:48px 16px 40px;
    }

    .mpr-home-hero h1{
        font-size:28px;
    }

    .mpr-home-hero-actions{
        flex-direction:column;
        width:100%;
    }

    .mpr-home-hero-actions .mpr-btn{
        width:100%;
    }
}