/* ============================================================================ 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); /* Crans de notation (cf. .me-seg-dot). ⛔ Ils avaient jusqu'ici --card-2 pour fond éteint et de l'or à 55 % pour fond allumé : soit un gris IDENTIQUE au fond des cartes et un or pâle, sur 9 px de haut. Un testeur externe l'a résumé le 25/08/2026 : « pas très lisible ». Compter « 3 sur 5 » demandait de repérer où s'arrêtait un or délavé sur un gris invisible. */ --cran-vide:#131319; --cran-bord:rgba(255,255,255,.20); --cran-plein:#d8b878; --cran-plein-bord:#e8c87a; --ok:#5dcaa5; /* vert « validé / en ligne » lisible sur fond sombre */ --gold-ink:#e8c87a; /* or « vérifié / Kyberneo » lisible sur fond sombre */ /* ⭐ LE NUMÉRO D'APPEL DU PIED DE PAGE. Or de marque sur fond sombre, NOIR sur fond clair — arbitrage du propriétaire le 28/08/2026, et il rejoint une contrainte déjà écrite dans cette feuille : « l'or de marque #d8b878 tombe à 1,7:1 sur fond clair », donc illisible en texte. ⚠️ On n'emploie PAS `--gold-ink` ici, qui vaut #7d5f10 en mode clair — un or assombri, pas un noir. Le propriétaire a demandé du noir : la règle maison est notée pour que ce choix se lise comme une décision et non comme une méconnaissance du jeton existant. */ --tel-couleur:#d8b878; --ok:#5fbf94; --ok-soft:rgba(95,191,148,.16); /* complétude : « fait » (vert validé) */ --warn:#e0a24a; --warn-soft:rgba(224,162,74,.15); --warn-ink:#3a2708; /* « à compléter » (ambre) */ --shadow:0 20px 46px rgba(0,0,0,.45); --hero-shadow:0 20px 46px rgba(110,90,230,.32); /* ⛔ Indispensable : sans color-scheme, le navigateur dessine TOUS les contrôles natifs en mode clair, quel que soit notre thème. Sur fond sombre ça donnait un glyphe de calendrier NOIR sur noir (champs type=month/date du Parcours), des cases à cocher blanches, et un calendrier surgissant clair en pleine page sombre. Le déclarer fait suivre au navigateur : glyphes, cases, boutons radio, listes déroulantes, ascenseurs ET le calendrier surgissant. */ color-scheme: dark; } [data-theme="light"] { color-scheme: light; /* contrepartie du color-scheme:dark ci-dessus — les contrôles natifs suivent le thème */ --bg:#eceef6; --nav-bg:rgba(246,247,251,.90); --surface:#f6f7fb; --card:#ffffff; --card-2:#f3f5fb; --text:#1a1c24; --muted:#5c5f74; --muted-2:#686b80; /* assombri (était #7a7d92) → texte secondaire ≥ AA sur fond clair */ --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); /* ⚠️ Sur fond clair on ne peut pas « creuser » avec du noir ni remplir avec l'or du thème sombre : l'un ferait un trou, l'autre disparaîtrait. Le vide est donc un gris franchement plus soutenu que --card-2, et l'or est assombri pour rester or ET lisible. */ --cran-vide:#dfe3f0; --cran-bord:rgba(20,22,40,.24); --cran-plein:#b3862a; --cran-plein-bord:#98701f; --ok:#1f9d6b; /* vert assombri pour rester lisible sur fond clair */ --gold-ink:#7d5f10; /* or assombri pour rester lisible (≥ AA) sur fond clair, même sur le fond de page teinté */ --tel-couleur:var(--text); /* fond clair : noir, cf. la note du bloc sombre */ --ok:#1f8a5f; --ok-soft:rgba(31,138,95,.12); /* complétude : « fait » (vert, mode clair) */ --warn:#b06a12; --warn-soft:rgba(176,106,18,.12); --warn-ink:#ffffff; /* « à compléter » (ambre, mode clair) */ --shadow:0 18px 40px rgba(40,50,90,.14); --hero-shadow:0 18px 40px rgba(110,90,230,.26); } /* ── Mode JOUR : lisibilité des accents OR ────────────────────────────────────────────── L'or de marque (#d8b878) reste excellent sur fond SOMBRE (mode validé), mais tombe à ~1,7:1 en TEXTE sur fond clair → illisible (puces, libellés, liens, valeurs dorés des pages publiques). On l'assombrit ici (var(--gold-ink)) UNIQUEMENT en mode clair. Les fonds/bordures/boutons dorés (où l'or porte un texte foncé ou sert de fond) ne sont pas touchés ; le mode sombre non plus. !important : bat les styles inline « color:var(--gold) » des bandeaux TJM. */ [data-theme="light"] .pubnav-cta, [data-theme="light"] .lp-eyebrow, [data-theme="light"] .lp-chip, [data-theme="light"] .lp-see, [data-theme="light"] .lp-tile-go, [data-theme="light"] .lp-stat svg, [data-theme="light"] .lp-seal, [data-theme="light"] .lp-band a, [data-theme="light"] .lp-tjm a, [data-theme="light"] .ob-eyebrow, [data-theme="light"] .ob-row .v, [data-theme="light"] .ob-me .seg b, [data-theme="light"] .rs-eyebrow, [data-theme="light"] .rs-tile .go, [data-theme="light"] .rs-also a, [data-theme="light"] .rs-callout a, [data-theme="light"] .rs-links a span, [data-theme="light"] .ph-kicker, [data-theme="light"] .ph-write, [data-theme="light"] .lbl.phare, [data-theme="light"] .g-kicker, [data-theme="light"] .g-cta, [data-theme="light"] .g-bandnum, [data-theme="light"] .b-kicker, [data-theme="light"] .b-cta, [data-theme="light"] .pv-kick, [data-theme="light"] .pv-cta, [data-theme="light"] .fp-cta, [data-theme="light"] .ep-kick, [data-theme="light"] .ep-cta, [data-theme="light"] .ep-seal, [data-theme="light"] .ep-chip, [data-theme="light"] .ep-chap .num, [data-theme="light"] .ep-q .lab, [data-theme="light"] .ep-figure b, [data-theme="light"] .ep-chap.on .ep-ctitle { color: var(--gold-ink) !important; } * { box-sizing:border-box; margin:0; padding:0; } /* Réserve EN PERMANENCE la gouttière de l'ascenseur : la largeur utile reste identique que la page soit courte (À propos) ou longue (Le Cercle, landings). Sans ça, l'apparition/disparition de la barre de défilement décale de ~15px le bandeau full-bleed centré → impression d'instabilité. Sans effet sur mobile (ascenseurs en superposition, largeur nulle). */ html { scrollbar-gutter:stable; } 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:center; gap:26px; /* TOUT centré : logo + menu + actions = UN bloc */ padding:15px 26px; background:var(--nav-bg); backdrop-filter:blur(10px); /* App plein écran (Capacitor/PWA standalone) : réserver la hauteur de la barre d'état iOS. */ padding-top:calc(15px + env(safe-area-inset-top, 0px)); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:10; } /* Barre ENTIÈREMENT CENTRÉE : logo, menu ET actions (Parrainer, icônes, avatar) ne forment qu'UN SEUL bloc centré — autant de vide à gauche qu'à droite. Arbitrage ASSUMÉ : la symétrie l'emporte sur le réflexe « mon compte est en haut à droite ». Sous 1280 px, retour à logo à GAUCHE / burger à DROITE (convention mobile : centrer deux éléments sur une barre étroite ferait bancal) — cf. media query. */ .nav-l { display:flex; align-items:center; gap:26px; } /* logo + liens */ .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:20px; } .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; } /* Repère de titre (icône dorée des en-têtes de page) : RÉSERVÉ AU MOBILE. Sur PC il n'a aucune taille et s'afficherait en géant, donc masqué par défaut ; dimensionné seulement sous 768 px. */ .ptag-ic { display:none; } @media(max-width:768px){ .ptag-ic { display:inline-block; width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2; vertical-align:-2px; 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:5px; color:var(--text); cursor:pointer; align-items:center; justify-content:center; } .nav-burger .icon { width:20px; height:20px; } /* aligné sur les autres icônes de la barre (lune/mail/cloche) */ .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; } .navdrawer-logout { display:block; width:100%; margin-top:10px; padding:11px; background:none; border:1px solid var(--border); border-radius:9px; color:var(--muted); font:inherit; font-size:13.5px; cursor:pointer; transition:color .15s, border-color .15s; } .navdrawer-logout:hover { color:var(--accent); border-color:var(--accent); } /* ============================================================================ 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-burger { order:1; } /* mobile : burger AVANT la photo (inversion demandée) */ .nav-r .ava-wrap { order:2; } /* → la photo passe à l'extrême droite */ .nav { gap:8px; } /* barre étroite : resserrer logo↔actions pour que l'avatar ne soit pas rogné au bord */ .nav-r { gap:9px; } .nav-r .nav-cta { display:none; } /* « Parrainer » de la barre → présent dans le pied du tiroir */ .nav { justify-content:space-between; } /* liens masqués → logo à GAUCHE, burger à DROITE (convention mobile) */ } .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; } } /* ⭐ LE DIAMÈTRE DE RÉFÉRENCE DES VIGNETTES DE MEMBRE, déclaré UNE fois et partagé. Demandé par le propriétaire le 28/08/2026 : « la taille des vignettes de la même taille que la vignette en haut à droite ». ⛔ Écrire 36 px à deux endroits, c'est faire de cette égalité une COÏNCIDENCE — vraie le jour où on l'écrit, fausse au premier ajustement de l'un des deux. Le jeton la rend VRAIE PAR CONSTRUCTION : la liste du forum s'y réfère (forum/_styles.html), et changer ce nombre déplace les deux ensemble. ⚠️ C'est une DIMENSION, pas une couleur : elle vit hors des blocs de thème, qui la redéfiniraient inutilement dans chacun. */ :root { --ava-taille:36px; } .ava { width:var(--ava-taille); height:var(--ava-taille); 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:0 0 48px; } /* top:0 → « Mon compte » démarre à la même hauteur que mon_espace/mon_profil (sans ce wrapper) : en-tête aligné sur les 4 onglets */ .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 compte — barre d'onglets + interrupteurs de préférences */ .mc-tabs { display:flex; align-items:center; gap:4px; border-bottom:1px solid var(--border); margin:0 0 22px; /* ⛔ Mesuré en 375 px le 2026-08-23 : sans ces trois lignes, la barre réclamait 567 px pour 343 disponibles et faisait DÉRIVER TOUTE LA PAGE de 208 px, sur les dix onglets. Aucune media query ne la citait. Elle défile désormais sur elle-même, sans ascenseur visible. */ overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; -webkit-overflow-scrolling:touch; } .mc-tabs::-webkit-scrollbar { display:none; } .mc-tab { flex:none; } /* un onglet ne se comprime pas : il sort du cadre défilant */ .mc-tab { display:inline-flex; align-items:center; gap:8px; background:none; border:0; border-bottom:2px solid transparent; color:var(--muted); font:inherit; font-size:13.5px; padding:10px 14px; cursor:pointer; margin-bottom:-1px; transition:color .15s, border-color .15s; text-decoration:none; } .mc-tab .icon { width:17px; height:17px; } .mc-tab:hover { color:var(--text); } .mc-tab.on { color:var(--text); font-weight:600; border-bottom-color:var(--accent); } .mc-tab-danger { margin-left:auto; color:#b9707a; padding:10px 12px; } .mc-tab-danger:hover { color:rgba(210,60,60,.95); } .mc-tab-danger.on { color:rgba(210,60,60,.95); border-bottom-color:rgba(210,60,60,.45); } .mc-saved { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:#7bbf8e; background:rgba(110,200,140,.10); border:1px solid rgba(110,200,140,.22); border-radius:8px; padding:6px 11px; margin:0 0 16px; } .mc-pref-intro { font-size:13px; color:var(--muted); line-height:1.6; margin:0 0 10px; } .mc-pref-note { display:flex; align-items:flex-start; gap:8px; font-size:12px; color:var(--gold-ink,#d9c9a3); background:rgba(216,184,120,.09); border:1px solid rgba(216,184,120,.28); border-radius:9px; padding:9px 12px; line-height:1.5; margin:0 0 18px; } .mc-pref-note .icon { color:#d8b878; flex:none; margin-top:2px; } .mc-pref-head { display:grid; grid-template-columns:1fr 60px 60px 68px; gap:12px; padding:0 4px 8px; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted-2); } .mc-pref-head span:not(:first-child) { text-align:center; } .mc-pref-head span:last-child { color:#d8b878; } .mc-pref-row { display:grid; grid-template-columns:1fr 60px 60px 68px; gap:12px; align-items:center; padding:14px 4px; border-top:1px solid var(--border); } .mc-pref-t { font-size:13.5px; font-weight:500; color:var(--text); } .mc-pref-d { font-size:12px; color:var(--muted); line-height:1.5; margin-top:2px; } .mc-pref-c { display:flex; justify-content:center; } .mc-pref-push { background:rgba(216,184,120,.05); border-radius:8px; margin:-8px 0; padding:8px 0; } .mc-pref-na { color:var(--muted-2); font-size:14px; } .mc-sw { position:relative; display:inline-block; width:38px; height:22px; cursor:pointer; } .mc-sw input { position:absolute; opacity:0; width:0; height:0; } .mc-sw-t { position:absolute; inset:0; background:var(--card-2); border:1px solid var(--border-strong); border-radius:22px; transition:background .15s, border-color .15s; } .mc-sw-t::before { content:''; position:absolute; left:3px; top:50%; transform:translateY(-50%); width:15px; height:15px; border-radius:50%; background:var(--muted); transition:transform .15s, background .15s; } .mc-sw input:checked + .mc-sw-t { background:var(--accent-soft); border-color:var(--accent); } .mc-sw input:checked + .mc-sw-t::before { transform:translate(16px,-50%); background:var(--accent); } .mc-sw input:focus-visible + .mc-sw-t { box-shadow:0 0 0 3px var(--accent-soft); } .mc-pref-save { display:inline-flex; align-items:center; gap:8px; margin-top:20px; background:var(--accent); color:var(--accent-ink); border:0; border-radius:9px; padding:10px 16px; font:inherit; font-size:13.5px; font-weight:600; cursor:pointer; } .mc-pref-save:hover { background:var(--accent-2); } .mc-sms { margin-top:26px; padding-top:20px; border-top:1px solid var(--border); } .mc-sms-h { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--text); margin:0 0 10px; } .mc-sms-h .icon { color:#d8b878; } .mc-sms-notice { font-size:12px; color:var(--muted); line-height:1.6; background:rgba(216,184,120,.07); border:1px solid rgba(216,184,120,.24); border-radius:9px; padding:10px 12px; margin:0 0 12px; } .mc-sms-etat { font-size:13px; color:var(--text); margin:0 0 12px; } .mc-sms-intro { font-size:12.5px; color:var(--muted); margin:0 0 8px; } .mc-sms-form { display:flex; gap:10px; flex-wrap:wrap; align-items:center; } .mc-sms-input { flex:1; min-width:170px; padding:10px 12px; border:1px solid var(--border); border-radius:9px; background:var(--card); color:var(--text); font:inherit; font-size:14px; } .mc-sms-fam { display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--text); padding:7px 0; } .mc-sms-msg { font-size:13px; border-radius:9px; padding:9px 12px; margin:0 0 12px; } .mc-sms-success { background:rgba(46,125,70,.1); border:1px solid rgba(46,125,70,.35); color:#2e7d46; } .mc-sms-error { background:rgba(192,57,43,.08); border:1px solid rgba(192,57,43,.3); color:#c0392b; } .mc-sms-off { margin-top:10px; } .mc-linkbtn { background:none; border:0; color:var(--muted); font:inherit; font-size:12.5px; text-decoration:underline; cursor:pointer; padding:0; } .mc-linkbtn:hover { color:var(--text); } /* Mon compte — onglet « Mes infos » (tableau de bord) */ .mc-tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:16px; } .mc-tile { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:13px 15px; } .mc-tile-k { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; } .mc-tile-v { font-size:16px; font-weight:500; margin-top:7px; text-transform:capitalize; } .mc-tile-v b { font-family:'Playfair Display',serif; font-weight:700; font-size:22px; } .mc-stat-on { display:inline-flex; align-items:center; gap:7px; color:#7bbf8e; text-transform:none; } .mc-stat-att { color:#e0b15e; text-transform:none; } .mc-dot { width:8px; height:8px; border-radius:50%; background:#7bbf8e; display:inline-block; } .mc-compl-ok { display:inline-flex; align-items:center; gap:7px; font-size:13.5px; color:#7bbf8e; margin:0 0 14px; } .mc-compl-top { display:flex; justify-content:space-between; font-size:13px; color:var(--muted); margin-bottom:5px; } .mc-compl-top b { color:var(--text); } .mc-prog { height:9px; background:var(--card-2); border-radius:6px; overflow:hidden; margin:0 0 14px; } .mc-prog span { display:block; height:100%; background:linear-gradient(90deg,var(--accent),var(--b-gold)); border-radius:6px; } .mc-compl-h { font-size:12.5px; color:var(--muted); margin-bottom:9px; } .mc-chips { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:16px; } .mc-chip { font-size:11.5px; color:var(--b-gold); background:rgba(216,184,120,.10); border:1px solid rgba(216,184,120,.28); border-radius:20px; padding:3px 10px; } .mc-btns { display:flex; flex-wrap:wrap; gap:9px; } .mc-btn { display:inline-flex; align-items:center; gap:7px; font-size:12.5px; background:var(--card-2); border:1px solid var(--border); color:var(--text); border-radius:9px; padding:8px 13px; text-decoration:none; cursor:pointer; font-family:inherit; } .mc-btn:hover { border-color:var(--border-strong); } .mc-btn.primary { background:var(--accent-soft); border-color:var(--accent); color:var(--accent); } .mc-pub { display:flex; align-items:center; gap:10px; font-size:14px; margin-bottom:7px; flex-wrap:wrap; } .mc-pub code { font-size:13px; color:var(--text); background:var(--card-2); padding:3px 9px; border-radius:7px; } .mc-pub-meta { font-size:12.5px; color:var(--muted); line-height:1.6; margin:0 0 14px; } @media (max-width:560px) { .mc-tiles { grid-template-columns:1fr; } } /* --- 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-head-actions{display:flex;gap:8px;flex-wrap:wrap} @media (max-width:560px){ .me-head{flex-direction:column;align-items:stretch} /* mobile : « Mon espace » seul au-dessus */ .me-head-actions{flex-wrap:nowrap} /* … et les 2 boutons côte à côte sur UNE ligne */ .me-head-actions .me-cv-btn{flex:1;justify-content:center} } .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,.me-miss .me-affix{border-color:var(--warn)!important;background:var(--warn-soft)} .me-miss .me-affix .me-input{background:transparent} .me-miss .me-k,.me-miss .me-gk{color:var(--warn)!important} .me-miss .me-k::before,.me-miss .me-gk::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--warn);margin-right:7px;vertical-align:middle} .me-miss .me-k::after,.me-miss .me-gk::after{content:" · à renseigner";text-transform:none;letter-spacing:0;font-weight:400;color:var(--warn)} html[lang^="en"] .me-miss .me-k::after,html[lang^="en"] .me-miss .me-gk::after{content:" · to complete"} @keyframes me-pulse-ring{0%{outline-color:rgba(224,162,74,.8);outline-offset:2px}100%{outline-color:rgba(224,162,74,0);outline-offset:11px}} .me-pulse-on{outline:3px solid rgba(224,162,74,.8);border-radius:12px;animation:me-pulse-ring .95s ease-out 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} /* Complétude par section : « fait » = vert validé, « à compléter » = ambre + compteur (visible même actif). */ .me-node.done .me-ic{background:var(--ok);border-color:var(--ok);color:#08130d} .me-node.done.on .me-ic{box-shadow:0 0 0 4px var(--ok-soft)} .me-node.done .me-lab{color:var(--muted)} .me-node.todo .me-ic,.me-node.partial .me-ic{border-style:solid;border-color:var(--warn);color:var(--warn);background:var(--warn-soft)} .me-node.todo .me-lab,.me-node.partial .me-lab{color:var(--warn);font-weight:600} .me-node.todo.on .me-ic,.me-node.partial.on .me-ic{border-color:var(--warn);color:var(--warn);box-shadow:0 0 0 4px var(--warn-soft)} .me-node.todo.on .me-lab,.me-node.partial.on .me-lab{color:var(--warn)} /* Étape FACULTATIVE (ex. Vidéo) : présente => .done (vert) ; absente => .opt = NEUTRE, jamais « à compléter » (cercle gris pointillé, aucune couleur d'alerte) — cohérent avec « pas requis pour valider le profil ». */ .me-node.opt .me-ic{border-style:dashed;border-color:var(--border);color:var(--muted);background:var(--card)} .me-node.opt .me-lab{color:var(--muted)} .me-node.opt.on .me-ic{border-style:solid;border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)} .me-node.opt.on .me-lab{color:var(--accent);font-weight:600} .me-node-b{margin-left:auto;align-self:center;min-width:18px;height:18px;padding:0 6px;border-radius:9px;background:var(--warn);color:var(--warn-ink);font-size:11px;font-weight:600;line-height:18px;text-align:center} /* ═══ Filet d'or — surbrillance premium de la rubrique active du fil (validé dirigeant) ═══ Un filet doré (or de marque #d8b878) GLISSE sur la rubrique active, sur un verre teinté or. Cohabite avec les couleurs d'état : l'icône garde son vert « fait » / ambre « à compléter » ; le libellé + l'anneau passent en or (theme-aware via --gold-ink). Le rail mobile n'est pas concerné. Le déplacement est piloté par moveSlider() (mon_espace.html) via translateY/height du .me-slider. */ .me-slider{position:absolute;left:-8px;right:-6px;top:0;height:44px;border-radius:12px;z-index:0;opacity:0;pointer-events:none; background:linear-gradient(180deg,rgba(216,184,120,.17),rgba(216,184,120,.05)); border:1px solid rgba(216,184,120,.34); box-shadow:0 14px 28px -16px rgba(216,184,120,.45); transition:transform .34s cubic-bezier(.34,1.2,.4,1),height .34s cubic-bezier(.34,1.2,.4,1),opacity .22s ease} .me-slider::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0; background:linear-gradient(180deg,#ecca82,#d8b878);box-shadow:0 0 10px rgba(216,184,120,.6)} [data-theme="light"] .me-slider{background:linear-gradient(180deg,rgba(216,184,120,.30),rgba(216,184,120,.11));border-color:rgba(176,132,40,.42);box-shadow:0 14px 26px -18px rgba(176,132,40,.5)} @media (prefers-reduced-motion:reduce){.me-slider{transition:opacity .22s ease}} .me-node.on .me-lab, .me-node.done.on .me-lab,.me-node.todo.on .me-lab,.me-node.partial.on .me-lab,.me-node.opt.on .me-lab{color:var(--gold-ink);font-weight:600} .me-node.opt.on .me-ic{border-style:solid;border-color:rgba(216,184,120,.6);color:var(--gold-ink);background:linear-gradient(180deg,rgba(216,184,120,.22),rgba(216,184,120,.07))} .me-node.on .me-ic, .me-node.done.on .me-ic,.me-node.todo.on .me-ic,.me-node.partial.on .me-ic,.me-node.opt.on .me-ic{box-shadow:0 0 0 3px rgba(216,184,120,.18)} /* Carte-guide « Il vous reste » (piste B). */ .me-guide{display:flex;gap:16px;align-items:center;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:14px 16px;margin-bottom:18px} .me-guide-ring{position:relative;flex-shrink:0;width:58px;height:58px} .me-guide-ring-bg{stroke:var(--card-2)} .me-guide-ring-fg{stroke:var(--gold);transition:stroke-dashoffset .5s ease} .me-guide-pct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--text);font-family:'Playfair Display',Georgia,serif} .me-guide-body{min-width:0;flex:1} .me-guide-h{font-size:15px;color:var(--gold);font-family:'Playfair Display',Georgia,serif;margin-bottom:1px} .me-guide-sub{font-size:12px;color:var(--muted);margin-bottom:9px} .me-guide-items{display:flex;flex-wrap:wrap;gap:7px} .me-guide-item{display:inline-flex;align-items:center;gap:8px;background:var(--warn-soft);border:1px solid var(--warn);border-radius:9px;padding:5px 10px;cursor:pointer;font:inherit;transition:background .15s} .me-guide-idot{width:9px;height:9px;border-radius:50%;border:2px solid var(--warn);box-sizing:border-box;flex-shrink:0} .me-guide-ilab{font-size:12.5px;color:var(--text)} .me-guide-igo{display:inline-flex;align-items:center;gap:3px;font-size:11.5px;color:var(--warn);font-weight:600} .me-guide-item:hover{background:var(--warn);border-color:var(--warn)} .me-guide-item:hover .me-guide-ilab,.me-guide-item:hover .me-guide-igo{color:var(--warn-ink)} .me-guide-item:hover .me-guide-idot{border-color:var(--warn-ink)} .me-nph{display:block;font-size:10px;color:var(--muted-2);margin-top:1px} /* Mon espace — sélecteur déroulant des sections (mobile, option B). Masqué sur desktop (le rail vertical reste). */ .me-msel{display:none} .me-msel-cur{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:var(--card);border:1px solid var(--border-strong);border-radius:12px;padding:10px 12px;cursor:pointer;font:inherit;color:var(--text)} .me-msel-ic{width:32px;height:32px;border-radius:9px;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;flex:0 0 auto} .me-msel-t{display:flex;flex-direction:column;line-height:1.25;min-width:0;flex:1} .me-msel-step{font-size:10.5px;color:var(--muted-2);text-transform:uppercase;letter-spacing:.4px} .me-msel-lab{font-size:15px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .me-msel-chev{margin-left:auto;color:var(--muted);flex:0 0 auto;transition:transform .15s} .me-msel.open .me-msel-chev{transform:rotate(180deg)} .me-msel-bar{height:5px;border-radius:5px;background:var(--card-2);overflow:hidden;margin:8px 2px 0} .me-msel-bar i{display:block;height:100%;width:0;background:var(--accent);border-radius:5px;transition:width .3s} .me-msel-list{margin-top:8px;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--card)} .me-msel-opt{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:none;border-bottom:1px solid var(--border);padding:11px 12px;cursor:pointer;font:inherit;font-size:13.5px;color:var(--muted)} .me-msel-opt:last-child{border-bottom:none} .me-msel-opt>.icon{color:var(--muted);flex:0 0 auto} .me-msel-opt-lab{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1} .me-msel-opt.on{background:var(--accent-soft);color:var(--accent)} .me-msel-opt.on>.icon{color:var(--accent)} .me-msel-opt-st{margin-left:auto;display:flex;align-items:center;flex:0 0 auto;color:var(--accent)} .me-rd{width:7px;height:7px;border-radius:50%;background:rgba(205,55,75,.85);display:inline-block} .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)} /* Champ à PRÉFIXE FIGÉ (ex. LinkedIn : linkedin.com/in/) — l'input garde .me-input pour l'autosave ; le cadre, le focus et l'état « manquant » passent sur le wrapper .me-affix. */ .me-affix{display:flex;align-items:stretch;width:100%;min-width:0;border:1px solid var(--border);border-radius:9px;background:var(--card);overflow:hidden;transition:border-color .15s,box-shadow .15s} .me-affix:hover{border-color:var(--border-strong)} .me-affix:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)} .me-affix-pre{display:flex;align-items:center;padding:0 9px 0 10px;font-size:14px;color:var(--muted-2);white-space:nowrap;user-select:none;border-right:1px solid var(--border)} .me-affix .me-input{flex:1;width:auto;border:0;border-radius:0;background:transparent;box-shadow:none;padding-left:8px} .me-affix .me-input:hover,.me-affix .me-input:focus{border:0;box-shadow:none} .me-miss .me-affix{border-color:var(--warn);background:var(--warn-soft)} .me-miss .me-affix .me-input{background:transparent} .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-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} /* ── Diplômes et certifications : la fiche pliée ───────────────────────────────── AVANT : un seul champ libre par ligne (« 1999 · Maths Sup · Valence »), donc aucun moyen de saisir séparément l'année, l'intitulé, l'établissement et la ville. ⭐ Le stockage reste UNE chaîne (le BO ne connaît que ça, et un diplôme est une valeur de référentiel partagée) : les quatre champs la composent, l'input d'origine est masqué mais reste la source de vérité — le moteur d'enregistrement est intact. */ .dp-list .me-li.dp-done{display:block;border:1px solid var(--border);border-radius:10px;padding:9px 12px;margin-bottom:8px} @media(max-width:760px){.dp-t{max-width:100%;flex:1 1 100%}.dp-act{margin-left:0}} .dp-src{display:none!important} .dp-view{display:flex;align-items:center;gap:11px;flex-wrap:wrap;min-width:0} .dp-y{flex:none;width:42px;font-size:13px;color:var(--gold-ink);font-variant-numeric:tabular-nums} .dp-y:empty::before{content:"—";color:var(--muted-2)} .dp-t{font-size:14px;color:var(--text);flex:0 1 auto;min-width:0;max-width:52%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dp-w{font-size:13px;color:var(--muted-2);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dp-act{display:flex;align-items:center;gap:7px;flex:none;margin-left:auto} .dp-mod{background:transparent;border:0;color:var(--muted-2);font-family:inherit;font-size:12.5px;cursor:pointer;padding:4px 6px;border-radius:7px} .dp-mod:hover{color:var(--accent);background:var(--accent-soft)} .dp-act .me-flag{min-width:0;margin-top:0} .dp-act .me-flag:empty{display:none} .dp-act .me-li-del{width:32px;height:32px} .dp-edit{display:none} .dp-list .me-li.dp-on .dp-edit{display:block;margin-top:11px;padding-top:11px;border-top:1px solid var(--border)} .dp-grid .mf-field,.dp-addfields .mf-field{margin-bottom:0} .dp-list[data-struct="diplome"] .dp-grid{grid-template-columns:88px minmax(0,1.5fr) minmax(0,1fr) minmax(0,.9fr)} .dp-list[data-struct="certif"] .dp-grid{grid-template-columns:88px minmax(0,1.6fr) minmax(0,1fr)} .dp-list .me-li-add{display:block;border:1px dashed var(--border-strong);border-radius:10px;padding:11px 12px;margin-top:6px} .dp-addfields{margin-bottom:11px} .dp-list .me-li-add[hidden]{display:none} .dp-cancel{background:transparent;border:0;color:var(--muted-2);font-family:inherit;font-size:12.5px;cursor:pointer;padding:6px 8px;margin-left:8px} .dp-cancel:hover{color:var(--text)} /* ⛔⛔ SPÉCIFICITÉ : la règle desktop ci-dessus vise `.dp-list[data-struct="…"] .dp-grid` — trois sélecteurs de classe. Une media query n'ajoute AUCUNE spécificité : un repli écrit `.dp-list .dp-grid` (deux) PERDAIT, et ne s'appliquait donc jamais. Mesuré en 375 px : quatre champs de 88, 61, 41 et 37 px, libellés superposés. Le repli doit égaler la règle qu'il corrige. */ @media(max-width:760px){ .dp-list[data-struct="diplome"] .dp-grid, .dp-list[data-struct="certif"] .dp-grid{grid-template-columns:minmax(0,1fr)} .dp-t{max-width:100%} } .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} /* Références : indice « e-mail ou téléphone » + message inline (aide, pas erreur) + champ à compléter */ .me-ref-hint{display:flex;align-items:center;gap:7px;margin:2px 0 8px;color:var(--muted);font-size:12.5px} .me-ref-hint .icon{color:var(--accent);opacity:.9} .me-input.me-input-need{border-color:var(--border-strong);background:var(--accent-soft)} .me-ref-msg{display:flex;gap:10px;align-items:flex-start;margin-top:12px;padding:12px 14px;background:var(--accent-soft);border:1px solid var(--border-strong);border-radius:10px} .me-ref-msg[hidden]{display:none} .me-ref-msg .icon{color:var(--accent);flex:none;margin-top:1px} .me-ref-msg strong{display:block;color:var(--text);font-size:13.5px;font-weight:600;margin-bottom:3px} .me-ref-msg span{display:block;color:var(--muted);font-size:13px;line-height:1.55} .me-ref-msg span+span{margin-top:6px} .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-rate{display:inline-flex;gap:4px;flex:none} /* ⛔ LA CIBLE N'EST PAS LA PASTILLE. Le point mesurait 20 × 9 px : au doigt on visait un voisin, et comme taper un point RÈGLE la note, une note juste partait de travers — avec sauvegarde immédiate. Désormais c'est l'ÉLÉMENT qui est la cible (20 × 32 px, 28 × 44 px au téléphone) et la pastille visible est peinte par ::before, strictement inchangée à l'œil. ⭐ La cible ne dépasse jamais de sa propre ligne : aucun appui ne peut donc atteindre la note de la ligne voisine. C'est ce que ferait une simple marge négative, et c'est pourquoi on ne l'utilise pas ici — trois notes sont empilées à 9 px l'une de l'autre au téléphone. */ .me-seg-dot{width:20px;height:32px;display:grid;place-items:center;background:none;border:0;border-radius:0;cursor:pointer;flex:none;-webkit-tap-highlight-color:transparent} .me-seg-dot::before{content:"";width:20px;height:9px;border-radius:3px;background:var(--cran-vide);border:1px solid var(--cran-bord);box-sizing:border-box;transition:background .12s,border-color .12s} .me-seg-dot:hover::before{border-color:var(--border-strong)} .me-seg-dot.on::before{background:var(--cran-plein);border-color:var(--cran-plein-bord)} /* ── Le MOT qui nomme le cran ──────────────────────────────────────────────────────────────────── ⭐ Ce n'est pas un ornement, c'est le correctif d'un malentendu. La réserve de points force la moyenne à 3 : l'échelle fabrique donc un CLASSEMENT RELATIF (« où est-ce dans mon éventail ») là où « 5/5 » se lit comme une NOTE ABSOLUE (« suis-je excellent »). On demandait ainsi à quelqu'un de séniorité réelle de se sous-noter, ce qu'il vit comme un mensonge — retour du 25/08/2026 : « la limitation des points ne conduit pas à la réalité, on est obligé de mettre des moyennes ». Le mot dit ce que le chiffre laissait croire de travers. */ .me-cran{flex:none;width:118px;text-align:right;font-size:11.5px;font-weight:600;color:var(--gold-ink); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .me-cran[data-n="1"],.me-cran[data-n="2"],.me-cran[data-n="3"]{color:var(--muted-2);font-weight:400} .me-cran:empty{display:none} /* Au téléphone la carte de langue passe en une colonne (voir plus bas) : la place existe pour des cibles de 28 × 44 px, et gap:0 supprime le dernier interstice mort entre deux points. */ @media(max-width:768px){ .me-rate{gap:0} .me-seg-dot{width:28px;height:44px} /* ⚠️ 140 px de crans + 118 px de mot ne tiennent pas à côté d'un libellé sur 375 px. Le mot passe donc SOUS la ligne au lieu de rogner le libellé du domaine — qui, lui, est irremplaçable. */ .me-cran{flex-basis:100%;width:auto;text-align:left;padding-left:2px} /* Sans wrap, un flex-basis:100% ne passe PAS à la ligne — il se contente d'écraser ses voisins. */ .me-chips-rated>.me-chip-rated.on{flex-wrap:wrap;row-gap:2px} } /* ── Pastilles à cliquer : UN SEUL système pour tout le formulaire de Mon espace ───────────── Choix du propriétaire (2026-08-22, « doré discret ») parmi 3 maquettes. Avant, deux formes coexistaient pour le MÊME geste (.me-chip-sel en rectangle 9px, .me-sit-chip en pilule) en deux tailles, et toutes en bleu-lavande --accent : ça jurait avec le kit doré des onglets repris, et le fond plein au repos transformait 15 situations en mur de boutons. Désormais : pilule unique, une seule taille, fond TRANSPARENT au repos, et sélection en doré discret. ⛔ Le doré en TEXTE passe OBLIGATOIREMENT par var(--gold-ink) (cf. le bloc « Mode JOUR » plus haut) : l'or de marque #d8b878 tombe à 1,7:1 sur fond clair. Couvre 7 onglets sur 9 : Identité, Parcours, Expertises, Contexte client, Zones, Références. */ .me-chips{display:flex;flex-wrap:wrap;gap:8px} .me-chip-sel{border:1px solid var(--border);background:transparent;color:var(--muted);border-radius:999px;padding:6px 13px;font-family:inherit;font-size:12.5px;cursor:pointer;transition:background .12s,border-color .12s,color .12s} .me-chip-sel:hover{border-color:var(--border-strong);color:var(--text)} .me-chip-sel.on{background:rgba(216,184,120,.12);border-color:rgba(216,184,120,.34);color:var(--gold-ink,#e8c87a);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:rgba(216,184,120,.12);border:1px solid rgba(216,184,120,.34);color:var(--gold-ink,#e8c87a);border-radius:999px;padding:4px 8px 4px 13px;font-size:12.5px;font-weight:600} .me-cf-del{background:none;border:none;color:var(--gold-ink,#e8c87a);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} /* Intérêt en attente de validation (proposition hors liste) : ton neutre, badge sablier */ .me-cf-att{background:var(--surface-2,rgba(120,120,120,.08));border-color:var(--border,#d9d9de);color:var(--muted,#6a6a73)} .me-cf-att .me-cf-del{color:var(--muted,#6a6a73)} .me-cf-badge{font-size:11px;margin-left:1px;cursor:help} /* Autocomplétion de la recherche de centres d'intérêt */ .me-ac{position:absolute;left:0;right:0;top:calc(100% + 3px);z-index:40;background:var(--card,#fff);border:1px solid var(--border,#d9d9de);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.12);overflow:hidden;max-height:280px;overflow-y:auto} .me-ac-opt{display:flex;flex-direction:column;gap:1px;padding:8px 12px;cursor:pointer;border-bottom:1px solid var(--border-soft,rgba(0,0,0,.05))} .me-ac-opt:last-child{border-bottom:none} .me-ac-opt:hover,.me-ac-opt.me-ac-on{background:var(--accent-soft)} .me-ac-opt .me-ac-lib{font-size:13.5px;font-weight:500;color:var(--text,#1a1a1f)} .me-ac-opt .me-ac-cat{font-size:11px;color:var(--muted,#8a8a93)} .me-ac-propose{padding:9px 12px;cursor:pointer;font-size:12.5px;color:var(--accent);font-weight:500} .me-ac-propose:hover,.me-ac-propose.me-ac-on{background:var(--accent-soft)} .me-ac-empty{padding:10px 12px;font-size:12px;color:var(--muted,#8a8a93)} /* ── Le catalogue à PARCOURIR, quand rien n'est tapé ───────────────────────────────────────────── ⛔ Avant, un champ vide ne montrait RIEN : la boîte n'affichait que les intérêts déjà choisis et une recherche vide renvoyait zéro résultat. Le texte d'aide promettait pourtant « cherchez dans la liste ». Un testeur externe en a conclu, logiquement, que la liste « n'était pas active ». */ .me-ac-intro{padding:9px 12px 7px;font-size:11.5px;color:var(--muted);border-bottom:1px solid var(--border)} .me-ac-cattitre{padding:9px 12px 4px;font-size:10px;letter-spacing:.10em;text-transform:uppercase; color:var(--muted-2);font-weight:700;position:sticky;top:0;background:var(--card)} .me-ac-catbox{display:flex;flex-wrap:wrap;gap:5px;padding:2px 12px 9px} .me-ac-pastille{display:inline-flex;align-items:center;font-size:12px;line-height:1;border-radius:20px; padding:7px 11px;border:1px solid var(--border);background:var(--card-2);color:var(--muted);cursor:pointer; min-height:30px} .me-ac-pastille:hover,.me-ac-pastille.me-ac-on{border-color:var(--border-strong);color:var(--text);background:var(--accent-soft)} /* Langues : cartes avec 3 scores */ /* ── Langues : un TABLEAU (choix PA 2026-08-22, piste C) ───────────────────────────────────── Avant : une carte haute par langue, avec « Oral / Lecture / Écriture » répété à chaque fois (4 langues = 12 fois). Les colonnes sont désormais nommées UNE fois dans .me-lang-th, et chaque langue tient sur une ligne. Le niveau d'ensemble est nommé en bout de ligne (le JS majNiv() écrit « Courant » plutôt qu'un muet 4/5 ; le détail des 3 notes est en info-bulle). ⛔ Les colonnes de .me-lang-th et de .me-lang-card doivent rester IDENTIQUES, sinon l'en-tête se désaligne des lignes. Sous 760px on retombe sur la carte empilée, libellés réaffichés. */ .me-lang-th{display:grid;grid-template-columns:minmax(90px,1.2fr) 118px 118px 118px minmax(104px,auto) 26px;align-items:end;gap:10px;padding:0 14px 7px;border-bottom:1px solid var(--border-strong);margin-bottom:2px} .me-lang-th>span{font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted-2);font-weight:700} .me-lang-list{display:flex;flex-direction:column;margin-bottom:14px} .me-lang-card{display:grid;grid-template-columns:minmax(90px,1.2fr) 118px 118px 118px minmax(104px,auto) 26px;align-items:center;gap:10px;border:0;border-bottom:1px solid var(--border);border-radius:0;padding:10px 14px;background:transparent;transition:background .12s} .me-lang-card:last-child{border-bottom:none} .me-lang-card:hover{background:var(--card-2)} .me-lang-card .me-lang-lbl{display:none} /* ⛔⛔ CHAQUE cellule est placée EXPLICITEMENT. Épingler un seul élément (le témoin) suffisait à déloger le nom vers la colonne 2 et à repousser la corbeille sur une 2e rangée : le placement automatique et un élément épinglé ne cohabitent pas. Tout est donc nommé, plus de surprise. Le témoin partage la cellule du NOM, calé à droite : la colonne fait ~340px pour un mot de 60, donc « enregistré » s'affiche sans créer de rangée et la ligne ne bouge pas d'un pixel. ⛔ Ne pas le loger dans la colonne Niveau : il masquerait le niveau pendant 2 s. */ .me-lang-card>.me-lang-name{grid-area:1/1;justify-self:start;max-width:calc(100% - 96px)} .me-lang-card>div.me-lang-score:nth-of-type(1){grid-area:1/2} .me-lang-card>div.me-lang-score:nth-of-type(2){grid-area:1/3} .me-lang-card>div.me-lang-score:nth-of-type(3){grid-area:1/4} .me-lang-card>.me-lang-niv{grid-area:1/5} .me-lang-card>.me-li-del{grid-area:1/6} .me-lang-card>.me-flag{grid-area:1/1;justify-self:end;align-self:center;margin:0;min-height:0;font-size:11px} .me-lang-card>.me-flag:empty{display:none} .me-lang-niv{font-size:11.5px;color:var(--gold-ink,#e8c87a);cursor:help} .me-lang-head{display:flex;align-items:center;gap:8px;margin-bottom:10px} .me-lang-name{font-weight:500;font-size:13.5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .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} @media(max-width:760px){ .me-lang-th{display:none} .me-lang-card{grid-template-columns:minmax(0,1fr) 26px;gap:7px;padding:12px 12px} .me-lang-card>.me-lang-name{grid-area:1/1;max-width:none} .me-lang-card>.me-li-del{grid-area:1/2} .me-lang-card>div.me-lang-score:nth-of-type(1){grid-area:2/1/auto/-1} .me-lang-card>div.me-lang-score:nth-of-type(2){grid-area:3/1/auto/-1} .me-lang-card>div.me-lang-score:nth-of-type(3){grid-area:4/1/auto/-1} .me-lang-card>.me-lang-niv{grid-area:5/1/auto/-1} .me-lang-card>.me-flag{grid-area:6/1/auto/-1;justify-self:start} .me-lang-card .me-lang-score{display:flex;align-items:center;gap:9px} .me-lang-card .me-lang-lbl{display:block;min-width:56px} } .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} /* Les langues proposées à l'ajout sont des ACTIONS, pas des pastilles sélectionnées : elles avaient pourtant la forme et la couleur d'accent d'une pastille cochée, ce qui prêtait à confusion. Elles prennent donc l'allure d'une pastille AU REPOS (hairline neutre) + un « + » explicite, et ne s'allument en doré qu'au survol. ⛔ Ne pas les mettre en doré plein : ce n'est pas un état. */ .me-lang-pick{display:inline-flex;align-items:center;gap:5px;padding:6px 13px;border:1px solid var(--border);border-radius:999px;background:transparent;color:var(--muted);font-family:inherit;font-size:12.5px;font-weight:500;cursor:pointer;transition:border-color .12s,color .12s;line-height:1.4} .me-lang-pick::before{content:"+";font-size:13px;line-height:1;opacity:.7} .me-lang-pick:hover,.me-lang-pick.on{border-color:rgba(216,184,120,.45);color:var(--gold-ink,#e8c87a)} .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{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--muted);margin-left:auto;white-space:nowrap;transition:color .15s} .me-b-dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none} .me-budget.me-b-todo{color:#d6a34a} /* ambre : des points restent a placer */ .me-budget.me-b-over{color:#e0803a} /* orange : trop de points depenses */ .me-budget.me-b-done{color:#16a34a} /* vert : reparti pile-poil */ .me-repartir{font:inherit;font-size:11px;font-weight:600;color:var(--accent);background:var(--accent-soft,rgba(139,141,252,.12));border:1px solid var(--border);border-radius:7px;padding:3px 9px;margin-left:8px;cursor:pointer;white-space:nowrap;transition:border-color .14s,background .14s} .me-repartir:hover{border-color:var(--accent)} .me-repartir[hidden]{display:none} @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 14px;border:1px solid var(--border);border-radius:18px;background:transparent;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:rgba(216,184,120,.12);border-color:rgba(216,184,120,.34)} .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(--gold-ink,#e8c87a);font-weight:600} /* Même correction pour les notes d'expertise, en 7 px celles-là — mais avec un danger de plus : une pastille CHOISIE occupe une ligne pleine largeur, et cette ligne DÉSÉLECTIONNE l'expertise au clic. Un appui à 6 px des points ne réglait donc pas la note : il retirait l'expertise. ⭐ D'où le tampon « padding:6px 12px » + « margin:-6px -12px » : il étend la zone INERTE de .me-chip-rate (le gestionnaire de ligne renvoie sur closest('.me-chip-rate')) sans rien déplacer, puisque la marge négative rend à la mise en page ce que le remplissage lui prend. 12 px de côté, parce que c'est EXACTEMENT le « gap:12px » qui sépare le libellé des points : le tampon couvre donc tout l'interstice sans jamais recouvrir une lettre du libellé. Un appui de travers ne fait plus rien, au lieu de défaire un choix. */ .me-chip-rate{display:flex;gap:0;line-height:1;padding:6px 12px;margin:-6px -12px} .me-chip-rate .me-seg-dot{width:26px;height:40px;border-radius:0} .me-chip-rate .me-seg-dot::before{width:7px;height:7px;border-radius:50%;background:var(--border);border-color:var(--border);transition:background .1s,border-color .1s} .me-chip-rate .me-seg-dot.on::before{background:var(--gold-ink,#e8c87a)} /* 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:12.5px;padding:6px 13px;border-radius:999px;border:1px solid var(--border);background:transparent;color:var(--muted);cursor:pointer;transition:border-color .12s,background .12s,color .12s} .me-sit-chip:hover{border-color:var(--border-strong);color:var(--text)} .me-sit-chip.on{background:rgba(216,184,120,.12);border-color:rgba(216,184,120,.34);color:var(--gold-ink,#e8c87a);font-weight:600} /* ── Références : une fiche contact, pas un formulaire ─────────────────────────── Une référence est une PERSONNE : initiales, nom, fonction et société, puis les moyens de la joindre. Les champs ne s'ouvrent qu'à la demande — sauf si la fiche est incomplète, auquel cas elle s'ouvre d'elle-même. ⛔ L'état incomplet reste NEUTRE, jamais en ambre d'alerte : les références sont hors complétude par décision explicite (EXIGER_REFERENCE = False), précisément pour retirer la pression sur un sujet où les managers renâclent. */ .me-refcard{border:1px solid var(--border);border-radius:12px;padding:13px 15px;margin:8px 0 12px} .me-ref-view{display:flex;align-items:flex-start;gap:12px} .me-ref-ini{width:40px;height:40px;flex:none;border-radius:50%;background:rgba(216,184,120,.14);color:var(--gold-ink);display:flex;align-items:center;justify-content:center;font-size:13.5px;font-weight:600;letter-spacing:.02em} .me-ref-ini:empty::before{content:"?";opacity:.5} .me-ref-id{flex:1;min-width:0} .me-ref-l1{display:flex;align-items:center;gap:9px;flex-wrap:wrap} .me-ref-nom{font-size:15px;color:var(--text)} .me-ref-badge{font-size:11px;padding:3px 9px;border-radius:999px;white-space:nowrap} .me-ref-badge.ok{background:var(--ok-soft);color:var(--ok)} .me-ref-badge.todo{background:var(--card-2);color:var(--muted-2)} .me-ref-sub{font-size:13px;color:var(--muted);margin-top:2px} .me-ref-sub:empty{display:none} .me-ref-coord{display:flex;gap:16px;flex-wrap:wrap;margin-top:9px;font-size:12.5px;color:var(--muted-2)} .me-ref-coord:empty{display:none} .me-ref-coord>span{display:inline-flex;align-items:center;gap:5px;min-width:0} .me-ref-coord .icon{color:var(--accent);flex:none} .me-ref-act{display:flex;align-items:center;gap:6px;flex:none} .me-ref-mod{background:transparent;border:0;color:var(--muted-2);font-family:inherit;font-size:12.5px;cursor:pointer;padding:4px 6px;border-radius:7px} .me-ref-mod:hover{color:var(--accent);background:var(--accent-soft)} .me-ref-act .me-flag{margin-top:0} .me-ref-act .me-flag:empty{display:none} /* Les champs : repliés, et ils ne poussent la fiche que quand on les demande. */ .me-refcard .me-ref-edit{display:none} .me-refcard.me-ref-on .me-ref-edit{display:block;margin-top:14px;padding-top:14px;border-top:1px solid var(--border)} .me-ref-edit .mf-field{margin-bottom:14px} .me-ref-done{background:transparent;border:1px solid var(--border-strong);color:var(--accent);border-radius:9px;padding:7px 15px;font-family:inherit;font-size:13px;cursor:pointer} .me-ref-done:hover{background:var(--accent-soft)} .me-ref-fac{margin:2px 0 10px;color:var(--muted-2);font-size:12px} /* Le pacte : ce qui lève la réticence passe AVANT les champs, et reste visible. */ .me-ref-pacte{display:flex;gap:11px;align-items:flex-start;margin:0 0 16px;padding:13px 15px;background:var(--accent-soft);border:1px solid var(--border-strong);border-radius:11px;max-width:680px} .me-ref-pacte .icon{color:var(--accent);flex:none;margin-top:2px} .me-ref-pacte strong{display:block;color:var(--text);font-size:13.5px;font-weight:600;margin-bottom:4px} .me-ref-pacte span{display:block;color:var(--muted);font-size:12.8px;line-height:1.55} .me-ref-pacte span+span{margin-top:5px} .me-ref-pacte-ask{color:var(--muted-2)!important} .me-ref-pacte-ask b{color:var(--text);font-weight:600} /* Ajout : un bouton, puis le formulaire minimal. */ .me-ref-open,.dp-open{display:inline-flex;align-items:center;gap:7px;border:1px dashed var(--border-strong);background:transparent;color:var(--accent);border-radius:10px;padding:10px 16px;font-family:inherit;font-size:13px;cursor:pointer} .me-ref-open:hover,.dp-open:hover{background:var(--accent-soft)} .me-ref-open[hidden],.dp-open[hidden]{display:none} .me-ref-add .mf-field{margin-bottom:14px} .me-ref-more{background:transparent;border:0;color:var(--accent);font-family:inherit;font-size:12.5px;cursor:pointer;padding:2px 0;display:inline-flex;align-items:center;gap:5px;margin-bottom:12px} .me-ref-more[hidden]{display:none} .me-ref-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .me-ref-cancel{background:transparent;border:0;color:var(--muted-2);font-family:inherit;font-size:12.5px;cursor:pointer;padding:6px 2px} .me-ref-cancel:hover{color:var(--text)} /* Le rappel « champ manquant » vaut aussi pour les champs du kit .mf-*. */ .mf-input.me-input-need{border-color:var(--border-strong);background:var(--accent-soft)} /* ── Critères de mobilité : trois curseurs gradués ─────────────────────────────── Trois lignes de même forme (intitulé · curseur · valeur), au lieu d'un champ nu flanqué d'un encadré. La valeur est en or, comme le rayon tracé sur la carte, pour que l'œil relie le curseur du haut à ce qu'il dessine. Un curseur à 0 se lit « non précisé » : c'est déjà ce que le moteur de complétude en fait. */ .me-mobg{margin-bottom:6px;max-width:560px} .me-mobg-row{display:grid;grid-template-columns:minmax(0,150px) minmax(80px,1fr) auto;align-items:center;gap:14px;margin-bottom:12px} .me-mobg-row .me-k{margin-bottom:0;text-transform:none;letter-spacing:0;font-size:13px;color:var(--muted)} .me-mobg .me-range-v{font-size:14px;color:var(--gold-ink);min-width:66px;text-align:right;font-variant-numeric:tabular-nums} .me-mobg .me-range-v.vide{color:var(--muted-2);font-size:12.5px} /* Le témoin « enregistré » vit sur la ligne de titre, à droite : dans une ligne de curseur il aurait ajouté une hauteur qui apparaît et disparaît à chaque réglage. */ .me-mobg>.me-gk>.me-flag{margin-left:auto;margin-top:0;text-transform:none;letter-spacing:0;font-weight:400} .me-mobg-hint{margin:2px 0 0;padding-top:11px;border-top:1px solid var(--border);color:var(--muted-2);font-size:12px} /* Le curseur lui-même : piste sobre, poignée dorée — il n'hérite pas de .me-input. */ .me-range{-webkit-appearance:none;appearance:none;width:100%;background:transparent;border:0;padding:0;height:18px;cursor:pointer} .me-range:focus{outline:none;box-shadow:none} .me-range::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:var(--card-2)} .me-range::-moz-range-track{height:4px;border-radius:2px;background:var(--card-2)} .me-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;margin-top:-6px;border-radius:50%;background:var(--gold-ink);border:0;transition:box-shadow .15s} .me-range::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--gold-ink);border:0} .me-range:hover::-webkit-slider-thumb{box-shadow:0 0 0 5px rgba(216,184,120,.16)} .me-range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 5px rgba(216,184,120,.28)} /* Rappel « à renseigner » : le curseur n'a pas de bordure, on marque l'intitulé. */ .me-mobg .me-mobg-row.me-miss .me-range::-webkit-slider-runnable-track{background:var(--warn-soft)} .me-mobg .me-mobg-row.me-miss .me-range::-webkit-slider-thumb{background:var(--warn)} .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;touch-action:manipulation} .me-geo-opt:hover{background:var(--accent-soft)} /* Une ligne de suggestion faisait 36 px de haut : sous la barre des 44 px, alors qu'un choix de TRAVERS ici enregistre une AUTRE ville que celle visée — et la ville pilote le rayon, donc les missions proposées. Au téléphone la ligne passe à 44 px, et le texte à 14 px : une adresse longue reste lisible sans qu'on ait à la deviner. */ @media(max-width:768px){.me-geo-opt{padding:13px 12px;font-size:14px;line-height:1.35}} .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{grid-template-columns:minmax(0,1fr)}.me-li .me-li-niv{width:120px}.me-anc-add-row{flex-direction:column;align-items:stretch}.me-mobg-row{grid-template-columns:minmax(0,1fr) auto;row-gap:6px}.me-mobg-row .me-k{grid-column:1/3}.me-ref-view{flex-wrap:wrap}.me-ref-id{flex-basis:100%;order:2}.me-ref-act{order:1;margin-left:auto}.me-ref-coord{gap:6px 14px}.me-h2{flex-wrap:wrap}} /* Mon espace mobile : le rail vertical des sections devient un SÉLECTEUR déroulant + progression (option B). */ @media (max-width:768px){ .me-spine{display:none;} .me-msel{display:block;margin-bottom:4px;} } /* 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; } } /* iOS Safari zoome au focus d'un champ dont la police fait < 16px. Sur mobile, on force 16px sur les champs stylés par le CSS global (auth · Mon espace · Mon compte). Sans effet desktop (règle sous le seuil mobile, le rendu ≥769px reste inchangé). */ @media (max-width:768px) { .fld input, .me-input, .me-area, .mc-confirm-input { font-size:16px; } } /* ============================================================================ 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); } /* ── COQUE D'APPLICATION (PWA) + BARRE D'ONGLETS MOBILE ─────────────────────────────────────────── Historiquement conditionné à body.lq-standalone (RIEN ne changeait dans un navigateur). Depuis la recette mobile (2026-08-29, validée propriétaire + experts), la barre d'onglets EST la colonne vertébrale de la navigation mobile : on l'affiche AUSSI aux membres connectés dès que l'écran est étroit (≤768px), pour une même navigation à portée de pouce au navigateur ET en app installée. ⚠️ La barre ne rend que pour un membre connecté (base.html) — le site public n'est pas touché. ⭐ Les applications natives seront republiées sous la marque Edicio (DUNS → comptes Apple/Google). */ .lqtab{ display:none; /* caché par défaut ; les deux déclencheurs ci-dessous l'affichent */ position:fixed; left:0; right:0; bottom:0; z-index:60; background:var(--nav-bg); backdrop-filter:blur(14px); border-top:1px solid var(--border); /* La barre gestuelle du téléphone vit SOUS les onglets : sans cette réserve, le dernier onglet tombe sous le doigt qui sert à fermer l'app. */ padding:7px 2px calc(3px + env(safe-area-inset-bottom, 0px)); } body.lq-standalone .lqtab{display:flex;} /* app installée : toute taille */ @media(max-width:768px){ .lqtab{display:flex;} } /* navigateur mobile (l'élément n'existe que connecté) */ .lqtab-i{ flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:3px; color:var(--muted-2); text-decoration:none; font-size:9.5px; font-weight:500; padding:2px 1px; -webkit-tap-highlight-color:transparent; } .lqtab-i.on{color:var(--accent);} .lqtab-ic{position:relative; line-height:0;} .lqtab-ic .icon{width:19px; height:19px; display:block;} .lqtab-l{max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} /* Pastille de non-lus : masquée à zéro par le relevé existant (attribut hidden). */ .lqtab-b{ position:absolute; top:-4px; right:-7px; min-width:15px; height:15px; padding:0 3px; border-radius:9px; background:var(--gold-ink,#d8b878); color:#161616; font-size:9.5px; font-weight:600; line-height:15px; text-align:center; } .lqtab-b[hidden]{display:none;} /* La page réserve la hauteur de la barre, sinon son dernier élément reste inatteignable. Scopé à body.lq-auth pour ne PAS ajouter d'espace bas sur une page publique (qui n'a pas de barre). */ body.lq-standalone main.page, body.lq-standalone footer{padding-bottom:calc(62px + env(safe-area-inset-bottom, 0px));} @media(max-width:768px){ body.lq-auth main.page, body.lq-auth footer{padding-bottom:calc(62px + env(safe-area-inset-bottom, 0px));} /* Messages est déjà un onglet de la barre → on retire son icône redondante de l'en-tête. */ body.lq-auth .msg-bell{display:none;} } /* Indicateur de « tirer pour rafraîchir » — n'apparaît qu'en app installée (cf. app_shell.js). */ .lqptr{ position:fixed; left:50%; top:0; z-index:70; transform:translate(-50%,-42px); width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--card-2); border:1px solid var(--border-strong); color:var(--accent); opacity:0; pointer-events:none; } .lqptr .icon{width:16px; height:16px;} .lqptr.spin .icon{animation:lqptr-spin .8s linear infinite;} @keyframes lqptr-spin{to{transform:rotate(360deg);}} /* ⛔ « Réduire les animations » était honoré sur UN SEUL curseur. Un réglage d'accessibilité qui ne s'applique qu'à un composant n'est pas honoré du tout : on le généralise. */ @media (prefers-reduced-motion:reduce){ *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } } /* ── SQUELETTES DE CHARGEMENT ────────────────────────────────────────────────────────────────────── Une zone vide pendant un chargement se lit comme « il n'y a rien », pas comme « ça arrive » — et le membre repart. Le squelette dit « ça arrive » sans rien inventer sur le contenu. ⚠ L'animation est neutralisée par la règle globale « réduire les animations » : la barre reste alors visible, simplement fixe — on ne perd pas l'information, on perd le mouvement. */ .skel{background:linear-gradient(90deg,var(--card-2) 25%,rgba(255,255,255,.06) 37%,var(--card-2) 63%); background-size:400% 100%; border-radius:7px; animation:skel-glisse 1.3s ease-in-out infinite;} @keyframes skel-glisse{0%{background-position:100% 0}100%{background-position:0 0}} .skel-l{height:11px; margin:0 0 8px;} .skel-l.court{width:52%;} .skel-l.moyen{width:78%;} .skel-bloc{display:grid; gap:10px; padding:12px 14px;} /* ── INFOBULLE (légende au survol) ──────────────────────────────────────────────────────────────── Le site n'en avait aucune : les explications passaient par l'attribut `title` du navigateur — lent, gris, illisible sur une charte sombre, et absent au clavier. Brique réutilisable : `class="lqtip"` + `data-tip="…"`, au survol ET à la prise de focus clavier. ⛔ UNE SEULE BULLE, attachée au corps de page et positionnée en JS (cf. _topnav_scripts.html) — et non un `::after` sur l'élément. Raison : un `::after` en position absolue est ROGNÉ par tout parent à défilement. C'est le cas du tableau des statistiques (`overflow-x:auto`), où une légende sur un en-tête de colonne aurait été coupée ou invisible. Une bulle en position fixe n'a pas ce problème, où qu'on la pose. ⚠ Sur mobile il n'y a pas de survol : un appui l'affiche (même script). Et `aria-label` doit porter la même information, sinon un lecteur d'écran ne la reçoit jamais. */ .lqtip{position:relative;} #lqtip-bulle{ position:fixed; z-index:9999; max-width:min(300px, calc(100vw - 24px)); width:max-content; background:var(--card); color:var(--text); border:1px solid var(--border-strong); border-radius:10px; padding:9px 11px; font-size:12.5px; font-weight:400; line-height:1.5; text-align:left; text-transform:none; letter-spacing:normal; white-space:normal; box-shadow:var(--shadow); opacity:0; visibility:hidden; transform:translateY(-3px); transition:opacity .13s, transform .13s; pointer-events:none; } #lqtip-bulle.on{opacity:1; visibility:visible; transform:translateY(0);} /* ── Repli d'avatar : le monogramme qui remplace une photo introuvable ────────────────────────── Posé par le script de navigation (`_topnav_scripts.html`) quand une image d'avatar échoue à se charger. Il reprend les classes de l'image remplacée — d'où des règles VOLONTAIREMENT faibles ici : elles ne servent qu'aux avatars dont le style vivait sur l'image elle-même, et ne doivent jamais l'emporter sur le style de la vignette d'origine. ⛔ Sans ce repli, un fichier manquant faisait afficher le TEXTE ALTERNATIF de l'image : un « Photo de profil » tronqué à l'intérieur d'un rond de 34 pixels. */ .av-repli{display:inline-flex;align-items:center;justify-content:center;overflow:hidden; background:var(--accent-soft);color:var(--accent);font-weight:600;text-transform:uppercase; line-height:1;letter-spacing:.02em}