/* ============================================================================ manager.transicio.com — charte « Sombre & premium » Mode jour / nuit via l'attribut [data-theme] sur (toutes les couleurs passent par des variables → bascule instantanée, sans recharger). ========================================================================== */ /* ⭐ L'attribut HTML `hidden` DOIT toujours masquer. Sans ça, une règle auteur avec `display:…` (ex. .nav-msg-badge { display:inline-flex }) l'emporte sur le `[hidden]{display:none}` du navigateur (même spécificité, styles auteur > UA) → l'élément reste visible malgré `hidden=true` (cas du point rouge « Messages » figé). Cette règle globale corrige tous ces cas d'un coup. */ [hidden] { display: none !important; } :root, [data-theme="dark"] { --bg:#0f0f14; --nav-bg:rgba(15,15,20,.92); --surface:#15151c; --card:#1b1b25; --card-2:#20202b; --text:#ffffff; --muted:#9698ad; --muted-2:#86889c; --accent:#a2b7f2; --accent-2:#7c8ee6; --accent-soft:rgba(162,183,242,.14); --accent-ink:#161616; --border:rgba(255,255,255,.07); --border-strong:rgba(162,183,242,.35); --shadow:0 20px 46px rgba(0,0,0,.45); --hero-shadow:0 20px 46px rgba(110,90,230,.32); } [data-theme="light"] { --bg:#eceef6; --nav-bg:rgba(246,247,251,.90); --surface:#f6f7fb; --card:#ffffff; --card-2:#f3f5fb; --text:#1a1c24; --muted:#5c5f74; --muted-2:#7a7d92; --accent:#5b6fd0; --accent-2:#7c8ee6; --accent-soft:rgba(91,111,208,.12); --accent-ink:#ffffff; --border:rgba(20,22,40,.10); --border-strong:rgba(91,111,208,.40); --shadow:0 18px 40px rgba(40,50,90,.14); --hero-shadow:0 18px 40px rgba(110,90,230,.26); } * { box-sizing:border-box; margin:0; padding:0; } body { font-family:'Inter',system-ui,sans-serif; background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; transition:background .25s ease, color .25s ease; } .serif { font-family:'Playfair Display',Georgia,serif; } a { text-decoration:none; color:inherit; } /* --- Barre de navigation --- */ .nav { display:flex; align-items:center; justify-content:space-between; padding:15px 26px; background:var(--nav-bg); backdrop-filter:blur(10px); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:10; } .nav-l { display:flex; align-items:center; gap:28px; } .logo { font-family:'Playfair Display',serif; font-size:19px; font-weight:700; letter-spacing:.05em; display:flex; align-items:center; } .logo svg { height:26px; width:auto; } .logo span { color:var(--accent); } .logo.big { font-size:26px; } .logo.big svg { height:38px; } /* Wordmark texte (marques sans logo SVG dédié) — bat `.logo span` pour garder la couleur du texte */ .logo .logo-text { color:inherit; font-size:22px; letter-spacing:.04em; line-height:1; white-space:nowrap; } .logo.big .logo-text { font-size:30px; } .links { display:flex; gap:22px; } .links a { font-size:13.5px; color:var(--muted); transition:color .15s; } .links a:hover { color:var(--text); } .links a.on { color:var(--text); font-weight:600; position:relative; } .links a.on::after { content:""; position:absolute; left:0; right:0; bottom:-19px; height:2.5px; background:var(--accent); border-radius:2px; } .nav-r { display:flex; align-items:center; gap:16px; } .nav-r .icon-link, .icon-btn { color:var(--muted); cursor:pointer; display:flex; align-items:center; transition:color .15s; } .nav-r .icon-link:hover, .icon-btn:hover { color:var(--accent); } .icon-btn { background:none; border:none; padding:0; } /* Messagerie — pastilles de non-lus (cloche + lien de nav) */ .msg-bell { position:relative; } .msg-badge { position:absolute; top:-5px; right:-6px; min-width:16px; height:16px; padding:0 4px; box-sizing:border-box; border-radius:9px; background:#e5484d; color:#fff; font-size:10px; font-weight:700; line-height:16px; text-align:center; box-shadow:0 0 0 2px var(--nav-bg); } .nav-msg-badge { display:inline-flex; align-items:center; justify-content:center; min-width:16px; height:16px; padding:0 4px; margin-left:6px; border-radius:9px; background:#e5484d; color:#fff; font-size:10px; font-weight:700; vertical-align:middle; } .icon { display:inline-block; vertical-align:-0.15em; width:22px; height:22px; flex:none; } /* Cloche Notifications (in-app) — menu déroulant */ .notif-wrap { position:relative; display:inline-flex; } .notif-bell { background:none; border:none; padding:0; cursor:pointer; } .notif-menu { position:absolute; right:0; top:36px; z-index:40; width:330px; max-width:86vw; background:var(--card); border:1px solid var(--border); border-radius:13px; box-shadow:var(--shadow); overflow:hidden; } .notif-head { padding:11px 15px; font-size:13px; font-weight:600; border-bottom:1px solid var(--border); } .notif-list { max-height:360px; overflow-y:auto; } .notif-list a { display:block; color:inherit; } .notif-it { display:flex; flex-direction:column; gap:3px; padding:11px 15px; border-bottom:1px solid var(--border); transition:background .12s; } .notif-list a:hover .notif-it { background:var(--card-2); } .notif-it.neuf { background:var(--accent-soft); } .notif-t { font-size:12.5px; color:var(--text); line-height:1.4; } .notif-q { font-size:11px; color:var(--muted-2); } .notif-empty { padding:26px 15px; text-align:center; font-size:12.5px; color:var(--muted); } .nav-r .icon { width:20px; height:20px; } /* Parrainage — pastille « Parrainer » (nav) + bandeau d'invitation réutilisable (Accueil / Communauté) */ .nav-cta { display:inline-flex; align-items:center; gap:7px; border:1px solid var(--border-strong); color:var(--accent); font-size:12.5px; font-weight:600; padding:7px 13px; border-radius:9px; white-space:nowrap; transition:background .14s,color .14s; } .nav-cta:hover { background:var(--accent-soft); } .nav-cta.on { background:var(--accent); color:var(--accent-ink); border-color:transparent; } .nav-cta .icon { width:16px; height:16px; } /* --- Menu burger + tiroir latéral (mobile/tablette). La barre ET le tiroir incluent le MÊME _nav_links.html (source unique core/nav.py) → impossible de désynchroniser les deux. --- */ .nav-burger { display:none; background:none; border:none; padding:6px; color:var(--text); cursor:pointer; align-items:center; justify-content:center; } .nav-burger .icon { width:24px; height:24px; } .navdrawer-ov { position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:55; } .navdrawer { position:fixed; top:0; right:0; height:100%; width:min(84vw,320px); background:var(--surface); border-left:1px solid var(--border); z-index:60; transform:translateX(100%); transition:transform .22s ease; display:flex; flex-direction:column; box-shadow:-12px 0 34px rgba(0,0,0,.32); } .navdrawer.open { transform:translateX(0); } .navdrawer-top { display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--border); } .navdrawer-wm svg { height:24px; width:auto; display:block; } .navdrawer-wm .logo-text { font-family:'Playfair Display',serif; font-weight:700; font-size:18px; color:var(--text); } .navdrawer-links { display:flex; flex-direction:column; padding:8px 0; overflow-y:auto; flex:1; } .navdrawer-links a { padding:13px 20px; font-size:15px; color:var(--muted); text-decoration:none; border-left:3px solid transparent; transition:background .12s,color .12s; } .navdrawer-links a:hover { color:var(--text); background:var(--accent-soft); } .navdrawer-links a.on { color:var(--text); font-weight:600; border-left-color:var(--accent); background:var(--accent-soft); } .navdrawer-foot { padding:16px 20px; border-top:1px solid var(--border); } .navdrawer-foot .nav-cta { width:100%; justify-content:center; } /* ============================================================================ SEUILS RESPONSIVE CANONIQUES (harmonisés 2026-06-20) — n'utiliser QUE ceux-ci : • 1280px : la barre de nav bascule en menu burger (10 liens ne tiennent pas en ligne sous ~1300). • 768px : pivot mobile principal — 2 colonnes → 1, panneaux empilés, formulaires pleine largeur. • 480px : mobile compact — tailles de titres, paddings réduits, empilements fins. (Avant : 8 valeurs éparpillées 520/540/560/620/640/760/780/820/860, désormais fusionnées.) ========================================================================== */ @media (max-width:1280px) { .links { display:none; } /* la nav à 10 liens ne tient pas en ligne sous ~1300px */ .nav-burger { display:inline-flex; } /* → on bascule sur le tiroir burger */ .nav-r .nav-cta { display:none; } /* « Parrainer » de la barre → présent dans le pied du tiroir */ } .invite-banner { display:flex; align-items:center; gap:15px; background:var(--accent-soft); border:1px solid var(--border-strong); border-radius:14px; padding:15px 20px; margin-bottom:22px; transition:border-color .15s; } .invite-banner:hover { border-color:var(--accent); } .invite-banner .ib-ic { width:40px; height:40px; border-radius:11px; background:var(--card); color:var(--accent); display:flex; align-items:center; justify-content:center; flex-shrink:0; } .invite-banner .ib-ic .icon { width:21px; height:21px; } .invite-banner .ib-tx { flex:1; min-width:0; display:flex; flex-direction:column; } .invite-banner .ib-tx b { font-size:14.5px; font-weight:600; color:var(--text); margin-bottom:2px; } .invite-banner .ib-tx span { font-size:12.5px; color:var(--muted); } .invite-banner .ib-cta { display:inline-flex; align-items:center; gap:7px; background:var(--accent); color:var(--accent-ink); font-weight:600; font-size:13px; padding:10px 16px; border-radius:10px; white-space:nowrap; flex-shrink:0; } .invite-banner .ib-cta .icon { width:15px; height:15px; } /* Variante « à compléter » (profil incomplet) : accent OR — appelle à l'action sans dramatiser. */ .invite-banner.todo { background:rgba(216,184,120,.08); border-color:rgba(216,184,120,.34); } .invite-banner.todo:hover { border-color:var(--b-gold); } .invite-banner.todo .ib-ic { color:var(--b-gold); } .invite-banner.todo .ib-cta { background:var(--b-gold); color:#161616; } /* Mobile : icône + texte sur une ligne, le bouton « Inviter un pair » passe pleine largeur dessous. */ @media (max-width:480px){ .invite-banner { flex-wrap:wrap; gap:12px 14px; padding:14px 16px; } .invite-banner .ib-cta { flex-basis:100%; justify-content:center; } } .ava { width:36px; height:36px; border-radius:50%; overflow:hidden; background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:var(--accent-ink); font-size:12.5px; font-weight:600; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; } .ava-photo { width:100%; height:100%; object-fit:cover; display:block; } .ava-wrap { position:relative; } /* Wrapper générique d'avatar : porte la pastille en coin sans être rogné par l'overflow de l'avatar. */ .avx { position:relative; display:inline-flex; flex:none; } /* Pastille de MÉTIER générique (famille de fonction), posée en coin d'un avatar par-dessus un wrapper position:relative ; la couleur arrive via --fc. Réutilisable partout (vitrine, _avatar, forum…). */ .av-fn { position:absolute; left:-2px; bottom:-2px; width:13px; height:13px; border-radius:50%; background:var(--fc); border:2px solid var(--card); box-sizing:border-box; pointer-events:none; } .ava-menu { position:absolute; right:0; top:calc(100% + 10px); background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:10px 0; min-width:210px; box-shadow:0 8px 28px rgba(0,0,0,.18); z-index:200; } .ava-email { display:block; padding:6px 16px 10px; font-size:11.5px; color:var(--muted); border-bottom:1px solid var(--border); } .ava-link { display:block; padding:9px 16px; font-size:13px; color:var(--text); text-decoration:none; } .ava-link:hover { background:var(--card-2); color:var(--accent); } .ava-sep { height:1px; background:var(--border); margin:4px 0; } .ava-logout { display:block; width:100%; padding:9px 16px; background:none; border:none; text-align:left; font-size:13px; color:var(--text); cursor:pointer; font-family:inherit; } .ava-logout:hover { background:var(--card-2); color:var(--accent); } /* --- Mon compte --- */ .page.page-narrow { max-width:1200px; } /* aligné sur la largeur unique (ex-560) */ .mc-wrap { padding:8px 0 48px; } .mc-title { font-family:'Playfair Display',serif; font-size:26px; font-weight:700; margin:0 0 28px; } .mc-section { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:22px 24px; margin-bottom:16px; } .mc-section-h { font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:0 0 16px; } .mc-fields { margin:0 0 18px; display:flex; flex-direction:column; gap:10px; } .mc-field { display:flex; align-items:baseline; gap:12px; } .mc-field dt { font-size:12.5px; color:var(--muted); min-width:110px; flex-shrink:0; } .mc-field dd { font-size:13.5px; color:var(--text); margin:0; } .mc-pwd-link { font-size:13px; color:var(--accent); text-decoration:none; } .mc-pwd-link:hover { text-decoration:underline; } .mc-danger { border-color:rgba(210,60,60,.25); } .mc-danger-h { color:rgba(210,60,60,.7); } .mc-danger-desc { font-size:13px; color:var(--muted); margin:0 0 18px; line-height:1.6; } .mc-error { font-size:13px; color:rgba(200,50,50,.9); margin:0 0 14px; } .mc-confirm-details summary { list-style:none; } .mc-confirm-details summary::-webkit-details-marker { display:none; } .mc-danger-btn { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:8px; font-size:13px; font-weight:500; border:1px solid rgba(210,60,60,.4); color:rgba(210,60,60,.85); cursor:pointer; background:none; } .mc-confirm-details[open] .mc-danger-btn { opacity:.5; pointer-events:none; } .mc-confirm-form { margin-top:18px; padding-top:18px; border-top:1px solid var(--border); } .mc-confirm-lbl { display:block; font-size:13px; color:var(--muted); margin-bottom:10px; } .mc-confirm-lbl code { font-size:12px; background:var(--card-2); padding:2px 5px; border-radius:4px; } .mc-confirm-row { display:flex; gap:10px; } .mc-confirm-input { flex:1; padding:8px 12px; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--text); font-size:13px; font-family:inherit; } .mc-confirm-input:focus { outline:none; border-color:rgba(210,60,60,.5); } .mc-confirm-submit { padding:8px 16px; border-radius:8px; font-size:13px; font-weight:500; cursor:pointer; background:rgba(200,50,50,.12); border:1px solid rgba(210,60,60,.4); color:rgba(210,60,60,.9); font-family:inherit; white-space:nowrap; } .mc-confirm-submit:hover { background:rgba(200,50,50,.2); } /* --- Mon espace (fiche profil du manager) --- */ .page.page-wide{max-width:1200px} /* aligné sur la largeur unique (ex-1440) */ .me-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 0 16px} .me-cv-btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border-strong);color:var(--accent);border-radius:9px;padding:7px 13px;font-size:12.5px;cursor:default} .me-prog{margin-bottom:18px} .me-prog-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:12.5px;color:var(--muted);margin-bottom:7px} .me-prog-top b{color:var(--text);font-weight:600} .me-prog-hint{color:var(--muted-2)} .me-manquants{font-size:11.5px;color:rgba(205,55,75,.8);font-style:italic} .me-track{height:6px;border-radius:6px;background:var(--card-2);overflow:hidden} .me-track i{display:block;height:100%;background:var(--accent);border-radius:6px} .me-wrap{display:grid;grid-template-columns:182px minmax(0,1fr);gap:16px;align-items:start} .me-spine{position:relative;padding:4px 0} .me-line{position:absolute;left:14px;top:16px;bottom:16px;width:2px;background:var(--border);z-index:0} .me-node{position:relative;display:flex;align-items:flex-start;gap:11px;padding:8px 0;cursor:pointer;z-index:1} .me-ic{width:28px;height:28px;border-radius:50%;background:var(--card);border:2px solid var(--border);color:var(--muted);display:flex;align-items:center;justify-content:center;flex-shrink:0} .me-node.todo .me-ic{border-style:dashed;border-color:rgba(205,55,75,.4)} .me-node.partial .me-ic{border-style:dashed;border-color:rgba(205,55,75,.25)} .me-node.done .me-ic{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)} .me-node.on .me-ic{border-style:solid;border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)} .me-miss .me-input,.me-miss select.me-input,.me-miss .me-area{border-color:rgba(210,70,90,.35);background:rgba(255,240,243,.3)} .me-lab{font-size:13px;line-height:1.25;padding-top:4px;color:var(--muted)} .me-node.on .me-lab{color:var(--accent);font-weight:600} .me-nph{display:block;font-size:10px;color:var(--muted-2);margin-top:1px} .me-fiche{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:20px} .me-h2{font-family:'Playfair Display',serif;font-size:19px;font-weight:600;margin:0 0 20px;display:flex;align-items:center;gap:9px} .me-h2 .icon{color:var(--accent)} .me-h2-email{margin-left:auto;font-size:12px;font-weight:400;color:var(--muted);font-family:'Inter',system-ui,sans-serif;letter-spacing:0;text-transform:none;padding-left:10px} .me-sub{font-size:12.5px;color:var(--muted-2);margin:0 0 16px} .me-hero{background:var(--accent-soft);border:1px solid var(--border-strong);border-radius:12px;padding:15px 16px;margin-bottom:14px} .me-big{font-family:'Playfair Display',serif;font-size:18px;font-weight:600} .me-hero-meta{font-size:11.5px;color:var(--muted-2);margin-top:5px;display:flex;align-items:center;gap:6px;flex-wrap:wrap} .me-fl{margin-bottom:14px} .me-fl .me-k{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted-2);margin-bottom:6px;display:block} .me-static{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);font-size:14px} .me-static.last{border-bottom:0} .me-static .me-k{color:var(--muted);font-size:12.5px} .me-static .me-v{font-weight:600;text-align:right} .me-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px} .me-chip{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;padding:2px 8px;border-radius:20px;font-weight:600} .me-cv{background:var(--accent-soft);color:var(--accent)} .me-todo{background:rgba(214,120,60,.16);color:#c4742c} .me-ph{background:var(--card-2);color:var(--muted);font-size:10px;padding:2px 8px;border-radius:20px;font-weight:600} .me-badge{display:inline-flex;align-items:center;gap:5px;background:var(--card-2);border:1px solid var(--border);border-radius:8px;padding:5px 10px;font-size:12.5px;margin:0 6px 6px 0} .me-badge b{font-weight:600;color:var(--accent)} .me-gblock{margin-bottom:28px} .me-gk{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:6px;margin-bottom:8px} .me-gk .icon{color:var(--accent)} .me-exp{border-left:2px solid var(--border-strong);padding:2px 0 2px 13px;margin-bottom:12px} .me-exp h4{margin:0;font-size:14px;font-weight:600} .me-exp-m{font-size:12px;color:var(--muted-2);margin:2px 0 0} .me-foot{font-size:11.5px;color:var(--muted-2);margin-top:16px;display:flex;align-items:center;gap:7px} .me-refs{margin-top:12px;border:1px dashed var(--border-strong);border-radius:11px;padding:13px 15px;color:var(--muted-2);font-size:13px;display:flex;align-items:center;gap:8px} .me-state{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:34px 24px;text-align:center;color:var(--muted)} .me-state .icon{color:var(--accent);margin-bottom:10px} .me-state h3{font-family:'Playfair Display',serif;font-size:18px;font-weight:600;margin:0 0 6px;color:var(--text)} .me-creating{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:52px 40px 44px;text-align:center} .me-creating-title{font-family:'Playfair Display',serif;font-size:20px;font-weight:600;color:var(--text);margin:0 0 8px} .me-creating-desc{font-size:13.5px;color:var(--muted);line-height:1.65;max-width:340px;margin:0 auto 32px} .me-spin-wrap{position:relative;width:80px;height:80px;margin:0 auto 28px} .me-ring{position:absolute;inset:0;border-radius:50%;border:2px solid transparent;border-top-color:var(--accent);animation:me-spin 1.6s linear infinite} .me-ring2{position:absolute;inset:10px;border-radius:50%;border:1.5px solid transparent;border-right-color:var(--accent-2);animation:me-spinr 1s linear infinite} .me-ring-inner{position:absolute;inset:22px;background:var(--card-2);border-radius:50%;display:flex;align-items:center;justify-content:center} @keyframes me-spin{to{transform:rotate(360deg)}} @keyframes me-spinr{to{transform:rotate(-360deg)}} .me-steps-row{display:flex;align-items:center;justify-content:center} .me-step{display:flex;flex-direction:column;align-items:center;gap:10px;font-size:12px;min-width:90px;color:var(--muted-2)} .me-step-lbl{text-align:center;line-height:1.4} .me-step-dot{width:11px;height:11px;border-radius:50%;background:var(--card-2);border:2px solid var(--accent-soft)} .me-step-done{color:var(--text)}.me-step-done .me-step-dot{background:var(--accent);border-color:var(--accent)} .me-step-active{color:var(--text)}.me-step-active .me-step-dot{background:var(--accent);border-color:var(--accent);animation:me-pulse 1.3s ease-in-out infinite} @keyframes me-pulse{0%,100%{box-shadow:0 0 0 0 var(--accent-soft)}50%{box-shadow:0 0 0 6px rgba(0,0,0,0)}} .me-connector{width:70px;height:2px;background:var(--border);margin-bottom:20px;flex-shrink:0;position:relative;overflow:hidden} .me-connector-done::after{content:'';position:absolute;inset:0;background:var(--accent)} .me-connector-anim::after{content:'';position:absolute;inset:0;background:var(--accent);animation:me-fill 2.5s ease-in-out forwards} @keyframes me-fill{from{width:0}to{width:100%}} .me-refresh-hint{margin-top:24px;font-size:12px;color:var(--muted-2);display:flex;align-items:center;justify-content:center;gap:6px} .me-rdot{width:5px;height:5px;border-radius:50%;background:var(--muted-2);animation:me-blink 1.4s ease-in-out infinite;display:inline-block} .me-rdot:nth-child(2){animation-delay:.2s}.me-rdot:nth-child(3){animation-delay:.4s} @keyframes me-blink{0%,100%{opacity:.3}50%{opacity:1}} .me-ed{display:block;margin-bottom:10px} .me-ed .me-k{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted-2);margin-bottom:4px;display:block} .me-input,.me-area{width:100%;min-width:0;border:1px solid var(--border);border-radius:9px;padding:7px 10px;font-family:inherit;font-size:14px;color:var(--text);background:var(--card);transition:border-color .15s,box-shadow .15s} .me-input:hover,.me-area:hover{border-color:var(--border-strong)} .me-input:focus,.me-area:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)} .me-area{min-height:52px;resize:vertical;line-height:1.5} .me-flag{display:inline-block;font-size:11px;margin-top:5px;min-height:14px} .me-flag.saving{color:var(--muted-2)} .me-flag.ok{color:#3a9d6a} .me-flag.err{color:#c4742c} .me-twocol{display:grid;grid-template-columns:1fr 1fr;gap:10px} .me-civrow{display:grid;grid-template-columns:130px 1fr 1fr;gap:10px} .me-ctrow{display:grid;grid-template-columns:1fr 1fr 2fr;gap:10px} .me-list{margin-top:4px} .me-li{display:flex;align-items:center;gap:8px;margin-bottom:8px} .me-li .me-li-val{flex:1;min-width:0} .me-li .me-li-niv{width:150px;flex:none} .me-li select.me-li-niv{width:178px} .me-li-del{flex:none;width:36px;height:36px;border:1px solid var(--border);background:var(--card);border-radius:9px;color:var(--muted-2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .15s,border-color .15s} .me-li-del:hover{color:#c4742c;border-color:#c4742c} .me-li-add{margin-top:4px} .me-li-addbtn{flex:none;border:1px dashed var(--border-strong);background:transparent;color:var(--accent);border-radius:9px;padding:9px 15px;font-family:inherit;font-size:13px;cursor:pointer;display:inline-flex;align-items:center;gap:6px} .me-li-addbtn:hover{background:var(--accent-soft)} .me-li .me-flag{flex:none;min-width:76px;margin-top:0} .me-expcard{border:1px solid var(--border);border-radius:12px;padding:14px 15px;margin-bottom:12px} .me-expcard-h{display:flex;gap:8px;align-items:center;margin-bottom:10px} .me-expcard-h .me-input{flex:1;font-weight:600} .me-expcard .me-twocol{margin-bottom:10px} .me-expcard .me-area{margin-bottom:10px} .me-en-toggle{border:0;background:none;color:var(--accent);font-family:inherit;font-size:12.5px;cursor:pointer;padding:4px 0;display:inline-flex;align-items:center;gap:6px} .me-en{border-top:1px dashed var(--border);margin-top:6px;padding-top:12px} .me-expadd{border:1px dashed var(--border-strong);border-radius:12px;padding:14px 15px;margin-top:4px} .me-expadd .me-twocol{margin-bottom:10px} .me-seg{display:inline-flex;background:var(--card-2);border:1px solid var(--border);border-radius:9px;overflow:hidden} .me-seg button{border:0;background:transparent;padding:7px 15px;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer} .me-seg button.on{background:var(--accent);color:var(--accent-ink)} .me-avatar-wrap{display:flex;align-items:center;gap:16px;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:12px 16px;margin-bottom:14px;transition:border-color .15s;cursor:pointer} .me-avatar-wrap:hover{border-color:var(--border-strong)} .me-avatar{position:relative;width:72px;height:72px;border-radius:50%;flex-shrink:0} .me-avatar-img{width:72px;height:72px;border-radius:50%;object-fit:cover;display:block;border:2.5px solid var(--border-strong)} .me-avatar-ph{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,var(--accent) 0%,var(--accent-2) 100%);display:flex;align-items:center;justify-content:center;border:2.5px solid var(--border-strong)} .me-avatar-ph span{font-size:22px;font-weight:700;color:#fff;letter-spacing:.04em;text-transform:uppercase;user-select:none} .me-avatar-cam{position:absolute;inset:0;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.52);color:#fff;opacity:0;transition:opacity .18s} .me-avatar-wrap:hover .me-avatar-cam,.me-avatar:focus-within .me-avatar-cam{opacity:1} .me-avatar-right{flex:1;min-width:0} .me-avatar-name{font-size:15px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px} .me-avatar-sub{font-size:12px;color:var(--muted);margin-bottom:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .me-avatar-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .me-avatar-btn{font:inherit;font-size:12px;font-weight:500;padding:5px 13px;border:1px solid var(--border-strong);border-radius:7px;background:transparent;color:var(--accent);cursor:pointer;display:inline-flex;align-items:center;gap:5px;transition:background .12s} .me-avatar-btn:hover{background:var(--accent-soft)} .me-avatar-del{font:inherit;font-size:12px;font-weight:500;padding:5px 13px;border:1px solid var(--border);border-radius:7px;background:transparent;color:var(--muted-2);cursor:pointer;display:inline-flex;align-items:center;gap:5px;transition:color .12s,border-color .12s} .me-avatar-del:hover{color:#c4742c;border-color:#c4742c} .me-transbanner{display:flex;align-items:center;gap:12px;background:var(--accent-soft);border:1px solid var(--border-strong);border-radius:11px;padding:12px 14px;margin-bottom:16px} .me-transbanner[hidden]{display:none} .me-transbanner .txt{flex:1;font-size:13px;color:var(--text)} .me-transbanner .icon{color:var(--accent);flex:none} .me-gen{border:0;background:var(--accent);color:var(--accent-ink);border-radius:9px;padding:9px 14px;font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:7px;white-space:nowrap} .me-gen:disabled{opacity:.6;cursor:default} .me-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px} .me-langbar{display:flex;align-items:center;gap:7px;flex-wrap:wrap} .me-lchip{display:inline-flex;align-items:center;border:1px solid var(--border);border-radius:9px;overflow:hidden} .me-lpick{border:0;background:var(--card);padding:7px 13px;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer} .me-lpick.on{background:var(--accent);color:var(--accent-ink)} .me-lrm{border:0;background:var(--card);color:var(--muted-2);cursor:pointer;padding:7px 9px;font-size:15px;line-height:1} .me-lrm:hover{color:#c4742c} .me-add{border:1px dashed var(--border-strong);background:transparent;color:var(--accent);border-radius:9px;padding:7px 12px;font-family:inherit;font-size:12.5px;cursor:pointer} .me-langform{display:inline-flex;align-items:center;gap:6px} .me-langform .me-input{height:34px;padding:6px 10px} .me-trad{position:relative} .me-tradbtn{border:1px solid var(--border-strong);background:var(--accent-soft);color:var(--accent);border-radius:9px;padding:8px 13px;font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:7px} .me-tradbtn:disabled{opacity:.5;cursor:default} .me-btn-ia{border:none;background:none;color:var(--accent);font-family:inherit;font-size:11px;font-weight:600;cursor:pointer;padding:2px 7px;border-radius:8px;display:inline-flex;align-items:center;gap:4px;transition:background .12s;vertical-align:middle;margin-left:6px;opacity:.8} .me-btn-ia:hover{background:var(--accent-soft);opacity:1} .me-btn-ia:disabled{opacity:.4;cursor:default} .me-menu{position:absolute;right:0;top:calc(100% + 6px);background:var(--card);border:1px solid var(--border);border-radius:11px;padding:6px;min-width:220px;box-shadow:var(--shadow);z-index:50} .me-menu[hidden]{display:none} .me-menu-h{font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted-2);padding:6px 10px 4px} .me-menu button{display:flex;width:100%;align-items:center;gap:8px;border:0;background:none;border-radius:8px;padding:8px 10px;font-family:inherit;font-size:13px;color:var(--text);cursor:pointer;text-align:left} .me-menu button:hover{background:var(--card-2);color:var(--accent)} @media(max-width:768px){.me-toolbar{align-items:stretch}} .me-rlist{margin-top:4px} .me-ri{display:flex;align-items:center;gap:12px;margin-bottom:8px} .me-ri .me-ri-val{flex:1;min-width:0} .me-rate{display:inline-flex;gap:4px;flex:none} .me-seg-dot{width:20px;height:9px;border-radius:3px;background:var(--card-2);border:1px solid var(--border);cursor:pointer;transition:background .12s} .me-seg-dot:hover{border-color:var(--border-strong)} .me-seg-dot.on{background:var(--accent);border-color:var(--accent)} .me-ri .me-li-del{flex:none} .me-ri .me-flag{flex:none;min-width:72px;margin-top:0} @media(max-width:768px){.me-ri{flex-wrap:wrap}} .me-chips{display:flex;flex-wrap:wrap;gap:8px} .me-chip-sel{border:1px solid var(--border);background:var(--card);color:var(--muted);border-radius:9px;padding:7px 13px;font-family:inherit;font-size:13px;cursor:pointer;transition:background .12s,border-color .12s,color .12s} .me-chip-sel:hover{border-color:var(--border-strong)} .me-chip-sel.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);font-weight:600} .me-chip-sel:disabled{opacity:.55;cursor:default} .me-chips-free{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px;min-height:20px} .me-cf{display:inline-flex;align-items:center;gap:4px;background:var(--accent-soft);border:1px solid var(--accent);color:var(--accent);border-radius:20px;padding:4px 8px 4px 12px;font-size:13px;font-weight:500} .me-cf-del{background:none;border:none;color:var(--accent);cursor:pointer;font-size:17px;line-height:1;padding:0;opacity:.5;transition:opacity .12s} .me-cf-del:hover{opacity:1} .me-cf .me-flag{font-size:10px;min-height:auto;margin-top:0;margin-left:2px} /* Langues : cartes avec 3 scores */ .me-lang-list{display:flex;flex-direction:column;gap:8px;margin-bottom:12px} .me-lang-card{border:1px solid var(--border);border-radius:10px;padding:12px 14px;background:var(--card)} .me-lang-head{display:flex;align-items:center;gap:8px;margin-bottom:10px} .me-lang-name{font-weight:600;font-size:14px;flex:1} .me-lang-scores{display:flex;flex-wrap:wrap;gap:14px} .me-lang-score{display:flex;align-items:center;gap:8px} .me-lang-lbl{font-size:11.5px;color:var(--muted);min-width:50px;letter-spacing:.02em} .me-lang-add-form{border:1px dashed var(--border);border-radius:10px;padding:12px 14px} .me-lang-add-row{display:flex;align-items:center;gap:8px;margin-bottom:10px} .me-lang-ac-wrap{position:relative;flex:1;min-width:0} .me-lang-drop{position:absolute;top:calc(100% + 3px);left:0;right:0;background:var(--card);border:1px solid var(--border);border-radius:9px;box-shadow:0 4px 20px rgba(0,0,0,.13);z-index:50;overflow:hidden} .me-lang-sug{padding:9px 13px;font-size:14px;color:var(--text);cursor:pointer;transition:background .08s} .me-lang-sug:hover,.me-lang-sug.ac-on{background:var(--accent-soft);color:var(--accent)} .me-lang-picks-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px;min-height:32px} .me-lang-picks{display:flex;flex-wrap:wrap;gap:6px;align-items:center} .me-lang-pick{padding:5px 14px;border:1.5px solid var(--accent);border-radius:20px;background:transparent;color:var(--accent);font-size:.85em;font-weight:500;cursor:pointer;transition:background .13s,color .13s;line-height:1.4} .me-lang-pick:hover,.me-lang-pick.on{background:var(--accent);color:#fff} .me-lang-add-sel{border-top:1px solid var(--border);padding-top:10px;margin-top:4px} .me-info{font-size:12.5px;color:var(--muted);line-height:1.55;margin-bottom:14px} .me-budget{font-size:11.5px;font-weight:600;color:var(--muted);margin-left:auto;white-space:nowrap;transition:color .15s} .me-budget.over{color:#e74c3c} .me-budget.budget-unused{color:#dc2626} /* rouge : des points restent à répartir */ .me-budget.budget-full{color:#16a34a} /* vert : budget entièrement utilisé */ .me-budget.flash-err{color:#e74c3c;animation:flash-shake .4s} @keyframes flash-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}} /* Chips avec notation intégrée */ .me-chips-rated{display:flex;flex-wrap:wrap;gap:8px} .me-chip-rated{display:inline-flex;flex-direction:column;align-items:center;gap:5px;padding:7px 12px;border:1px solid var(--border);border-radius:9px;background:var(--card);cursor:pointer;user-select:none;-webkit-user-select:none;transition:border-color .12s,background .12s} .me-chip-rated:hover{border-color:var(--border-strong)} .me-chip-rated.on{background:var(--accent-soft);border-color:var(--accent)} .me-chip-rated-lbl{font-family:inherit;font-size:13px;color:var(--muted);background:none;border:none;cursor:pointer;padding:0} .me-chip-rated.on .me-chip-rated-lbl{color:var(--accent);font-weight:600} .me-chip-rate{display:flex;gap:4px;line-height:1} .me-chip-rate .me-seg-dot{width:7px;height:7px;border-radius:50%;background:var(--border);cursor:pointer;transition:background .1s} .me-chip-rate .me-seg-dot.on{background:var(--accent)} /* Statut de collecte (obligatoire / optionnel·valorisant / complémentaire) — Mon espace, piloté par la recette de la fonction */ .me-tag{display:inline-flex;align-items:center;font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2px 7px;border-radius:999px;line-height:1.5;white-space:nowrap;vertical-align:middle} .me-tag.req{background:rgba(216,184,120,.16);color:var(--b-gold);border:1px solid rgba(216,184,120,.4)} .me-tag.opt{background:var(--card-2);color:var(--muted);border:1px solid var(--border)} .me-grp{margin:2px 0 16px;padding-left:11px;border-left:3px solid var(--border)} .me-grp.req{border-left-color:var(--b-gold)} .me-grp.opt{border-left-color:var(--border-strong)} .me-grp-t{font-size:12.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;display:flex;align-items:center;gap:7px;color:var(--text)} .me-grp.req .me-grp-t .icon{color:var(--b-gold)} .me-grp.opt .me-grp-t .icon{color:var(--muted)} .me-grp-d{font-size:12px;color:var(--muted);line-height:1.55;margin-top:4px} .me-encour{font-size:12.5px;color:var(--muted);line-height:1.55;margin:-4px 0 16px;padding-left:11px;border-left:3px solid var(--border-strong)} .me-encour b{color:var(--text);font-weight:600} .me-compl{margin-top:6px;border-top:1px dashed var(--border);padding-top:16px} .me-compl>summary{cursor:pointer;font-size:12.5px;font-weight:600;color:var(--muted);list-style:none;display:flex;align-items:center;gap:8px;user-select:none} .me-compl>summary::-webkit-details-marker{display:none} .me-compl>summary::before{content:"▸";font-size:10px;transition:transform .15s;color:var(--muted)} .me-compl[open]>summary::before{transform:rotate(90deg)} .me-compl>summary:hover{color:var(--text)} .me-compl-n{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--card-2);border:1px solid var(--border);font-size:11px;font-weight:600;color:var(--muted)} .me-compl-d{font-size:12px;color:var(--muted);line-height:1.55;margin:10px 0 18px} .me-compl .me-gblock:last-child{margin-bottom:6px} /* Carte-mission (Mon espace) : libellés de champs + tag « situation » par mission */ .me-elabel{display:block;font-size:11.5px;font-weight:600;color:var(--muted);margin:0 0 5px} .me-elabel .icon{color:var(--accent);vertical-align:-2px;margin-right:3px} .me-elabel-h{font-weight:400;color:var(--muted-2)} .me-sit{margin:2px 0 12px} .me-sit-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px} .me-sit-chip{font-family:inherit;font-size:12px;padding:5px 11px;border-radius:999px;border:1px solid var(--border);background:var(--card);color:var(--muted);cursor:pointer;transition:border-color .12s,background .12s,color .12s} .me-sit-chip:hover{border-color:var(--border-strong)} .me-sit-chip.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);font-weight:600} .me-refcard{border:1px solid var(--border);border-radius:12px;padding:14px 15px;margin:8px 0 12px} .me-refcard .me-twocol{margin-bottom:10px} .me-refcard .me-input{margin-bottom:0} .me-mob3{display:flex;gap:14px;align-items:flex-start;margin-bottom:6px} .me-mob3 .me-mob-daily{flex:1;min-width:150px;margin-bottom:0} .me-mob-tt{flex:1.7;min-width:250px;border:1px solid var(--border);border-radius:10px;padding:9px 11px 11px} .me-mob-tt-h{display:flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--accent);margin-bottom:7px} .me-mob-tt-row{display:flex;gap:12px} .me-mob-tt-row .me-ed{flex:1;margin-bottom:0} .me-period{display:flex;align-items:center;gap:8px} .me-period-d{flex:1;min-width:0} .me-period-sep{color:var(--muted-2);flex:none} .me-period-now{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--muted);white-space:nowrap;flex:none;cursor:pointer} .me-period-now input{margin:0} .me-geo{position:relative} .me-geo-list{position:absolute;left:0;right:0;top:100%;z-index:30;background:var(--card);border:1px solid var(--border-strong);border-radius:10px;margin-top:4px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.14)} .me-geo-opt{padding:9px 12px;font-size:13px;cursor:pointer} .me-geo-opt:hover{background:var(--accent-soft)} .me-geo-dept{color:var(--muted-2);font-size:11.5px} .me-step{display:flex;align-items:center;gap:6px} .me-step .me-input{text-align:center} .me-step-b{flex:none;width:36px;align-self:stretch;border:1px solid var(--border);background:var(--card);border-radius:9px;color:var(--accent);font-size:18px;font-weight:600;cursor:pointer;line-height:1} .me-step-b:hover{background:var(--accent-soft)} .me-warn{display:flex;align-items:flex-start;gap:10px;background:rgba(196,116,44,.1);border:1px solid rgba(196,116,44,.45);border-radius:9px;padding:11px 13px;font-size:12.5px;line-height:1.5;margin-bottom:10px} .me-warn-icon{font-size:16px;flex-shrink:0;margin-top:1px} .me-ancrage-rp{padding:7px 10px 8px;background:var(--card-2);border-radius:9px;margin-bottom:6px;font-size:13px} .me-ancrage-vide{color:var(--muted-2)} .me-ancrage{display:flex;align-items:center;gap:8px;padding:7px 10px;background:var(--card-2);border-radius:9px;margin-bottom:5px} .me-ancrage-label{flex:1;font-size:13px} .me-anc-add-row{display:flex;gap:8px;align-items:center} .me-anc-add-row .me-input{flex:1;min-width:0} .me-zp-geo{max-width:400px;margin-bottom:6px} .me-link{background:none;border:none;padding:0;color:var(--accent);cursor:pointer;font-size:inherit;text-decoration:underline} @media(max-width:768px){.me-wrap,.me-grid,.me-twocol,.me-civrow,.me-ctrow{grid-template-columns:minmax(0,1fr)}.me-li .me-li-niv{width:120px}.me-mob3,.me-mob-tt-row,.me-anc-add-row{flex-direction:column;align-items:stretch}.me-mob-tt,.me-mob3 .me-mob-daily{min-width:0}.me-h2{flex-wrap:wrap}} /* Mon espace mobile : le rail d'onglets passe en barre HORIZONTALE (sinon ~400px verticaux avant le 1er champ). */ @media (max-width:768px){ .me-spine{display:flex;flex-wrap:wrap;gap:4px 10px;padding:4px 0;} .me-line{display:none;} .me-node{padding:6px 2px;align-items:center;} .me-lab{padding-top:0;} .me-nph{display:none;} } /* Cibles tactiles : agrandit la zone cliquable des icônes de nav sur mobile. */ @media (max-width:768px){ .nav-r .icon-link, .nav-r .icon-btn { padding:5px; } } /* --- Page --- */ /* Largeur UNIQUE pour toutes les pages (CV, Leads, Accueil, Compte) = 1200 px (juste milieu). */ .page { max-width:1200px; margin:0 auto; padding:30px 24px 50px; } .hello { font-size:13.5px; color:var(--muted-2); } .hello .dispo { color:#6fd49b; font-weight:600; } .hello a.dispo { text-decoration:none; } .hello a.dispo:hover { text-decoration:underline; } .hello .dispo.soon { color:var(--b-gold); } /* disponible à une date future */ .hello .dispo.mission { color:var(--muted); } /* en mission → on n'annonce PAS de dispo (neutre) */ .hello .dispo.todo { color:var(--muted); } /* non renseignée → invite à préciser */ h1.greet { font-family:'Playfair Display',serif; font-size:34px; font-weight:600; margin:3px 0 22px; } /* --- Hero --- */ .hero { border-radius:24px; overflow:hidden; box-shadow:var(--hero-shadow); margin-bottom:26px; } .hero-in { background:linear-gradient(120deg,#5b4bd6 0%,#8a6ff0 50%,#a2b7f2 100%); padding:30px 32px; position:relative; color:#fff; } .hero-in .orb { position:absolute; right:-40px; top:-40px; width:190px; height:190px; border-radius:50%; background:rgba(255,255,255,.10); } .kicker { font-size:11px; letter-spacing:.16em; text-transform:uppercase; background:rgba(255,255,255,.22); padding:6px 13px; border-radius:20px; display:inline-block; } .hero h3 { font-family:'Playfair Display',serif; font-size:30px; font-weight:600; margin:15px 0 6px; } .hero .meta { font-size:14.5px; opacity:.93; } .btn-w { margin-top:20px; display:inline-block; background:#fff; color:#33408c; font-weight:600; font-size:14px; padding:11px 24px; border-radius:13px; transition:transform .15s; } .btn-w:hover { transform:translateY(-2px); } /* --- Sections --- */ .sec-h { font-size:14px; font-weight:600; margin:30px 0 15px; display:flex; align-items:center; justify-content:space-between; } .sec-h .count { font-size:12.5px; color:var(--accent); font-weight:500; } /* --- Grille de cartes --- */ .grid { display:grid; gap:15px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); } .card { background:var(--card); border:1px solid var(--border); border-radius:20px; padding:18px 19px; transition:transform .15s, border-color .15s; } .card:hover { transform:translateY(-3px); border-color:var(--border-strong); } .ico { width:40px; height:40px; border-radius:12px; background:var(--accent-soft); display:flex; align-items:center; justify-content:center; } .ico .icon { width:21px; height:21px; color:var(--accent); } .pill { font-size:11.5px; color:var(--accent); background:var(--accent-soft); padding:4px 10px; border-radius:9px; } .tn { font-size:15px; font-weight:600; margin:3px 0; } .ts { font-size:12.5px; color:var(--muted-2); } /* --- Bento « tous les services » --- */ .bento { display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); } .tile { border-radius:20px; padding:17px 18px; min-height:128px; display:flex; flex-direction:column; justify-content:space-between; transition:transform .15s; } .tile:hover { transform:translateY(-3px); } .glass { background:var(--card); border:1px solid var(--border); } .av { width:24px; height:24px; border-radius:50%; border:2px solid var(--card); } /* --- Pied de page --- */ footer { max-width:960px; margin:0 auto; padding:24px; color:var(--muted-2); font-size:12px; display:flex; justify-content:center; gap:18px; border-top:1px solid var(--border); } /* --- Page de connexion --- */ .auth-body { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; background:radial-gradient(1100px 600px at 70% -10%, rgba(110,90,230,.30), transparent 60%), var(--bg); } .auth-wrap { width:100%; max-width:400px; text-align:center; } .auth-card { background:var(--card); border:1px solid var(--border); border-radius:24px; padding:38px 34px 32px; box-shadow:var(--shadow); text-align:left; } .auth-card .logo.big { display:flex; justify-content:center; margin-bottom:18px; } .auth-title { font-size:28px; font-weight:600; text-align:center; } .auth-sub { font-size:13.5px; color:var(--muted); text-align:center; margin:6px 0 24px; } .fld { display:block; margin-bottom:15px; } .fld span { display:block; font-size:12.5px; color:var(--muted); margin-bottom:6px; } .fld input { width:100%; background:var(--card-2); border:1px solid var(--border); border-radius:12px; padding:12px 14px; color:var(--text); font-size:14.5px; font-family:inherit; transition:border-color .15s; } .fld input:focus { outline:none; border-color:var(--accent); } .btn-accent { width:100%; margin-top:8px; background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:var(--accent-ink); font-weight:600; font-size:15px; padding:13px; border:none; border-radius:13px; cursor:pointer; transition:transform .15s, filter .15s; } .btn-accent:hover { transform:translateY(-2px); filter:brightness(1.05); } .auth-error { background:rgba(224,130,153,.14); color:#e08299; border:1px solid rgba(224,130,153,.3); font-size:13px; padding:10px 13px; border-radius:11px; margin-bottom:18px; } .auth-foot { font-size:12px; color:var(--muted-2); margin-top:20px; } /* --- Responsive --- */ @media (max-width:768px) { .nav { padding:13px 18px; } .page { padding:22px 16px 40px; } h1.greet { font-size:27px; } .hero-in { padding:24px 22px; } .hero h3 { font-size:23px; } } /* ============================================================================ Présence « en ligne » — anneau vert GÉNÉRIQUE (cf. core/presence.py + _avatar.html). Toute photo/avatar portant la classe `online` l'embarque (membre vu < 5 min). L'ombre portée n'est PAS rognée par overflow:hidden (elle est externe) → marche sur et initiales. Variante `kyb` (Kyberneo) : anneau doré. Les pages avec un style d'avatar dédié (communauté, vitrine) gardent leurs sélecteurs spécifiques ; cette règle couvre tout le reste d'un coup. ========================================================================== */ .online { box-shadow:0 0 0 2px #34d399, 0 0 0 4px rgba(52,211,153,.22); } .kyb.online { box-shadow:0 0 0 2px #d8b878, 0 0 0 4px rgba(52,211,153,.45); }