/* ============================================================================= Harington Tech — Design system CENTRALISÉ (charte v3) Source unique de vérité pour tout le portail de formation. Pour changer une couleur / police / rayon : éditer les tokens de :root. Familles de page (classe sur ) : .portal → catalogue / accueil (index.html) .fiche → fiche focus (mono-colonne 1200px) .fiche-full → fiche complète (layout sidebar ; composants layout inline dans la page) (aucune) → coquille (login / 404 / admin / module modèle) via classes .ht-* Composants transverses (globaux) : .pill, .code-block, .callout, .diagram, table, garde. ============================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Roboto+Slab:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap'); /* ---------------------------------------------------------------- TOKENS --- */ :root { /* Palette v3 */ --navy: #354866; /* dominante */ --blue: #7B9FC7; /* accent secondaire fort (tech/scale) */ --rose: #C187A1; /* accent ponctuel (marque) */ --mid-navy: #455B7B; --rose-tint: #EBD6DD; --rose-tint-2: #F3E7EC; --card: #F2F5F9; --blue-tint: #E7ECF3; --gray: #7F7F7F; --base: #1B1C1C; --white: #FFFFFF; --border: #D7D7D7; /* Code (thème clair) */ --code-bg: #FFFFFF; --code-text: #24292F; --code-comment: #6B7785; --code-keyword: #8250DF; --code-string: #0A7B3E; --code-number: #B25000; --code-type: #0550AE; --sql-keyword: #8250DF; /* Callouts */ --warning-bg: #FFF8E1; --warning-border: #F0C674; --success-bg: #E8F4E8; --success-border: #A7D4A8; --danger-bg: #FCE8EC; --danger-border: #D87A8E; /* Rayons */ --radius-card: 16px; --radius-chip: 12px; --radius-btn: 10px; --radius-pill: 999px; /* Alias hérités (fiche complète) — mêmes valeurs, autres noms */ --primary: var(--navy); --secondary: var(--blue); --tertiary: var(--mid-navy); --dark-navy: var(--navy); --light-blue: #A7B3C6; --gray-light: var(--border); --gray-lighter: var(--card); } /* ------------------------------------------------------------------ BASE --- */ * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif; color: var(--base); background: var(--card); line-height: 1.6; font-size: 16px; } /* ==================================================== COMPOSANTS GLOBAUX === */ /* Pills (labels de section) */ .pill { display: inline-block; text-transform: uppercase; font-size: 12px; font-weight: 600; letter-spacing: .8px; padding: 6px 14px; border-radius: var(--radius-pill); } .pill.label { background: var(--blue-tint); color: var(--navy); } /* Code inline */ code:not(pre code) { font-family: 'JetBrains Mono', monospace; background: var(--card); color: var(--mid-navy); padding: 2px 6px; border-radius: 6px; font-size: 13px; border: 1px solid var(--border); } /* Blocs de code (thème clair) */ .code-block { position: relative; background: var(--code-bg); border: 1px solid var(--border); border-radius: 12px; margin: 20px 0; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.05); } .code-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; background: var(--blue-tint); border-bottom: 1px solid var(--border); } .code-lang { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--navy); letter-spacing: 1px; text-transform: uppercase; font-weight: 600; } .copy-btn { background: transparent; border: 1px solid var(--border); color: var(--navy); font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; padding: 4px 12px; cursor: pointer; border-radius: 8px; transition: all .15s; } .copy-btn:hover, .copy-btn.copied { background: var(--navy); color: var(--white); border-color: var(--navy); } pre { margin: 0; padding: 16px 18px; overflow-x: auto; font-family: 'JetBrains Mono', monospace; font-size: 14px; line-height: 1.6; color: var(--code-text); } pre .kw { color: var(--code-keyword); font-weight: 500; } pre .str { color: var(--code-string); } pre .num { color: var(--code-number); } pre .com { color: var(--code-comment); font-style: italic; } pre .typ { color: var(--code-type); } pre .ann { color: var(--code-number); } /* Diagrammes ASCII */ .diagram { background: var(--card); border: 1px solid var(--border); padding: 20px; margin: 16px 0; border-radius: 14px; font-family: 'JetBrains Mono', monospace; font-size: 12.5px; line-height: 1.7; overflow-x: auto; } .diagram pre { background: transparent; color: var(--navy); padding: 0; display: inline-block; } /* Callouts */ .callout { padding: 16px 20px; margin: 20px 0; border-left: 4px solid var(--navy); background: var(--card); border-radius: 0 14px 14px 0; } .callout p, .callout li { font-family: 'Roboto Slab', Georgia, serif; } .callout-title { font-weight: 700; color: var(--navy); font-size: 12.5px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; font-family: 'Poppins', sans-serif; } .callout.warning { background: var(--warning-bg); border-left-color: var(--warning-border); } .callout.warning .callout-title { color: #8B6914; } .callout.success { background: var(--success-bg); border-left-color: var(--success-border); } .callout.success .callout-title { color: #2D5A2D; } .callout.danger { background: var(--danger-bg); border-left-color: var(--danger-border); } .callout.danger .callout-title { color: #8B2D3F; } .callout.key { background: var(--navy); border-left-color: var(--blue); color: var(--white); } .callout.key .callout-title { color: var(--blue); } .callout.key strong { color: var(--blue); } /* Tables (fiches ; la coquille admin utilise .ht-table) */ .fiche table, .fiche-full table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 18px 0 24px; font-size: 14px; box-shadow: 0 2px 8px rgba(0,0,0,.06); border-radius: 14px; overflow: hidden; } .fiche th, .fiche-full th { background: var(--navy); color: var(--white); font-weight: 600; text-align: left; padding: 11px 14px; font-size: 12.5px; text-transform: uppercase; letter-spacing: .4px; } .fiche td, .fiche-full td { padding: 10px 14px; border-bottom: 1px solid var(--border); vertical-align: top; } .fiche td { font-family: 'Roboto Slab', Georgia, serif; } .fiche tr:nth-child(even) td, .fiche-full tr:nth-child(even) td { background: var(--card); } /* Garde d'accès (SSO interne / OTP externe) */ html:not(.ht-authed) .ht-protected { display: none; } .ht-gate-loading { display: flex; align-items: center; justify-content: center; min-height: 100vh; font-family: 'Poppins', sans-serif; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; color: var(--navy); } /* ============================================= PORTAIL (catalogue) .portal = */ body.portal { background: var(--white); } .portal .wrap { max-width: 1200px; margin: 0 auto; } .portal .hero { position: relative; background: var(--navy); color: var(--white); padding: 76px 56px 92px; overflow: hidden; } .portal .hero .wrap { position: relative; z-index: 2; } .portal .bracket { position: absolute; z-index: 1; border: 30px solid rgba(255,255,255,.05); border-top: none; border-radius: 0 0 90px 90px; } .portal .bracket.one { width: 300px; height: 320px; top: -60px; right: 6%; } .portal .bracket.two { width: 170px; height: 190px; bottom: -40px; right: 22%; border-color: rgba(123,159,199,.16); } .portal .brand-row { display: flex; align-items: center; gap: 14px; margin-bottom: 46px; } .portal .brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: var(--rose); color: var(--white); font-weight: 700; font-size: 18px; letter-spacing: 1px; border-radius: var(--radius-chip); } .portal .brand-name { font-weight: 600; font-size: 15px; letter-spacing: 4px; text-transform: uppercase; } .portal .nav-login { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; letter-spacing: .5px; color: var(--white); text-decoration: none; background: rgba(255,255,255,.12); padding: 9px 18px; border-radius: var(--radius-btn); transition: background .15s; } .portal .nav-login:hover { background: var(--rose); } .portal .hero .pill { background: rgba(255,255,255,.12); color: var(--white); margin-bottom: 18px; } .portal .hero h1 { font-size: 46px; font-weight: 600; line-height: 1.12; margin-bottom: 20px; max-width: 780px; } .portal .hero h1 .accent { color: var(--rose); } .portal .hero p.lead { font-family: 'Roboto Slab', Georgia, serif; font-size: 18px; color: #C9D4E3; max-width: 640px; font-weight: 400; } .portal .catalogue { padding: 64px 56px 80px; background: var(--white); } .portal .catalogue h2 { font-size: 32px; font-weight: 600; color: var(--navy); margin-bottom: 8px; } .portal .catalogue .sub { font-family: 'Roboto Slab', Georgia, serif; color: var(--gray); margin-bottom: 38px; font-size: 15px; } .portal .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 28px; } .portal .card { display: flex; flex-direction: column; background: var(--card); border: 1px solid #E4E9F0; border-radius: var(--radius-card); padding: 26px; text-decoration: none; color: inherit; box-shadow: 0 2px 8px rgba(0,0,0,.05); transition: transform .18s, box-shadow .18s, border-color .18s; } .portal .card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(53,72,102,.16); border-color: var(--blue); } .portal .card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } .portal .icon-chip { width: 44px; height: 44px; border-radius: var(--radius-chip); background: var(--blue-tint); display: inline-flex; align-items: center; justify-content: center; color: var(--navy); } .portal .icon-chip svg { width: 22px; height: 22px; } .portal .pill.cat { background: var(--white); color: var(--navy); border: 1px solid #DCE3EC; font-size: 10px; } .portal .card-title { font-family: 'Roboto Slab', Georgia, serif; font-size: 21px; font-weight: 600; color: var(--navy); line-height: 1.25; margin-bottom: 12px; } .portal .card-desc { font-family: 'Roboto Slab', Georgia, serif; font-size: 14.5px; color: var(--base); margin-bottom: 18px; } .portal .tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 20px; } .portal .tag { background: var(--blue-tint); color: var(--navy); font-size: 10px; font-weight: 600; letter-spacing: .8px; padding: 4px 11px; border-radius: var(--radius-pill); text-transform: uppercase; } .portal .card-meta { display: flex; gap: 22px; margin-bottom: 22px; font-size: 12px; color: var(--gray); } .portal .card-meta strong { color: var(--navy); font-weight: 600; display: block; font-size: 13px; } .portal .btn { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; background: var(--navy); color: var(--white); font-size: 13px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; padding: 12px 24px; border-radius: var(--radius-btn); transition: background .15s; } .portal .card:hover .btn { background: var(--blue); } .portal .card.soon { cursor: default; position: relative; } .portal .card.soon:hover { transform: none; box-shadow: 0 2px 8px rgba(0,0,0,.05); border-color: #E4E9F0; } .portal .card.soon .icon-chip { background: var(--rose-tint); color: var(--navy); } .portal .card.soon .tag { background: var(--rose-tint); color: var(--navy); } .portal .card.soon .btn { background: transparent; color: var(--navy); border: 1px dashed var(--mid-navy); } .portal .badge-soon { position: absolute; top: 22px; right: 22px; background: var(--rose); color: var(--white); font-size: 10px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; padding: 5px 12px; border-radius: var(--radius-pill); z-index: 2; } /* Sur une carte « Bientôt », le badge occupe le coin haut-droit → on masque la pill catégorie (redondante avec les tags) pour éviter le chevauchement. */ .portal .card.soon .card-head .pill.cat { display: none; } .portal footer { background: var(--navy); color: #C9D4E3; padding: 28px 56px; font-size: 12px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; } .portal footer strong { color: var(--white); font-weight: 600; } @media (max-width: 720px) { .portal .hero { padding: 54px 26px 66px; } .portal .hero h1 { font-size: 34px; } .portal .catalogue { padding: 48px 26px 64px; } .portal .grid { grid-template-columns: 1fr; } } /* ================================================= FICHE FOCUS .fiche ====== */ .fiche .page { max-width: 1200px; margin: 0 auto; background: var(--white); box-shadow: 0 0 40px rgba(0,0,0,.06); } .fiche .hero { position: relative; background: var(--navy); color: var(--white); padding: 44px 48px 40px; overflow: hidden; } .fiche .hero .bracket { position: absolute; border: 26px solid rgba(255,255,255,.05); border-top: none; border-radius: 0 0 80px 80px; width: 230px; height: 250px; top: -50px; right: 5%; z-index: 1; } .fiche .hero > * { position: relative; z-index: 2; } .fiche .back { display: inline-block; color: var(--blue); text-decoration: none; font-size: 13px; font-weight: 500; margin-bottom: 20px; } .fiche .back:hover { color: var(--white); } .fiche .brand-row { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; } .fiche .brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: var(--rose); color: var(--white); font-weight: 700; font-size: 17px; border-radius: var(--radius-chip); } .fiche .brand-name { font-weight: 600; font-size: 13px; letter-spacing: 3px; text-transform: uppercase; } .fiche .hero .pill { background: rgba(255,255,255,.12); color: var(--white); margin-bottom: 14px; } .fiche .hero h1 { font-size: 34px; font-weight: 600; line-height: 1.15; margin-bottom: 12px; } .fiche .hero h1 .accent { color: var(--blue); } .fiche .hero p { font-family: 'Roboto Slab', Georgia, serif; color: #C9D4E3; font-size: 16px; max-width: 640px; } .fiche main { padding: 44px 48px 60px; } .fiche section { margin-bottom: 46px; scroll-margin-top: 20px; } .fiche h2 { font-size: 24px; font-weight: 600; color: var(--navy); margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--border); } .fiche h2 .number { color: var(--blue); font-weight: 700; margin-right: 10px; } .fiche h3 { font-size: 17px; font-weight: 600; color: var(--navy); margin: 24px 0 10px; } .fiche p { margin-bottom: 12px; } .fiche ul, .fiche ol { margin: 12px 0 16px 22px; } .fiche li { margin-bottom: 6px; } .fiche strong { color: var(--navy); font-weight: 600; } .fiche footer { padding: 24px 48px; border-top: 1px solid var(--border); text-align: center; font-size: 12px; color: var(--gray); } @media (max-width: 640px) { .fiche .hero, .fiche main { padding-left: 24px; padding-right: 24px; } .fiche .hero h1 { font-size: 27px; } } /* ============================================ FICHE COMPLETE .fiche-full === */ /* Tokens + composants globaux fournis ici ; le layout sidebar/sommaire/contenu reste inline dans fiche_revision_performance.html (unique à cette page). */ body.fiche-full { background: var(--gray-lighter); } /* =============================================== COQUILLE (.ht-*) v3 ======= */ .ht-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 40px; background: var(--white); border-bottom: 1px solid var(--border); } .ht-logo { font-family: 'Poppins', sans-serif; font-weight: 700; letter-spacing: 3px; font-size: 18px; color: var(--navy); text-decoration: none; } .ht-header .ht-user { font-size: 14px; color: var(--navy); display: flex; gap: 16px; align-items: center; } .ht-wrap { max-width: 1080px; margin: 0 auto; padding: 48px 40px; } .ht-label { display: inline-block; text-transform: uppercase; font-size: 12px; font-weight: 600; letter-spacing: .8px; color: var(--navy); background: var(--blue-tint); padding: 6px 14px; border-radius: var(--radius-pill); margin: 0 0 10px; } .ht-wrap h1 { font-size: 38px; font-weight: 600; color: var(--navy); margin: 0 0 12px; } .ht-wrap h2 { font-size: 26px; font-weight: 600; color: var(--navy); margin: 40px 0 8px; } .ht-wrap h3 { font-size: 20px; font-weight: 600; color: var(--navy); margin: 0 0 8px; } .ht-underline { width: 36px; height: 2px; background: var(--blue); margin: 8px 0 18px; border-radius: var(--radius-pill); } .ht-hero { background: var(--navy); color: var(--white); padding: 72px 40px; position: relative; overflow: hidden; } .ht-hero h1 { color: var(--white); } .ht-hero p { color: var(--light-blue); max-width: 620px; } .ht-hero .decorative-arc { position: absolute; right: -120px; top: -120px; width: 360px; height: 360px; border: 22px solid rgba(123,159,199,.22); border-radius: 50%; } .ht-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; margin-top: 24px; } .ht-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 24px; transition: border-color .15s, transform .15s, box-shadow .15s; display: flex; flex-direction: column; box-shadow: 0 2px 8px rgba(0,0,0,.05); } .ht-card:hover { border-color: var(--blue); transform: translateY(-3px); box-shadow: 0 16px 34px rgba(53,72,102,.14); } .ht-card h3 { margin-top: 0; } .ht-card .tag { align-self: flex-start; background: var(--blue-tint); color: var(--navy); font-size: 10px; font-weight: 600; letter-spacing: 1px; padding: 4px 11px; border-radius: var(--radius-pill); text-transform: uppercase; margin-bottom: 12px; } .ht-card p { flex: 1; font-size: 14px; } .ht-login { max-width: 440px; margin: 8vh auto; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 40px; box-shadow: 0 8px 30px rgba(53,72,102,.08); } .ht-login .divider { display: flex; align-items: center; gap: 12px; color: var(--gray); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; margin: 28px 0; } .ht-login .divider::before, .ht-login .divider::after { content: ""; flex: 1; height: 1px; background: var(--border); } .ht-login input { width: 100%; font-family: inherit; font-size: 15px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-btn); margin-bottom: 12px; } .ht-login input:focus { outline: none; border-color: var(--navy); } .ht-login .btn { width: 100%; text-align: center; justify-content: center; margin-bottom: 10px; } .ht-msg { font-size: 13px; padding: 10px 12px; margin-bottom: 12px; display: none; border-radius: 8px; } .ht-msg.err { display: block; background: #FCE8EC; color: #8B2D3F; border-left: 3px solid var(--danger-border); } .ht-msg.ok { display: block; background: var(--blue-tint); color: var(--navy); border-left: 3px solid var(--blue); } .ht-footer { background: var(--navy); color: #C9D4E3; padding: 28px 40px; font-size: 13px; text-align: center; } /* Tableau de bord admin */ .kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; margin: 24px 0; } .kpi { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 24px; box-shadow: 0 2px 8px rgba(0,0,0,.05); } .kpi .num { font-size: 48px; font-weight: 700; color: var(--blue); line-height: 1; } .kpi .cap { font-size: 13px; color: var(--navy); text-transform: uppercase; letter-spacing: 1px; margin-top: 8px; } table.ht-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--white); margin-top: 16px; border-radius: 14px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.06); } table.ht-table th { background: var(--navy); color: var(--white); text-align: left; padding: 11px 14px; font-size: 13px; font-weight: 600; } table.ht-table td { padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 14px; } table.ht-table tr:nth-child(even) td { background: var(--card); } /* Boutons (coquille + génériques) */ .btn { display: inline-block; cursor: pointer; font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; padding: 12px 24px; border-radius: var(--radius-btn); border: 1px solid transparent; text-decoration: none; transition: background .15s, color .15s, border-color .15s; } .btn-primary { background: var(--navy); color: var(--white); } .btn-primary:hover { background: var(--mid-navy); } .btn-outline { background: transparent; border-color: var(--navy); color: var(--navy); } .btn-outline:hover { background: var(--navy); color: var(--white); } .btn-accent { background: var(--blue); color: var(--white); } .btn-accent:hover { background: var(--navy); } .btn[disabled] { opacity: .5; cursor: not-allowed; }