:root{--page-bg:#f7f8f5;--surface:#fff;--ink:#0b1220;--muted:#334155;--line:#cbd5e1;--brand:#0f5132;--brand-2:#2eb087;--bbg:#f0fdf4;--b100:#dcfce7;--abg:#fef3c7;--radius:18px;--sh:0 12px 40px rgba(16,24,40,.10)}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:"DM Sans",sans-serif;-webkit-font-smoothing:antialiased}
body{background:var(--page-bg);color:var(--ink);display:flex;min-height:100vh}
a{text-decoration:none;color:inherit}button{font-family:inherit;cursor:pointer}

/* PANNEAU GAUCHE */
.panel-left{width:420px;flex-shrink:0;background:var(--brand);position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:2.5rem 2rem;overflow:hidden}
.panel-left::before{content:'';position:absolute;inset:0;background:linear-gradient(160deg,#0a3d24 0%,#0f5132 45%,#1a7a4a 100%);z-index:0}
.panel-left>*{position:relative;z-index:1}
.pl-logo{font:800 1.4rem/1 "Playfair Display",serif;color:#fff;letter-spacing:-.02em}
.pl-logo span{color:var(--brand-2)}
.pl-content{margin-top:2.5rem;flex:1}
.pl-eyebrow{font:500 .72rem/1 "DM Sans",sans-serif;color:rgba(255,255,255,.55);text-transform:uppercase;letter-spacing:.1em;margin-bottom:1rem}
.pl-title{font:800 2.4rem/1.1 "Playfair Display",serif;color:#fff;margin-bottom:1rem}
.pl-title em{color:var(--brand-2);font-style:italic}
.pl-desc{font:400 .9rem/1.7 "DM Sans",sans-serif;color:rgba(255,255,255,.7);margin-bottom:2rem}
.mp-row{display:flex;align-items:center;gap:.6rem;margin-bottom:.55rem}
.mp-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.mp-label{font:500 .75rem/1 "DM Sans",sans-serif;color:rgba(255,255,255,.8);width:110px;flex-shrink:0}
.mp-bar-wrap{flex:1;height:5px;background:rgba(255,255,255,.15);border-radius:3px;overflow:hidden}
.mp-bar{height:100%;border-radius:3px;width:0;transition:width 1.2s cubic-bezier(.4,0,.2,1)}
.crecos-teaser{margin-top:1.5rem;background:rgba(255,255,255,.08);border-radius:14px;padding:.9rem 1rem;display:flex;align-items:center;gap:.75rem;border:1px solid rgba(255,255,255,.12)}
.ct-coin{font-size:1.5rem}
.ct-text{display:flex;flex-direction:column;gap:.2rem}
.ct-text strong{font:600 .8rem/1 "DM Sans",sans-serif;color:#fff}
.ct-text span{font:400 .7rem/1 "DM Sans",sans-serif;color:rgba(255,255,255,.55)}

/* PANNEAU DROIT */
.panel-right{flex:1;overflow-y:auto;background:var(--page-bg);padding:2.5rem 3rem 3rem}
.pr-inner{max-width:520px;margin:0 auto;display:flex;flex-direction:column;gap:0}

/* PROGRESSION */
.progress-wrap{margin-bottom:2rem}
.progress-steps{display:flex;align-items:center;margin-bottom:.6rem}
.ps-item{display:flex;align-items:center;flex:1}
.ps-item:last-child{flex:none}
.ps-dot{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:700 .72rem/1 "DM Sans",sans-serif;flex-shrink:0;transition:all .3s}
.ps-dot.active{background:var(--brand);color:#fff;box-shadow:0 0 0 4px var(--b100)}
.ps-dot.done{background:var(--brand-2);color:#fff}
.ps-dot.pending{background:#e2e8f0;color:#94a3b8}
.ps-line{flex:1;height:2px;background:#e2e8f0;margin:0 .25rem;transition:background .3s}
.ps-line.done{background:var(--brand-2)}
.progress-label{font:400 .75rem/1 "DM Sans",sans-serif;color:#64748b}
.progress-label strong{color:var(--ink)}

/* ÉTAPES */
.step{display:none;animation:stepIn .3s ease}
.step.active{display:block}
@keyframes stepIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.step-title{font:700 1.5rem/1.2 "Playfair Display",serif;color:var(--ink);margin-bottom:.5rem}
.step-sub{font:400 .88rem/1.65 "DM Sans",sans-serif;color:#64748b;margin-bottom:1.75rem}

/* CHAMPS */
.field-group{display:flex;flex-direction:column;gap:.35rem;margin-bottom:1rem}
.field-label{font:600 .78rem/1 "DM Sans",sans-serif;color:var(--ink)}
.field-input{border:1.5px solid var(--line);border-radius:10px;padding:.65rem .85rem;font:400 .86rem/1 "DM Sans",sans-serif;color:var(--ink);background:#fff;outline:none;transition:border-color .15s;width:100%}
.field-input:focus{border-color:var(--brand-2)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}

/* BOUTON PRIMARY */
.btn-primary{width:100%;padding:.8rem;border-radius:12px;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;border:none;font:600 .9rem/1 "DM Sans",sans-serif;cursor:pointer;margin-top:1.25rem;transition:opacity .2s;position:relative}
.btn-primary:hover{opacity:.9}
.btn-primary:disabled{opacity:.6;cursor:wait}
.btn-sec{width:100%;padding:.75rem;border-radius:12px;border:1.5px solid var(--line);background:none;color:#64748b;font:500 .84rem/1 "DM Sans",sans-serif;margin-top:.65rem;transition:all .15s}
.btn-sec:hover{border-color:var(--brand-2);color:var(--brand)}
.back-link{display:flex;align-items:center;gap:.35rem;font:500 .78rem/1 "DM Sans",sans-serif;color:#64748b;cursor:pointer;margin-bottom:1.5rem;width:fit-content;transition:color .15s}
.back-link:hover{color:var(--brand)}
.back-link svg{width:14px;height:14px}

/* ALERTE */
.alert{padding:.65rem .9rem;border-radius:10px;font:500 .78rem/1.5 "DM Sans",sans-serif;margin-bottom:1rem;display:none}
.alert.show{display:block}
.alert.error{background:#fee2e2;color:#991b1b;border:1px solid #fca5a5}
.alert.success{background:#dcfce7;color:#166534;border:1px solid #86efac}

/* SPINNER */
.spinner{width:18px;height:18px;border:2.5px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;display:inline-block;vertical-align:middle;margin-right:.5rem}
@keyframes spin{to{transform:rotate(360deg)}}

/* CARDS SÉLECTION (Q3 & Q4) */
.select-grid{display:grid;grid-template-columns:1fr 1fr;gap:.65rem;margin-bottom:.5rem}
.sel-card{border:1.5px solid var(--line);border-radius:14px;padding:.85rem .9rem;cursor:pointer;transition:all .18s;background:#fff;display:flex;flex-direction:column;gap:.4rem}
.sel-card:hover{border-color:var(--brand-2);background:var(--bbg)}
.sel-card.on{border-color:var(--brand);background:var(--bbg);box-shadow:0 0 0 3px var(--b100)}
.sel-icon{font-size:1.5rem}
.sel-label{font:700 .82rem/1.2 "DM Sans",sans-serif;color:var(--ink)}
.sel-desc{font:400 .68rem/1.4 "DM Sans",sans-serif;color:#64748b}
.sel-card.on .sel-label{color:var(--brand)}

/* SLIDERS MOTEURS */
.mot-item{margin-bottom:1.1rem}
.mot-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.45rem}
.mot-name{font:600 .8rem/1 "DM Sans",sans-serif;color:var(--ink);display:flex;align-items:center;gap:.5rem}
.mot-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.mot-val{font:700 .82rem/1 "DM Sans",sans-serif;min-width:28px;text-align:right}
input[type=range]{-webkit-appearance:none;width:100%;height:5px;border-radius:3px;background:#e2e8f0;outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--c,var(--brand));cursor:pointer;border:2.5px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.2)}

/* INTÉRÊTS */
.int-item{display:flex;align-items:center;gap:.65rem;background:#fff;border:1px solid var(--line);border-radius:12px;padding:.6rem .85rem;margin-bottom:.45rem}
.int-emo{font-size:1.2rem;flex-shrink:0}
.int-name{font:600 .8rem/1.2 "DM Sans",sans-serif;color:var(--ink);flex:1}
.int-rm{background:none;border:none;color:#94a3b8;font-size:.9rem;cursor:pointer;padding:.1rem .3rem}

/* MODULE PREVIEW CHIPS */
.mod-chips{display:flex;flex-wrap:wrap;gap:.45rem}
.mod-chip{display:flex;align-items:center;gap:.4rem;padding:.35rem .75rem;border-radius:20px;font:600 .72rem/1 "DM Sans",sans-serif;border:1.5px solid transparent}
.mod-chip.active{background:var(--brand);color:#fff;border-color:var(--brand)}
.mod-chip.soon{background:var(--abg);color:#92400e;border-color:#fde68a}
.mod-chip.locked{background:#f1f5f9;color:#94a3b8;border-color:#e2e8f0}

/* MALINS TOGGLE */
.malins-box{border-radius:16px;overflow:hidden;margin:1.25rem 0}
.malins-header{background:linear-gradient(135deg,var(--brand),var(--brand-2));padding:1rem 1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:space-between}
.malins-title{font:700 .95rem/1.2 "DM Sans",sans-serif;color:#fff;display:flex;align-items:center;gap:.5rem}
.malins-toggle-wrap{display:flex;align-items:center;gap:.5rem}
.malins-toggle{width:44px;height:24px;background:rgba(255,255,255,.3);border-radius:12px;position:relative;border:none;transition:background .2s;cursor:pointer}
.malins-toggle.on{background:#fff}
.malins-toggle::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--brand);transition:transform .2s}
.malins-toggle.on::after{transform:translateX(20px)}
.malins-body{background:#fff;border:1.5px solid var(--b100);border-top:none;border-radius:0 0 16px 16px;padding:1rem 1.1rem}
.malins-acronym{display:flex;flex-direction:column;gap:.35rem;margin:0}
.malins-row{display:flex;align-items:baseline;gap:.55rem;font-size:.78rem;color:var(--muted)}
.malins-letter{font:800 1.1rem/1 "Lora",serif;color:var(--brand);width:18px;flex-shrink:0}
.malins-word{font:700 .8rem/1 "DM Sans",sans-serif;color:var(--ink)}
.malins-def{color:#64748b}
.unlock-preview{margin-top:.85rem;padding-top:.85rem;border-top:1px solid var(--line)}
.unlock-row{display:flex;align-items:center;gap:.65rem;padding:.4rem 0;font:400 .74rem/1.4 "DM Sans",sans-serif;color:#64748b}
.unlock-ico{font-size:.9rem;flex-shrink:0;width:20px;text-align:center}
.unlock-bold{font-weight:600;color:var(--ink)}

/* ÉCRAN FINAL */
.final-card{background:#fff;border-radius:20px;padding:2rem;border:1.5px solid var(--b100);box-shadow:var(--sh);text-align:center}
.final-ico{font-size:3.5rem;margin-bottom:.75rem}
.final-title{font:700 1.5rem/1.2 "Playfair Display",serif;color:var(--ink);margin-bottom:.45rem}
.final-sub{font:400 .84rem/1.65 "DM Sans",sans-serif;color:#64748b;margin-bottom:1.5rem}
.final-modules{display:flex;flex-direction:column;gap:.5rem;margin:1.25rem 0;text-align:left}
.fm-row{display:flex;align-items:center;gap:.75rem;padding:.65rem .85rem;border-radius:12px}
.fm-row.active{background:var(--bbg);border:1.5px solid var(--b100)}
.fm-row.locked{background:#f8fafc;border:1.5px solid #e2e8f0;opacity:.7}
.fm-ico{font-size:1.1rem;flex-shrink:0;width:24px;text-align:center}
.fm-info{flex:1}
.fm-name{font:700 .8rem/1 "DM Sans",sans-serif;color:var(--ink)}
.fm-when{font:400 .68rem/1 "DM Sans",sans-serif;color:#64748b;margin-top:.18rem}
.fm-badge{font:600 .6rem/1 "DM Sans",sans-serif;padding:.15rem .5rem;border-radius:20px;flex-shrink:0}
.fm-badge.now{background:var(--brand);color:#fff}
.fm-badge.soon{background:var(--abg);color:#92400e}

/* ROUE SVG */
.wheel-wrap{background:linear-gradient(135deg,#f0fdf4,#dcfce7);border-radius:16px;padding:1.25rem;border:1px solid var(--b100);margin:1rem 0;display:flex;align-items:center;justify-content:center}

/* ÉTAPE MAGIC LINK */
.ml-waiting{text-align:center;padding:1.5rem 0}
.ml-ico{font-size:3rem;margin-bottom:.75rem}
.ml-title{font:700 1.1rem/1.3 "DM Sans",sans-serif;color:var(--ink);margin-bottom:.4rem}
.ml-sub{font:400 .8rem/1.6 "DM Sans",sans-serif;color:#64748b}

/* AUTH TABS */
.auth-tabs{display:flex;gap:.5rem;margin-bottom:1.5rem}
.at{flex:1;padding:.5rem;border-radius:10px;border:1.5px solid var(--line);background:none;font:600 .78rem/1 "DM Sans",sans-serif;color:#64748b;transition:all .15s}
.at.on{background:var(--brand);border-color:var(--brand);color:#fff}

/* SÉLECTION INTÉRÊTS - TAG CLOUD */
.int-cloud{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1rem}
.int-tag{padding:.32rem .8rem;border-radius:20px;border:1.5px solid var(--line);background:#fff;font:500 .74rem/1 "DM Sans",sans-serif;color:var(--muted);cursor:pointer;transition:all .15s}
.int-tag.on{background:var(--brand);border-color:var(--brand);color:#fff}
.int-tag:hover:not(.on){background:var(--bbg);border-color:var(--brand-2)}

/* TOAST */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(12px);background:var(--ink);color:#fff;padding:.55rem 1.2rem;border-radius:10px;font:500 .78rem/1 "DM Sans",sans-serif;opacity:0;transition:all .25s;pointer-events:none;z-index:9999}
.toast.show{opacity:1;transform:translateX(-50%)}

/* RESPONSIVE */
@media(max-width:900px){body{flex-direction:column}.panel-left{width:100%;height:auto;position:static;padding:1.5rem 1.25rem}.pl-title{font-size:1.7rem}.moteurs-preview{display:none}.panel-right{padding:1.5rem 1.25rem 2rem}.pr-inner{max-width:100%}}
@media(max-width:480px){.panel-right{padding:1.25rem 1rem 2rem}.step-title{font-size:1.25rem}.field-row{grid-template-columns:1fr}.select-grid{grid-template-columns:1fr}}

select.field-input { appearance: auto; cursor: pointer; }