/* ============================================================= NOSOMI Cockpit — styles partagés /pilotage (démo) + /cockpit Extrait de website/pilotage.html (bloc COCKPIT). Les variables :root, fonts et reset sont fournies par la page hôte. ============================================================= */ /* keyframe utilisé par la section cockpit mais défini en amont dans pilotage.html — réintégré ici pour autonomie du fichier. */ @keyframes pulseCyan { 0%,100% { opacity: 1; } 50% { opacity: .5; } } /* ════════════════════════════════════════════════════════════════════ THÈME CLAIR — surcouche institutionnelle optionnelle. Activé par (toggle persistant côté cockpit). Spécificité html[...] > :root inline de la page hôte → les valeurs priment quel que soit l'ordre de chargement. Tout le cockpit étant bâti sur ces tokens (surfaces, texte, bordures, accents, voiles --ink-*, --on-accent), un simple basculement de valeurs suffit. Accents assombris pour rester lisibles EN TEXTE sur fond clair ; --on-accent passe en blanc (texte sur aplats désormais plus soutenus). ════════════════════════════════════════════════════════════════════ */ html[data-theme="light"] { --bg: #eceff5; --bg2: #ffffff; --bg3: #f6f8fc; --bg4: #e7ebf3; --grid: rgba(17,24,39,.04); --txt: #131722; --muted: rgba(19,23,34,.66); --faint: rgba(19,23,34,.58); --green: #168a52; --cyan: #0e7c9b; --amber: #9a6c10; --red: #c33149; --violet: #6e54c4; --border: rgba(17,24,39,.12); --border-strong: rgba(17,24,39,.22); --on-accent: #ffffff; --ink-weak: rgba(17,24,39,.04); --ink-soft: rgba(17,24,39,.06); --ink-med: rgba(17,24,39,.10); --ink-strong: rgba(17,24,39,.16); --violet-soft: rgba(110,84,196,.10); /* Canaux d'accent assombris → les teintes (rgb(var(--x-rgb)/α)) restent visibles sur fond clair au lieu de pâlir. */ --cyan-rgb: 14 124 155; --green-rgb: 22 138 82; --amber-rgb: 154 108 16; --red-rgb: 195 49 73; --violet-rgb: 110 84 196; --ink-rgb: 17 24 39; } /* Corrections structurelles ciblées (éléments au fond codé en dur). */ html[data-theme="light"] body { background: var(--bg); } html[data-theme="light"] .topbar { background: rgba(255,255,255,.85); } html[data-theme="light"] .cockpit-frame { box-shadow: 0 18px 50px rgba(17,24,39,.14); } html[data-theme="light"] .empty-card { background: var(--bg2); } html[data-theme="light"] .cockpit-chrome { background: linear-gradient(180deg, rgba(14,124,155,.05), transparent); } /* ── COCKPIT ── */ .cockpit-section { padding: 70px 24px 110px; background: var(--bg); } .cockpit-frame { background: var(--bg2); border: 1px solid var(--border-strong); border-radius: 10px; overflow: hidden; max-width: 1280px; margin: 0 auto; box-shadow: 0 24px 64px rgba(0,0,0,.38); position: relative; } .cockpit-chrome { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; border-bottom: 1px solid var(--border); background: linear-gradient(180deg, rgb(var(--cyan-rgb) / .04), transparent); } .cockpit-chrome-l { display: flex; align-items: center; gap: 14px; } .cockpit-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px rgb(var(--cyan-rgb) / .6); } .cockpit-title { font-family: var(--font-ui); font-size: 11px; letter-spacing: .12em; color: var(--muted); text-transform: uppercase; } .cockpit-title b { color: var(--txt); } .cockpit-chrome-r { display: flex; align-items: center; gap: 14px; font-family: var(--font-ui); font-size: 11px; letter-spacing: .08em; color: var(--faint); text-transform: uppercase; } .live-pill { padding: 3px 9px; border: 1px solid var(--green); border-radius: 100px; color: var(--green); font-size: 11px; display: inline-flex; gap: 6px; align-items: center; } .live-pill::before { content: ''; width: 5px; height: 5px; background: var(--green); border-radius: 50%; box-shadow: 0 0 6px var(--green); animation: pulseCyan 1.4s infinite; } .za-chip { padding: 3px 9px; border: 1px solid rgb(var(--violet-rgb) / .5); border-radius: 100px; color: var(--violet); font-size: 11px; font-family: var(--font-ui); letter-spacing: .04em; display: inline-flex; gap: 6px; align-items: center; cursor: pointer; background: rgb(var(--violet-rgb) / .06); transition: all .2s; } .za-chip::before { content: ''; width: 5px; height: 5px; background: var(--violet); border-radius: 50%; box-shadow: 0 0 6px var(--violet); } .za-chip:hover { background: rgb(var(--violet-rgb) / .14); border-color: var(--violet); } .cockpit-tabs { display: flex; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; } .cockpit-tabs::-webkit-scrollbar { display: none; } .cockpit-tab { flex: 1; min-width: 130px; background: transparent; border: none; padding: 14px 18px; font-family: var(--font-ui); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); cursor: pointer; transition: all .2s; white-space: nowrap; border-bottom: 2px solid transparent; position: relative; } .cockpit-tab:hover { color: var(--txt); } .cockpit-tab.active { color: var(--cyan); border-bottom-color: var(--cyan); background: rgb(var(--cyan-rgb) / .03); } .cockpit-tab .tab-num { color: var(--faint); margin-right: 8px; } .cockpit-tab.active .tab-num { color: var(--cyan); } .cockpit-body { padding: 28px; min-height: 540px; } @media (max-width: 700px) { .cockpit-body { padding: 20px 16px; min-height: 480px; } .cockpit-tab { min-width: 100px; padding: 12px 14px; font-size: 11px; } } /* ── MODULES COCKPIT ── */ /* Allègement visuel — hiérarchie & air : titre de module plus affirmé, sous-titre plus discret, davantage de respiration avant le contenu. */ .module-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 34px; flex-wrap: wrap; gap: 16px; } .module-title { font-size: 25px; font-weight: 600; color: var(--txt); letter-spacing: -.02em; } .module-sub { font-family: var(--font-ui); font-size: 11px; color: var(--muted); letter-spacing: .08em; margin-top: 6px; } .module-filters { display: flex; gap: 8px; flex-wrap: wrap; } .filter-chip { font-family: var(--font-ui); font-size: 11px; letter-spacing: .06em; padding: 6px 12px; border-radius: 100px; border: 1px solid var(--border-strong); color: var(--muted); background: transparent; cursor: pointer; transition: all .15s; text-transform: uppercase; } .filter-chip:hover { color: var(--txt); border-color: var(--txt); } .filter-chip.active { color: var(--cyan); border-color: var(--cyan); background: rgb(var(--cyan-rgb) / .08); } .kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; } @media (max-width: 860px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } } /* Sobriété : liseré supérieur NEUTRE par défaut — la couleur (variantes k-*) devient l'exception qui porte du sens, plutôt qu'un mur de barres colorées. */ .kpi { background: var(--bg3); border: 1px solid var(--border); border-radius: 6px; padding: 18px; border-top: 2px solid var(--border); display: flex; flex-direction: column; gap: 6px; } .kpi.k-red { border-top-color: var(--red); } .kpi.k-amber { border-top-color: var(--amber); } .kpi.k-green { border-top-color: var(--green); } .kpi.k-cyan .kpi-val { color: var(--cyan); } .kpi.k-red .kpi-val { color: var(--red); } .kpi.k-amber .kpi-val { color: var(--amber); } .kpi.k-green .kpi-val { color: var(--green); } .kpi-lbl { font-family: var(--font-ui); font-size: 11px; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; } .kpi-val { font-size: 26px; font-weight: 700; letter-spacing: -.025em; line-height: 1; font-variant-numeric: tabular-nums; } .kpi-delta { font-family: var(--font-ui); font-size: 11px; letter-spacing: .04em; color: var(--muted); } .split-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; } @media (max-width: 860px) { .split-2 { grid-template-columns: 1fr; } } .panel { background: var(--bg3); border: 1px solid var(--border); border-radius: 6px; padding: 24px; } .panel-h { font-family: var(--font-ui); font-size: 11px; letter-spacing: .12em; color: var(--muted); text-transform: uppercase; margin-bottom: 14px; } .bench-row { display: grid; grid-template-columns: 100px 1fr 70px; gap: 14px; align-items: center; margin-bottom: 14px; } .bench-label { font-family: var(--font-ui); font-size: 11px; color: var(--muted); letter-spacing: .04em; } .bench-track { position: relative; height: 22px; background: var(--ink-soft); border-radius: 6px; overflow: hidden; } .bench-fill { height: 100%; border-radius: 6px; transition: width 1.2s cubic-bezier(.16,1,.3,1); width: 0; } .bench-median { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--cyan); box-shadow: 0 0 6px var(--cyan); } .bench-val { font-family: var(--font-mono); font-size: 12px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; } .sim-range { width: 100%; -webkit-appearance: none; appearance: none; height: 4px; background: var(--ink-med); border-radius: 100px; outline: none; cursor: pointer; } .sim-range::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; background: var(--cyan); border-radius: 50%; cursor: pointer; box-shadow: 0 0 10px rgb(var(--cyan-rgb) / .5); transition: all .15s; } .sim-range::-webkit-slider-thumb:hover { transform: scale(1.15); } .sim-range::-moz-range-thumb { width: 18px; height: 18px; background: var(--cyan); border-radius: 50%; border: none; box-shadow: 0 0 10px rgb(var(--cyan-rgb) / .5); } .sim-result { padding: 22px; background: linear-gradient(135deg, rgb(var(--cyan-rgb) / .06), rgb(var(--green-rgb) / .04)); border: 1px solid rgb(var(--cyan-rgb) / .25); border-radius: 6px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .sim-result-num { font-size: 38px; font-weight: 700; letter-spacing: -.025em; line-height: 1; font-variant-numeric: tabular-nums; } .sim-result-num.green { color: var(--green); } .sim-result-num.cyan { color: var(--cyan); } .sim-result-lbl { font-family: var(--font-ui); font-size: 11px; color: var(--muted); letter-spacing: .08em; margin-top: 6px; text-transform: uppercase; } .slider-wrap { padding: 18px; background: var(--bg3); border: 1px solid var(--border); border-radius: 6px; } .slider-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; } .slider-label { font-family: var(--font-ui); font-size: 11px; letter-spacing: .08em; color: var(--muted); text-transform: uppercase; } .slider-val { font-size: 22px; font-weight: 700; color: var(--cyan); letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .plan-table { width: 100%; border-collapse: collapse; } .plan-table th, .plan-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--border); font-size: 13px; } .plan-table th { font-family: var(--font-ui); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-weight: 400; } .plan-table td { color: var(--txt); } .priority { font-family: var(--font-ui); font-size: 11px; padding: 4px 8px; border-radius: 100px; letter-spacing: .04em; } .priority.p1 { background: rgb(var(--red-rgb) / .12); color: var(--red); border: 1px solid rgb(var(--red-rgb) / .3); } .priority.p2 { background: rgb(var(--amber-rgb) / .1); color: var(--amber); border: 1px solid rgb(var(--amber-rgb) / .3); } .priority.p3 { background: rgb(var(--green-rgb) / .1); color: var(--green); border: 1px solid rgb(var(--green-rgb) / .3); } /* ── LIVRABLES ── */ .features { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } @media (max-width: 860px) { .features { grid-template-columns: 1fr; } } .feat-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 6px; padding: 28px; border-top: 2px solid var(--cyan); } .feat-card.amber { border-top-color: var(--amber); } .feat-card h3 { font-size: 22px; margin-bottom: 12px; } .feat-card p { font-size: 14px; margin-bottom: 18px; } .feat-card ul { list-style: none; display: flex; flex-direction: column; gap: 8px; padding: 0; } .feat-card ul li { font-size: 13px; color: var(--txt); display: flex; gap: 10px; align-items: flex-start; line-height: 1.5; } .feat-card ul li::before { content: '→'; color: var(--cyan); flex-shrink: 0; font-family: var(--font-mono); } .feat-card.amber ul li::before { color: var(--amber); } /* ── VALUE CARDS — Livrables redesign ── */ .value-cards { gap: 22px; } .value-card { position: relative; background: linear-gradient(180deg, var(--bg2) 0%, var(--bg) 100%); border: 1px solid var(--border); border-radius: 10px; padding: 32px 32px 30px; display: flex; flex-direction: column; gap: 22px; overflow: hidden; transition: transform .3s, border-color .3s, box-shadow .3s; } .value-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; } .value-card.vc-cyan { border-color: rgb(var(--cyan-rgb) / .22); box-shadow: 0 12px 40px rgb(var(--cyan-rgb) / .06); } .value-card.vc-cyan::before { background: linear-gradient(90deg, var(--cyan), transparent 70%); } .value-card.vc-cyan:hover { border-color: rgb(var(--cyan-rgb) / .45); transform: translateY(-3px); box-shadow: 0 16px 56px rgb(var(--cyan-rgb) / .12); } .value-card.vc-violet { border-color: rgb(var(--violet-rgb) / .25); background: linear-gradient(180deg, rgb(var(--violet-rgb) / .04) 0%, var(--bg2) 100%); box-shadow: 0 12px 40px rgb(var(--violet-rgb) / .07); } .value-card.vc-violet::before { background: linear-gradient(90deg, var(--violet, #b99ce6), transparent 70%); } .value-card.vc-violet:hover { border-color: rgb(var(--violet-rgb) / .5); transform: translateY(-3px); box-shadow: 0 16px 56px rgb(var(--violet-rgb) / .14); } .vc-head { display: flex; flex-direction: column; gap: 12px; } .vc-tag { align-self: flex-start; font-family: var(--font-mono); font-size: 11px; letter-spacing: .15em; text-transform: uppercase; padding: 5px 12px; border-radius: 100px; color: var(--cyan); background: rgb(var(--cyan-rgb) / .08); border: 1px solid rgb(var(--cyan-rgb) / .25); display: inline-flex; align-items: center; gap: 8px; } .vc-tag::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 6px var(--cyan); } .vc-tag-violet { color: #b99ce6; background: rgb(var(--violet-rgb) / .08); border-color: rgb(var(--violet-rgb) / .3); } .vc-tag-violet::before { background: #b99ce6; box-shadow: 0 0 6px #b99ce6; } .vc-title { font-size: 24px; font-weight: 700; letter-spacing: -.02em; line-height: 1.18; color: var(--txt); } .vc-glow-violet { color: var(--violet); } /* Anatomie (card 1) */ .vc-anatomy { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .vc-anat-row { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding: 13px 0; align-items: baseline; } .vc-anat-row + .vc-anat-row { border-top: 1px solid var(--border); } .vc-anat-lbl { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); } .vc-anat-val { font-size: 13.5px; color: var(--txt); line-height: 1.5; } .vc-foot { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); font-style: italic; } .vc-foot-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); flex-shrink: 0; } /* Shield (card 2) */ .vc-shield { padding: 18px 20px; background: linear-gradient(135deg, rgb(var(--violet-rgb) / .08), rgb(var(--violet-rgb) / .02)); border: 1px solid rgb(var(--violet-rgb) / .2); border-left: 2px solid #b99ce6; border-radius: 6px; display: flex; flex-direction: column; gap: 14px; } .vc-shield-claim { font-size: 14px; color: var(--txt); line-height: 1.55; } .vc-shield-claim strong { color: #b99ce6; font-weight: 600; } .vc-shield-row { display: flex; flex-wrap: wrap; gap: 6px; } .vc-shield-chip { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; padding: 4px 10px; border: 1px solid rgb(var(--violet-rgb) / .3); background: rgb(var(--violet-rgb) / .04); color: var(--txt); border-radius: 100px; } .vc-context { padding-top: 4px; } .vc-context-h { font-size: 14px; font-weight: 600; color: var(--txt); margin-bottom: 6px; letter-spacing: -.005em; } .vc-context-p { font-size: 13px; color: var(--muted); line-height: 1.6; } .vc-context-p em { color: var(--txt); font-style: normal; font-weight: 500; } @media (max-width: 760px) { .value-card { padding: 26px 22px 24px; } .vc-anat-row { grid-template-columns: 1fr; gap: 4px; padding: 11px 0; } } /* ── Modules divider inside livrables ── */ .modules-divider { margin-top: 44px; padding-top: 40px; border-top: 1px solid var(--border); } /* ── COMPARAISON ANAP ── */ .compare-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } @media (max-width: 860px) { .compare-grid { grid-template-columns: 1fr; } } .compare-col { background: var(--bg2); border: 1px solid var(--border); border-radius: 6px; padding: 26px 22px; } .compare-col.highlight { border-color: var(--cyan); } .compare-col-head { font-family: var(--font-ui); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border); } .compare-col.highlight .compare-col-head { color: var(--cyan); } .compare-list { list-style: none; display: flex; flex-direction: column; gap: 10px; padding: 0; } .compare-list li { font-size: 13px; color: var(--txt); display: flex; gap: 10px; align-items: flex-start; line-height: 1.5; } .compare-list li::before { content: '·'; color: var(--muted); flex-shrink: 0; font-family: var(--font-mono); } .compare-col.highlight .compare-list li::before { content: '→'; color: var(--cyan); } /* ── MÉTHODE / SOURCES ── */ .source-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } @media (max-width: 860px) { .source-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 500px) { .source-grid { grid-template-columns: 1fr; } } .source-chip { background: var(--bg2); border: 1px solid var(--border); border-radius: 6px; padding: 14px 16px; } .source-chip-name { font-family: var(--font-ui); font-size: 11px; color: var(--cyan); letter-spacing: .1em; margin-bottom: 4px; } .source-chip-desc { font-size: 12px; color: var(--muted); line-height: 1.5; } /* ── PRIX ── */ .pricing-card { max-width: 560px; margin: 0 auto; background: var(--bg2); border: 1px solid var(--border-strong); border-radius: 10px; overflow: hidden; } .pricing-head { padding: 32px 36px 28px; background: linear-gradient(135deg, rgb(var(--cyan-rgb) / .06), rgb(var(--green-rgb) / .03)); border-bottom: 1px solid var(--border); } .pricing-amount { font-size: 52px; font-weight: 700; letter-spacing: -.03em; line-height: 1; color: var(--txt); } .pricing-amount sup { font-size: 22px; vertical-align: top; margin-top: 10px; color: var(--muted); } .pricing-amount sub { font-size: 16px; color: var(--muted); } .pricing-body { padding: 28px 36px; } .pricing-list { list-style: none; display: flex; flex-direction: column; gap: 12px; padding: 0; } .pricing-list li { font-size: 14px; color: var(--txt); display: flex; gap: 12px; align-items: flex-start; } .pricing-list li::before { content: '✓'; color: var(--green); font-family: var(--font-mono); font-weight: 700; flex-shrink: 0; } .pricing-footer { padding: 20px 36px 28px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 12px; } /* ── FAQ ── */ .faq-list { display: flex; flex-direction: column; gap: 0; } .faq-item { border-bottom: 1px solid var(--border); } .faq-q { width: 100%; background: transparent; border: none; text-align: left; padding: 22px 0; display: flex; justify-content: space-between; align-items: center; cursor: pointer; gap: 20px; } .faq-q-text { font-size: 17px; font-weight: 600; color: var(--txt); line-height: 1.4; } .faq-icon { font-family: var(--font-mono); font-size: 18px; color: var(--cyan); flex-shrink: 0; transition: transform .2s; } .faq-icon.open { transform: rotate(45deg); } .faq-a { padding: 0 0 22px; max-width: 68ch; } .faq-a p { font-size: 15px; color: var(--muted); line-height: 1.65; } /* ── CTA FINAL ── */ .cta-final { text-align: center; padding: 100px 40px; background: linear-gradient(180deg, transparent, rgb(var(--cyan-rgb) / .04)); } .cta-final h2 { margin-bottom: 14px; } .cta-final p { color: var(--txt); font-size: 18px; margin: 0 auto 32px; max-width: 56ch; } .cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } /* ── FOOTER ── */ .site-footer-v3 { border-top: 1px solid var(--border); padding: 64px 40px 40px; position: relative; z-index: 1; } .footer-grid { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; } .footer-col h5 { font-family: var(--font-ui); font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; } .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; padding: 0; } .footer-col a { font-size: 14px; color: var(--txt); text-decoration: none; transition: color .2s; } .footer-col a:hover { color: var(--cyan); } .footer-brand-block .brand-mark { font-family: var(--font-ui); font-size: 18px; font-weight: 700; letter-spacing: .2em; color: var(--txt); margin-bottom: 14px; display: inline-flex; align-items: center; gap: 8px; } .footer-brand-block .brand-mark::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px rgb(var(--cyan-rgb) / .6); } .footer-brand-block p { font-size: 13px; color: var(--muted); max-width: 36ch; line-height: 1.6; } .footer-bottom-v3 { max-width: var(--max); margin: 48px auto 0; padding-top: 24px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; font-family: var(--font-ui); font-size: 11px; color: rgba(232,232,244,.3); letter-spacing: .06em; } @media (max-width: 880px) { .site-footer-v3 { padding: 48px 24px 32px; } .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } .section { padding: 80px 24px; } .sec-num { top: 28px; right: 24px; } } @media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } } .fade-up { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; } .fade-up.visible { opacity: 1; transform: translateY(0); } .fade-up.delay-1 { transition-delay: .08s; } .fade-up.delay-2 { transition-delay: .16s; } .fade-up.delay-3 { transition-delay: .24s; } @media (prefers-reduced-motion: reduce) { .fade-up { opacity: 1; transform: none; } } /* ────────────────────────────────────────────────────────────── COCKPIT v2 — Sidebar, Hero, Kanban, Codir Magazine, Chat ────────────────────────────────────────────────────────────── */ @keyframes pulseSoft { 0%, 100% { opacity: .6; } 50% { opacity: 1; } } @keyframes slideUpFade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideRightFade { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } @keyframes fabPulse { 0%, 100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.6); opacity: 0; } } @keyframes shimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } } .anim-in { animation: slideUpFade .22s cubic-bezier(.16,1,.3,1) both; will-change: opacity, transform; } .anim-in:not(:focus-within) { animation-delay: 0s; } /* L'utilisateur peut désactiver les animations système — on respecte. */ @media (prefers-reduced-motion: reduce) { .anim-in { animation: none; } } /* ── LAYOUT shell (sidebar + main) ── */ /* Cadre du cockpit (Lot 1 « scène + hairline » + Lot 5 « bordure dégradée »). Bordure en dégradé via double-fond (padding-box/border-box), ombre resserrée (profondeur, pas halo diffus) + inset highlight, et filet d'accent supérieur. */ .cockpit-frame.v2 { /* overflow: visible → autorise la sidebar collante (position: sticky). Les coins sont re-arrondis sur les enfants (chrome en haut, fond du cadre en bas). */ border: 1px solid transparent; border-radius: 10px; overflow: visible; max-width: 1320px; margin: 0 auto; position: relative; background: linear-gradient(var(--bg2), var(--bg2)) padding-box, linear-gradient(135deg, rgb(var(--cyan-rgb) / .40), rgb(var(--violet-rgb) / .22) 45%, var(--ink-soft) 75%) border-box; box-shadow: inset 0 1px 0 var(--ink-soft), 0 28px 70px -24px rgba(0,0,0,.75), 0 0 0 1px rgb(var(--cyan-rgb) / .05); } .cockpit-frame.v2::before { content: ''; position: absolute; top: 0; left: 12px; right: 12px; height: 2px; z-index: 7; background: linear-gradient(90deg, transparent, rgb(var(--cyan-rgb) / .6), rgb(var(--violet-rgb) / .4), transparent); pointer-events: none; } /* Barre de chrome = « title bar » du cockpit (repère premium « je suis dans l'outil »). Coins haut arrondis pour rester propre maintenant que le cadre est overflow:visible. */ .cockpit-frame.v2 .cockpit-chrome { padding: 13px 20px; background: linear-gradient(180deg, rgb(var(--cyan-rgb) / .06), var(--ink-weak)); border-bottom: 1px solid var(--border-strong); border-radius: 10px 12px 0 0; } .cockpit-frame.v2 .cockpit-chrome .cockpit-title { font-weight: 600; } /* Sidebar collante : reste visible pendant le scroll du contenu principal. top: 72px dégage l'en-tête de page (topbar /cockpit ~56px, nav /pilotage 64px) ; scroll interne si la nav dépasse la hauteur d'écran. Désactivée en mobile (la sidebar y devient une barre horizontale). */ .cockpit-frame.v2 .cockpit-side { position: sticky; top: 72px; align-self: start; max-height: calc(100vh - 88px); overflow-y: auto; overflow-x: hidden; /* Barre de défilement masquée : la nav reste scrollable (molette / trackpad) mais on n'affiche plus la grosse barre grise du navigateur — seul le filet de lumière reste visible sur le bord droit. Même technique que .subtabs-bar. */ scrollbar-width: none; -ms-overflow-style: none; } .cockpit-frame.v2 .cockpit-side::-webkit-scrollbar { display: none; } @media (max-width: 900px) { .cockpit-frame.v2 .cockpit-side { position: static; top: auto; max-height: none; overflow: visible; border-radius: 0; } } .cockpit-shell { display: grid; grid-template-columns: 230px 1fr; min-height: 600px; } .cockpit-frame.v2.side-collapsed .cockpit-shell { grid-template-columns: 62px 1fr; } .cockpit-main { padding: 0; min-width: 0; } .cockpit-body { padding: 30px 36px; min-height: 540px; } .cockpit-breadcrumb { padding: 14px 30px 0; font-family: var(--font-ui); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; display: flex; gap: 10px; align-items: center; } .bc-cur { color: var(--cyan); } .bc-sep { color: var(--faint); } /* Lot 5 — la phase du parcours (un des 4 verbes) lue comme une pastille : le client voit toujours « où il en est » (comprendre / décider / agir / explorer). */ .bc-grp { color: var(--cyan); opacity: .9; padding: 2px 9px; border: 1px solid rgb(var(--cyan-rgb) / .26); border-radius: 100px; background: rgb(var(--cyan-rgb) / .06); letter-spacing: .12em; } /* ── SIDEBAR ── */ /* Sidebar « dépouillée » : pas de fond teinté ni de cadre — la navigation se fond dans la page. Seule séparation conservée : le « filet de lumière » sur le bord droit (même langage visuel que la page d'accueil et le liseré du cadre) — un trait net en dégradé qui s'éteint en haut/bas + un halo diffus. Posé en couches de background (background-clip border-box) → robuste au scroll interne de la sidebar, jamais rogné. */ .cockpit-side { background: linear-gradient(180deg, transparent 3%, rgb(var(--cyan-rgb) / .55) 24%, rgb(var(--violet-rgb) / .36) 56%, rgb(var(--green-rgb) / .30) 82%, transparent 97%) right / 1px 100% no-repeat border-box, linear-gradient(180deg, transparent 6%, rgb(var(--cyan-rgb) / .12) 30%, rgb(var(--violet-rgb) / .08) 60%, rgb(var(--green-rgb) / .05) 85%, transparent 94%) right / 3px 100% no-repeat border-box; border-right: 1px solid transparent; padding: 18px 0 18px; display: flex; flex-direction: column; gap: 4px; position: relative; min-width: 0; } .cockpit-side.is-collapsed { padding: 18px 0; } .side-toggle { position: absolute; top: 14px; right: -12px; width: 24px; height: 24px; border-radius: 50%; background: var(--bg4); border: 1px solid var(--border-strong); color: var(--muted); font-family: var(--font-mono); font-size: 12px; cursor: pointer; z-index: 5; display: flex; align-items: center; justify-content: center; transition: all .2s; } .side-toggle:hover { color: var(--cyan); border-color: var(--cyan); } .side-brand { padding: 4px 18px 16px; display: flex; align-items: center; gap: 10px; font-family: var(--font-ui); font-size: 12px; letter-spacing: .2em; color: var(--txt); font-weight: 700; margin-bottom: 12px; } .side-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); animation: pulseSoft 1.8s infinite; } .cockpit-side.is-collapsed .side-brand span, .cockpit-side.is-collapsed .side-label, .cockpit-side.is-collapsed .side-group-lbl, .cockpit-side.is-collapsed .side-foot { display: none; } /* ── Responsive cockpit (< 760px) ───────────────────────────────────── La grille sidebar 230px+1fr écrase le contenu sur petit écran. On bascule la barre latérale en rail d'icônes (mode déjà stylé via .is-collapsed) et on resserre les paddings. App dense pensée desktop, mais utilisable sur tablette/mobile sans casse. */ @media (max-width: 760px) { .cockpit-frame.v2 .cockpit-shell, .cockpit-frame.v2.side-collapsed .cockpit-shell { grid-template-columns: 56px 1fr; } .cockpit-side .side-label, .cockpit-side .side-group-lbl, .cockpit-side .side-foot, .cockpit-side .side-brand span { display: none; } .cockpit-side .side-group { padding: 8px 8px; align-items: center; } .cockpit-side .side-item { justify-content: center; gap: 0; padding: 10px 0; } .cockpit-body { padding: 20px 14px; } .subtabs-bar { overflow-x: auto; } /* Tableaux denses : scroll horizontal plutôt que débordement. */ .cockpit-body table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; } } @media (max-width: 480px) { .cockpit-frame.v2 .cockpit-shell, .cockpit-frame.v2.side-collapsed .cockpit-shell { grid-template-columns: 46px 1fr; } .cockpit-body { padding: 16px 11px; } } /* ── Sidebar — refonte « Apple-like » (Lucide-style icons + groupes invisibles) ── */ .side-group { display: flex; flex-direction: column; padding: 4px 10px; gap: 2px; position: relative; } /* Lot 5 — les 4 verbes du parcours (comprendre · décider · agir · explorer) deviennent la colonne vertébrale LISIBLE de la navigation : numérotés (1-2-3-4) et mis en valeur, ils disent « où vous en êtes ». « étendre » reste un rail secondaire plus discret (cf. .side-group-violet plus bas). Masqués en mode réduit et sur mobile (cf. .is-collapsed et media plus bas). */ .side-group-lbl { display: flex; align-items: center; gap: 7px; font-family: var(--font-ui); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--muted); padding: 3px 8px 9px; } .side-group-journey .side-verb { color: var(--cyan); } .side-step { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; font-size: 11px; font-weight: 700; letter-spacing: 0; color: var(--cyan); background: rgb(var(--cyan-rgb) / .10); border: 1px solid rgb(var(--cyan-rgb) / .40); } /* Sidebar dépouillée : on garde l'espacement entre groupes mais on retire le trait séparateur — seul le filet de lumière fait office de séparation. */ .side-group + .side-group { margin-top: 6px; padding-top: 12px; } .side-item { position: relative; display: flex; align-items: center; gap: 14px; padding: 10px 12px; background: transparent; border: none; color: var(--muted); cursor: pointer; border-radius: 10px; text-align: left; font-family: inherit; font-size: 13.5px; letter-spacing: -.005em; transition: background .25s cubic-bezier(.4,0,.2,1), color .2s, transform .2s cubic-bezier(.4,0,.2,1); will-change: transform, background; } .side-item:hover { color: var(--txt); background: var(--ink-soft); transform: translateX(2px); } .side-item:active { transform: translateX(2px) scale(.98); } .side-item.active { color: var(--txt); background: rgb(var(--cyan-rgb) / .12); } .side-item.active .side-icon { color: var(--cyan); opacity: 1; } .side-item.accent-violet.active { background: rgb(var(--violet-rgb) / .14); } .side-item.accent-violet.active .side-icon { color: var(--violet); } .side-item .side-marker { display: none; } /* ligne accent retirée — pill background suffit */ /* Icône : SVG inline (cf. cockpit.jsx TAB_ICONS), stroke fin, héritage couleur */ .side-icon { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; color: currentColor; opacity: .72; transition: opacity .2s, color .2s; flex-shrink: 0; } .side-item:hover .side-icon { opacity: 1; } .side-label { font-size: 13.5px; letter-spacing: -.005em; font-weight: 500; } .side-badge { margin-left: auto; padding: 2px 7px; border-radius: 100px; background: var(--violet); color: var(--on-accent); font-size: 11px; font-family: var(--font-ui); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } /* Coach mark : pulse subtil sur l'item actif pendant les ~3 premières secondes d'une session, pour ancrer le regard sur "où je suis". */ @keyframes sidePulse { 0%, 100% { box-shadow: 0 0 0 0 rgb(var(--cyan-rgb) / 0); } 50% { box-shadow: 0 0 0 4px rgb(var(--cyan-rgb) / .18); } } .side-item.active.coach-pulse { animation: sidePulse 1.8s ease-in-out 2; } /* Groupe « étendre » repliable (UX) : le libellé devient un bouton. */ .side-group-toggle { background: none; border: none; cursor: pointer; width: 100%; text-align: left; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; display: flex; align-items: center; gap: 8px; } .side-group-toggle:hover .side-verb { color: var(--violet); } .side-ext-caret { font-size: 9px; color: var(--faint); margin-left: 2px; } /* Bascule Guidé/Libre persistante dans le pied de la sidebar (UX). */ .side-mode { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 100px; overflow: hidden; margin: 0 0 10px; align-self: flex-start; } .side-mode-btn { font-family: var(--font-ui); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; padding: 5px 12px; border: none; cursor: pointer; background: transparent; color: var(--muted); } .side-mode-btn.on { background: var(--cyan); color: var(--on-accent); } .cockpit-side.is-collapsed .side-mode { display: none; } .side-foot { margin-top: auto; padding: 14px 18px 4px; display: flex; flex-direction: column; gap: 4px; } .side-foot-l { font-family: var(--font-ui); font-size: 11px; color: var(--txt); letter-spacing: .06em; line-height: 1.3; } .side-foot-s { font-family: var(--font-ui); font-size: 11px; color: var(--faint); margin-top: 4px; letter-spacing: .1em; } /* Fil de confiance Zero Access — présence calme et permanente dans la nav : l'utilisateur (souvent peu à l'aise avec l'informatique) doit SE SENTIR en sécurité, pas seulement l'être. Vert discret = « sûr », sans crier. */ /* Cliquable → ouvre « Votre confidentialité » (l'utilisateur peut creuser la promesse, pas seulement la lire). Reste calme : vert discret, pas un bouton qui crie. */ .side-trust { width: 100%; display: flex; align-items: center; gap: 6px; margin: 12px 0 8px; padding: 7px 9px; border-radius: 6px; background: rgb(var(--green-rgb) / .06); border: 1px solid rgb(var(--green-rgb) / .16); color: var(--green); font-family: var(--font-ui); font-size: 11px; line-height: 1.35; letter-spacing: .02em; text-align: left; cursor: pointer; transition: all .2s; } .side-trust:hover { background: rgb(var(--green-rgb) / .12); border-color: rgb(var(--green-rgb) / .4); } .side-trust svg { flex-shrink: 0; opacity: .9; } .side-trust span { color: var(--muted); } .side-trust .side-trust-more { margin-left: auto; color: var(--green); opacity: .7; font-size: 11px; } /* Glossaire — référence neutre, en retrait des deux actions (tour cyan / tuto vert). */ .side-gloss-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; background: var(--ink-weak); border: 1px solid var(--border-strong); color: var(--muted); font-family: var(--font-ui); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; border-radius: 6px; cursor: pointer; transition: all .2s; } .side-gloss-btn:hover { background: var(--ink-soft); border-color: var(--muted); color: var(--txt); } .side-gloss-btn span { font-size: 12px; opacity: .9; } .side-tour-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; background: rgb(var(--cyan-rgb) / .04); border: 1px solid rgb(var(--cyan-rgb) / .2); color: var(--cyan); font-family: var(--font-ui); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; border-radius: 6px; cursor: pointer; transition: all .2s; } .side-tour-btn:hover { background: rgb(var(--cyan-rgb) / .1); border-color: var(--cyan); } .side-tuto-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; background: rgb(var(--green-rgb) / .04); border: 1px solid rgb(var(--green-rgb) / .25); color: var(--green); font-family: var(--font-ui); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; border-radius: 6px; cursor: pointer; transition: all .2s; } .side-tuto-btn:hover { background: rgb(var(--green-rgb) / .1); border-color: var(--green); } .side-tuto-btn span { font-size: 12px; opacity: .9; } /* Sidebar — groupe violet (Modules IA) */ /* .side-group-violet : ancien séparateur dédié, remplacé par le séparateur générique .side-group + .side-group (refonte Apple-like). Conservé inerte. */ .side-group.side-group-violet { /* no-op */ } /* « étendre » : rail secondaire (modules LIBRE/PRO) — volontairement plus discret que les 4 verbes du parcours, sans pastille numérotée. */ .side-group.side-group-violet .side-group-lbl { color: var(--violet); opacity: .72; font-size: 11px; font-weight: 600; } .side-group.side-group-violet .side-verb { color: var(--violet); } .side-item.accent-violet { color: rgb(var(--violet-rgb) / .85); } .side-item.accent-violet:hover { background: rgb(var(--violet-rgb) / .06); color: var(--violet); } .side-item.accent-violet.active { color: var(--violet); background: rgb(var(--violet-rgb) / .1); } .side-item.accent-violet.active .side-marker { background: var(--violet); box-shadow: 0 0 8px var(--violet); } .side-badge { margin-left: auto; font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: .12em; padding: 2px 6px; border-radius: 100px; background: var(--violet); color: #1a1226; animation: pulseViolet 2.4s ease-in-out infinite; } .side-badge.done { background: var(--green); color: var(--on-accent); animation: none; } @keyframes pulseViolet { 0%, 100% { box-shadow: 0 0 0 0 rgb(var(--violet-rgb) / .5); } 50% { box-shadow: 0 0 0 5px rgb(var(--violet-rgb) / 0); } } /* Sidebar — groupe vert (Apprendre / Tutoriel) */ .side-group.side-group-green { border-top: 1px dashed rgb(var(--green-rgb) / .15); margin-top: 6px; padding-top: 12px; } .side-group.side-group-green .side-group-lbl { color: var(--green); opacity: .8; } .side-item.accent-green { color: rgb(var(--green-rgb) / .85); } /* ── Sous-onglets (refonte navigation v3) ─────────────────── */ .subtabs-bar { display: flex; gap: 5px; margin-bottom: 22px; padding: 5px; background: var(--bg2); border: 1px solid var(--border-strong); border-radius: 10px; overflow-x: auto; scrollbar-width: none; } .subtabs-bar::-webkit-scrollbar { display: none; } .subtab { flex: 1 1 auto; min-width: 0; white-space: nowrap; background: transparent; border: 1px solid transparent; cursor: pointer; padding: 10px 16px; border-radius: 10px; /* Police proportionnelle + contraste relevé : lisible sans forcer. */ font-family: var(--font-head); font-size: 13px; font-weight: 600; letter-spacing: .005em; color: rgba(233,235,247,.72); transition: background .15s, color .15s, box-shadow .15s, border-color .15s; } .subtab:hover { color: var(--txt); background: var(--ink-soft); } /* Segmented control « plein » : l'onglet actif est une pastille pleine à l'accent, texte sombre — repère « vous êtes ici » immédiat. */ .subtab.active, .subtab.active.accent-cyan { color: var(--on-accent); font-weight: 700; background: var(--cyan); border-color: transparent; box-shadow: 0 3px 12px rgba(0,0,0,.4); } .subtab.active.accent-violet { color: #130a20; background: var(--violet); box-shadow: 0 3px 12px rgba(0,0,0,.4); } .subtab.active.accent-amber { color: #1c1400; background: var(--amber); box-shadow: 0 3px 12px rgba(0,0,0,.4); } .subtab.active.accent-green { color: var(--on-accent); background: var(--green); box-shadow: 0 3px 12px rgba(0,0,0,.4); } @media (max-width: 700px) { .subtab { padding: 9px 12px; font-size: 12px; } } .side-item.accent-green:hover { background: rgb(var(--green-rgb) / .06); color: var(--green); } .side-item.accent-green.active { color: var(--green); background: rgb(var(--green-rgb) / .08); } .side-item.accent-green.active .side-marker { background: var(--green); box-shadow: 0 0 8px var(--green); } /* Sidebar — item « Pour aller plus loin » (upgrade) : ambre, volontairement distinct du groupe violet (Atlas Pro, Radar, Achat, Preuves & pistes). On le lit comme « extension / aller plus loin », pas comme un module du socle. */ .side-item.accent-amber { color: rgb(var(--amber-rgb) / .85); } .side-item.accent-amber:hover { background: rgb(var(--amber-rgb) / .06); color: var(--amber); } .side-item.accent-amber.active { color: var(--amber); background: rgb(var(--amber-rgb) / .1); } .side-item.accent-amber.active .side-icon { color: var(--amber); } .side-item.accent-amber .side-badge { background: var(--amber); color: #1c1400; animation: pulseAmber 2.4s ease-in-out infinite; } @keyframes pulseAmber { 0%, 100% { box-shadow: 0 0 0 0 rgb(var(--amber-rgb) / .5); } 50% { box-shadow: 0 0 0 5px rgb(var(--amber-rgb) / 0); } } @media (max-width: 900px) { .cockpit-shell { grid-template-columns: 1fr; } .cockpit-frame.v2.side-collapsed .cockpit-shell { grid-template-columns: 1fr; } .cockpit-side { flex-direction: row; overflow-x: auto; padding: 10px; gap: 10px; border-right: none; border-bottom: 1px solid var(--border); } .side-toggle, .side-brand, .side-foot, .side-group-lbl { display: none; } .side-group { flex-direction: row; padding: 0; } .side-item { white-space: nowrap; } .side-item.active .side-marker { display: none; } } /* ── HERO AUJOURD'HUI ── */ .hero-today { position: relative; background: linear-gradient(135deg, rgb(var(--cyan-rgb) / .09), rgb(var(--green-rgb) / .04)); border: 1px solid var(--border-strong); border-radius: 10px; padding: 32px 34px; margin-bottom: 26px; overflow: hidden; display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center; } .hero-today-grain { position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgb(var(--cyan-rgb) / .05) 50%, transparent 65%); background-size: 200% 100%; animation: shimmer 8s linear infinite; pointer-events: none; } .hero-today-l { position: relative; z-index: 1; } .hero-today-eyebrow { font-family: var(--font-ui); font-size: 11px; color: var(--cyan); letter-spacing: .18em; text-transform: uppercase; margin-bottom: 12px; } .hero-today-h { font-size: 30px; line-height: 1.15; font-weight: 700; color: var(--txt); letter-spacing: -.025em; margin-bottom: 14px; } .hero-today-p { font-size: 14px; color: var(--muted); margin-bottom: 22px; line-height: 1.5; max-width: 56ch; } .hero-today-cta { display: flex; gap: 12px; flex-wrap: wrap; } .hero-today-r { position: relative; z-index: 1; } @media (max-width: 760px) { .hero-today { grid-template-columns: 1fr; padding: 24px 22px; } .hero-today-h { font-size: 22px; } } /* ── CTA buttons ── */ /* Boutons : transitions iOS (cubic-bezier(.4,0,.2,1)), feedback presse, no jitter */ .cta-primary { font-family: var(--font-ui); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding: 11px 18px; background: var(--cyan); color: var(--on-accent); border: 1px solid var(--cyan); border-radius: 6px; cursor: pointer; font-weight: 700; transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s cubic-bezier(.4,0,.2,1), background .2s; box-shadow: 0 4px 14px rgb(var(--cyan-rgb) / .25); will-change: transform, box-shadow; } .cta-primary:hover { transform: translateY(-1px) scale(1.015); box-shadow: 0 10px 26px rgb(var(--cyan-rgb) / .4); } .cta-primary:active { transform: translateY(0) scale(.98); box-shadow: 0 2px 8px rgb(var(--cyan-rgb) / .3); } .cta-ghost { font-family: var(--font-ui); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding: 11px 18px; background: transparent; color: var(--muted); border: 1px solid var(--border-strong); border-radius: 6px; cursor: pointer; transition: color .2s, border-color .2s, transform .25s cubic-bezier(.4,0,.2,1), background .2s; } .cta-ghost:hover { color: var(--cyan); border-color: var(--cyan); transform: translateY(-1px); background: rgb(var(--cyan-rgb) / .04); } .cta-ghost:active { transform: translateY(0) scale(.98); } /* ── META TILES & GRIDS ── */ .meta-tile { background: var(--bg4); border: 1px solid var(--border); border-radius: 6px; padding: 14px 16px; transition: border-color .2s, transform .2s; } .meta-tile:hover { border-color: var(--border-strong); transform: translateY(-1px); } .meta-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .meta-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 18px; } .meta-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; } .meta-grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; } @media (max-width: 760px) { .meta-grid-4, .meta-grid-3, .meta-grid-5 { grid-template-columns: 1fr 1fr; } .meta-grid-2 { grid-template-columns: 1fr; } } .section-lbl { font-family: var(--font-ui); font-size: 11px; color: var(--cyan); letter-spacing: .18em; text-transform: uppercase; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border); } /* ── ARBITRAGE CARDS (Overview) ── */ .cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 8px; } @media (max-width: 760px) { .cards-3 { grid-template-columns: 1fr; } } .arb-card { background: var(--bg3); border: 1px solid var(--border); border-radius: 6px; padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 12px; cursor: pointer; transition: all .25s; position: relative; overflow: hidden; } .arb-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; } .arb-card.urg-high::before { background: var(--red); box-shadow: 0 0 12px var(--red); } .arb-card.urg-med::before { background: var(--amber); box-shadow: 0 0 12px var(--amber); } .arb-card.urg-low::before { background: var(--green); box-shadow: 0 0 12px var(--green); } .arb-card:hover { transform: translateY(-3px); border-color: var(--border-strong); box-shadow: 0 16px 32px rgba(0,0,0,.4); } .arb-head { display: flex; justify-content: space-between; align-items: center; } .arb-rank { font-family: var(--font-ui); font-size: 11px; color: var(--faint); letter-spacing: .14em; } .arb-title { font-size: 14px; font-weight: 600; color: var(--txt); line-height: 1.4; } .arb-ecart { font-family: var(--font-mono); font-size: 11px; color: var(--muted); line-height: 1.5; } .arb-foot { border-top: 1px solid var(--border); padding-top: 10px; margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; } .arb-impact { font-family: var(--font-mono); font-size: 18px; font-weight: 700; } .arb-impact-lbl { font-family: var(--font-ui); font-size: 11px; color: var(--faint); letter-spacing: .08em; margin-top: 2px; } .arb-cta { font-family: var(--font-ui); font-size: 11px; color: var(--cyan); background: transparent; border: 1px solid rgb(var(--cyan-rgb) / .3); border-radius: 6px; padding: 8px 12px; cursor: pointer; letter-spacing: .08em; text-transform: uppercase; margin-top: 4px; transition: all .2s; } .arb-cta:hover { background: rgb(var(--cyan-rgb) / .1); } /* ── GUIDE CARDS (Overview) ── */ .guide-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } @media (max-width: 760px) { .guide-4 { grid-template-columns: 1fr 1fr; } } .guide-card { background: var(--bg4); border: 1px solid var(--border); border-radius: 6px; padding: 14px 16px; cursor: pointer; transition: all .2s; } .guide-card:hover { background: var(--ink-weak); } .guide-card.g-cyan:hover { border-color: var(--cyan); } .guide-card.g-green:hover { border-color: var(--green); } .guide-card.g-amber:hover { border-color: var(--amber); } .guide-lbl { font-family: var(--font-ui); font-size: 11px; font-weight: 700; margin-bottom: 6px; letter-spacing: .08em; text-transform: uppercase; } .guide-card.g-cyan .guide-lbl { color: var(--cyan); } .guide-card.g-green .guide-lbl { color: var(--green); } .guide-card.g-amber .guide-lbl { color: var(--amber); } .guide-desc { font-size: 11px; color: var(--muted); line-height: 1.5; } /* ── DECISIONS rows ── */ .dec-row { background: var(--bg3); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; transition: border-color .2s; } .dec-row.urg-high { border-left: 4px solid var(--red); } .dec-row.urg-med { border-left: 4px solid var(--amber); } .dec-row.urg-low { border-left: 4px solid var(--green); } .dec-row:hover { border-color: var(--border-strong); } .dec-head { display: grid; grid-template-columns: 36px auto 1fr auto auto auto; gap: 14px; align-items: center; padding: 16px 20px; cursor: pointer; } .dec-rank { font-family: var(--font-mono); font-size: 22px; font-weight: 700; color: var(--faint); } .dec-body { min-width: 0; } .dec-title { font-size: 14px; font-weight: 600; color: var(--txt); line-height: 1.35; } .dec-ecart { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-top: 3px; } .dec-cap { font-family: var(--font-ui); font-size: 11px; color: var(--faint); margin-top: 2px; letter-spacing: .04em; } .dec-chev { font-family: var(--font-mono); font-size: 14px; color: var(--muted); padding-left: 8px; } .dec-detail { border-top: 1px solid var(--border); padding: 20px; } .dec-meta-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; } @media (max-width: 760px) { .dec-meta-4 { grid-template-columns: 1fr 1fr; } } .dec-meta-tile { background: var(--bg4); border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; } .dec-meta-lbl { font-family: var(--font-ui); font-size: 11px; color: var(--faint); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; } .dec-meta-val { font-size: 12px; color: var(--txt); line-height: 1.4; } .dec-retain { background: linear-gradient(135deg, rgb(var(--cyan-rgb) / .05), rgb(var(--green-rgb) / .03)); border: 1px solid rgb(var(--cyan-rgb) / .2); border-radius: 6px; padding: 18px 20px; } .dec-retain-h { font-family: var(--font-ui); font-size: 11px; color: var(--cyan); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 14px; } .dec-retain-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 760px) { .dec-retain-grid { grid-template-columns: 1fr; } } .dec-retain-lbl { font-family: var(--font-ui); font-size: 11px; color: var(--faint); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; } .dec-retain-num { font-size: 13px; color: var(--txt); font-weight: 600; } .dec-retain-it { font-size: 12px; color: var(--txt); font-style: italic; line-height: 1.5; } .dec-retain-t { font-size: 12px; color: var(--muted); line-height: 1.5; } .dec-retain-foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--ink-soft); display: flex; gap: 14px; flex-wrap: wrap; } /* ── RECO filters & chips ── */ .reco-filters { background: var(--bg3); border: 1px solid var(--border); border-radius: 6px; padding: 14px 16px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 10px; } .reco-filters-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .reco-filters-lbl { font-family: var(--font-ui); font-size: 11px; color: var(--faint); letter-spacing: .1em; text-transform: uppercase; margin-right: 4px; } .chip-mini { font-family: var(--font-ui); font-size: 11px; letter-spacing: .06em; padding: 6px 12px; border-radius: 100px; border: 1px solid var(--border-strong); color: var(--muted); background: transparent; cursor: pointer; transition: all .15s; } .chip-mini:hover { color: var(--txt); border-color: var(--txt); } .chip-mini.on { color: var(--cyan); border-color: var(--cyan); background: rgb(var(--cyan-rgb) / .1); } .reco-list { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; } .reco-chip { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; padding: 7px 12px; border-radius: 100px; border: 1px solid var(--border-strong); color: var(--muted); background: var(--bg3); cursor: pointer; transition: all .15s; } .reco-chip input[type="checkbox"] { accent-color: var(--cyan); cursor: pointer; } .reco-chip:hover { color: var(--txt); border-color: var(--cyan); } .reco-chip.on { color: var(--cyan); border-color: var(--cyan); background: rgb(var(--cyan-rgb) / .08); } .reco-empty { font-family: var(--font-mono); font-size: 11px; color: var(--faint); padding: 14px 20px; background: var(--bg3); border: 1px dashed var(--border-strong); border-radius: 6px; text-align: center; } .reco-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; margin-bottom: 16px; } @media (max-width: 900px) { .reco-grid { grid-template-columns: 1fr; } } .reco-card-l, .reco-card-r { background: var(--bg3); border: 1px solid var(--border); border-radius: 6px; padding: 22px; } .reco-card-h { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; gap: 10px; flex-wrap: wrap; } .reco-lbl { font-family: var(--font-ui); font-size: 11px; color: var(--muted); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 10px; } .reco-block { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); } .reco-block:first-of-type { margin-top: 0; padding-top: 0; border-top: none; } .reco-depend { background: rgb(var(--amber-rgb) / .04); border: 1px solid rgb(var(--amber-rgb) / .18); border-radius: 6px; padding: 10px 14px; margin-top: 14px; } .reco-alt { background: rgb(var(--cyan-rgb) / .04); border: 1px solid rgb(var(--cyan-rgb) / .18); border-radius: 6px; padding: 10px 14px; margin-top: 14px; } .reco-p { font-size: 13px; color: var(--txt); line-height: 1.6; max-width: none; } .reco-rolepill { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .reco-block-box { background: var(--bg3); border: 1px solid var(--border); border-radius: 6px; padding: 16px 18px; margin-top: 14px; } .score-bar-track { flex: 1; height: 5px; background: var(--ink-soft); border-radius: 100px; } .score-bar-fill { height: 100%; border-radius: 100px; transition: width .6s cubic-bezier(.16,1,.3,1); } .stack-panel { background: linear-gradient(135deg, rgb(var(--green-rgb) / .06), rgb(var(--cyan-rgb) / .03)); border: 1px solid rgb(var(--green-rgb) / .25); border-radius: 6px; padding: 16px 20px; margin-top: 8px; } /* ── SIMULATEURS ── */ .sim-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 22px; border-bottom: 1px solid var(--border); } .sim-tab { font-family: var(--font-ui); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 12px 18px; background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--muted); cursor: pointer; transition: all .2s; margin-bottom: -1px; } .sim-tab:hover { color: var(--txt); } .sim-tab.active { color: var(--cyan); border-bottom-color: var(--cyan); } .sim-scope { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 12px 16px; background: var(--bg3); border: 1px solid var(--border); border-radius: 6px; margin-bottom: 16px; } .sim-select { font-family: inherit; font-size: 12px; padding: 6px 10px; background: var(--bg4); border: 1px solid var(--border-strong); border-radius: 6px; color: var(--txt); cursor: pointer; outline: none; } .sim-select:focus { border-color: var(--cyan); } .slider-anchors { display: flex; justify-content: space-between; font-family: var(--font-ui); font-size: 11px; color: var(--faint); margin-top: 10px; letter-spacing: .04em; flex-wrap: wrap; gap: 10px; } .scenar-card { background: var(--bg3); border: 1px solid var(--border); border-radius: 6px; padding: 16px 18px; cursor: pointer; transition: all .2s; } .scenar-card:hover { transform: translateY(-2px); border-color: var(--border-strong); } .scenar-lbl { font-family: var(--font-ui); font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 10px; } .scenar-num { font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 4px; } .scenar-sub { font-family: var(--font-mono); font-size: 11px; color: var(--faint); margin-bottom: 8px; } .scenar-desc { font-size: 12px; color: var(--muted); line-height: 1.5; } .ghm-pick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px; } @media (max-width: 760px) { .ghm-pick { grid-template-columns: 1fr 1fr; } } .ghm-card { background: var(--bg3); border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; text-align: left; cursor: pointer; transition: all .2s; } .ghm-card.on { border-color: var(--cyan); background: rgb(var(--cyan-rgb) / .08); } .ghm-card:hover { border-color: var(--cyan); } .ghm-code { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--cyan); } .ghm-lib { font-size: 11px; color: var(--muted); margin: 4px 0 6px; line-height: 1.4; } .ghm-tarif{ font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--green); } .alert-good { background: rgb(var(--green-rgb) / .05); border: 1px solid rgb(var(--green-rgb) / .25); border-radius: 6px; padding: 14px 18px; margin-bottom: 18px; display: flex; align-items: center; flex-wrap: wrap; } .formula-box { margin-top: 14px; padding: 12px 16px; background: rgb(var(--cyan-rgb) / .03); border: 1px solid rgb(var(--cyan-rgb) / .15); border-radius: 6px; } .formula-box code { font-family: var(--font-mono); font-size: 11px; color: var(--txt); display: block; line-height: 1.6; margin-top: 4px; } /* ── BENCHMARK ── */ .bench-row-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; flex-wrap: wrap; gap: 8px; } .bench-spec { font-family: var(--font-mono); font-size: 12px; color: var(--txt); font-weight: 600; } .bench-sej { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-left: 12px; } .bench-obs { font-family: var(--font-mono); font-size: 12px; color: var(--faint); } .bench-obs b { font-size: 16px; } .bench-legend { border-top: 1px solid var(--border); padding-top: 14px; margin-top: 8px; display: flex; gap: 18px; flex-wrap: wrap; font-family: var(--font-ui); font-size: 11px; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; } .bench-legend span { display: inline-flex; align-items: center; gap: 8px; } .lg-line { width: 14px; height: 2px; box-shadow: 0 0 6px currentColor; } .lg-bar { width: 14px; height: 8px; } /* Benchmark v2 — synthèse IA + recos déployables */ .bench-synth { background: linear-gradient(135deg, rgb(var(--cyan-rgb) / .05), rgb(var(--violet-rgb) / .03)); border: 1px solid rgb(var(--cyan-rgb) / .2); border-radius: 6px; padding: 18px 20px; margin-bottom: 18px; } .bench-synth-row { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; } .bench-synth-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } @media (max-width: 700px) { .bench-synth-tiles { grid-template-columns: 1fr 1fr; } } .bench-synth-tile { background: var(--ink-weak); border: 1px solid var(--border); border-radius: 6px; padding: 12px 14px; } .bench-synth-num { font-family: var(--font-mono); font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1; margin-bottom: 4px; } .bench-synth-lbl { font-size: 11px; color: var(--muted); line-height: 1.4; } .bench-reco { margin-top: 8px; border-radius: 6px; border: 1px solid var(--border-strong); background: var(--ink-weak); overflow: hidden; } .bench-reco-red { border-color: rgb(var(--red-rgb) / .3); background: rgb(var(--red-rgb) / .04); } .bench-reco-amber { border-color: rgb(var(--amber-rgb) / .3); background: rgb(var(--amber-rgb) / .04); } .bench-reco-green { border-color: rgb(var(--green-rgb) / .3); background: rgb(var(--green-rgb) / .04); } .bench-reco-cyan { border-color: rgb(var(--cyan-rgb) / .3); background: rgb(var(--cyan-rgb) / .04); } .bench-reco-head { display: flex; align-items: center; gap: 12px; padding: 10px 14px; cursor: pointer; } .bench-reco-title { font-size: 12px; color: var(--txt); font-weight: 500; flex: 1; } .bench-reco-toggle { font-family: var(--font-mono); font-size: 16px; color: var(--muted); width: 20px; text-align: center; } .bench-reco-body { padding: 0 14px 14px 14px; border-top: 1px solid var(--border); } .bench-reco-arg { font-size: 12px; color: var(--muted); line-height: 1.55; margin: 12px 0 14px; } .bench-reco-next-lbl { font-family: var(--font-ui); font-size: 11px; letter-spacing: .14em; color: var(--cyan); text-transform: uppercase; margin-bottom: 8px; } .bench-reco-next { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 4px; } .bench-reco-next li { font-size: 12px; color: var(--txt); padding-left: 16px; position: relative; line-height: 1.5; } .bench-reco-next li::before { content: '→'; position: absolute; left: 0; color: var(--cyan); font-family: var(--font-mono); } /* Modules IA — dashboard tab */ .mod-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 22px; padding: 18px 20px; background: linear-gradient(135deg, rgb(var(--violet-rgb) / .06), rgb(var(--cyan-rgb) / .03)); border: 1px solid rgb(var(--violet-rgb) / .25); border-radius: 6px; } @media (max-width: 800px) { .mod-summary { grid-template-columns: 1fr; } } .mod-summary-num { font-family: var(--font-mono); font-size: 28px; font-weight: 700; letter-spacing: -.02em; color: var(--txt); line-height: 1; margin-bottom: 6px; } .mod-summary-lbl { font-size: 11px; color: var(--muted); line-height: 1.5; } .mod-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } /* 5 cartes : la dernière (Atelier, sur-mesure) remplit la rangée incomplète au lieu de laisser un trou de grille. La règle cesse de matcher dès qu'une 6e carte apparaît. */ @media (min-width: 681px) { .mod-grid > *:nth-child(5):last-child { grid-column: span 2; } } @media (max-width: 1100px) { .mod-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 680px) { .mod-grid { grid-template-columns: 1fr; } } .mod-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 6px; padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 10px; position: relative; overflow: hidden; transition: all .25s; } .mod-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--violet); opacity: .5; transition: opacity .25s; } .mod-card:hover { border-color: rgb(var(--violet-rgb) / .5); } .mod-card:hover::before { opacity: 1; } .mod-card.is-on { background: linear-gradient(180deg, var(--bg2), rgb(var(--violet-rgb) / .05)); border-color: rgb(var(--violet-rgb) / .5); } .mod-card.is-on::before { opacity: 1; height: 3px; } .mod-card.is-bespoke { background: linear-gradient(180deg, var(--bg2), rgb(var(--violet-rgb) / .04)); border-color: rgb(var(--violet-rgb) / .3); } .mod-card.is-bespoke::before { background: linear-gradient(90deg, var(--violet), var(--cyan)); opacity: 1; } .mod-card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .mod-card-tag { font-family: var(--font-ui); font-size: 11px; color: var(--violet); letter-spacing: .14em; text-transform: uppercase; } .mod-card-on { font-family: var(--font-ui); font-size: 11px; letter-spacing: .14em; color: var(--green); padding: 3px 8px; border: 1px solid var(--green); border-radius: 100px; background: rgb(var(--green-rgb) / .08); } .mod-card-name { font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: var(--txt); line-height: 1.15; } .mod-card-desc { font-size: 12px; color: var(--muted); line-height: 1.5; min-height: 54px; } .mod-card-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 3px; } .mod-card-list li { font-size: 11px; color: var(--txt); padding-left: 12px; position: relative; line-height: 1.5; } .mod-card-list li::before { content: '→'; position: absolute; left: 0; color: var(--violet); font-family: var(--font-mono); } .mod-card-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; } .mod-card-price { display: flex; align-items: baseline; gap: 4px; } .mod-card-price b { font-size: 18px; font-weight: 700; letter-spacing: -.02em; color: var(--txt); } .mod-card-price span { font-family: var(--font-mono); font-size: 11px; color: var(--muted); } .mod-card-preview { font-family: var(--font-ui); font-size: 11px; letter-spacing: .1em; color: var(--muted); text-decoration: none; padding: 5px 10px; border: 1px solid var(--border-strong); border-radius: 6px; text-transform: uppercase; transition: all .2s; } .mod-card-preview:hover { color: var(--violet); border-color: var(--violet); } .mod-card-cta { font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: .1em; padding: 6px 12px; background: var(--violet); color: #1a1226; border: 1px solid var(--violet); border-radius: 6px; cursor: pointer; text-transform: uppercase; text-decoration: none; transition: all .2s; } .mod-card-cta:hover { opacity: .9; transform: translateY(-1px); } .mod-card-cta.is-on { background: transparent; color: var(--violet); } .mod-card-cta.is-on:hover { background: rgb(var(--violet-rgb) / .1); } .mod-help { margin-top: 22px; padding: 16px 20px; background: rgb(var(--violet-rgb) / .04); border-left: 3px solid var(--violet); border-radius: 6px; } .mod-toast { position: fixed; bottom: 88px; right: 24px; z-index: 90; padding: 12px 18px; background: var(--bg2); border: 1px solid; border-radius: 6px; box-shadow: 0 12px 40px rgba(0,0,0,.4); animation: slideRightFade .35s ease; } /* ──────────────────────────────────────────────────────────────── TUTORIEL "Comprendre vos chiffres" + walkthrough bubble ──────────────────────────────────────────────────────────────── */ .tuto-wrap { padding-bottom: 40px; } .tuto-grid { display: grid; grid-template-columns: 300px 1fr; gap: 20px; align-items: start; } @media (max-width: 1000px) { .tuto-grid { grid-template-columns: 1fr; } } .tuto-toc { background: var(--bg2); border: 1px solid var(--border); border-radius: 6px; padding: 18px 14px; position: sticky; top: 80px; max-height: calc(100vh - 100px); overflow-y: auto; } .tuto-toc-h { font-family: var(--font-ui); font-size: 11px; color: var(--green); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 14px; padding: 0 6px 10px; border-bottom: 1px solid var(--border); } .tuto-toc-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 2px; counter-reset: none; } .tuto-toc-item { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; align-items: center; width: 100%; padding: 8px 8px 8px 4px; background: transparent; border: none; color: var(--muted); text-align: left; cursor: pointer; border-radius: 6px; font-family: inherit; font-size: 12px; line-height: 1.35; transition: all .15s; } .tuto-toc-item:hover { background: var(--ink-weak); color: var(--txt); } .tuto-toc-item.is-active { background: rgb(var(--green-rgb) / .07); color: var(--green); } .tuto-toc-item.is-done { color: var(--txt); } .tuto-toc-item.is-done.is-active { color: var(--green); } .tuto-toc-n { font-family: var(--font-mono); font-size: 11px; color: var(--faint); text-align: center; letter-spacing: .04em; } .tuto-toc-item.is-active .tuto-toc-n { color: var(--green); } .tuto-toc-t { font-weight: 500; } .tuto-toc-min { font-family: var(--font-ui); font-size: 11px; color: var(--faint); letter-spacing: .04em; white-space: nowrap; } .tuto-toc-check { position: absolute; right: 6px; color: var(--green); font-family: var(--font-mono); font-size: 11px; } .tuto-toc-item { position: relative; } .tuto-toc-progress { margin: 14px 6px 4px; height: 4px; background: var(--ink-soft); border-radius: 100px; overflow: hidden; } .tuto-toc-bar { height: 100%; background: var(--green); transition: width .4s ease; box-shadow: 0 0 6px var(--green); } .tuto-toc-progress-lbl { font-family: var(--font-ui); font-size: 11px; color: var(--muted); letter-spacing: .08em; text-align: center; margin-top: 4px; } .tuto-article { background: var(--bg2); border: 1px solid var(--border); border-radius: 6px; padding: 32px 36px; line-height: 1.7; } @media (max-width: 600px) { .tuto-article { padding: 22px 18px; } } .tuto-art-tag { font-family: var(--font-ui); font-size: 11px; color: var(--green); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 12px; } .tuto-art-title { font-family: var(--font-head); font-size: clamp(24px, 3vw, 32px); line-height: 1.15; letter-spacing: -.02em; color: var(--txt); margin-bottom: 18px; } .tuto-art-intro { font-size: 16px; color: var(--txt); line-height: 1.6; margin-bottom: 28px; padding: 14px 18px; background: rgb(var(--green-rgb) / .04); border-left: 3px solid var(--green); border-radius: 0 4px 4px 0; } .tuto-art-section { margin-bottom: 22px; } .tuto-art-section h3 { font-family: var(--font-head); font-size: 15px; color: var(--txt); font-weight: 600; letter-spacing: -.01em; margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid var(--border); } .tuto-art-section p { font-size: 14px; color: var(--muted); line-height: 1.7; } .tuto-retenir { margin: 28px 0 20px; padding: 16px 20px; background: linear-gradient(135deg, rgb(var(--amber-rgb) / .05), rgb(var(--green-rgb) / .03)); border: 1px solid rgb(var(--amber-rgb) / .25); border-radius: 6px; } .tuto-retenir-lbl { font-family: var(--font-ui); font-size: 11px; color: var(--amber); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 6px; } .tuto-retenir p { font-size: 14px; color: var(--txt); line-height: 1.6; font-weight: 500; } .tuto-art-actions { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; padding-top: 20px; border-top: 1px solid var(--border); margin-top: 24px; } .tuto-walk-btn { font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 9px 16px; background: var(--green); color: var(--on-accent); border: 1px solid var(--green); border-radius: 6px; cursor: pointer; transition: all .2s; box-shadow: 0 4px 12px rgb(var(--green-rgb) / .2); } .tuto-walk-btn:hover { opacity: .9; transform: translateY(-1px); } .tuto-art-nav { display: flex; gap: 8px; } .tuto-nav-btn { font-family: var(--font-ui); font-size: 11px; letter-spacing: .08em; padding: 9px 14px; background: transparent; color: var(--muted); border: 1px solid var(--border-strong); border-radius: 6px; cursor: pointer; transition: all .2s; text-transform: uppercase; } .tuto-nav-btn:hover:not(:disabled) { color: var(--txt); border-color: var(--txt); } .tuto-nav-btn:disabled { opacity: .3; cursor: not-allowed; } .tuto-nav-btn.primary { color: var(--green); border-color: rgb(var(--green-rgb) / .4); } .tuto-nav-btn.primary:hover:not(:disabled) { background: rgb(var(--green-rgb) / .08); border-color: var(--green); } /* Walk-bubble : message contextuel envoyé depuis le tuto vers un onglet */ .walk-bubble { position: fixed; bottom: 100px; left: 50%; transform: translateX(-50%); z-index: 95; max-width: 460px; padding: 18px 22px; background: var(--bg2); border: 1px solid var(--green); border-radius: 10px; box-shadow: 0 12px 40px rgb(var(--green-rgb) / .2), 0 4px 12px rgba(0,0,0,.4); animation: slideUpFade .4s ease; } .walk-bubble-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .walk-bubble-close { background: transparent; border: none; color: var(--muted); cursor: pointer; font-size: 18px; line-height: 1; padding: 0 4px; } .walk-bubble-close:hover { color: var(--txt); } .walk-bubble p { font-size: 14px; color: var(--txt); line-height: 1.55; margin-bottom: 12px; } .walk-bubble-back { font-family: var(--font-ui); font-size: 11px; letter-spacing: .08em; padding: 7px 12px; background: transparent; color: var(--green); border: 1px solid rgb(var(--green-rgb) / .4); border-radius: 6px; cursor: pointer; text-transform: uppercase; transition: all .2s; } .walk-bubble-back:hover { background: rgb(var(--green-rgb) / .08); border-color: var(--green); } /* ── TERRITOIRE ── */ .terr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; } @media (max-width: 900px) { .terr-grid { grid-template-columns: 1fr; } } .terr-map { padding: 18px 20px; } .terr-concur { padding: 18px 20px; } .terr-concur-row { display: grid; grid-template-columns: 28px 1fr 60px 70px; gap: 10px; align-items: center; padding: 8px 10px; background: transparent; border: 1px solid transparent; border-radius: 6px; transition: background .15s; } .terr-concur-row:hover { background: var(--ink-weak); } .terr-concur-row.us { background: rgb(var(--cyan-rgb) / .07); border-color: rgb(var(--cyan-rgb) / .3); } .terr-legend { margin-top: 14px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-family: var(--font-ui); font-size: 11px; color: var(--muted); letter-spacing: .06em; } .terr-leg-chip { display: inline-flex; align-items: center; gap: 5px; } .terr-leg-sq { width: 12px; height: 12px; border-radius: 6px; border: 1px solid var(--border); } /* ── DPT PANEL (slide-in) ── */ .dpt-panel { background: var(--bg3); border: 1px solid var(--border-strong); border-radius: 6px; padding: 0; overflow: hidden; animation: slideRightFade .3s cubic-bezier(.16,1,.3,1) both; } .dpt-head { padding: 16px 20px; background: linear-gradient(135deg, rgb(var(--cyan-rgb) / .06), rgb(var(--green-rgb) / .03)); border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; } .dpt-eyebrow { font-family: var(--font-ui); font-size: 11px; color: var(--cyan); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 4px; } .dpt-h { font-size: 20px; color: var(--txt); font-weight: 700; } .dpt-close { font-size: 22px; background: transparent; border: 1px solid var(--border-strong); color: var(--muted); width: 30px; height: 30px; border-radius: 50%; cursor: pointer; line-height: 1; transition: all .15s; } .dpt-close:hover { color: var(--cyan); border-color: var(--cyan); } .dpt-body { padding: 18px 20px; } .dpt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; } .dpt-etab { display: grid; grid-template-columns: 30px 1fr 60px; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 6px; } .dpt-etab.us { background: rgb(var(--cyan-rgb) / .07); } /* ── KANBAN SUIVI ── */ .kanban { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; } @media (max-width: 1100px) { .kanban { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 760px) { .kanban { grid-template-columns: 1fr; } } .kan-col { background: var(--bg3); border: 1px solid var(--border); border-radius: 6px; padding: 12px 10px; min-height: 280px; display: flex; flex-direction: column; transition: border-color .15s, background .15s; } .kan-col.k-red { border-top: 3px solid var(--red); } .kan-col.k-amber { border-top: 3px solid var(--amber); } .kan-col.k-cyan { border-top: 3px solid var(--cyan); } .kan-col.k-faint { border-top: 3px solid var(--border-strong); } .kan-col-head { display: flex; justify-content: space-between; align-items: center; padding: 0 4px 10px; margin-bottom: 10px; border-bottom: 1px solid var(--border); } .kan-col-count { font-family: var(--font-mono); font-size: 11px; color: var(--faint); } .kan-col-body { display: flex; flex-direction: column; gap: 10px; } .kan-empty { font-family: var(--font-mono); font-size: 11px; color: var(--faint); text-align: center; padding: 20px 0; opacity: .5; } .kan-card { background: var(--bg4); border: 1px solid var(--border); border-radius: 6px; padding: 12px 14px; cursor: grab; transition: all .15s; position: relative; display: flex; flex-direction: column; gap: 8px; } .kan-card:hover { border-color: var(--border-strong); transform: translateY(-1px); } .kan-card:active { cursor: grabbing; } .kan-card.prio-p1 { border-left: 3px solid var(--red); } .kan-card.prio-p2 { border-left: 3px solid var(--amber); } .kan-card.prio-p3 { border-left: 3px solid var(--green); } .kan-card-titre { font-size: 13px; color: var(--txt); font-weight: 600; line-height: 1.35; cursor: text; } .kan-edit { width: 100%; background: var(--bg3); border: 1px solid var(--cyan); border-radius: 6px; padding: 6px 8px; font-family: inherit; font-size: 13px; color: var(--txt); outline: none; } .kan-card-meta { display: flex; justify-content: space-between; font-family: var(--font-ui); font-size: 11px; color: var(--muted); letter-spacing: .04em; } .kan-card-kpi { font-family: var(--font-mono); font-size: 11px; color: var(--cyan); line-height: 1.4; padding: 6px 8px; background: rgb(var(--cyan-rgb) / .04); border-radius: 6px; } .kan-prog { margin-top: 4px; } .kan-prog-lbl { display: flex; justify-content: space-between; font-family: var(--font-ui); font-size: 11px; color: var(--faint); letter-spacing: .08em; margin-bottom: 4px; } .kan-slider { height: 3px; } .kan-card-actions { display: flex; gap: 4px; margin-top: 4px; } .kan-act { font-family: var(--font-ui); font-size: 11px; letter-spacing: .06em; padding: 4px 8px; background: transparent; border: 1px solid var(--border-strong); border-radius: 6px; color: var(--muted); cursor: pointer; transition: all .15s; } .kan-act:hover { color: var(--cyan); border-color: var(--cyan); } .kan-act-del { margin-left: auto; padding: 4px 8px; } .kan-act-del:hover { color: var(--red); border-color: var(--red); } .kan-modal { position: fixed; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(4px); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; animation: slideUpFade .2s ease; } .kan-modal-box { background: var(--bg2); border: 1px solid var(--border-strong); border-radius: 10px; padding: 24px 26px; width: 100%; max-width: 480px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 30px 80px rgba(0,0,0,.6); } .kan-inp { width: 100%; padding: 10px 12px; background: var(--bg4); border: 1px solid var(--border-strong); border-radius: 6px; font-family: inherit; font-size: 13px; color: var(--txt); outline: none; transition: border-color .15s; } .kan-inp:focus { border-color: var(--cyan); } /* ── ONBOARDING ── */ .onb-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(6px); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; animation: slideUpFade .25s ease; } .onb-bubble { background: var(--bg2); border: 1px solid var(--cyan); border-radius: 10px; padding: 30px 32px; width: 100%; max-width: 440px; } .onb-btn { font-family: var(--font-ui); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding: 9px 16px; border-radius: 6px; cursor: pointer; transition: all .2s; } .onb-btn.ghost { background: transparent; border: 1px solid var(--border-strong); color: var(--muted); } .onb-btn.primary { font-weight: 700; } /* ── CHAT IA ── */ .chat-fab { position: fixed; bottom: 24px; right: 24px; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--cyan), var(--green)); color: var(--on-accent); border: none; font-size: 24px; cursor: pointer; box-shadow: 0 10px 28px rgba(0,0,0,.4); z-index: 90; transition: all .25s; display: flex; align-items: center; justify-content: center; } .chat-fab:hover { transform: scale(1.06); } .chat-fab.open { background: var(--bg4); color: var(--txt); } .chat-fab-pulse { position: absolute; inset: 0; border-radius: 50%; background: var(--cyan); animation: fabPulse 2s infinite; z-index: -1; } .chat-panel { position: fixed; bottom: 96px; right: 24px; width: 380px; max-width: calc(100vw - 32px); height: 560px; max-height: calc(100vh - 140px); background: var(--bg2); border: 1px solid var(--border-strong); border-radius: 10px; z-index: 90; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 56px rgba(0,0,0,.55); animation: slideUpFade .25s ease; } .chat-head { padding: 14px 18px; background: linear-gradient(135deg, rgb(var(--cyan-rgb) / .08), rgb(var(--green-rgb) / .04)); border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: flex-start; } .chat-title { font-size: 13px; color: var(--txt); font-weight: 700; display: flex; gap: 8px; align-items: center; } .chat-sub { font-family: var(--font-ui); font-size: 11px; color: var(--muted); margin-top: 3px; letter-spacing: .04em; } .chat-close { background: transparent; border: 1px solid var(--border-strong); color: var(--muted); width: 24px; height: 24px; border-radius: 50%; cursor: pointer; font-size: 16px; line-height: 1; } .chat-body { flex: 1; padding: 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; } .chat-msg { padding: 10px 14px; border-radius: 10px; max-width: 86%; font-size: 13px; line-height: 1.5; animation: slideUpFade .2s ease; } .chat-msg.ai { background: var(--bg4); color: var(--txt); border: 1px solid var(--border); align-self: flex-start; border-bottom-left-radius: 2px; } .chat-msg.me { background: rgb(var(--cyan-rgb) / .12); color: var(--txt); border: 1px solid rgb(var(--cyan-rgb) / .3); align-self: flex-end; border-bottom-right-radius: 2px; } .chat-input { display: flex; gap: 6px; padding: 12px 14px; border-top: 1px solid var(--border); background: var(--bg3); } .chat-input input[type="text"] { flex: 1; background: var(--bg4); border: 1px solid var(--border-strong); border-radius: 100px; padding: 8px 14px; color: var(--txt); font-family: inherit; font-size: 13px; outline: none; transition: border-color .15s; } .chat-input input[type="text"]:focus { border-color: var(--cyan); } .chat-file, .chat-send { background: var(--bg4); border: 1px solid var(--border-strong); border-radius: 50%; width: 34px; height: 34px; color: var(--muted); cursor: pointer; font-family: var(--font-mono); font-size: 14px; transition: all .15s; } .chat-file:hover, .chat-send:hover { color: var(--cyan); border-color: var(--cyan); } .chat-send { background: var(--cyan); color: var(--on-accent); border-color: var(--cyan); font-weight: 700; } .chat-foot { padding: 8px 14px; font-family: var(--font-ui); font-size: 11px; color: var(--faint); text-align: center; letter-spacing: .08em; border-top: 1px solid var(--border); background: var(--bg3); } /* Section « Mes questions » — Q&R intégrée (remplace le chat flottant) */ .qa-shell { display: flex; flex-direction: column; background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; } .qa-thread { padding: 20px; display: flex; flex-direction: column; gap: 12px; min-height: 120px; max-height: 56vh; overflow-y: auto; } .qa-thread .chat-msg { max-width: 82%; } .qa-input { display: flex; gap: 8px; padding: 14px 16px; border-top: 1px solid var(--border); background: var(--bg3); } .qa-input input[type="text"] { flex: 1; background: var(--bg4); border: 1px solid var(--border-strong); border-radius: 100px; padding: 10px 16px; color: var(--txt); font-family: inherit; font-size: 14px; outline: none; transition: border-color .15s; } .qa-input input[type="text"]:focus { border-color: var(--cyan); } .qa-input .chat-send { width: 38px; height: 38px; } .qa-foot { padding: 10px 16px; font-family: var(--font-ui); font-size: 11px; color: var(--faint); letter-spacing: .06em; border-top: 1px solid var(--border); background: var(--bg3); } /* ════════════════════════════════════════════════════════════════ NOTE DE DÉCISION MAGAZINE — Layout A4 brandé Nosomi ════════════════════════════════════════════════════════════════ */ .codir-magazine { background: var(--bg2); border: 1px solid var(--border-strong); border-radius: 10px; overflow: hidden; } .codir-page { padding: 32px 36px; position: relative; } .codir-page-break { border-top: 1px dashed var(--border); } .codir-mast { display: flex; justify-content: space-between; align-items: center; padding-bottom: 18px; margin-bottom: 24px; border-bottom: 2px solid var(--cyan); } .codir-brand { display: flex; align-items: center; gap: 12px; } .codir-brand-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); } .codir-brand-name { font-family: var(--font-ui); font-size: 18px; font-weight: 700; letter-spacing: .3em; color: var(--txt); } .codir-brand-sub { font-family: var(--font-ui); font-size: 11px; color: var(--muted); letter-spacing: .1em; margin-top: 2px; } .codir-mast-r { text-align: right; } .codir-mast-lbl { font-family: var(--font-ui); font-size: 11px; color: var(--cyan); letter-spacing: .14em; text-transform: uppercase; } .codir-mast-date { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-top: 2px; } .codir-hero { display: grid; grid-template-columns: 1.5fr auto; gap: 30px; padding: 24px 0 28px; border-bottom: 1px solid var(--border); margin-bottom: 24px; align-items: center; } @media (max-width: 760px) { .codir-hero { grid-template-columns: 1fr; } } .codir-hero-eyebrow { font-family: var(--font-ui); font-size: 11px; color: var(--cyan); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 10px; } .codir-hero-h { font-size: 28px; font-weight: 700; color: var(--txt); letter-spacing: -.02em; line-height: 1.15; margin-bottom: 12px; } .codir-hero-lead { font-size: 15px; color: var(--txt); line-height: 1.55; margin-bottom: 16px; font-weight: 500; } .codir-meta-line { font-family: var(--font-mono); font-size: 11px; color: var(--muted); display: flex; gap: 18px; flex-wrap: wrap; } .codir-hero-r { text-align: center; padding: 14px 18px; background: rgb(var(--cyan-rgb) / .05); border: 1px solid rgb(var(--cyan-rgb) / .2); border-radius: 10px; } .codir-bignum { font-family: var(--font-mono); font-size: 36px; font-weight: 700; letter-spacing: -.02em; line-height: 1; } .codir-bignum-lbl { font-family: var(--font-ui); font-size: 11px; color: var(--muted); letter-spacing: .1em; margin: 6px 0 10px; text-transform: uppercase; } .codir-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 22px; } @media (max-width: 760px) { .codir-2col { grid-template-columns: 1fr; } } .codir-sec-h { font-family: var(--font-ui); font-size: 11px; color: var(--muted); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border); } .codir-p { font-size: 13px; color: var(--txt); line-height: 1.6; } .codir-data { background: rgb(var(--cyan-rgb) / .04); border-left: 3px solid var(--cyan); padding: 12px 16px; margin-bottom: 22px; border-radius: 0 4px 4px 0; } .codir-data .codir-sec-h { border-bottom: none; padding-bottom: 4px; } .codir-scenarios { margin-bottom: 22px; } .codir-scen-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } @media (max-width: 760px) { .codir-scen-grid { grid-template-columns: 1fr; } } .codir-scen { background: var(--bg3); border: 1px solid var(--border); border-radius: 6px; padding: 14px 16px; } .codir-scen.scen-0 { border-top: 3px solid var(--amber); } .codir-scen.scen-1 { border-top: 3px solid var(--cyan); } .codir-scen.scen-2 { border-top: 3px solid var(--green); } .codir-scen-lbl { font-family: var(--font-ui); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 8px; } .codir-scen.scen-0 .codir-scen-lbl { color: var(--amber); } .codir-scen.scen-1 .codir-scen-lbl { color: var(--cyan); } .codir-scen.scen-2 .codir-scen-lbl { color: var(--green); } .codir-scen-num { font-family: var(--font-mono); font-size: 16px; font-weight: 700; color: var(--txt); margin-bottom: 6px; } .codir-scen-act { font-size: 11px; color: var(--muted); line-height: 1.5; } .codir-bullet { font-size: 12px; color: var(--muted); line-height: 1.5; margin-bottom: 8px; padding-left: 12px; border-left: 2px solid var(--border-strong); } .codir-bullet.arr::before { content: '→ '; color: var(--cyan); font-family: var(--font-mono); } .codir-bullet.arr { color: var(--txt); padding-left: 0; border-left: none; } .codir-bullet.arrx::before { content: '↔ '; color: var(--amber); font-family: var(--font-mono); } .codir-bullet.arrx { padding-left: 0; border-left: none; } .codir-bullet.diamond::before { content: '◆ '; color: var(--green); font-family: var(--font-mono); } .codir-bullet.diamond { padding-left: 0; border-left: none; color: var(--muted); } .codir-recobox { background: linear-gradient(135deg, rgb(var(--green-rgb) / .08), rgb(var(--cyan-rgb) / .04)); border: 1px solid rgb(var(--green-rgb) / .3); border-radius: 6px; padding: 18px 22px; margin-bottom: 22px; } .codir-foot { display: flex; justify-content: space-between; gap: 20px; padding-top: 18px; margin-top: 24px; border-top: 2px solid var(--cyan); font-family: var(--font-ui); font-size: 11px; color: var(--muted); line-height: 1.6; letter-spacing: .04em; } .codir-foot-r { text-align: right; } /* ──────────────────────────────────────────────────────────────── ZERO ACCESS™ — section confiance données ──────────────────────────────────────────────────────────────── */ .zero-access { background: linear-gradient(135deg, rgb(var(--cyan-rgb) / .05), rgb(var(--violet-rgb) / .04)); border: 1px solid rgb(var(--violet-rgb) / .25); border-radius: 10px; padding: 36px 40px; position: relative; overflow: hidden; } .zero-access::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--cyan), var(--violet)); } .za-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 28px; } .za-badge { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-ui); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--violet); padding: 6px 12px; border: 1px solid rgb(var(--violet-rgb) / .4); background: rgb(var(--violet-rgb) / .08); border-radius: 100px; } .za-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 8px rgb(var(--violet-rgb) / .7); } .za-title { font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; margin: 12px 0 8px; } .za-title .glow-violet { color: var(--violet); } .za-lead { color: var(--muted); font-size: 14px; max-width: 720px; line-height: 1.6; } .za-pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .za-pillar { background: var(--ink-weak); border: 1px solid var(--border); border-radius: 6px; padding: 18px; display: flex; flex-direction: column; gap: 8px; } .za-pillar-ico { font-family: var(--font-ui); font-size: 11px; color: var(--violet); letter-spacing: .14em; } .za-pillar-h { font-size: 13px; font-weight: 700; color: var(--txt); line-height: 1.3; } .za-pillar-p { font-size: 12px; color: var(--muted); line-height: 1.5; } @media (max-width: 900px) { .za-pillars { grid-template-columns: 1fr 1fr; } .zero-access { padding: 28px 22px; } } @media (max-width: 560px) { .za-pillars { grid-template-columns: 1fr; } } /* ──────────────────────────────────────────────────────────────── MODULES COMPLÉMENTAIRES — accent violet/magenta ──────────────────────────────────────────────────────────────── */ .modules-section { background: radial-gradient(ellipse at top, rgb(var(--violet-rgb) / .06), transparent 70%); } .modules-head { text-align: center; margin-bottom: 48px; } .modules-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-ui); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--violet); margin-bottom: 18px; } .modules-eyebrow::before { content: ''; width: 24px; height: 1px; background: var(--violet); } .modules-h2 { font-size: clamp(28px, 4vw, 44px); line-height: 1.1; letter-spacing: -.02em; margin-bottom: 14px; } .modules-h2 .glow-violet { color: var(--violet); } .modules-lead { color: var(--muted); font-size: 15px; max-width: 640px; margin: 0 auto; line-height: 1.6; } .modules-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } @media (max-width: 980px) { .modules-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .modules-grid { grid-template-columns: 1fr; } } .module-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 6px; padding: 22px 22px 26px; display: flex; flex-direction: column; gap: 14px; position: relative; overflow: hidden; transition: all .25s; } .module-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--violet); opacity: .6; transition: opacity .25s; } .module-card:hover { border-color: rgb(var(--violet-rgb) / .5); transform: translateY(-2px); } .module-card:hover::before { opacity: 1; } .module-card.bespoke { background: linear-gradient(180deg, var(--bg2), rgb(var(--violet-rgb) / .04)); border-color: rgb(var(--violet-rgb) / .3); } .module-card.bespoke::before { background: linear-gradient(90deg, var(--violet), var(--cyan)); opacity: 1; } .module-tag { font-family: var(--font-mono); font-size: 11px; color: var(--violet); letter-spacing: .14em; text-transform: uppercase; } .module-name { font-size: 19px; font-weight: 700; letter-spacing: -.01em; color: var(--txt); line-height: 1.15; } .module-desc { font-size: 13px; color: var(--muted); line-height: 1.55; min-height: 60px; } .module-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 4px; } .module-list li { font-size: 12px; color: var(--txt); padding-left: 14px; position: relative; line-height: 1.5; } .module-list li::before { content: '→'; position: absolute; left: 0; color: var(--violet); font-family: var(--font-mono); } .module-price { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border); display: flex; align-items: baseline; gap: 6px; } .module-price b { font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: var(--txt); } .module-price span { font-family: var(--font-mono); font-size: 11px; color: var(--muted); } .module-price.devis b { font-size: 16px; color: var(--violet); } .module-bundle { margin-top: 36px; padding: 28px 32px; background: linear-gradient(135deg, rgb(var(--cyan-rgb) / .06), rgb(var(--violet-rgb) / .06)); border: 1px solid rgb(var(--violet-rgb) / .35); border-radius: 10px; display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; } .bundle-tag { display: inline-block; font-family: var(--font-ui); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--violet); padding: 4px 10px; border: 1px solid rgb(var(--violet-rgb) / .4); background: rgb(var(--violet-rgb) / .08); border-radius: 100px; margin-bottom: 12px; } .bundle-name { font-size: 22px; font-weight: 700; letter-spacing: -.01em; color: var(--txt); line-height: 1.15; margin-bottom: 8px; } .bundle-desc { font-size: 13px; color: var(--muted); line-height: 1.55; } .bundle-price { text-align: right; } .bundle-strike { font-family: var(--font-mono); font-size: 12px; color: var(--faint); text-decoration: line-through; margin-bottom: 2px; } .bundle-amount { font-size: 32px; font-weight: 700; letter-spacing: -.02em; line-height: 1; color: var(--txt); } .bundle-amount sub { font-family: var(--font-mono); font-size: 12px; color: var(--muted); font-weight: 400; vertical-align: baseline; margin-left: 4px; } .bundle-save { font-family: var(--font-ui); font-size: 11px; color: var(--green); margin-top: 6px; letter-spacing: .04em; } @media (max-width: 720px) { .module-bundle { grid-template-columns: 1fr; } .bundle-price { text-align: left; } } /* ──────────────────────────────────────────────────────────────── PRINT : Note de décision aux codes Nosomi (light variant) ──────────────────────────────────────────────────────────────── */ @media print { @page { size: A4; margin: 12mm; } body, html { background: #fafbfc !important; color: #0a0d18 !important; } body::before { display: none !important; } nav, footer, .site-footer-v3, .section, .no-print, .cockpit-side, .cockpit-chrome, .cockpit-breadcrumb, .module-head, .subtabs-bar, .toast-stack, .chat-fab, .chat-panel, .onb-overlay { display: none !important; } .cockpit-section { background: #fafbfc !important; padding: 0 !important; } .cockpit-frame.v2 { background: #fafbfc !important; box-shadow: none !important; border: none !important; padding: 0 !important; margin: 0 !important; max-width: none !important; border-radius: 0 !important; } .cockpit-shell { display: block !important; } .cockpit-main, .cockpit-body { padding: 0 !important; min-height: 0 !important; } /* Magazine : préserver les codes Nosomi en impression */ .codir-magazine { background: #ffffff !important; border: none !important; border-radius: 0 !important; box-shadow: 0 0 0 1px #e3e6ee inset !important; } .codir-page { padding: 20mm 14mm !important; min-height: auto; page-break-inside: avoid; } .codir-page-break { page-break-before: always !important; border-top: none !important; } .codir-mast { border-bottom: 2px solid #00a8d4 !important; } .codir-brand-name { color: #0a0d18 !important; } .codir-brand-sub { color: #4b5066 !important; } .codir-brand-dot { background: #00a8d4 !important; box-shadow: 0 0 6px rgba(0,168,212,.4) !important; } .codir-mast-lbl { color: #00829e !important; } .codir-mast-date { color: #4b5066 !important; } .codir-hero { border-bottom: 1px solid #d8dce5 !important; } .codir-hero-eyebrow { color: #00829e !important; } .codir-hero-h { color: #0a0d18 !important; } .codir-hero-lead { color: #1f2433 !important; } .codir-meta-line { color: #4b5066 !important; } .codir-hero-r { background: #f0faff !important; border-color: #b6e3ff !important; } .codir-bignum { color: inherit !important; } .codir-bignum-lbl { color: #4b5066 !important; } .codir-sec-h { color: #4b5066 !important; border-color: #d8dce5 !important; } .codir-p { color: #1f2433 !important; } .codir-data { background: #f0faff !important; border-left: 3px solid #00a8d4 !important; } .codir-scen { background: #f5f7fa !important; border: 1px solid #d8dce5 !important; } .codir-scen-num { color: #0a0d18 !important; } .codir-scen-act { color: #4b5066 !important; } .codir-bullet { color: #1f2433 !important; border-color: #d8dce5 !important; } .codir-recobox { background: #f0fff7 !important; border-color: #86efac !important; } .codir-foot { color: #4b5066 !important; border-top: 2px solid #00a8d4 !important; } /* Tags & badges colors translated to print-friendly */ .codir-magazine [style*="rgba(240,107,120"] { color: #b91c4a !important; } .codir-magazine [style*="rgba(239,192,90"] { color: #b58200 !important; } .codir-magazine [style*="rgba(67,217,140"] { color: #0a8a50 !important; } .codir-magazine [style*="rgba(69,198,230"] { color: #00829e !important; } .codir-magazine [style*="var(--red)"] { color: #b91c4a !important; } .codir-magazine [style*="var(--amber)"] { color: #b58200 !important; } .codir-magazine [style*="var(--green)"] { color: #0a8a50 !important; } .codir-magazine [style*="var(--cyan)"] { color: #00829e !important; } .codir-magazine [style*="var(--txt)"] { color: #0a0d18 !important; } .codir-magazine [style*="var(--muted)"] { color: #4b5066 !important; } .codir-magazine [style*="var(--faint)"] { color: #7c8195 !important; } } /* Document imprimable Atlas : caché à l'écran, révélé à l'impression. */ .print-only { display: none; } @media print { .print-only { display: block !important; } } /* Isolation d'impression de la note CODIR. Deux hôtes possibles : - /pilotage (démo) : main > .cockpit-section > #cockpit-root - /cockpit (réel) : main > #cockpit-host > #cockpit-root L'ancien sélecteur ne connaissait que .cockpit-section → sur /cockpit, #cockpit-host était masqué avec le reste et le PDF sortait VIERGE. */ body.printing-codir > *:not(main), body.printing-codir main > *:not(.cockpit-section):not(.cockpit-host) { display: none !important; } body.printing-codir .cockpit-section > .inner { display: none !important; } body.printing-codir .cockpit-section > #cockpit-root .cockpit-frame.v2 > *:not(.cockpit-shell), body.printing-codir .cockpit-host > #cockpit-root .cockpit-frame.v2 > *:not(.cockpit-shell), body.printing-codir .cockpit-shell > .cockpit-side { display: none !important; } /* Le conteneur réel ne doit garder ni padding ni contrainte de largeur en print. */ body.printing-codir .cockpit-host { padding: 0 !important; max-width: none !important; } /* ═══════════════════════════════════════════════════════════════════════ MODE GUIDÉ — refonte juin 2026 (n'impacte que la vue guidée) Niveaux de lecture · résumé exécutif · liste légère · Parcours décision. Réutilise les tokens (:root) et keyframes (slideUpFade / slideRightFade). ═══════════════════════════════════════════════════════════════════════ */ /* ── Gradateur de lecture : Express / Conseil / Expert ── */ .glvl { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 100px; overflow: hidden; } .glvl button { font-family: var(--font-ui); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding: 6px 13px; border: none; cursor: pointer; background: transparent; color: var(--muted); transition: all .18s; } .glvl button:hover { color: var(--txt); } .glvl button.on { color: var(--on-accent); font-weight: 700; } .glvl button.on.l-express { background: var(--amber); } .glvl button.on.l-conseil { background: var(--cyan); } .glvl button.on.l-expert { background: var(--violet); } /* ── Résumé exécutif (3 lignes : quoi regarder · pourquoi · quoi faire) ── */ .exec { background: linear-gradient(180deg, var(--bg2), var(--bg)); border: 1px solid var(--border); border-top: 2px solid var(--violet); border-radius: 10px; padding: 20px 26px 8px; margin-bottom: 22px; } .exec-eyebrow { font-family: var(--font-ui); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--violet); margin-bottom: 6px; } .exec-row { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-top: 1px solid var(--border); } .exec-row:first-of-type { border-top: none; } .exec-tag { font-family: var(--font-ui); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); min-width: 176px; flex: none; } .exec-main { flex: 1; min-width: 0; font-size: 14.5px; color: var(--txt); line-height: 1.4; } .exec-main b { font-weight: 600; } .exec-cta { font-family: var(--font-ui); font-size: 11px; letter-spacing: .08em; padding: 7px 13px; border-radius: 100px; border: 1px solid var(--border-strong); background: transparent; color: var(--muted); cursor: pointer; white-space: nowrap; transition: all .15s; } .exec-cta:hover { color: var(--cyan); border-color: var(--cyan); transform: translateY(-1px); } @media (max-width: 680px) { .exec-row { flex-wrap: wrap; } .exec-tag { min-width: 0; } } /* ── Liste guidée des priorités (légère, non dépliable → ouvre le parcours) ── */ .gdl { display: flex; flex-direction: column; gap: 10px; } .gdl-row { display: flex; align-items: center; gap: 16px; text-align: left; width: 100%; background: var(--bg2); border: 1px solid var(--border); border-left: 3px solid var(--border-strong); border-radius: 10px; padding: 14px 18px; cursor: pointer; transition: transform .15s, border-color .15s; } .gdl-row:hover { transform: translateX(3px); border-left-color: var(--cyan); border-color: var(--border-strong); } .gdl-rank { font-family: var(--font-mono); font-size: 12px; color: var(--faint); flex: none; width: 22px; } .gdl-body { flex: 1; min-width: 0; } .gdl-lever { font-family: var(--font-ui); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .gdl-title { font-size: 14px; color: var(--txt); line-height: 1.35; margin-top: 3px; } .gdl-impact { font-size: 16px; font-weight: 700; letter-spacing: -.02em; flex: none; text-align: right; font-variant-numeric: tabular-nums; } .gdl-go { font-family: var(--font-mono); font-size: 16px; color: var(--faint); flex: none; transition: color .15s, transform .15s; } .gdl-row:hover .gdl-go { color: var(--cyan); transform: translateX(2px); } /* ── PARCOURS DÉCISION — 5 actes, un écran à la fois ── */ .dj { max-width: 880px; margin: 0 auto; } .dj-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 28px; flex-wrap: wrap; } .dj-back { font-family: var(--font-ui); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); background: transparent; border: none; cursor: pointer; padding: 4px 0; transition: color .15s; } .dj-back:hover { color: var(--txt); } .dj-rail { display: flex; align-items: center; gap: 7px; } .dj-dot { height: 6px; width: 6px; border-radius: 100px; background: var(--border-strong); transition: all .3s cubic-bezier(.16,1,.3,1); } .dj-dot.done { background: var(--muted); } .dj-dot.cur { width: 26px; } .dj-expert { font-family: var(--font-ui); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); background: transparent; border: 1px solid var(--border); border-radius: 100px; padding: 5px 11px; cursor: pointer; transition: all .15s; } .dj-expert:hover { color: var(--violet); border-color: var(--violet); } .dj-stage { animation: slideRightFade .35s cubic-bezier(.16,1,.3,1) both; } @media (prefers-reduced-motion: reduce) { .dj-stage { animation: none; } } .dj-stepno { font-family: var(--font-ui); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; } .dj-eyebrow { font-family: var(--font-ui); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 14px; } .dj-hero { font-size: 30px; font-weight: 600; letter-spacing: -.02em; line-height: 1.18; color: var(--txt); margin-bottom: 8px; } .dj-hero.num { font-size: 54px; font-weight: 700; letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums; } .dj-hero .u { font-size: 18px; font-weight: 500; color: var(--muted); margin-left: 4px; } .dj-hero-sub { font-family: var(--font-ui); font-size: 12px; color: var(--muted); letter-spacing: .04em; line-height: 1.55; margin-bottom: 22px; } .dj-sense { font-size: 17px; color: var(--txt); line-height: 1.62; max-width: 660px; margin-bottom: 18px; } .dj-sense .accent { color: var(--txt); font-weight: 600; } .dj-quote { background: linear-gradient(135deg, rgb(var(--cyan-rgb) / .07), rgb(var(--green-rgb) / .03)); border: 1px solid rgb(var(--cyan-rgb) / .28); border-radius: 10px; padding: 18px 22px; margin-bottom: 18px; } .dj-quote-lbl { font-family: var(--font-ui); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); margin-bottom: 9px; } .dj-quote p { font-size: 15.5px; font-style: italic; color: var(--txt); line-height: 1.65; margin: 0; } .dj-reco-badge { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-ui); font-size: 15px; font-weight: 700; letter-spacing: .06em; padding: 10px 18px; border-radius: 100px; margin-bottom: 18px; } /* Couches « creuser » — la densité reste là, mais repliée */ .dj-dig { border-top: 1px solid var(--border); } .dj-dig-h { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; background: transparent; border: none; cursor: pointer; padding: 13px 0; font-family: var(--font-ui); font-size: 11px; letter-spacing: .05em; color: var(--muted); transition: color .15s; } .dj-dig-h:hover { color: var(--txt); } .dj-dig-chev { display: inline-block; transition: transform .2s; color: var(--faint); } .dj-dig-h.open .dj-dig-chev { transform: rotate(90deg); color: var(--cyan); } .dj-dig-body { padding: 2px 0 16px 18px; animation: slideUpFade .2s ease both; } .dj-dig-body p { font-size: 13px; color: var(--muted); line-height: 1.65; margin: 0 0 8px; } .dj-dig-body ul { margin: 0 0 8px; padding-left: 16px; } .dj-dig-body li { font-size: 13px; color: var(--muted); line-height: 1.65; } .dj-dig-src { font-family: var(--font-ui); font-size: 11px; color: var(--faint); letter-spacing: .04em; line-height: 1.6; } .dj-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border); } .dj-prev { font-family: var(--font-ui); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: transparent; border: 1px solid var(--border-strong); border-radius: 6px; padding: 11px 16px; cursor: pointer; transition: all .15s; } .dj-prev:hover:not(:disabled) { color: var(--txt); border-color: var(--txt); } .dj-prev:disabled { opacity: .3; cursor: default; } .dj-hint { font-family: var(--font-ui); font-size: 11px; letter-spacing: .05em; color: var(--faint); } /* Frise des prochaines actions (acte ⑤) */ .dj-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(184px, 1fr)); gap: 10px; margin: 6px 0 16px; } .dj-step { background: var(--bg4); border: 1px solid var(--border); border-radius: 10px; padding: 13px 15px; } .dj-step-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 7px; } .dj-step-i { font-family: var(--font-ui); font-size: 11px; color: var(--cyan); letter-spacing: .1em; } .dj-step-h { font-family: var(--font-ui); font-size: 11px; color: var(--amber); letter-spacing: .06em; } .dj-step-l { font-size: 12.5px; color: var(--txt); line-height: 1.45; margin-bottom: 6px; } .dj-step-p { font-family: var(--font-ui); font-size: 11px; color: var(--muted); letter-spacing: .04em; } /* Clôture + nudge Pilotage (moment de conversion) */ .dj-done-h { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; } .dj-done-ic { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgb(var(--green-rgb) / .1); border: 1px solid var(--green); color: var(--green); font-size: 17px; flex: none; } .dj-cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; } .dj-nudge { margin-top: 24px; background: linear-gradient(135deg, rgb(var(--violet-rgb) / .09), rgb(var(--cyan-rgb) / .03)); border: 1px solid rgb(var(--violet-rgb) / .3); border-radius: 10px; padding: 15px 20px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .dj-nudge-t { font-size: 13px; color: var(--muted); line-height: 1.5; } .dj-nudge-t b { color: var(--txt); font-weight: 600; } /* ═══════════════════════════════════════════════════════════════════════ PARCOURS GUIDÉ — plein écran focalisé (l'onboarding = le mode d'emploi) ═══════════════════════════════════════════════════════════════════════ */ .parcours-fs { display: flex; flex-direction: column; min-height: 100vh; background: var(--bg); position: relative; z-index: 1; } .parcours-top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 24px; padding: 14px 28px; background: rgba(5,5,13,.9); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); } .parcours-brand { font-family: var(--font-ui); font-size: 15px; font-weight: 700; letter-spacing: .22em; color: var(--txt); flex: none; } .parcours-bar-wrap { flex: 1; display: flex; flex-direction: column; gap: 7px; max-width: 640px; margin: 0 auto; } .parcours-bar { height: 6px; background: var(--bg4); border-radius: 100px; overflow: hidden; } .parcours-bar-fill { height: 100%; background: linear-gradient(90deg, var(--cyan), var(--violet)); border-radius: 100px; transition: width .55s cubic-bezier(.16,1,.3,1); } .parcours-step { font-family: var(--font-ui); font-size: 11px; letter-spacing: .12em; color: var(--muted); text-transform: uppercase; text-align: center; } .parcours-exit { font-family: var(--font-ui); font-size: 11px; letter-spacing: .08em; color: var(--faint); background: transparent; border: 1px solid var(--border-strong); border-radius: 100px; padding: 7px 15px; cursor: pointer; white-space: nowrap; flex: none; transition: color .2s, border-color .2s; } .parcours-exit:hover { color: var(--txt); border-color: var(--txt); } .parcours-stage { flex: 1; width: 100%; max-width: 880px; margin: 0 auto; padding: 44px 28px 90px; } .parcours-hero-ic { width: 66px; height: 66px; border-radius: 50%; margin: 0 auto 22px; display: flex; align-items: center; justify-content: center; font-size: 26px; color: var(--cyan); border: 1px solid var(--cyan); background: rgb(var(--cyan-rgb) / .06); animation: onbPulse 2.4s ease-in-out infinite; } @keyframes onbPulse { 0%,100% { box-shadow: 0 0 0 0 rgb(var(--cyan-rgb) / .32); } 50% { box-shadow: 0 0 0 12px rgb(var(--cyan-rgb) / 0); } } @media (max-width: 640px) { .parcours-top { padding: 12px 16px; gap: 14px; } .parcours-brand { display: none; } .parcours-stage { padding: 30px 18px 64px; } } @media (prefers-reduced-motion: reduce) { .parcours-hero-ic { animation: none; } .parcours-bar-fill { transition: none; } } /* ═══════════════════════════════════════════════════════════════════════ ACCESSIBILITÉ — focus clavier visible, lecteur d'écran, impression du plan ═══════════════════════════════════════════════════════════════════════ */ /* Focus visible uniquement au clavier (n'affecte pas le clic souris). */ :focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 6px; } .subtab:focus-visible, .gdl-row:focus-visible { outline-offset: -2px; } /* Contenu réservé aux lecteurs d'écran. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Bascule écran / impression pour le plan d'action. */ .only-print { display: none; } @media print { .only-print { display: inline !important; } .plan-printable { background: #fff !important; } .plan-printable, .plan-printable * { color: #1f2433 !important; } .plan-printable [style*="var(--txt)"] { color: #0a0d18 !important; } .plan-printable [style*="var(--green)"], .plan-printable [style*="67,217,140"] { color: #0a8a50 !important; } .plan-printable [style*="var(--cyan)"], .plan-printable [style*="69,198,230"] { color: #00829e !important; } .plan-printable [style*="var(--amber)"], .plan-printable [style*="239,192,90"] { color: #b58200 !important; } .plan-printable [style*="var(--red)"], .plan-printable [style*="240,107,120"] { color: #b91c4a !important; } .plan-printable [style*="var(--muted)"], .plan-printable [style*="var(--faint)"] { color: #4b5066 !important; } .plan-printable > div { background: #fff !important; border-color: #d8dce5 !important; page-break-inside: avoid; } } /* ════════════════════════════════════════════════════════════════════════ SPRINT 1 — Bande d'en-tête « valeur en un coup d'œil » (accueil) PDM + rang concurrents · Potentiel IP-DMS € · Alerte perte de parts → CODIR ════════════════════════════════════════════════════════════════════════ */ .nx-band { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 26px; } @media (max-width: 920px) { .nx-band { grid-template-columns: 1fr; } } .nx-card { background: linear-gradient(180deg, var(--bg2), var(--bg)); border: 1px solid var(--border); border-radius: 10px; padding: 18px 20px 16px; display: flex; flex-direction: column; min-height: 190px; position: relative; } .nx-click { cursor: pointer; transition: transform .18s, border-color .18s, box-shadow .18s; } .nx-click:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: 0 12px 32px rgba(0,0,0,.22); } .nx-eyebrow { font-family: var(--font-ui); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 12px; } .nx-figrow { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .nx-big { font-size: 38px; font-weight: 700; letter-spacing: -.03em; line-height: 1; } .nx-rankbadge { font-family: var(--font-mono); font-size: 18px; font-weight: 700; color: var(--txt); white-space: nowrap; } .nx-rankbadge sup { font-size: 11px; } .nx-rankbadge span { font-size: 11px; color: var(--faint); font-weight: 400; letter-spacing: .04em; } .nx-rankbadge.nx-green { font-size: 13px; color: var(--green); } .nx-sub { font-size: 11.5px; color: var(--muted); line-height: 1.45; margin: 8px 0 12px; } .nx-bars { display: flex; flex-direction: column; gap: 5px; margin-top: auto; } .nx-barrow { display: grid; grid-template-columns: 62px 1fr 46px; align-items: center; gap: 8px; } .nx-barlbl { font-family: var(--font-ui); font-size: 11px; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nx-bartrack { height: 7px; background: var(--ink-soft); border-radius: 100px; overflow: hidden; } .nx-barfill { display: block; height: 100%; border-radius: 100px; transition: width .5s ease; } .nx-barval { font-family: var(--font-mono); font-size: 11px; text-align: right; } .nx-cta { font-family: var(--font-ui); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; margin-top: 12px; opacity: .85; } .nx-gap { margin-top: auto; } .nx-gaptrack { display: flex; height: 9px; border-radius: 100px; overflow: hidden; background: var(--ink-soft); } .nx-gapmed { background: var(--green); } .nx-gapover { background: var(--amber); } .nx-gaplbls { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-top: 6px; } .nx-alert { background: linear-gradient(180deg, rgb(var(--amber-rgb) / .06), var(--bg)); border-color: rgb(var(--amber-rgb) / .28); } .nx-alert-subj { font-size: 22px; font-weight: 700; color: var(--txt); letter-spacing: -.02em; } .nx-alert-metric { font-family: var(--font-mono); font-size: 20px; font-weight: 700; color: var(--amber); white-space: nowrap; } .nx-alert-btn { margin-top: auto; align-self: flex-start; font-family: var(--font-ui); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #1a1206; background: var(--amber); border: none; border-radius: 6px; padding: 9px 16px; cursor: pointer; transition: opacity .18s, transform .18s; } .nx-alert-btn:hover { opacity: .92; transform: translateY(-1px); } .nx-okrow { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--txt); margin-top: 4px; } .nx-okdot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px rgb(var(--green-rgb) / .5); flex-shrink: 0; } /* Item 4 — Fuite vs captation territoriale (bande pleine largeur sous le band) */ .nx-flux { background: linear-gradient(180deg, var(--bg2), var(--bg)); border: 1px solid var(--border); border-top: 2px solid var(--cyan); border-radius: 10px; padding: 18px 22px 16px; margin-bottom: 26px; display: flex; flex-direction: column; } .nx-flux-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; } .nx-flux-ctx { font-family: var(--font-ui); font-size: 11px; color: var(--muted); letter-spacing: .04em; } .nx-flux-bar { display: flex; height: 48px; border-radius: 10px; overflow: hidden; gap: 3px; } .nx-flux-seg { display: flex; flex-direction: column; justify-content: center; padding: 0 15px; min-width: 0; overflow: hidden; white-space: nowrap; } .nx-flux-seg b { font-size: 19px; font-weight: 700; line-height: 1; letter-spacing: -.02em; } .nx-flux-seg span { font-family: var(--font-ui); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; opacity: .85; margin-top: 3px; } .nx-flux-cap { background: rgb(var(--green-rgb) / .16); color: var(--green); border: 1px solid rgb(var(--green-rgb) / .3); border-radius: 6px 0 0 6px; } .nx-flux-leak { background: rgb(var(--amber-rgb) / .14); color: var(--amber); border: 1px solid rgb(var(--amber-rgb) / .3); border-radius: 0 6px 6px 0; align-items: flex-end; text-align: right; } .nx-flux-note { font-size: 11px; color: var(--muted); line-height: 1.5; margin-top: 12px; } .nx-flux-note b { color: var(--txt); } @media (max-width: 620px) { .nx-flux-seg span { display: none; } } /* Item 5 — Qualité · réputation : scorecard à grammaire unique (carte ContextPanel). Chaque ligne : pastille note (A/B/C HAS ou ✓/●) · libellé · barre+repère cible · valeur + delta signé coloré. Verdict global en tête. Lecture en 1 coup d'œil. */ .nx-qual-verdict { font-family: var(--font-ui); font-size: 11px; letter-spacing: .04em; padding: 3px 9px; border: 1px solid; border-radius: 100px; white-space: nowrap; } .nx-qual-rows { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; } .nx-qual-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) 124px 92px; align-items: center; gap: 13px; } .nx-qual-chip { font-size: 12px; font-weight: 800; width: 26px; height: 26px; border: 1.5px solid; border-radius: 7px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; line-height: 1; } .nx-qual-meta { min-width: 0; } .nx-qual-name { font-size: 12px; color: var(--txt); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nx-qual-sub2 { font-family: var(--font-ui); font-size: 11px; color: var(--faint); letter-spacing: .03em; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nx-qual-bar { position: relative; height: 6px; background: var(--ink-soft); border-radius: 100px; overflow: visible; } .nx-qual-fill { position: absolute; left: 0; top: 0; height: 100%; border-radius: 100px; } .nx-qual-mark { position: absolute; top: -3px; width: 2px; height: 12px; background: var(--txt); opacity: .55; border-radius: 6px; } .nx-qual-num { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; } .nx-qual-val { font-family: var(--font-mono); font-size: 14px; font-weight: 700; color: var(--txt); white-space: nowrap; } .nx-qual-val i { font-style: normal; font-size: 11px; color: var(--muted); font-weight: 600; } .nx-qual-delta { font-family: var(--font-mono); font-size: 11px; font-weight: 700; margin-top: 2px; white-space: nowrap; } .nx-qual-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding-top: 11px; border-top: 1px solid var(--ink-soft); font-size: 11px; color: var(--muted); line-height: 1.4; } .nx-qual-cta { font-family: var(--font-ui); font-size: 11px; color: var(--cyan); letter-spacing: .04em; white-space: nowrap; flex-shrink: 0; } @media (max-width: 720px) { .nx-qual-row { grid-template-columns: 22px minmax(0, 1fr) 84px; gap: 10px; } .nx-qual-bar { display: none; } } /* Item 8 — Projection des besoins du bassin (INSEE prospectif) */ .nx-proj-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 22px; align-items: start; } @media (max-width: 720px) { .nx-proj-grid { grid-template-columns: 1fr; gap: 14px; } } .nx-proj-stats { display: flex; gap: 24px; flex-wrap: wrap; } .nx-proj-lbl { font-family: var(--font-ui); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); } .nx-proj-val { font-size: 17px; font-weight: 700; color: var(--txt); letter-spacing: -.01em; margin-top: 4px; white-space: nowrap; } .nx-proj-arrow { color: var(--faint); font-weight: 400; } .nx-proj-arrow.up { color: var(--amber); } .nx-proj-fil { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; } .nx-proj-dir { font-weight: 700; font-size: 14px; width: 14px; text-align: center; flex-shrink: 0; } .nx-proj-dir.up { color: var(--green); } .nx-proj-dir.down { color: var(--amber); } .nx-proj-filf { font-size: 12px; color: var(--txt); } .nx-proj-filw { font-family: var(--font-mono); font-size: 11px; color: var(--faint); margin-left: auto; white-space: nowrap; } /* Item 9 — Financements / appels à projets + score d'éligibilité (espace Radar) */ .nx-fin { border: 1px solid var(--border); border-top: 2px solid var(--violet); border-radius: 10px; background: var(--ink-weak); padding: 16px 18px; margin: 14px 0; } .nx-fin-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } .nx-fin-list { display: flex; flex-direction: column; gap: 10px; } .nx-fin-row { display: flex; gap: 14px; align-items: flex-start; padding-bottom: 10px; border-bottom: 1px solid var(--border); } .nx-fin-row:last-child { border-bottom: none; padding-bottom: 0; } .nx-fin-score { flex-shrink: 0; width: 50px; height: 50px; border: 2px solid; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 800; letter-spacing: -.02em; } .nx-fin-score span { font-size: 11px; font-weight: 600; margin-left: 1px; align-self: flex-start; margin-top: 12px; } .nx-fin-main { min-width: 0; flex: 1; } .nx-fin-nom { font-size: 14px; font-weight: 700; color: var(--txt); line-height: 1.3; } .nx-fin-meta { font-family: var(--font-ui); font-size: 11px; color: var(--muted); letter-spacing: .03em; margin: 3px 0 7px; } .nx-fin-crit { display: flex; flex-wrap: wrap; gap: 4px 14px; } .nx-fin-c { font-size: 11px; white-space: nowrap; } .nx-fin-note { font-size: 11px; color: var(--faint); margin-top: 12px; line-height: 1.5; } /* Réorg accueil — panneau Contexte (sélecteur Territoire/Qualité/Besoins) */ .nx-ctx { margin-bottom: 26px; } .nx-ctx-tabs { display: inline-flex; gap: 2px; padding: 3px; background: var(--ink-soft); border: 1px solid var(--border); border-radius: 100px; margin-bottom: 12px; } .nx-ctx-tab { font-family: var(--font-ui); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); background: transparent; border: none; border-radius: 100px; padding: 7px 16px; cursor: pointer; transition: color .18s, background .18s; } .nx-ctx-tab:hover { color: var(--txt); } .nx-ctx-tab.on { color: var(--bg); background: var(--cyan); font-weight: 700; } .nx-ctx .nx-flux { margin-bottom: 0; } /* ── Toast (UX24) — remplace les alert() natifs ────────────────────────── Empilé en bas-droite, même langage visuel que la walk-bubble : surface bg2, liseré latéral à l'accent, ombre portée. "ok"/"warn" se ferment seuls (4,6 s), "err" reste jusqu'à fermeture manuelle. aria-live="polite" côté JSX. */ .toast-stack { position: fixed; right: 18px; bottom: 18px; z-index: 260; display: flex; flex-direction: column; gap: 8px; max-width: min(420px, calc(100vw - 32px)); } .toast { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; background: var(--bg2); border: 1px solid var(--border-strong); border-left: 3px solid var(--green); border-radius: 8px; box-shadow: 0 14px 40px rgba(0,0,0,.45); font-family: var(--font-ui); font-size: 12.5px; color: var(--txt); line-height: 1.5; animation: slideUpFade .22s cubic-bezier(.16,1,.3,1) both; } .toast-warn { border-left-color: var(--amber); } .toast-err { border-left-color: var(--red); } .toast-ic { flex: none; font-weight: 700; color: var(--green); font-family: var(--font-mono); font-size: 12px; padding-top: 1px; } .toast-warn .toast-ic { color: var(--amber); } .toast-err .toast-ic { color: var(--red); } .toast-txt { min-width: 0; } .toast-close { margin-left: auto; flex: none; background: transparent; border: none; cursor: pointer; color: var(--faint); font-size: 15px; line-height: 1; padding: 0 2px; transition: color .15s; } .toast-close:hover { color: var(--txt); } @media (prefers-reduced-motion: reduce) { .toast { animation: none; } }