/* ========================================================= Modules portfolio : thème, radar, réservation, code health À charger APRÈS style.css ========================================================= */ /* Anti-flash : le thème est appliqué dans le . */ html[data-theme="light"]{ --bg:#f7f7fb; --bg-alt:#ffffff; --surface:rgba(20,20,35,.055); --surface-border:rgba(20,20,35,.11); --text:#171721; --text-dim:#555568; --text-dimmer:#77778b; --shadow-glow:0 0 0 1px rgba(20,20,35,.07),0 20px 60px -22px rgba(124,92,255,.25); --article-bg: #f7f7fb; --article-surface: #fff; --article-text: #171721; --article-dim: #5d5d70; --article-border: rgba(20, 20, 35, .11); } html[data-theme="light"] .nav.scrolled{ background:rgba(247,247,251,.78); } html[data-theme="light"] .nav-links{ background: transparent; } html[data-theme="light"] .grid-overlay{ background-image: linear-gradient(to right,rgba(10,10,20,.045) 1px,transparent 1px), linear-gradient(to bottom,rgba(10,10,20,.045) 1px,transparent 1px); } /* Contrôles de thème */ .theme-dock{ position:fixed; right:18px; bottom:18px; z-index:90; display:flex; align-items:center; gap:8px; padding:8px; border:1px solid var(--surface-border); border-radius:999px; background:color-mix(in srgb,var(--bg) 82%,transparent); backdrop-filter:blur(16px); box-shadow:0 18px 45px rgba(0,0,0,.18); } .theme-dock button{ width:34px; height:34px; display:grid; place-items:center; border:0; border-radius:50%; background:transparent; color:var(--text-dim); cursor:pointer; } .theme-dock button:hover, .theme-dock button[aria-pressed="true"]{ color:var(--text); background:var(--surface); } .theme-dock .accent-dot{ width:18px; height:18px; border-radius:50%; background:var(--dot); box-shadow:0 0 0 1px var(--surface-border); } .theme-separator{width:1px;height:24px;background:var(--surface-border)} /* Radar */ .tech-radar{position: relative; background:var(--bg); padding-top: 140px;} .radar-layout{ display:grid; grid-template-columns:minmax(0,1.45fr) minmax(280px,.55fr); gap:28px; align-items:stretch; } .radar-card, .radar-side{ background:var(--surface); border:1px solid var(--surface-border); border-radius:var(--radius-lg); } .radar-card{padding:24px;min-height:570px} .radar-canvas-wrap{position:relative;height:500px} .radar-filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px} .radar-filters button{ padding:8px 14px; border:1px solid var(--surface-border); border-radius:999px; background:transparent; color:var(--text-dim); cursor:pointer; } .radar-filters button[aria-pressed="true"]{ background:var(--gradient-brand); color:#08080d; border-color:transparent; } .radar-side{padding:30px;display:flex;flex-direction:column;justify-content:space-between} .radar-details strong{display:block;font:700 1.45rem 'Space Grotesk';margin-bottom:7px} .radar-details span{display:block;color:var(--accent-3);font-size:.86rem;font-weight:700;margin-bottom:16px} .radar-details p{color:var(--text-dim)} .radar-help{color:var(--text-dimmer);font-size:.82rem;margin-top:30px} /* Code health */ .code-health-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:22px; } .health-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:34px} .health-card{ padding:26px; border:1px solid var(--surface-border); border-radius:var(--radius-md); background:var(--surface); } .health-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px} .health-visibility{ display:block; color:var(--text-dimmer); text-transform:uppercase; letter-spacing:.06em; font-size:.68rem; font-weight:700; margin-bottom:5px; } .health-card h3{font-size:1.12rem} .health-status{ display:inline-flex; align-items:center; gap:7px; white-space:nowrap; border:1px solid var(--surface-border); border-radius:999px; padding:6px 10px; color:var(--text-dim); font-size:.76rem; } .health-status i{width:8px;height:8px;border-radius:50%;background:#8b8b98} .health-status.is-passing i{background:#4ade80;box-shadow:0 0 12px rgba(74,222,128,.6)} .health-status.is-failing i{background:#fb7185;box-shadow:0 0 12px rgba(251,113,133,.5)} .health-status.is-running i{background:#fbbf24;animation:pulse 2s infinite} .health-metrics{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:24px 0; } .health-metric{ padding:14px; border:1px solid var(--surface-border); border-radius:12px; background:color-mix(in srgb,var(--surface) 70%,transparent); } .health-metric span{display:block;color:var(--text-dimmer);font-size:.74rem} .health-metric strong{font:700 1.35rem 'Space Grotesk'} .health-card-foot{ display:flex; justify-content:space-between; gap:12px; color:var(--text-dimmer); font-size:.75rem; } .health-card-foot a{color:var(--accent-3)} .health-loading,.health-error{color:var(--text-dim)} .health-error{color:#fb7185} /* Booking */ .modal-open{overflow:hidden} .booking-modal[hidden]{display:none} .booking-modal{ position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:20px; background:rgba(3,3,8,.78); backdrop-filter:blur(12px); } .booking-dialog{ width:min(100%,980px); height:min(88vh,760px); display:flex; flex-direction:column; border:1px solid var(--surface-border); border-radius:var(--radius-lg); background:var(--bg-alt); overflow:hidden; box-shadow:0 35px 100px rgba(0,0,0,.5); } .booking-head{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px 22px; border-bottom:1px solid var(--surface-border); } .booking-head p{color:var(--text-dim);font-size:.86rem} .booking-close{ width:42px;height:42px;border-radius:50%; border:1px solid var(--surface-border); background:var(--surface);color:var(--text);cursor:pointer; } .cal-inline{flex:1;min-height:0;overflow:auto} @media(max-width:900px){ .radar-layout{grid-template-columns:1fr} .radar-card{min-height:500px} .radar-canvas-wrap{height:430px} } @media(max-width:640px){ .theme-dock{right:10px;bottom:10px} .theme-separator{display:none} .radar-card{padding:12px;min-height:440px} .radar-canvas-wrap{height:380px} .health-toolbar{align-items:flex-start;flex-direction:column} .health-card-head,.health-card-foot{flex-direction:column} } /* Repository Health - score sans workflow */ .health-score{ width:72px; height:72px; flex:0 0 auto; display:grid; place-content:center; text-align:center; border:1px solid var(--surface-border); border-radius:50%; background:color-mix(in srgb,var(--surface) 80%,transparent); box-shadow:inset 0 0 24px color-mix(in srgb,var(--accent-1) 10%,transparent); } .health-score strong{font:700 1.35rem 'Space Grotesk';line-height:1} .health-score span{font-size:.65rem;color:var(--text-dimmer)} .health-score.is-excellent{border-color:rgba(74,222,128,.5);box-shadow:0 0 24px rgba(74,222,128,.12)} .health-score.is-good{border-color:color-mix(in srgb,var(--accent-3) 55%,transparent)} .health-score.is-watch{border-color:rgba(251,191,36,.5)} .health-score.is-weak{border-color:rgba(251,113,133,.5)} .health-verdict{margin:12px 0 0;color:var(--text-dim);font-weight:700} .health-score-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .health-signals{ display:grid; gap:0; margin:0 0 20px; padding:0; list-style:none; border-top:1px solid var(--surface-border); } .health-signals li{ display:flex; justify-content:space-between; gap:16px; padding:10px 0; border-bottom:1px solid var(--surface-border); font-size:.82rem; } .health-signals span{color:var(--text-dimmer)} .health-signals strong{color:var(--text);text-align:right} .health-limitations{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:18px} .health-limitations span{ padding:5px 8px; border:1px solid var(--surface-border); border-radius:999px; color:var(--text-dimmer); font-size:.66rem; } .radar-canvas-wrap canvas{touch-action:none} @media(max-width:420px){ .health-score-grid{grid-template-columns:1fr} } #bookingModal[hidden] { display: none !important; } body.modal-open { overflow: hidden; } body:not(.modal-open) { overflow: auto; } .code-health-grid{ grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr)); } .health-card{display:flex;flex-direction:column;gap:0} .health-description{max-width:62ch;margin:7px 0 10px;color:var(--text-dim);font-size:.84rem} .health-maturity{ display:inline-flex; margin-top:14px; padding:5px 9px; border:1px solid color-mix(in srgb,var(--accent-1) 30%,var(--surface-border)); border-radius:999px; color:var(--accent-3); font-size:.7rem; font-weight:800; } .health-score-grid{grid-template-columns:repeat(3,minmax(0,1fr))} .health-block{margin:0 0 12px} .health-block h4{ margin:0 0 7px; color:var(--text); font:700 .86rem 'Space Grotesk'; letter-spacing:.02em; } .health-empty{margin:0;color:var(--text-dimmer);font-size:.78rem} .health-languages{display:grid;gap:10px} .health-language>div:first-child{display:flex;justify-content:space-between;gap:12px;font-size:.76rem} .health-language span{color:var(--text-dimmer)} .health-language-bar{ height:7px; margin-top:5px; overflow:hidden; border-radius:999px; background:color-mix(in srgb,var(--surface) 85%,transparent); border:1px solid var(--surface-border); } .health-language-bar i{ display:block; height:100%; border-radius:inherit; background:var(--gradient-brand); } .health-checks{display:flex;flex-wrap:wrap;gap:7px} .health-checks span{ padding:6px 9px; border:1px solid var(--surface-border); border-radius:999px; font-size:.68rem; font-weight:750; } .health-checks .is-present{ color:#4ade80; border-color:rgba(74,222,128,.28); background:rgba(74,222,128,.06); } .health-checks .is-missing{ color:var(--text-dimmer); opacity:.72; } .health-manifests{margin:12px 0 0;color:var(--text-dimmer);font-size:.72rem;line-height:1.6} .health-manifests span{color:var(--text-dim);font-weight:800} .health-unavailable{ margin:0 0 20px; padding:12px 14px; border:1px solid var(--surface-border); border-radius:12px; background:color-mix(in srgb,var(--surface) 60%,transparent); color:var(--text-dimmer); font-size:.72rem; } .health-unavailable summary{cursor:pointer;color:var(--text-dim);font-weight:800} .health-unavailable ul{margin:10px 0 0;padding-left:18px;line-height:1.55} .health-error small{display:block;margin-top:6px;color:var(--text-dimmer)} @media(max-width:640px){ .health-score-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:420px){ .health-score-grid{grid-template-columns:1fr} } /* Densité et stabilité visuelle du rafraîchissement */ .health-card .health-metrics{margin:16px 0} .health-card .health-signals{margin-bottom:12px} .health-card .health-signals li{padding:7px 0} .health-card .health-block{margin-top:14px} .code-health-grid{position:relative;transition:min-height .18s ease} .code-health-grid.is-loading:has(.health-card:not(.health-card-skeleton))::after{ content:"Mise à jour…"; position:absolute; top:12px; right:12px; z-index:2; padding:6px 10px; border:1px solid var(--surface-border); border-radius:999px; background:color-mix(in srgb,var(--bg) 88%,transparent); color:var(--text-dim); font-size:.7rem; font-weight:800; backdrop-filter:blur(10px); } .code-health-grid.is-loading .health-card:not(.health-card-skeleton){opacity:.68;pointer-events:none} #repositoryHealthRefresh[disabled]{opacity:.65;cursor:progress} /* Skeleton loading - santé des dépôts (primitives partagées : assets/css/skeleton.css) */ .health-card-skeleton{pointer-events:none;cursor:default} .health-skeleton-head-text{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0} .health-skeleton-score{width:72px;height:72px;flex:0 0 auto;border-radius:50%} .health-skeleton-metric{height:58px;border-radius:12px} .health-skeleton-block{margin-top:18px;display:flex;flex-direction:column;gap:10px} .code-health-grid.is-loaded .health-card{animation:card-reveal 450ms ease both} .code-health-grid.is-loaded .health-card:nth-child(2){animation-delay:60ms} .code-health-grid.is-loaded .health-card:nth-child(3){animation-delay:120ms} /* Correctif v3 : neutralise les espacements globaux appliqués aux balises section */ .health-card > section.health-block{ padding:0 !important; margin:0 0 9px !important; min-height:0; } .health-card > section.health-block + section.health-block{ padding-top:5px !important; margin-top:0 !important; } .health-card > section.health-block h4{ margin:0 0 6px !important; } .health-card > section.health-block .health-signals{ margin:0 0 8px !important; } .health-card > section.health-block .health-signals li{ padding:6px 0 !important; } .health-card .health-maturity{ margin-top:16px !important; margin-bottom:2px; }