:root{--brand:#0f5132;--b2:#2eb087;--bbg:#f0fdf4;--b100:#dcfce7;--amber:#f59e0b;--abg:#fef3c7;--ink:#0b1220;--muted:#374151;--soft:#6b7280;--line:#e5e7eb;--bg:#f4f6f8;--sur:#ffffff;--sh:0 2px 8px rgba(11,18,32,.07);--sh2:0 6px 24px rgba(11,18,32,.1);--m1:#3b82f6;--m2:#8b5cf6;--m3:#ec4899;--m4:#f59e0b;--m5:#ef4444;--m6:#10b981}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg)}body{font-family:"DM Sans",sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}button{font-family:inherit;cursor:pointer}
#top{position:fixed;top:0;left:0;right:0;height:52px;background:var(--sur);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:1rem;padding:0 1.5rem;z-index:500;box-shadow:var(--sh)}
.tlogo{font:800 1.2rem/1 "Lora",serif;color:var(--brand)}.tlogo span{color:var(--b2)}
.tsub{font:500 .58rem/1 "DM Sans",sans-serif;color:var(--soft);letter-spacing:.08em;text-transform:uppercase}
.tright{margin-left:auto;display:flex;align-items:center;gap:.5rem}
.tico{width:36px;height:36px;border-radius:50%;border:none;background:none;display:flex;align-items:center;justify-content:center;color:var(--soft);cursor:pointer}.tico svg{width:20px;height:20px}.tico:hover{background:var(--bg);color:var(--brand)}
.tav{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--b2),#5de8b0);display:flex;align-items:center;justify-content:center;font:700 .7rem/1 "DM Sans",sans-serif;color:var(--brand);border:2px solid var(--b100);cursor:pointer}
.av-wrap{position:relative}.av-menu{position:absolute;top:calc(100% + 10px);right:0;width:200px;background:var(--sur);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh2);overflow:hidden;opacity:0;pointer-events:none;transform:translateY(-6px);transition:all .2s;z-index:500}.av-menu.open{opacity:1;pointer-events:all;transform:translateY(0)}
.av-mi{display:flex;align-items:center;gap:.65rem;padding:.6rem 1rem;font:500 .8rem/1 "DM Sans",sans-serif;color:var(--muted);border:none;background:none;width:100%;text-align:left;cursor:pointer;text-decoration:none}.av-mi:hover{background:var(--bbg);color:var(--brand)}.av-mi svg{width:14px;height:14px;opacity:.6}.av-sep{height:1px;background:var(--line);margin:.2rem 0}.av-mi.danger{color:#dc2626}.av-mi.danger:hover{background:#fef2f2}
.page{max-width:1060px;margin:0 auto;padding:calc(52px + 1.25rem) 1rem 3rem;display:grid;grid-template-columns:1fr 280px;gap:1.5rem;align-items:start}
/* BANDEAU */
.id-card{background:var(--sur);border-radius:20px;border:1px solid var(--line);box-shadow:var(--sh);overflow:hidden;margin-bottom:1.25rem;position:relative;z-index:0}
.id-banner{height:40px;background:linear-gradient(135deg,var(--brand) 0%,var(--b2) 60%,#5de8b0 100%);position:relative;z-index:0}
.id-banner-pattern{position:absolute;inset:0;opacity:.07;background-image:radial-gradient(circle,#fff 1px,transparent 1px);background-size:18px 18px}
.id-body{padding:0 1.25rem 1.1rem}
.id-av-row{display:flex;align-items:flex-end;gap:.85rem;margin-top:-16px;margin-bottom:.8rem;position:relative;z-index:1}
.id-av{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:700 1rem/1 "DM Sans",sans-serif;color:#fff;border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.15);flex-shrink:0}
.id-actions{margin-left:auto;display:flex;gap:.4rem;padding-bottom:.1rem}
.btn-follow{padding:.36rem .8rem;border-radius:20px;border:1.5px solid var(--brand);background:none;font:600 .74rem/1 "DM Sans",sans-serif;color:var(--brand);transition:all .15s}.btn-follow:hover,.btn-follow.on{background:var(--brand);color:#fff}
.btn-reco{padding:.36rem .8rem;border-radius:20px;border:1.5px solid var(--line);background:none;font:600 .74rem/1 "DM Sans",sans-serif;color:var(--muted);transition:all .15s}.btn-reco:hover{border-color:var(--b2);color:var(--brand);background:var(--bbg)}
.id-name{font:700 1rem/1.25 "Lora",serif;color:var(--ink)}
.id-cap{font:400 .78rem/1.4 "DM Sans",sans-serif;color:var(--muted);margin:.18rem 0 .6rem}
.id-meta{display:flex;gap:.55rem;flex-wrap:wrap;margin-bottom:.85rem}
.id-badge{display:inline-flex;align-items:center;gap:.3rem;font:500 .68rem/1 "DM Sans",sans-serif;color:var(--soft)}.id-badge svg{width:11px;height:11px}
.id-stats{display:flex;border-top:1px solid var(--line);margin:0 -1.25rem}
.id-stat{flex:1;text-align:center;padding:.6rem .3rem;border-right:1px solid var(--line)}.id-stat:last-child{border-right:none}
.id-stat-n{font:700 .95rem/1 "Lora",serif;color:var(--brand)}.id-stat-l{font-size:.6rem;color:var(--soft);margin-top:.2rem}
/* SECTIONS */
.section{margin-bottom:1.5rem}

/* ── Contenu onglets hero ── */

.htc-label{font:600 .62rem/1 sans-serif;color:var(--soft);text-transform:uppercase;letter-spacing:.04em}
.htc-input{padding:.45rem .65rem;border-radius:8px;border:1px solid var(--line);background:var(--bg);font:400 .78rem/1 sans-serif;color:var(--ink);outline:none;width:100%;transition:border-color .15s}
.htc-input:focus{border-color:var(--b2)}
.htc-btn-primary{padding:.4rem .9rem;border-radius:20px;border:none;background:var(--brand);color:#fff;font:600 .72rem/1 sans-serif;cursor:pointer;transition:opacity .15s}
.htc-btn-primary:hover{opacity:.85}
.htc-btn-sec{padding:.38rem .85rem;border-radius:20px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:600 .72rem/1 sans-serif;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;transition:all .15s}
.htc-btn-sec:hover{border-color:var(--b2);color:var(--brand)}
.htc-real-row{padding:.4rem .6rem;border-radius:8px;border:1px solid var(--line);background:var(--bg);font-size:.74rem;color:var(--ink);display:flex;align-items:center;gap:.5rem}
.htc-real-row span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.htc-stat-card{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:.6rem;text-align:center}
.htc-stat-n{font:800 1.1rem/1 sans-serif;color:var(--brand);margin-bottom:.2rem}
.htc-stat-l{font:400 .62rem/1 sans-serif;color:var(--soft)}
.htc-tx-row{display:flex;align-items:center;gap:.5rem;font-size:.72rem;padding:.25rem 0;border-bottom:1px solid var(--line)}
.htc-tx-row:last-child{border:none}

/* ── Overlay chargement ── */
.jp-loader{position:fixed;inset:0;background:var(--bg,#f7f8f5);z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .4s ease,visibility .4s ease}
.jp-loader.done{opacity:0;visibility:hidden;pointer-events:none}
.jp-loader-logo{font:800 2rem/1 'Lora',serif;color:var(--brand,#0f5132);margin-bottom:.5rem}
.jp-loader-logo span{color:var(--b2,#2eb087)}
.jp-loader-sub{font:400 .78rem/1 sans-serif;color:var(--soft,#6b7280);margin-bottom:1.5rem}
.jp-loader-bar{width:120px;height:3px;background:var(--line,#e5e7eb);border-radius:2px;overflow:hidden}
.jp-loader-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--brand,#0f5132),var(--b2,#2eb087));border-radius:2px;transition:width .6s ease;animation:loaderAnim 1.5s ease infinite}
@keyframes loaderAnim{0%{width:0%;margin-left:0}50%{width:60%}100%{width:0%;margin-left:100%}}

    .quete-own{background:var(--sur);border:1px solid var(--line);border-radius:14px;padding:.9rem 1.1rem;margin-bottom:1rem;display:none}
.quete-own.visible{display:block}
.qo-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.6rem}
.qo-title{font:700 .8rem/1 sans-serif;color:var(--ink)}
.qo-pct{font:800 1rem/1 sans-serif;color:var(--brand)}
.qo-bar{height:6px;background:var(--line);border-radius:3px;overflow:hidden;margin-bottom:.75rem}
.qo-fill{height:100%;background:linear-gradient(90deg,var(--brand),var(--b2));border-radius:3px;transition:width 1s cubic-bezier(.4,0,.2,1)}
.qo-piliers{display:grid;grid-template-columns:repeat(5,1fr);gap:.35rem;margin-bottom:.75rem}
.qo-pilier{text-align:center;padding:.4rem .2rem;border-radius:10px;border:1px solid var(--line);background:var(--bg)}
.qo-pilier.done{border-color:var(--b2);background:var(--bbg)}
.qo-ico{font-size:1rem;display:block}
.qo-score{font:700 .55rem/1 sans-serif;color:var(--brand);margin-top:.15rem}
.qo-defi{display:flex;align-items:center;gap:.6rem;background:var(--bbg);border:1px solid var(--b100);border-radius:10px;padding:.6rem .8rem}
.qo-defi-ico{font-size:1.1rem;flex-shrink:0}
.qo-defi-txt{flex:1;min-width:0}
.qo-defi-titre{font:600 .72rem/1.2 sans-serif;color:var(--ink)}
.qo-defi-sub{font:400 .62rem/1.3 sans-serif;color:var(--soft);margin-top:.1rem}
.qo-defi-reward{font:700 .65rem/1 sans-serif;color:#92400e;background:#fef3c7;border-radius:20px;padding:.2rem .5rem;flex-shrink:0}

    .dual-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:start}
    .ob-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}
@media(max-width:600px){.dual-row{grid-template-columns:1fr}}

.prof-nav-link{display:flex;align-items:center;gap:.6rem;padding:.65rem 1rem;font:500 .8rem/1 sans-serif;color:var(--soft);text-decoration:none;border-bottom:1px solid var(--line);transition:all .15s}
.prof-nav-link:last-child{border-bottom:none}
.prof-nav-link:hover{background:var(--bbg);color:var(--brand)}
.prof-nav-link.active{color:var(--brand);font-weight:700;background:var(--bbg);border-left:3px solid var(--brand)}

/* ── Colonne gauche owner ── */
.page.owner-mode{max-width:1180px;margin:0 auto;padding:72px 1rem 3rem;display:grid;grid-template-columns:240px 1fr 280px;gap:1.25rem;align-items:start}

.owner-left::-webkit-scrollbar{display:none}
.page.owner-mode .owner-left{display:flex}
.ol-card{background:var(--sur);border:1px solid var(--line);border-radius:14px;padding:.9rem 1rem}
.ol-title{font:700 .78rem/1 sans-serif;color:var(--ink);margin-bottom:.75rem;display:flex;align-items:center;gap:.4rem}
/* Mini roue moteurs */
.mini-wheel-wrap{display:flex;justify-content:center;margin-bottom:.75rem}
.mini-mot-list{display:flex;flex-direction:column;gap:.35rem}
.mini-mot-row{display:flex;align-items:center;gap:.5rem;font-size:.7rem}
.mini-mot-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.mini-mot-label{flex:1;color:var(--soft)}
.mini-mot-val{font:600 .7rem/1 sans-serif;color:var(--ink)}
.mini-mot-bar{flex:2;height:4px;background:var(--line);border-radius:2px;overflow:hidden}
.mini-mot-fill{height:100%;border-radius:2px;transition:width 1s ease}
/* Intérêts mini */
.mini-int-grid{display:flex;flex-wrap:wrap;gap:.35rem}
.mini-int-chip{display:inline-flex;align-items:center;gap:.25rem;font-size:.68rem;padding:.2rem .5rem;border-radius:20px;background:var(--bbg);color:var(--brand);border:.5px solid var(--b100)}

.sec-title{display:flex;align-items:center;gap:.5rem;font:700 .86rem/1 "DM Sans",sans-serif;color:var(--ink);margin-bottom:.85rem}
.sec-title svg{width:15px;height:15px;color:var(--b2)}
.sec-count{font:600 .63rem/1 "DM Sans",sans-serif;background:var(--b100);color:var(--brand);padding:.11rem .4rem;border-radius:20px}
/* PAR */
.par-card{background:var(--sur);border-radius:14px;border:1px solid var(--line);box-shadow:var(--sh);margin-bottom:.65rem;overflow:hidden;transition:box-shadow .2s}.par-card:hover{box-shadow:var(--sh2)}
.par-head{display:flex;align-items:flex-start;gap:.7rem;padding:.9rem 1rem .7rem;cursor:pointer}
.par-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;margin-top:4px}
.par-title{font:700 .88rem/1.3 "Lora",serif;color:var(--ink)}
.par-meta{font:500 .65rem/1 "DM Sans",sans-serif;color:var(--soft);margin-top:.2rem}
.par-chev{margin-left:auto;flex-shrink:0;color:var(--soft);transition:transform .25s}.par-chev.open{transform:rotate(180deg)}
.par-body{display:none;padding:.1rem 1rem .9rem;border-top:1px solid var(--line)}.par-body.open{display:block}
.par-step{display:flex;gap:.6rem;padding:.6rem 0;border-bottom:1px dashed var(--line)}.par-step:last-of-type{border-bottom:none}
.pbadge{width:28px;height:18px;border-radius:5px;display:flex;align-items:center;justify-content:center;font:700 .55rem/1 "DM Sans",sans-serif;flex-shrink:0;margin-top:3px}
.pbadge.p{background:#fee2e2;color:#b91c1c}.pbadge.a{background:#dbeafe;color:#1d4ed8}.pbadge.r{background:#dcfce7;color:#166534}
.par-step-txt{font:400 .77rem/1.65 "DM Sans",sans-serif;color:var(--muted)}
.par-tags{display:flex;flex-wrap:wrap;gap:.3rem;padding:.5rem 0 .1rem}
.ptag{font:600 .58rem/1 "DM Sans",sans-serif;padding:.14rem .44rem;border-radius:20px}.ptag.se{background:#f0fdf4;color:#166534}.ptag.sf{background:#eff6ff;color:#1d4ed8}
/* INTERETS */
.int-cloud{display:flex;flex-wrap:wrap;gap:.42rem}
.int-tag{display:inline-flex;align-items:center;gap:.3rem;padding:.36rem .72rem;border-radius:20px;font:500 .76rem/1 "DM Sans",sans-serif;border:1.5px solid var(--line);background:var(--sur);color:var(--muted);transition:all .15s}.int-tag:hover{border-color:var(--b2);color:var(--brand);background:var(--bbg)}
.int-tag.lg{font-size:.82rem;padding:.42rem .85rem}.int-tag.sm{font-size:.68rem;padding:.28rem .6rem}
/* MOTEURS */
.mot-row{display:flex;align-items:center;gap:.65rem;margin-bottom:.5rem}
.mot-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.mot-lbl{font:500 .73rem/1 "DM Sans",sans-serif;color:var(--muted);width:90px;flex-shrink:0}
.mot-bar{flex:1;height:6px;background:var(--bg);border-radius:3px;overflow:hidden;border:1px solid var(--line)}
.mot-fill{height:100%;border-radius:3px;transition:width .7s cubic-bezier(.4,0,.2,1)}
.mot-val{font:700 .68rem/1 "DM Sans",sans-serif;color:var(--ink);width:24px;text-align:right;flex-shrink:0}
/* TIMELINE */
.tl{position:relative;padding-left:1.4rem}
.tl::before{content:'';position:absolute;left:.42rem;top:.4rem;bottom:.4rem;width:2px;background:linear-gradient(to bottom,var(--b2),var(--line));border-radius:2px}
.tl-item{position:relative;margin-bottom:1.1rem}.tl-item:last-child{margin-bottom:0}
.tl-dot{position:absolute;left:-.97rem;top:.42rem;width:9px;height:9px;border-radius:50%;background:var(--b2);border:2px solid #fff;box-shadow:0 0 0 2px var(--b2)}
.tl-card{background:var(--sur);border-radius:13px;border:1px solid var(--line);padding:.8rem .95rem;box-shadow:var(--sh);transition:box-shadow .2s}.tl-card:hover{box-shadow:var(--sh2)}
.tl-top{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem;margin-bottom:.45rem}
.tl-poste{font:700 .84rem/1.3 "Lora",serif;color:var(--ink)}
.tl-org{font:500 .7rem/1 "DM Sans",sans-serif;color:var(--brand);margin-top:.14rem}
.tl-periode{font:500 .63rem/1 "DM Sans",sans-serif;color:var(--soft);flex-shrink:0;margin-top:2px}
.tl-desc{font:400 .74rem/1.6 "DM Sans",sans-serif;color:var(--soft);margin-bottom:.55rem}
.tl-tags{display:flex;flex-wrap:wrap;gap:.28rem}
.ttag{font:600 .58rem/1 "DM Sans",sans-serif;padding:.14rem .42rem;border-radius:20px}.ttag.se{background:#f0fdf4;color:#166534}.ttag.sf{background:#eff6ff;color:#1d4ed8}
.btn-add-exp{display:flex;align-items:center;justify-content:center;gap:.4rem;width:100%;padding:.5rem;border-radius:11px;border:1.5px dashed var(--line);background:none;font:600 .72rem/1 "DM Sans",sans-serif;color:var(--soft);transition:all .15s;margin-top:.5rem}.btn-add-exp:hover{border-color:var(--b2);color:var(--brand);background:var(--bbg)}.btn-add-exp svg{width:13px;height:13px}
/* RECOS */
.reco-card{background:var(--sur);border-radius:14px;border:1px solid var(--line);box-shadow:var(--sh);padding:.9rem 1rem;margin-bottom:.65rem;position:relative}.reco-card:last-child{margin-bottom:0}
.reco-q{position:absolute;top:.6rem;right:.9rem;font-size:2rem;color:var(--b100);font-family:"Lora",serif;line-height:1}
.reco-txt{font:400 .82rem/1.7 "DM Sans",sans-serif;color:var(--muted);margin-bottom:.8rem;padding-right:2rem}
.reco-foot{display:flex;align-items:center;gap:.6rem}
.reco-av{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:700 .62rem/1 "DM Sans",sans-serif;flex-shrink:0}
.reco-name{font:600 .76rem/1.2 "DM Sans",sans-serif;color:var(--ink)}.reco-role{font-size:.63rem;color:var(--soft);margin-top:.06rem}
.reco-par{margin-left:auto;font:600 .61rem/1 "DM Sans",sans-serif;background:var(--bbg);color:var(--brand);padding:.14rem .44rem;border-radius:20px;white-space:nowrap}
.reco-check{display:inline-flex;align-items:center;gap:.18rem;font:600 .6rem/1 "DM Sans",sans-serif;color:var(--b2);margin-left:.3rem}
.btn-add-reco{display:flex;align-items:center;justify-content:center;gap:.4rem;width:100%;padding:.55rem;border-radius:11px;border:1.5px dashed var(--line);background:none;font:600 .75rem/1 "DM Sans",sans-serif;color:var(--soft);transition:all .15s;margin-top:.65rem}.btn-add-reco:hover{border-color:var(--b2);color:var(--brand);background:var(--bbg)}.btn-add-reco svg{width:14px;height:14px}
/* SIDEBAR */
.cdr{position:sticky;top:64px;display:flex;flex-direction:column;gap:.85rem}
.rc{background:var(--sur);border-radius:15px;border:1px solid var(--line);padding:.9rem 1rem;box-shadow:var(--sh)}
.rctit{font:700 .78rem/1 "DM Sans",sans-serif;color:var(--ink);margin-bottom:.7rem;display:flex;align-items:center;gap:.35rem}.rctit svg{width:13px;height:13px;color:var(--b2)}
.si{display:flex;gap:.5rem;align-items:center;padding:.38rem 0;border-bottom:1px solid var(--line)}.si:last-child{border-bottom:none;padding-bottom:0}
.sav{width:30px;height:30px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font:700 .6rem/1 "DM Sans",sans-serif}
.sname{font:600 .72rem/1.2 "DM Sans",sans-serif;color:var(--ink)}.sinfo{font-size:.61rem;color:var(--soft);margin-top:.05rem}
.grp-it{display:flex;align-items:center;gap:.5rem;padding:.38rem 0;border-bottom:1px solid var(--line)}.grp-it:last-child{border-bottom:none}
.grp-em{font-size:1rem;flex-shrink:0}.grp-nm{font:600 .73rem/1.2 "DM Sans",sans-serif;color:var(--ink)}.grp-inf{font-size:.61rem;color:var(--soft);margin-top:.04rem}
/* EMPTY */
.empty{text-align:center;padding:1.75rem 1rem;color:var(--soft);font-size:.78rem}
.empty svg{width:28px;height:28px;opacity:.25;margin:0 auto .55rem;display:block;color:var(--soft)}
/* OVERLAY + MODAL */
.overlay{position:fixed;inset:0;background:rgba(11,18,32,.45);z-index:800;display:none;align-items:center;justify-content:center;backdrop-filter:blur(2px)}.overlay.open{display:flex}
.modal{background:var(--sur);border-radius:18px;padding:1.6rem;width:430px;max-width:92vw;box-shadow:var(--sh2)}
.m-title{font:700 .96rem/1.2 "Lora",serif;color:var(--ink);margin-bottom:.3rem}
.m-sub{font-size:.74rem;color:var(--soft);line-height:1.5;margin-bottom:1rem}
.mf{margin-bottom:.65rem}.mf label{font:600 .7rem/1 "DM Sans",sans-serif;color:var(--muted);display:block;margin-bottom:.28rem}
.mi{width:100%;background:var(--bg);border:1.5px solid var(--line);border-radius:9px;padding:.42rem .7rem;font:400 .8rem/1 "DM Sans",sans-serif;color:var(--ink);outline:none;transition:border-color .15s}.mi:focus{border-color:var(--b2)}
textarea.mi{resize:vertical;min-height:85px;line-height:1.6}
.m2{display:flex;gap:.5rem}.m2 .mf{flex:1}
.m-acts{display:flex;gap:.5rem;justify-content:flex-end;margin-top:1rem}
.m-cancel{padding:.42rem .85rem;border-radius:20px;border:1.5px solid var(--line);background:none;font:600 .74rem/1 "DM Sans",sans-serif;color:var(--soft)}
.m-ok{padding:.42rem .85rem;border-radius:20px;border:none;background:var(--brand);color:#fff;font:600 .74rem/1 "DM Sans",sans-serif}.m-ok:hover{background:#0a3d24}
.tag-row{display:flex;gap:.38rem;margin-top:.28rem}
.tag-inp{flex:1;background:var(--bg);border:1.5px solid var(--line);border-radius:8px;padding:.32rem .58rem;font:400 .74rem/1 "DM Sans",sans-serif;color:var(--ink);outline:none}.tag-inp:focus{border-color:var(--b2)}
.tag-btn{padding:.32rem .6rem;border-radius:8px;border:none;background:var(--brand);color:#fff;font:600 .68rem/1 "DM Sans",sans-serif}
.tags-prev{display:flex;flex-wrap:wrap;gap:.28rem;margin-top:.3rem;min-height:20px}
.tprev{display:inline-flex;align-items:center;gap:.22rem;font:600 .58rem/1 "DM Sans",sans-serif;padding:.14rem .4rem;border-radius:20px}
.tprev.se{background:#f0fdf4;color:#166534}.tprev.sf{background:#eff6ff;color:#1d4ed8}
.tprev button{background:none;border:none;font-size:.6rem;color:inherit;opacity:.7;padding:0;cursor:pointer}
/* Toast */
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(12px);background:var(--ink);color:#fff;padding:.5rem 1.05rem;border-radius:10px;font:500 .74rem/1 "DM Sans",sans-serif;opacity:0;transition:all .25s;pointer-events:none;z-index:9999;white-space:nowrap;box-shadow:var(--sh2)}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* bnav */
.bnav{display:none;position:fixed;bottom:0;left:0;right:0;height:54px;background:var(--sur);border-top:1px solid var(--line);align-items:center;justify-content:space-around;z-index:150}
.bn{flex:1;display:flex;flex-direction:column;align-items:center;gap:.16rem;color:var(--soft);font:500 .5rem/1 "DM Sans",sans-serif;border:none;background:none;padding:.3rem;text-decoration:none;transition:color .15s}.bn.on,.bn:hover{color:var(--brand)}.bn svg{width:19px;height:19px}
@media(max-width:860px){.page{grid-template-columns:1fr}.cdr{display:none}}
@media(max-width:580px){.page{padding-bottom:4.5rem}.bnav{display:flex}}

/* ══ DASHBOARD OWNER MODE ══ */

/* ── Tokens ── */
:root {
  --bg: #f7f8f5;
  --surface: #ffffff;
  --ink: #0b1220;
  --muted: #334155;
  --soft: #64748b;
  --line: #e2e8f0;
  --brand: #0f5132;
  --brand-2: #2eb087;
  --brand-light: #e8f3ef;
  --gold: #d97706;
  --gold-bg: #fef3c7;
  --radius: 18px;
  --shadow-sm: 0 2px 8px rgba(16,24,40,.06);
  --shadow: 0 8px 28px rgba(16,24,40,.10);
  --shadow-lg: 0 20px 50px rgba(16,24,40,.14);
  --sidebar-w: 72px;
  --header-h: 64px;

  /* Moteurs colors */
  --m1: #c0392b;
  --m2: #7c3aed;
  --m3: #1d6fb8;
  --m4: #0f5132;
  --m5: #c2530a;
  --m6: #0d7a6a;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.6 'DM Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ════════════════════════════════
   SIDEBAR
════════════════════════════════ */
.sidebar {
  position: fixed; left: 0; top: 0; bottom: 0;
  width: var(--sidebar-w);
  background: var(--surface);
  display: flex; flex-direction: column;
  align-items: center; z-index: 100;
  padding: 1.25rem 0;
}
.sidebar-logo {
  font-family: ui-serif, Georgia, serif;
  font-size: .75rem; font-weight: 800;
  color: var(--ink); letter-spacing: -.01em;
  text-align: center; line-height: 1.1;
  margin-bottom: 2rem;
}
.sidebar-logo span { color: #5de8b0; }
.sidebar-nav { flex: 1; display: flex; flex-direction: column; gap: .25rem; width: 100%; padding: 0 .75rem; }
.nav-item {
  width: 100%; padding: .75rem 0; border-radius: 14px;
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  cursor: pointer; transition: background .18s;
  border: none; background: none; color: rgba(255,255,255,.5);
  font: 500 .6rem/1 'DM Sans', sans-serif; text-decoration: none;
}
.nav-item:hover { background: rgba(255,255,255,.1); color: rgba(255,255,255,.85); }
.nav-item.active { background: rgba(255,255,255,.15); color: var(--ink); }
.nav-item svg { width: 20px; height: 20px; }
/* Fil — entrée home mise en avant */
.nav-item-home {
  background: rgba(93,232,176,.18);
  color: #5de8b0 !important;
  border: 1px solid rgba(93,232,176,.25);
  margin-bottom: .25rem;
}
.nav-item-home:hover { background: rgba(93,232,176,.28) !important; }
/* Séparateur */
.nav-sep {
  width: 32px; height: 1px;
  background: rgba(255,255,255,.12);
  margin: .35rem auto;
}
.sidebar-bottom { padding: 0 .75rem; width: 100%; }
.nav-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-2), #5de8b0);
  display: flex; align-items: center; justify-content: center;
  font: 700 .8rem/1 'DM Sans', sans-serif; color: var(--brand);
  margin: 0 auto; cursor: pointer;
  border: 2px solid rgba(255,255,255,.3);
}

/* ═══════════════
   MODAL INVITATION
═══════════════════ */
.inv-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:600;display:none;align-items:center;justify-content:center;padding:1rem}
.inv-modal-overlay.on{display:flex}
.inv-modal{background:var(--surface);border-radius:20px;width:100%;max-width:420px;padding:1.75rem;box-shadow:0 24px 64px rgba(11,18,32,.2)}
.inv-modal-title{font:700 1.1rem/1.2 ui-serif,Georgia,serif;color:var(--ink);margin-bottom:.3rem}
.inv-modal-sub{font-size:.76rem;color:var(--soft);margin-bottom:1.25rem;line-height:1.6}
.inv-badge{display:inline-flex;align-items:center;gap:.4rem;background:var(--brand-light);border:1px solid rgba(15,81,50,.15);color:var(--brand);padding:.32rem .85rem;border-radius:20px;font:600 .72rem/1 'DM Sans',sans-serif;margin-bottom:1.1rem}
.inv-link-wrap{display:flex;gap:.5rem;align-items:center;background:var(--bg);border:1.5px solid var(--line);border-radius:11px;padding:.55rem .8rem;margin-bottom:.85rem}
.inv-link-url{flex:1;font:500 .72rem/1.4 'DM Sans',sans-serif;color:var(--muted);word-break:break-all;min-width:0}
.inv-copy-btn{padding:.35rem .8rem;background:var(--brand);color:#fff;border:none;border-radius:8px;font:600 .7rem/1 'DM Sans',sans-serif;cursor:pointer;white-space:nowrap;transition:all .15s;flex-shrink:0}
.inv-copy-btn:hover{background:#0a3d24}
.inv-copy-btn.copied{background:var(--brand-2)}
.inv-share-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.5rem;margin-bottom:.85rem}
.inv-share-btn{padding:.55rem .3rem;border-radius:10px;border:1.5px solid var(--line);background:none;font:600 .7rem/1.3 'DM Sans',sans-serif;display:flex;flex-direction:column;align-items:center;gap:.28rem;transition:all .15s;cursor:pointer}
.inv-share-btn:hover{border-color:var(--brand-2);background:var(--brand-light)}
.inv-divider{display:flex;align-items:center;gap:.65rem;margin-bottom:.85rem;color:var(--soft);font-size:.72rem}
.inv-divider::before,.inv-divider::after{content:"";flex:1;height:1px;background:var(--line)}
.inv-email-row{display:flex;gap:.5rem}
.inv-email-input{flex:1;padding:.55rem .8rem;border:1.5px solid var(--line);border-radius:10px;font:400 .82rem/1 'DM Sans',sans-serif;color:var(--ink);background:var(--bg);outline:none;transition:border-color .15s}
.inv-email-input:focus{border-color:var(--brand-2);background:var(--surface)}
.inv-email-send{padding:.55rem 1rem;background:var(--brand);color:#fff;border:none;border-radius:10px;font:600 .78rem/1 'DM Sans',sans-serif;cursor:pointer;transition:all .15s;white-space:nowrap}
.inv-email-send:hover{background:#0a3d24}
.inv-see-all{display:block;text-align:center;margin-top:.85rem;font:600 .76rem/1 'DM Sans',sans-serif;color:var(--brand);text-decoration:none;transition:opacity .15s}
.inv-see-all:hover{opacity:.75}
.inv-close{position:absolute;top:.75rem;right:.85rem;background:none;border:none;font-size:1.3rem;cursor:pointer;color:var(--soft);width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background .15s}
.inv-close:hover{background:var(--bg)}

/* Bouton inviter dans hero */
.hero-invite-btn{color:var(--brand);border-color:var(--b2);background:var(--bbg);
  margin-top:1rem;
  padding:.5rem 1.4rem;
  background:rgba(255,255,255,.12);
  color:#fff;
  border:1.5px solid rgba(255,255,255,.25);
  border-radius:20px;
  font:600 .78rem/1 'DM Sans',sans-serif;
  cursor:pointer;
  transition:all .2s;
  display:inline-flex;align-items:center;gap:.45rem;
}
.hero-invite-btn:hover{background:var(--bbg);border-color:var(--b2)}

/* ════════════════════════════════
   LAYOUT PRINCIPAL
════════════════════════════════ */
.main {
  margin-left: var(--sidebar-w);
  min-height: 100vh;
  display: flex; flex-direction: column;
}

/* ════════════════════════════════
   TOP BAR
════════════════════════════════ */
.topbar {
  height: var(--header-h);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center;
  padding: 0 2rem; gap: 1rem;
  position: sticky; top: 0; z-index: 50;
}
.topbar-title {
  font-family: ui-serif, Georgia, serif;
  font-size: 1.1rem; font-weight: 700;
  color: var(--ink); flex: 1; text-align: center;
}
.topbar-search {
  display: flex; align-items: center; gap: .5rem;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 12px; padding: .5rem .9rem;
  font-size: .82rem; color: var(--soft); cursor: pointer;
  transition: border-color .18s;
}
.topbar-search:hover { border-color: var(--brand-2); }
.topbar-actions { display: flex; align-items: center; gap: .75rem; }
.topbar-icon {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .18s; color: var(--muted);
}
.topbar-icon:hover { background: var(--brand-light); color: var(--brand); }
.badge-notif { position: relative; }
.badge-notif .notif-dot {
  display: none;
  position: absolute; top: -2px; right: -2px;
  min-width: 16px; height: 16px; border-radius: 50%;
  background: #ef4444; color: var(--ink);
  font: 700 .6rem/16px 'DM Sans', sans-serif;
  text-align: center; padding: 0 3px;
  line-height: 16px;
}
.badge-notif.has-notif .notif-dot { display: block; }

/* Panneau notifications */
.notif-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 320px;
  max-height: 480px;
  background: var(--surface);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,.15);
  z-index: 500;
  flex-direction: column;
  overflow: hidden;
  display: none;
}
.notif-panel.open { display: flex; }
.notif-panel.open { display: flex; }
.notif-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: .9rem 1rem .7rem; border-bottom: 1px solid var(--line);
  font-weight: 700; font-size: .9rem;
}
.notif-mark-all {
  font-size: .75rem; color: var(--brand); cursor: pointer; font-weight: 600;
}
.notif-list { overflow-y: auto; flex: 1; }
.notif-item {
  display: flex; gap: .75rem; align-items: flex-start;
  padding: .8rem 1rem; border-bottom: 1px solid var(--line);
  cursor: pointer; transition: background .15s;
}
.notif-item:hover { background: var(--brand-light); }
.notif-item.unread { background: #f0fdf4; }
.notif-item.unread:hover { background: #dcfce7; }
.notif-icon { font-size: 1.3rem; flex-shrink: 0; margin-top: .1rem; }
.notif-body { flex: 1; min-width: 0; }
.notif-title { font-weight: 600; font-size: .82rem; color: var(--ink); }
.notif-msg { font-size: .77rem; color: var(--soft); margin-top: .15rem; line-height: 1.4; }
.notif-time { font-size: .7rem; color: var(--soft); margin-top: .2rem; }
.notif-empty { text-align: center; padding: 2rem 1rem; color: var(--soft); font-size: .85rem; }

/* ════════════════════════════════
   HERO PROFIL
════════════════════════════════ */
.hero {
  background: var(--surface);
  border-radius: 20px;
  border: 1px solid var(--line);
  box-shadow: 0 4px 20px rgba(11,18,32,.07);
  padding: 2rem 2rem 0;
  position: relative;
  margin-bottom: 1rem;
}
.hero::before { display: none; }

/* ── Carte hero ── */
.hero-map-wrap{position:absolute;inset:0;border-radius:16px;overflow:hidden;z-index:0;pointer-events:none}
.hero-map-wrap #heroMapLeaflet{width:100%;height:100%}
.hero-map-overlay{position:absolute;inset:0;background:rgba(247,248,245,.80);z-index:1;pointer-events:none}
.hero-center-content{position:relative;z-index:2;width:100%;display:flex;flex-direction:column;align-items:center}

/* Tab nav dans le hero */

/* Hero contenu centré */
.hero-center {
  display: flex; flex-direction: column; align-items: center;
  padding-bottom: 1.5rem; position: relative; z-index: 1;
}

/* Photo + QR flip */
.avatar-flip-wrap {
  width: 100px; height: 100px;
  perspective: 800px; cursor: pointer;
  margin-bottom: 1rem;
}
.avatar-flip-inner {
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.4,0,.2,1);
  position: relative;
}
.avatar-flip-wrap:hover .avatar-flip-inner,
.avatar-flip-wrap.flipped .avatar-flip-inner {
  transform: rotateY(180deg);
}
.avatar-front, .avatar-back {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,.3);
}
.avatar-front {
  background: linear-gradient(135deg, var(--brand-2), #5de8b0);
  display: flex; align-items: center; justify-content: center;
  font: 800 2rem/1 'Playfair Display', serif;
  color: var(--brand);
}
.avatar-back {
  transform: rotateY(180deg);
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; overflow: hidden;
}
.avatar-back canvas { width: 70px; height: 70px; }
.avatar-hint {
  position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,.5); color: var(--ink); border-radius: 20px;
  font: 500 .58rem/1 'DM Sans', sans-serif;
  padding: 3px 8px; white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity .2s;
}
.avatar-flip-wrap:hover .avatar-hint { opacity: 1; }

/* Roue des moteurs autour de la photo */
.moteurs-ring {
  position: absolute;
  width: 260px; height: 140px;
  top: 0; left: 50%; transform: translateX(-50%);
  pointer-events: none;
}
.moteur-bubble {
  position: absolute;
  display: flex; flex-direction: column; align-items: center;
  pointer-events: auto; cursor: pointer;
}
.mb-circle { display: none; }
.mb-label { display: none; }
.mb-stat {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: .12rem; cursor: default;
}
.mb-pct {
  font: 800 1rem/1 'DM Sans', sans-serif;
  color: var(--ink,#0b1220);
  text-shadow: 0 0 8px rgba(255,255,255,1), 0 1px 3px rgba(255,255,255,.9);
}
.mb-trait {
  font: 500 .6rem/1 'DM Sans', sans-serif;
  color: var(--muted,#334155);
  white-space: nowrap;
  text-shadow: 0 0 6px rgba(255,255,255,1), 0 1px 2px rgba(255,255,255,.8);
}
.moteur-bubble { transition: transform .15s; }
.moteur-bubble:hover { transform: scale(1.08); }

/* Identité */
.hero-name {
  font-family: ui-serif, Georgia, serif;
  font-size: 1.35rem; font-weight: 700;
  color: var(--ink); margin-bottom: .2rem;
}
.hero-cap {
  color: var(--soft); font-size: .82rem;
  margin-bottom: .75rem;
}
.hero-quote {
  color: var(--muted); font-size: .78rem;
  font-style: italic; text-align: center;
  max-width: 36ch; line-height: 1.5;
  margin-bottom: 1rem;
}

/* Badges hero */
.hero-badges { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }
.hero-badge {
  display: flex; align-items: center; gap: .35rem;
  background: var(--bbg); border: 1px solid var(--b100);
  border-radius: 20px; padding: .3rem .75rem;
  font: 600 .72rem/1 'DM Sans', sans-serif; color: var(--brand);
}
.crecos-badge {
  background: #fef3c7;
  border-color: #fcd34d;
  color: #92400e;
}

/* ════════════════════════════════
   CONTENU
════════════════════════════════ */
.content {
  padding: 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.content-full { grid-column: span 2; }

/* Cards */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
}
.card-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.25rem;
}
.card-title {
  display: flex; align-items: center; gap: .5rem;
  font: 600 .95rem/1 'DM Sans', sans-serif; color: var(--ink);
}
.card-title-ico { font-size: 1rem; }
.card-action {
  font: 600 .78rem/1 'DM Sans', sans-serif;
  color: var(--brand); cursor: pointer; text-decoration: none;
  transition: opacity .18s;
}
.card-action:hover { opacity: .7; }

/* ── Roue SVG ── */
.wheel-container {
  display: flex; gap: 2rem; align-items: center;
}
.wheel-svg-wrap { flex-shrink: 0; }
.wheel-legend { flex: 1; display: flex; flex-direction: column; gap: .7rem; }
.wl-row {
  display: flex; align-items: center; gap: .6rem;
}
.wl-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.wl-label { font-size: .8rem; color: var(--muted); flex: 1; }
.wl-bar-wrap { width: 70px; height: 5px; background: var(--line); border-radius: 3px; overflow: hidden; }
.wl-bar { height: 100%; border-radius: 3px; transition: width 1.2s ease; }
.wl-val { font: 700 .78rem/1 'DM Sans', sans-serif; color: var(--ink); min-width: 24px; text-align: right; }

/* ── Source calibration ── */
.sources-row { display: flex; gap: .75rem; margin-top: 1rem; }
.source-pill {
  flex: 1; background: var(--bg); border: 1px solid var(--line);
  border-radius: 12px; padding: .65rem .75rem; text-align: center;
}
.sp-num { font: 700 1.1rem/1 'DM Sans', sans-serif; color: var(--brand); }
.sp-label { font-size: .68rem; color: var(--soft); margin-top: .2rem; }
.sp-lock { font-size: .65rem; color: var(--soft); margin-top: .15rem; }

/* ── GAMIFICATION ── */
.quete-block{background:var(--sur);border:1px solid var(--line);border-radius:16px;padding:1.1rem 1.25rem;margin-bottom:0}
.quete-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}
.quete-title{font:700 .88rem/1 'DM Sans',sans-serif;color:var(--ink)}
.quete-pct{font:800 1.1rem/1 'DM Sans',sans-serif;color:var(--brand)}
.quete-label{font:400 .68rem/1 'DM Sans',sans-serif;color:var(--soft);margin-top:.15rem;text-align:right}
.quete-bar-wrap{height:8px;background:var(--line);border-radius:4px;overflow:hidden;margin-bottom:1rem}
.quete-bar-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--brand),var(--b2));transition:width 1s cubic-bezier(.4,0,.2,1)}
.piliers{display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem;margin-bottom:1rem}
.pilier{text-align:center;padding:.5rem .25rem;border-radius:12px;border:1px solid var(--line);background:var(--bg);position:relative;cursor:pointer;transition:all .15s}
.pilier:hover{border-color:var(--b2);background:var(--bbg)}
.pilier.done{border-color:var(--b2);background:var(--bbg)}
.pilier-ico{font-size:1.2rem;display:block;margin-bottom:.25rem}
.pilier-label{font:600 .58rem/1.2 'DM Sans',sans-serif;color:var(--soft)}
.pilier-score{font:700 .68rem/1 'DM Sans',sans-serif;color:var(--brand);margin-top:.2rem}
.pilier-lock{position:absolute;top:.3rem;right:.3rem;font-size:.6rem;opacity:.5}
.defi-row{display:flex;align-items:center;gap:.75rem;background:linear-gradient(135deg,var(--bbg),#f0fdf4);border:1px solid var(--b100);border-radius:12px;padding:.7rem 1rem}
.defi-ico{font-size:1.4rem;flex-shrink:0}
.defi-content{flex:1;min-width:0}
.defi-titre{font:600 .78rem/1.2 'DM Sans',sans-serif;color:var(--ink)}
.defi-sub{font:400 .68rem/1.3 'DM Sans',sans-serif;color:var(--soft);margin-top:.15rem}
.defi-reward{font:700 .72rem/1 'DM Sans',sans-serif;color:#92400e;background:#fef3c7;border-radius:20px;padding:.25rem .65rem;flex-shrink:0}
.unlock-row{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.75rem}
.unlock-chip{display:inline-flex;align-items:center;gap:.3rem;font:500 .62rem/1 'DM Sans',sans-serif;padding:.22rem .6rem;border-radius:20px;border:1px solid var(--line);color:var(--soft)}
.unlock-chip.done{background:var(--bbg);border-color:var(--b2);color:var(--brand)}
.unlock-chip.next{border-color:#f59e0b;color:#92400e;background:#fef3c7}

/* ── PAR cards ── */
.par-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.par-card {
  border: 1.5px solid var(--line); border-radius: 14px;
  overflow: hidden; cursor: pointer; transition: all .2s;
  background: var(--surface);
}
.par-card:hover {
  border-color: var(--brand-2);
  box-shadow: 0 6px 20px rgba(15,81,50,.12);
  transform: translateY(-2px);
}
.par-card-thumb {
  height: 90px;
  background: linear-gradient(135deg, var(--brand-light), #d1fae5);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; position: relative;
}
.par-card-pub {
  position: absolute; top: 8px; right: 8px;
  background: rgba(15,81,50,.8); color: var(--ink);
  font: 600 .6rem/1 'DM Sans', sans-serif;
  padding: 3px 7px; border-radius: 6px;
}
.par-card-body { padding: .75rem; }
.par-card-title { font: 600 .8rem/1.2 'DM Sans', sans-serif; color: var(--ink); margin-bottom: .3rem; }
.par-card-tags { display: flex; flex-wrap: wrap; gap: .3rem; }
.par-tag {
  font-size: .62rem; background: var(--brand-light);
  color: var(--brand); border-radius: 6px; padding: 2px 6px;
  font-weight: 600;
}
.par-card-add {
  border: 2px dashed var(--line); border-radius: 14px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .4rem; cursor: pointer; transition: all .2s;
  min-height: 140px; color: var(--soft);
  font: 500 .78rem/1 'DM Sans', sans-serif;
}
.par-card-add:hover { border-color: var(--brand-2); color: var(--brand); background: var(--brand-light); }
.par-card-add-ico { font-size: 1.5rem; }
.par-actions {
  display: flex; gap: .4rem; padding: .6rem .75rem;
  border-top: 1px solid var(--line);
}
.par-btn {
  flex: 1; padding: .4rem; border-radius: 8px;
  font: 600 .72rem/1 'DM Sans', sans-serif;
  cursor: pointer; transition: all .18s; border: none;
  text-align: center;
}
.par-btn-edit { background: var(--bg); color: var(--muted); }
.par-btn-view { background: var(--surface); color: var(--ink); }
.par-btn-edit:hover { background: var(--line); }
.par-btn-view:hover { background: #11724d; }

/* ── Recommandations ── */
.reco-list { display: flex; flex-direction: column; gap: .75rem; }
.reco-card {
  display: flex; gap: 1rem; padding: 1rem;
  border: 1px solid var(--line); border-radius: 14px;
  border-left: 3px solid var(--brand-2);
  transition: box-shadow .2s;
}
.reco-card:hover { box-shadow: var(--shadow-sm); }
.reco-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, #cbd5e1, #94a3b8);
  display: flex; align-items: center; justify-content: center;
  font: 700 .88rem/1 'DM Sans', sans-serif; color: var(--ink); flex-shrink: 0;
}
.reco-meta strong { display: block; font-size: .85rem; color: var(--ink); }
.reco-meta span { font-size: .75rem; color: var(--soft); }
.reco-text { font-size: .8rem; color: var(--muted); line-height: 1.6; margin-top: .4rem; }
.reco-add {
  border: 2px dashed var(--line); border-radius: 14px;
  padding: 1.25rem; display: flex; align-items: center; justify-content: center;
  gap: .5rem; cursor: pointer; color: var(--soft);
  font: 600 .8rem/1 'DM Sans', sans-serif;
  transition: all .2s;
}
.reco-add:hover { border-color: var(--brand-2); color: var(--brand); background: var(--brand-light); }

/* ── Intérêts ── */
.interests-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; }
.interest-card {
  border-radius: 14px; overflow: hidden; position: relative;
  cursor: pointer; aspect-ratio: 1;
  background: linear-gradient(135deg, var(--brand-light), #d1fae5);
  display: flex; align-items: center; justify-content: center;
  font-size: 2.5rem; transition: transform .2s;
}
.interest-card:hover { transform: scale(1.04); }
.interest-label {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: .4rem .5rem;
  background: linear-gradient(transparent, rgba(0,0,0,.5));
  color: var(--ink); font: 600 .72rem/1 'DM Sans', sans-serif;
  text-align: center;
}
.interest-add {
  border: 2px dashed var(--line); border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; color: var(--soft); cursor: pointer;
  transition: all .2s; aspect-ratio: 1;
}
.interest-add:hover { border-color: var(--brand-2); color: var(--brand); background: var(--brand-light); }

/* ── Savoir-être radar ── */
.skills-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.radar-wrap { display: flex; justify-content: center; }

/* ── Savoir-faire barres ── */
.skills-bars { display: flex; flex-direction: column; gap: .7rem; }
.skill-bar-row { display: flex; align-items: center; gap: .75rem; }
.skill-bar-label { font: 500 .78rem/1 'DM Sans', sans-serif; color: var(--muted); width: 90px; flex-shrink: 0; }
.skill-bar-track { flex: 1; height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; }
.skill-bar-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--brand), var(--brand-2)); transition: width 1.2s ease; }
.skill-bar-pct { font: 700 .72rem/1 'DM Sans', sans-serif; color: var(--brand); min-width: 30px; text-align: right; }

/* ── Crécos wallet mini ── */
.crecos-mini {
  display: flex; align-items: center; gap: 1rem;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border: 1px solid #fcd34d; border-radius: 16px;
  padding: 1.25rem 1.5rem; margin-bottom: 1rem;
}
.cm-coin { font-size: 2rem; }
.cm-solde { font: 800 2rem/1 'DM Sans', sans-serif; color: var(--ink); }
.cm-label { font-size: .78rem; color: #92400e; margin-top: .2rem; }
.cm-link { margin-left: auto; font: 600 .78rem/1 'DM Sans', sans-serif; color: var(--gold); cursor: pointer; }

/* ── Modale PAR ── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(11,18,32,.6); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
.modal-overlay.open { opacity: 1; pointer-events: auto; }
.modal {
  background: var(--surface); border-radius: 24px;
  width: 90vw; max-width: 640px;
  max-height: 90vh; overflow-y: auto;
  padding: 2rem; position: relative;
  transform: translateY(20px) scale(.97);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
  box-shadow: var(--shadow-lg);
}
.modal-overlay.open .modal { transform: none; }
.modal-close {
  position: absolute; top: 1.25rem; right: 1.25rem;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--bg); border: none; cursor: pointer;
  font-size: 1rem; color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  transition: background .18s;
}
.modal-close:hover { background: var(--line); }
.modal-title {
  font-family: ui-serif, Georgia, serif;
  font-size: 1.2rem; font-weight: 700;
  color: var(--ink); margin-bottom: 1.5rem;
}

/* Modal steps */
.modal-step { display: none; }
.modal-step.active { display: block; }
.modal-field { margin-bottom: 1.25rem; }
.modal-field label {
  display: block; font: 600 .8rem/1 'DM Sans', sans-serif;
  color: var(--ink); margin-bottom: .4rem;
}
.modal-field label .step-num {
  color: var(--brand-2); margin-right: .25rem;
}
.modal-field input,
.modal-field textarea {
  width: 100%; padding: 12px 14px;
  border: 1.5px solid var(--line); border-radius: 12px;
  font: normal .88rem/1.5 'DM Sans', sans-serif;
  color: var(--ink); background: var(--bg);
  transition: border-color .18s;
  resize: vertical;
}
.modal-field input:focus,
.modal-field textarea:focus {
  outline: none; border-color: var(--brand);
  background: #fff;
}
.modal-field textarea { min-height: 90px; }

/* Modal nav */
.modal-nav {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 1.5rem; padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.modal-btn {
  padding: 10px 24px; border-radius: 12px;
  font: 600 .88rem/1 'DM Sans', sans-serif;
  cursor: pointer; transition: all .18s; border: none;
}
.modal-btn-primary { background: var(--surface); color: var(--ink); }
.modal-btn-primary:hover { background: #11724d; }
.modal-btn-secondary { background: none; color: var(--muted); }
.modal-btn-secondary:hover { color: var(--brand); }

/* Upload zone */
.upload-zone {
  border: 2px dashed var(--line); border-radius: 14px;
  padding: 2rem; text-align: center; cursor: pointer;
  transition: all .2s;
}
.upload-zone:hover { border-color: var(--brand-2); background: var(--brand-light); }
.upload-ico { font-size: 2.5rem; margin-bottom: .75rem; }
.upload-title { font: 600 .9rem/1 'DM Sans', sans-serif; color: var(--ink); margin-bottom: .4rem; }
.upload-sub { font-size: .78rem; color: var(--soft); }
.upload-btn {
  display: inline-block; margin-top: .75rem;
  background: var(--surface); color: var(--ink);
  padding: .5rem 1.25rem; border-radius: 10px;
  font: 600 .82rem/1 'DM Sans', sans-serif; cursor: pointer;
}

/* Modal succès */
.modal-success { text-align: center; padding: 1.5rem 0; }
.modal-success-ico {
  width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.75rem; margin: 0 auto 1.25rem;
  box-shadow: 0 8px 24px rgba(15,81,50,.25);
  animation: pop .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes pop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.modal-success h3 {
  font-family: ui-serif, Georgia, serif;
  font-size: 1.2rem; font-weight: 700; margin-bottom: .4rem;
}
.modal-success p { font-size: .85rem; color: var(--muted); }
.modal-success-actions { display: flex; gap: .75rem; justify-content: center; margin-top: 1.5rem; }

/* Tags savoir-être */
.tags-wrap { display: flex; flex-wrap: wrap; gap: .5rem; }
.tag-selectable {
  padding: .4rem .85rem; border-radius: 20px;
  border: 1.5px solid var(--line); font: 500 .78rem/1 'DM Sans', sans-serif;
  color: var(--muted); cursor: pointer; transition: all .18s;
  background: var(--surface);
}
.tag-selectable:hover { border-color: var(--brand-2); color: var(--brand); }
.tag-selectable.selected { background: var(--brand-light); border-color: var(--brand); color: var(--brand); font-weight: 600; }

/* Crécos badge dans modal */
.crecos-reward {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--gold-bg); border: 1px solid #fcd34d;
  border-radius: 20px; padding: .3rem .75rem;
  font: 700 .78rem/1 'DM Sans', sans-serif; color: #92400e;
}

/* ════════════════════════════════
   CONTRIBUTIONS
════════════════════════════════ */
.contrib-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.contrib-card {
  border: 1.5px solid var(--line);
  border-radius: 16px; padding: 1.1rem;
  display: flex; flex-direction: column; gap: .65rem;
  transition: all .2s; background: var(--surface);
}
.contrib-card:hover {
  border-color: var(--brand-2);
  box-shadow: 0 6px 20px rgba(15,81,50,.1);
  transform: translateY(-2px);
}
.contrib-header { display: flex; align-items: center; justify-content: space-between; }
.contrib-type-badge {
  padding: .3rem .75rem; border-radius: 20px;
  font: 700 .72rem/1 'DM Sans', sans-serif;
}
.contrib-menu {
  color: var(--soft); cursor: pointer; font-size: 1.1rem;
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background .18s;
}
.contrib-menu:hover { background: var(--bg); }
.contrib-title { font: 600 .88rem/1.3 'DM Sans', sans-serif; color: var(--ink); }
.contrib-desc { font-size: .78rem; color: var(--soft); line-height: 1.6; }
.contrib-meta { display: flex; flex-direction: column; gap: .25rem; }
.contrib-meta-item { font-size: .75rem; color: var(--muted); }

.contrib-pricing {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--bg); border-radius: 12px; padding: .65rem .85rem;
  gap: .75rem;
}
.cf-label, .ct-label { font-size: .65rem; color: var(--soft); margin-bottom: .2rem; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; }
.cf-range { font: 700 .88rem/1 'DM Sans', sans-serif; color: var(--ink); }
.cf-range span { font-size: .75rem; }
.ct-val { font: 800 1rem/1 'DM Sans', sans-serif; color: var(--brand); }
.ct-slider input[type=range] {
  margin-top: .3rem; cursor: pointer;
  background: linear-gradient(to right, var(--brand) 37.5%, var(--line) 37.5%);
}
.ct-slider input[type=range]::-webkit-slider-thumb {
  background: var(--brand) !important;
}

.contrib-avis {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: .5rem; border-top: 1px solid var(--line);
}
.avis-stars { font-size: .78rem; color: var(--gold); }
.avis-stars span { color: var(--ink); font-weight: 700; }
.avis-impact { display: flex; align-items: center; gap: .4rem; }
.ai-label { font-size: .65rem; color: var(--soft); }
.ai-dots { display: flex; gap: .3rem; }
.ai-dot {
  width: 10px; height: 10px; border-radius: 50%;
  cursor: help; transition: transform .18s;
}
.ai-dot:hover { transform: scale(1.4); }

.contrib-status { font: 600 .72rem/1 'DM Sans', sans-serif; }
.active-status { color: var(--brand-2); }

.contrib-add {
  border: 2px dashed var(--line); border-radius: 16px;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center;
  cursor: pointer; color: var(--soft); padding: 1.5rem;
  transition: all .2s; min-height: 200px;
  font: 500 .82rem/1.5 'DM Sans', sans-serif;
}
.contrib-add:hover {
  border-color: var(--brand-2); color: var(--brand);
  background: var(--brand-light);
}

.contrib-stats {
  display: flex; gap: .75rem;
  background: var(--bg); border-radius: 14px;
  padding: 1rem 1.25rem;
}
.cs-item { flex: 1; text-align: center; }
.cs-num { font: 800 1.2rem/1 'DM Sans', sans-serif; color: var(--ink); margin-bottom: .3rem; }
.cs-label { font-size: .7rem; color: var(--soft); }

/* contrib type selector */
.contrib-type-sel {
  padding: .65rem .85rem; border: 1.5px solid var(--line);
  border-radius: 12px; font: 500 .82rem/1 'DM Sans', sans-serif;
  color: var(--muted); cursor: pointer; transition: all .18s;
  display: flex; align-items: center; gap: .4rem;
  background: var(--surface);
}
.contrib-type-sel:hover { border-color: var(--brand-2); color: var(--brand); }
.contrib-type-sel.selected { border-color: var(--brand); background: var(--brand-light); color: var(--brand); font-weight: 600; }

.fourchette-visual {
  display: flex; align-items: center; gap: .75rem;
  margin: .75rem 0;
}
.fv-min, .fv-max {
  font: 700 .85rem/1 'DM Sans', sans-serif;
  color: var(--muted); min-width: 40px; text-align: center;
}
.fv-track {
  flex: 1; height: 6px; background: var(--line);
  border-radius: 3px; position: relative;
}
.fv-fill {
  position: absolute; height: 100%;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  border-radius: 3px;
}

@media (max-width: 1024px) {
  .contrib-grid { grid-template-columns: repeat(2, 1fr); }
  .contrib-stats { flex-wrap: wrap; gap: .5rem; }
  .cs-item { min-width: 45%; }
}
@media (max-width: 768px) {
  .contrib-grid { grid-template-columns: 1fr; }
  .contrib-stats { flex-direction: column; gap: .5rem; }
  .cs-item { display: flex; align-items: center; gap: .5rem; text-align: left; }
  .cs-num { font-size: 1rem; }
}

/* ════════════════════════════════
   BOTTOM NAV mobile
════════════════════════════════ */
.bottom-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0;
  height: 60px; background: var(--surface);
  border-top: 1px solid var(--line);
  align-items: center; justify-content: space-around;
  z-index: 100; padding: 0 .5rem;
}
.bn-item {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  gap: .2rem; cursor: pointer; padding: .5rem;
  color: var(--soft); font: 500 .58rem/1 'DM Sans', sans-serif;
  border: none; background: none; transition: color .18s;
  text-decoration: none;
}
.bn-item.active { color: var(--brand); }
.bn-item svg { width: 20px; height: 20px; }

/* ════════════════════════════════
   RESPONSIVE
════════════════════════════════ */
@media (max-width: 1024px) {
  .content { grid-template-columns: 1fr; }
  .content-full { grid-column: span 1; }
  .skills-row { grid-template-columns: 1fr; }
  .interests-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  :root { --sidebar-w: 0px; }
  .sidebar { display: none; }
  .bottom-nav { display: flex; }
  .main { margin-bottom: 60px; }
  .topbar { padding: 0 1rem; }
  .topbar-search { display: none; }
  .content { padding: 1rem; gap: 1rem; }
  .hero { padding: 1.5rem 1rem 0; }
  .moteurs-ring { width: 220px; height: 120px; }
  .mb-circle { width: 38px; height: 38px; font-size: .74rem; }
  .par-grid { grid-template-columns: repeat(2, 1fr); }
  .interests-grid { grid-template-columns: repeat(3, 1fr); }
  .wheel-container { flex-direction: column; }
  .wheel-legend { width: 100%; flex-direction: row; flex-wrap: wrap; gap: .5rem; }
  .wl-bar-wrap { width: 50px; }
  .sources-row { flex-direction: column; gap: .5rem; }
  .sources-row { flex-direction: row; }
}

@media (max-width: 480px) {
  .par-grid { grid-template-columns: 1fr; }
  .interests-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-name { font-size: 1.1rem; }
  .content { padding: .75rem; gap: .75rem; }
}

/* Colonne droite */
.cdr-card{background:var(--sur);border:1px solid var(--line);border-radius:14px;padding:1rem;margin-bottom:.85rem;position:relative;overflow:hidden}
.cdr-title{font:700 .75rem/1 sans-serif;color:var(--ink);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.85rem;display:flex;align-items:center;gap:.4rem}
/* Complétude */
.quete-pct{font:800 2.2rem/1 'Lora',serif;color:var(--brand);text-align:center;margin:.25rem 0 .1rem}
.quete-bar{height:6px;background:var(--line);border-radius:6px;overflow:hidden;margin:.6rem 0}
.quete-fill{height:100%;background:linear-gradient(90deg,var(--brand),var(--b2));border-radius:6px;transition:width 1s cubic-bezier(.4,0,.2,1)}
.quete-piliers{display:flex;gap:.3rem;margin-top:.5rem}
.pilier{flex:1;text-align:center}
.pilier-bar{height:36px;background:var(--line);border-radius:4px;overflow:hidden;display:flex;align-items:flex-end;margin:0 auto .2rem;width:100%}
.pilier-fill{width:100%;background:var(--b2);transition:height 1s ease;border-radius:4px}
.pilier-ico{font-size:.85rem;display:block;margin-bottom:.1rem}
.pilier-score{font:600 .6rem/1 sans-serif;color:var(--soft)}
/* Matching */
.match-score{font:800 1.8rem/1 'Lora',serif;color:var(--brand)}
.match-bar{height:8px;background:var(--line);border-radius:8px;overflow:hidden;margin:.5rem 0 .3rem}
.match-fill{height:100%;background:linear-gradient(90deg,#3b82f6,#8b5cf6);border-radius:8px;transition:width 1s ease}
.match-row{display:flex;align-items:center;justify-content:space-between;font-size:.72rem;color:var(--soft);margin-bottom:.25rem}
.match-val{font-weight:700;color:var(--ink)}
/* Déverrouillage */
.unlock-item{display:flex;align-items:center;gap:.6rem;padding:.5rem 0;border-bottom:1px solid var(--line)}
.unlock-item:last-child{border-bottom:none}
.unlock-ico{font-size:1.1rem;flex-shrink:0}
.unlock-label{font:500 .74rem/1.3 sans-serif;color:var(--ink);flex:1}
.unlock-pct{font:700 .7rem/1 sans-serif;color:var(--soft);white-space:nowrap}
.unlock-progress{height:3px;background:var(--line);border-radius:3px;overflow:hidden;margin-top:.25rem}
.unlock-fill{height:100%;background:var(--b2);border-radius:3px}
/* Profils similaires */
.sim-row{display:flex;align-items:center;gap:.6rem;padding:.4rem 0;border-bottom:1px solid var(--line);cursor:pointer;transition:background .15s;border-radius:8px}
.sim-row:last-child{border-bottom:none}
.sim-row:hover{background:var(--bbg)}
.sim-av{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:700 .68rem/1 sans-serif;color:#fff;flex-shrink:0}
.sim-name{font:600 .76rem/1 sans-serif;color:var(--ink)}
.sim-cap{font:400 .65rem/1 sans-serif;color:var(--soft)}
.sim-match{font:700 .68rem/1 sans-serif;color:var(--brand);margin-left:auto;flex-shrink:0}
/* Défi */
.defi-card{background:linear-gradient(135deg,var(--bbg),#ecfdf5);border:1.5px solid var(--b2);border-radius:12px;padding:.85rem;margin-top:.5rem}
.defi-reward{font:800 1rem/1 sans-serif;color:var(--brand);margin-bottom:.2rem}
.defi-title{font:600 .8rem/1.3 sans-serif;color:var(--ink)}
.defi-sub{font:400 .7rem/1.3 sans-serif;color:var(--soft);margin-top:.2rem}

.cdr{width:260px}


@media(max-width:720px){
  main,.cctr{min-width:0;width:100%}
}


  main,.cctr,.owner-sections{min-width:0;width:100%}

@media(max-width:480px){
  .fp-card,.rc,.ol-card,.cdr-card{border-radius:12px}
}

/* ── Responsive ── */
@media(max-width:1100px){
  .page,.page.owner-mode{grid-template-columns:240px 1fr!important;max-width:860px}
  .cgd,.cdr{display:none!important}
}
@media(max-width:720px){
  .page,.page.owner-mode{grid-template-columns:1fr!important;padding:58px .75rem 5rem!important;gap:.75rem;max-width:100%}
  .cgl,.cgd,.cdr,.owner-left{display:none!important}
  main,.cctr,.owner-sections{min-width:0;width:100%}
}
@media(max-width:480px){
  .page,.page.owner-mode{padding:54px .5rem 5rem!important}
  .fp-card,.rc,.ol-card,.cdr-card{border-radius:12px}
}

/* ── Bnav profil ── */
.bnav-profil{display:none;position:fixed;bottom:0;left:0;right:0;height:58px;
  background:var(--sur);border-top:1px solid var(--line);
  align-items:center;justify-content:space-around;z-index:150;
  padding-bottom:env(safe-area-inset-bottom,0)}
@media(max-width:720px){.bnav-profil{display:flex!important}}
.bn{display:flex;flex-direction:column;align-items:center;gap:.2rem;
  font-size:.62rem;font-weight:600;color:var(--soft);text-decoration:none;
  flex:1;padding:.4rem .25rem;border:none;background:none;cursor:pointer;font-family:inherit;transition:color .15s}
.bn.on,.bn:hover{color:var(--brand)}
.bn svg{width:20px;height:20px}
.bn-plus{flex:1;display:flex;flex-direction:column;align-items:center;
  gap:.2rem;border:none;background:none;cursor:pointer;font-family:inherit;color:var(--soft)}
.bn-plus-ico{width:46px;height:46px;border-radius:50%;background:var(--brand);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px rgba(15,81,50,.35);color:#fff;margin-top:-18px}
.plus-menu{position:fixed;inset:0;z-index:400;pointer-events:none}
.plus-menu.open{pointer-events:all}
.plus-overlay{position:absolute;inset:0;background:rgba(0,0,0,.4)}
.plus-sheet{position:absolute;bottom:0;left:0;right:0;background:var(--sur);
  border-radius:24px 24px 0 0;padding:1.25rem 1rem 2rem;
  transform:translateY(100%);transition:transform .3s ease}
.plus-menu.open .plus-sheet{transform:translateY(0)}
.plus-title{font:700 1rem/1 'Lora',serif;color:var(--ink);margin-bottom:1rem;text-align:center}
.plus-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-bottom:1rem}
.plus-item{display:flex;flex-direction:column;align-items:center;gap:.4rem;
  padding:.85rem .5rem;border-radius:16px;border:1.5px solid var(--line);
  background:var(--bg);font:600 .72rem/1 sans-serif;color:var(--ink);cursor:pointer}
.plus-item:hover{border-color:var(--b2);background:var(--bbg)}
.plus-ico{font-size:1.4rem}
.plus-close{width:100%;padding:.65rem;border-radius:20px;border:none;
  background:var(--line);font:600 .82rem/1 sans-serif;color:var(--muted);cursor:pointer}

/* ── Tunnel CV ── */
.cv-result-section{background:var(--bbg);border:1px solid var(--b100);border-radius:12px;margin-bottom:.6rem;overflow:hidden}
.cv-result-header{padding:.7rem 1rem;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font:600 .82rem/1 sans-serif;color:var(--ink)}
.cv-result-header:hover{background:var(--b100)}
.cv-result-body{padding:0 1rem;max-height:0;overflow:hidden;transition:max-height .35s ease,padding .35s}
.cv-result-body.open{max-height:600px;padding:.75rem 1rem}
.cv-chip{display:inline-flex;align-items:center;gap:.3rem;padding:.25rem .65rem;border-radius:20px;background:#fff;border:1px solid var(--b100);font-size:.72rem;margin:.2rem;cursor:pointer}
.cv-chip.selected{background:var(--brand);color:#fff;border-color:var(--brand)}
.cv-chip.deselected{opacity:.4;text-decoration:line-through}
.cv-par-item{background:#fff;border-radius:10px;border:1px solid var(--line);padding:.65rem .85rem;margin-bottom:.5rem;cursor:pointer;transition:border-color .15s}
.cv-par-item:hover,.cv-par-item.selected{border-color:var(--brand)}
.cv-par-item.deselected{opacity:.4}

.page.owner-mode .owner-left{display:flex}
.owner-left{display:none;flex-direction:column;gap:0;position:sticky;top:42px;height:calc(100vh - 46px);overflow:hidden}
.owner-left::-webkit-scrollbar{display:none}
.ol-scroll{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:.65rem;padding:.65rem;scrollbar-width:none;min-height:0}
.ol-scroll::-webkit-scrollbar{display:none}
.ol-card{background:var(--sur);border:1px solid var(--line);border-radius:14px;padding:.9rem 1rem}
.ol-card.owner-only{flex-shrink:0;margin:.65rem .65rem 0;border-radius:14px}
.ol-title{font:700 .78rem/1 sans-serif;color:var(--ink);margin-bottom:.75rem;display:flex;align-items:center;gap:.4rem}
.prof-nav-link{display:flex;align-items:center;gap:.6rem;padding:.65rem 1rem;font:500 .8rem/1 sans-serif;color:var(--soft);text-decoration:none;border-bottom:1px solid var(--line);transition:all .15s}
.prof-nav-link:last-child{border-bottom:none}
.prof-nav-link:hover{background:var(--bbg);color:var(--brand)}
.prof-nav-link.active{color:var(--brand);font-weight:700;background:var(--bbg);border-left:3px solid var(--brand)}



.par-card{background:var(--sur);border:1px solid var(--line);border-radius:14px;padding:1rem 1.25rem;margin-bottom:.75rem;border-left:4px solid var(--b2);transition:box-shadow .15s,border-color .15s;cursor:pointer}
.par-card:hover{box-shadow:var(--sh2);border-left-color:var(--brand)}
.par-card-title{font:700 .9rem/1.3 sans-serif;color:var(--ink);margin-bottom:.3rem}
.par-card-desc{font:400 .76rem/1.5 sans-serif;color:var(--soft);margin-bottom:.5rem}
.par-tags{display:flex;flex-wrap:wrap;gap:.28rem;margin-top:.4rem}
.par-tag{font:600 .6rem/1 sans-serif;padding:.18rem .5rem;border-radius:20px;background:var(--bbg);color:var(--brand);border:.5px solid var(--b100)}
/* Modale lecture PAR */
.par-view-overlay{position:fixed;inset:0;background:rgba(11,18,32,.5);z-index:2001;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s;padding:1rem}
.par-view-overlay.open{opacity:1;pointer-events:all}
.par-view-box{background:var(--sur);border-radius:20px;width:min(92vw,620px);max-height:90vh;overflow-y:auto;box-shadow:0 16px 64px rgba(11,18,32,.2);display:flex;flex-direction:column}
.pvb-head{padding:1.25rem 1.5rem .9rem;border-bottom:1px solid var(--line);display:flex;align-items:flex-start;gap:.75rem}
.pvb-head-info{flex:1;min-width:0}
.pvb-title{font:700 1.1rem/1.3 'Lora',serif;color:var(--ink);margin-bottom:.25rem}
.pvb-meta{font:400 .7rem/1 sans-serif;color:var(--soft);display:flex;align-items:center;gap:.6rem}
.pvb-close{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:none;font-size:1.1rem;color:var(--soft);cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .15s}
.pvb-close:hover{background:var(--bg);color:var(--ink)}
.pvb-body{padding:1.25rem 1.5rem;flex:1;overflow-y:auto}
.pvb-section{margin-bottom:1.1rem}
.pvb-section-label{font:700 .68rem/1 sans-serif;color:var(--soft);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.4rem;display:flex;align-items:center;gap:.35rem}
.pvb-section-content{font:400 .82rem/1.65 sans-serif;color:var(--muted);background:var(--bg);border-radius:10px;padding:.7rem .9rem;border:1px solid var(--line)}
.pvb-footer{padding:.9rem 1.5rem;border-top:1px solid var(--line);display:flex;gap:.5rem;justify-content:flex-end;background:var(--bg);border-radius:0 0 20px 20px}
.pvb-btn-edit{padding:.45rem 1.1rem;border-radius:20px;border:1.5px solid var(--brand);background:none;font:600 .78rem/1 sans-serif;color:var(--brand);cursor:pointer;transition:all .15s}
.pvb-btn-edit:hover{background:var(--brand);color:#fff}
.pvb-btn-del{padding:.45rem 1.1rem;border-radius:20px;border:1.5px solid #ef4444;background:none;font:600 .78rem/1 sans-serif;color:#ef4444;cursor:pointer;transition:all .15s}
.pvb-btn-del:hover{background:#fef2f2}
.pvb-pub-badge{display:inline-flex;align-items:center;gap:.25rem;font:600 .65rem/1 sans-serif;padding:.15rem .5rem;border-radius:20px}
.pvb-pub-badge.pub{background:var(--bbg);color:var(--brand)}
.pvb-pub-badge.priv{background:var(--bg);color:var(--soft);border:1px solid var(--line)}
.par-tags{display:flex;flex-wrap:wrap;gap:.3rem;margin-bottom:.6rem}
.par-tag{padding:.18rem .5rem;border-radius:20px;font:500 .62rem/1 sans-serif;background:var(--bbg);color:var(--brand)}
.par-actions{display:flex;gap:.5rem}
.btn-sm{padding:.3rem .7rem;border-radius:20px;border:1px solid var(--line);background:none;font:500 .68rem/1 sans-serif;color:var(--soft);cursor:pointer;transition:all .15s}
.btn-sm:hover{border-color:var(--b2);color:var(--brand)}
.btn-sm.del:hover{border-color:#ef4444;color:#ef4444}
.btn-add{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.8rem;border-radius:14px;border:2px dashed var(--line);background:none;color:var(--soft);font:600 .82rem/1 sans-serif;cursor:pointer;width:100%;transition:all .15s;margin-bottom:1rem}
.btn-add:hover{border-color:var(--b2);color:var(--brand);background:var(--bbg)}
.modal-overlay{position:fixed;inset:0;background:rgba(11,18,32,.45);z-index:2000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s}
.modal-overlay.open{opacity:1;pointer-events:all}
.modal-box{background:var(--sur);border-radius:20px;padding:1.5rem;width:min(92vw,560px);max-height:90vh;overflow-y:auto;box-shadow:0 12px 48px rgba(11,18,32,.18)}
.modal-title{font:700 1rem/1 'Lora',serif;color:var(--ink);margin-bottom:1.25rem}
.form-field{margin-bottom:.85rem}
.form-label{display:block;font:600 .7rem/1 sans-serif;color:var(--soft);text-transform:uppercase;letter-spacing:.04em;margin-bottom:.3rem}
.form-input,.form-textarea{width:100%;padding:.5rem .75rem;border-radius:10px;border:1.5px solid var(--line);font:400 .82rem/1 sans-serif;color:var(--ink);outline:none;transition:border-color .15s;background:var(--bg)}
.form-input:focus,.form-textarea:focus{border-color:var(--b2)}
.form-textarea{resize:vertical;min-height:70px}
.form-row{display:flex;gap:.5rem;justify-content:flex-end;margin-top:1rem}
.btn-cancel{padding:.45rem 1rem;border-radius:20px;border:1px solid var(--line);background:none;font:600 .78rem/1 sans-serif;color:var(--soft);cursor:pointer}
.btn-submit{padding:.45rem 1.25rem;border-radius:20px;border:none;background:var(--brand);color:#fff;font:600 .78rem/1 sans-serif;cursor:pointer}
.btn-submit:hover{opacity:.85}
.empty-state{text-align:center;padding:3rem 1rem;color:var(--soft)}
.empty-ico{font-size:2.5rem;margin-bottom:.75rem}
.empty-title{font:600 .9rem/1 sans-serif;color:var(--ink);margin-bottom:.4rem}
.cv-import-card{background:linear-gradient(135deg,var(--bbg),#ecfdf5);border:1.5px dashed var(--b2);border-radius:14px;padding:1.25rem;margin-bottom:1rem;text-align:center}

/* Onglets compétences */
.comp-tab{flex:1;padding:.42rem .5rem;border-radius:9px;border:none;font:600 .74rem/1 "DM Sans",sans-serif;color:var(--soft);background:none;cursor:pointer;transition:all .15s;white-space:nowrap}
.comp-tab.on{background:var(--brand);color:#fff}
.comp-tab:hover:not(.on){background:var(--bbg);color:var(--brand)}
.comp-intro{font:400 .76rem/1.6 "DM Sans",sans-serif;color:var(--soft);background:var(--bg);border-radius:10px;padding:.65rem .85rem;margin-bottom:.85rem;border:1px solid var(--line)}

/* Chip compétence */
.comp-chip{display:flex;align-items:center;gap:.65rem;padding:.65rem .85rem;background:var(--sur);border:1px solid var(--line);border-radius:12px;margin-bottom:.5rem;transition:box-shadow .15s}
.comp-chip:hover{box-shadow:var(--sh)}
.comp-chip-ico{font-size:1.2rem;flex-shrink:0}
.comp-chip-body{flex:1;min-width:0}
.comp-chip-label{font:600 .82rem/1.2 "DM Sans",sans-serif;color:var(--ink)}
.comp-chip-sub{font:400 .68rem/1.3 "DM Sans",sans-serif;color:var(--soft);margin-top:.15rem}
.comp-chip-right{display:flex;flex-direction:column;align-items:flex-end;gap:.2rem;flex-shrink:0}
.comp-src-badge{font:600 .6rem/1 "DM Sans",sans-serif;padding:.12rem .4rem;border-radius:20px}
.comp-src-cv{background:#eff6ff;color:#1d4ed8}
.comp-src-par{background:var(--bbg);color:var(--brand)}
.comp-src-moteur{background:var(--abg);color:#92400e}
.comp-score{font:700 .72rem/1 "DM Sans",sans-serif;color:var(--soft)}

/* Badge niveau */
.comp-level{font:700 .62rem/1 "DM Sans",sans-serif;padding:.1rem .4rem;border-radius:20px;background:var(--line);color:var(--soft)}
.comp-level.graine{background:#f0fdf4;color:#166534}
.comp-level.pousse{background:#dcfce7;color:#15803d}
.comp-level.fruit{background:var(--brand);color:#fff}
.rome-sug-btn{font:500 .65rem/1 sans-serif;padding:.22rem .65rem;border-radius:20px;border:1px solid var(--line);background:var(--bg);color:var(--soft);cursor:pointer;transition:all .15s}
.rome-sug-btn:hover{border-color:var(--b2);color:var(--brand);background:var(--bbg)}