/* ============================================================ ACCUEIL — Refonte « artboard 4a » (maquette Caly-Élec, 2026-07-14) ------------------------------------------------------------ Layout 3 colonnes : ◀ Labs (ExternalApps) | centre (nav+reprendre+parcours+catalogue) | Cours (themes.json) ▶ + barre de nav sombre, carte REPRENDRE sombre, overlay « veille » 1912. Chargé APRÈS netflix-home.css. Scoping #nfx-home-content (sauf overlay, appendé à → bloc NON scopé en fin de fichier). ============================================================ */ #nfx-home-content { /* alias existants conservés (consommés par level-filter, subtheme…) */ --primary: #ff5a3c; --primary-dark: #ea580c; --primary-light: #ff9166; --accent: #ff5a3c; --coral: #ff5a3c; --coral-soft: #fff1ec; --ink: #17181c; /* Marque / corail */ --corail: #ff5a3c; --corail-clair: #ff9166; --corail-glow: rgba(255, 90, 60, .4); /* Encre / surfaces sombres */ --encre: #17181c; --encre-grad-2: #2b2d36; --veille-noir: #0d0d0f; /* Fonds */ --creme: #faf9f7; --blanc: #fff; /* Textes atténués */ --txt-mute-50: rgba(0, 0, 0, .5); --txt-mute-62: rgba(0, 0, 0, .62); --txt-mute-35: rgba(0, 0, 0, .35); --txt-sousitem: #2a2b31; /* Bordures / ombres */ --bord-carte: rgba(0, 0, 0, .09); --bord-cat: rgba(0, 0, 0, .07); /* Badges des 4 cartes parcours */ --badge-p1: #4f46e5; --badge-p2: #9333ea; --badge-p3: #e11d70; --badge-concep: #0d9488; background: var(--creme); color: var(--ink); padding: 0 !important; } /* ============ (1) BARRE DE NAV SOMBRE ============ */ #nfx-home-content .nfx-topnav { display: flex; align-items: center; justify-content: space-between; padding: 14px 26px; background: var(--encre); color: #fff; } #nfx-home-content .nfx-topnav-left { display: flex; align-items: center; gap: 28px; min-width: 0; } #nfx-home-content .nfx-brand { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 16px; color: #fff; text-decoration: none; white-space: nowrap; } #nfx-home-content .nfx-brand-sq { width: 24px; height: 24px; border-radius: 7px; background: var(--corail); display: grid; place-items: center; font-size: 13px; } #nfx-home-content .nfx-brand-acc { color: var(--corail); } /* Onglets réstylés DANS la nav uniquement (double scoping) */ #nfx-home-content .nfx-topnav .nfx-tabs { display: flex; gap: 22px; background: none; border: none; padding: 0; margin: 0; box-shadow: none; flex-wrap: wrap; } #nfx-home-content .nfx-topnav .nfx-tab { background: none; border: none; padding: 4px 0; margin: 0; border-radius: 0; color: rgba(255, 255, 255, .62); font-weight: 500; font-size: 13px; box-shadow: none; cursor: pointer; transition: color .15s; border-bottom: 2px solid transparent; } #nfx-home-content .nfx-topnav .nfx-tab .tab-icon { display: none; } #nfx-home-content .nfx-topnav .nfx-tab .tab-count { font-size: 10px; opacity: .6; margin-left: 4px; } #nfx-home-content .nfx-topnav .nfx-tab:hover { color: #fff; } #nfx-home-content .nfx-topnav .nfx-tab-active { color: #fff; font-weight: 700; border-bottom-color: var(--corail); background: none; } #nfx-home-content .nfx-veille-btn { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); color: #fff; font-weight: 600; font-size: 12px; padding: 8px 14px; border-radius: 9px; cursor: pointer; white-space: nowrap; transition: background .15s; } #nfx-home-content .nfx-veille-btn:hover { background: rgba(255, 255, 255, .2); } /* Barre de recherche sous la nav */ #nfx-home-content .nfx-search { padding: 16px 30px 0; } /* ============ LAYOUT 3 COLONNES ============ */ #nfx-home-content .nfx-home-3col { display: grid; grid-template-columns: 260px minmax(0, 1fr) 300px; background: var(--creme); align-items: start; } #nfx-home-content .nfx-home-main { padding: 24px 26px 40px; min-width: 0; } /* ============ (2) CARTE REPRENDRE (sombre) ============ */ #nfx-home-content .nfx-resume-banner { display: flex; align-items: center; justify-content: space-between; gap: 18px; background: linear-gradient(115deg, var(--encre), var(--encre-grad-2)); border-radius: 16px; padding: 20px 24px; color: #fff; overflow: hidden; position: relative; margin-bottom: 22px; border-left: none; } #nfx-home-content .nfx-resume-banner::after { content: ""; position: absolute; right: -30px; bottom: -40px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, var(--corail-glow), transparent 70%); } #nfx-home-content .nfx-resume-text { position: relative; z-index: 1; min-width: 0; } #nfx-home-content .nfx-resume-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--corail-clair); font-weight: 700; } #nfx-home-content .nfx-resume-title { font-weight: 700; font-size: 19px; margin: 6px 0 4px; color: #fff; } #nfx-home-content .nfx-resume-sub { font-size: 12.5px; color: rgba(255, 255, 255, .6); } #nfx-home-content .nfx-resume-track { margin-top: 12px; width: 260px; max-width: 100%; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .15); } #nfx-home-content .nfx-resume-track > i { display: block; height: 100%; border-radius: 6px; background: var(--corail); } #nfx-home-content .nfx-resume-cta { position: relative; z-index: 1; background: var(--corail); border: none; color: #fff; font-weight: 700; font-size: 13px; padding: 12px 22px; border-radius: 10px; cursor: pointer; white-space: nowrap; flex: none; } #nfx-home-content .nfx-resume-cta:hover { filter: brightness(1.06); } /* ============ (3) 4 CARTES PARCOURS ============ */ #nfx-home-content .nfx-parcours { margin-bottom: 24px; } #nfx-home-content .nfx-parcours-h2 { font-weight: 700; font-size: 19px; color: var(--ink); margin: 0 0 14px; } #nfx-home-content .nfx-pc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } #nfx-home-content .nfx-pc { display: flex; flex-direction: column; align-items: flex-start; text-align: left; cursor: pointer; border: 1px solid var(--bord-carte); border-radius: 13px; padding: 15px; background: var(--blanc); transition: border-color .15s, box-shadow .15s, transform .15s; } #nfx-home-content .nfx-pc:hover { border-color: var(--b); box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .3); transform: translateY(-1px); } #nfx-home-content .nfx-pc-badge { font-weight: 800; font-size: 11px; letter-spacing: .03em; background: var(--b); color: #fff; padding: 3px 9px; border-radius: 6px; } #nfx-home-content .nfx-pc-t { font-weight: 700; font-size: 14px; margin: 11px 0 3px; color: var(--ink); } #nfx-home-content .nfx-pc-m { font-size: 11.5px; color: var(--txt-mute-50); } /* ============ (4)+(5) RAILS LATÉRAUX (labs gauche / cours droite) ============ */ #nfx-home-content .nfx-labsrail { padding: 24px 0 30px 24px; align-self: start; } #nfx-home-content .nfx-catrail { padding: 24px 24px 30px 0; align-self: start; } #nfx-home-content .nfx-catrail-h { font-weight: 700; font-size: 13px; color: var(--ink); margin: 0 0 12px; } #nfx-home-content .nfx-catrail-list { display: flex; flex-direction: column; gap: 8px; } #nfx-home-content .nfx-cr-item { border-radius: 11px; overflow: hidden; background: var(--blanc); border: 1px solid var(--bord-cat); } #nfx-home-content .nfx-cr-head { display: flex; align-items: center; gap: 11px; padding: 13px 15px; cursor: pointer; color: #fff; list-style: none; } #nfx-home-content .nfx-cr-head::-webkit-details-marker { display: none; } #nfx-home-content .nfx-cr-ico { font-size: 14px; } #nfx-home-content .nfx-cr-name { font-weight: 700; font-size: 12px; flex: 1; line-height: 1.25; } #nfx-home-content .nfx-cr-count { font-weight: 700; font-size: 10px; opacity: .9; } #nfx-home-content .nfx-cr-chev { font-size: 13px; transition: transform .2s; } #nfx-home-content details[open] > .nfx-cr-head .nfx-cr-chev { transform: rotate(180deg); } #nfx-home-content .nfx-cr-panel { padding: 5px 6px 8px; display: flex; flex-direction: column; gap: 2px; } #nfx-home-content .nfx-cr-sub { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 8px; font-size: 11.5px; color: var(--txt-sousitem); background: none; border: none; cursor: pointer; text-align: left; width: 100%; } #nfx-home-content .nfx-cr-sub:hover { background: rgba(0, 0, 0, .04); } #nfx-home-content .nfx-cr-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; } #nfx-home-content .nfx-cr-lbl { flex: 1; line-height: 1.25; } #nfx-home-content .nfx-cr-niv { font-weight: 700; font-size: 9px; color: var(--txt-mute-35); } /* Sous-thème dépliable → liste de cours (le rail droit EST le catalogue) */ #nfx-home-content .nfx-cr-sub2 > .nfx-cr-sub { list-style: none; } #nfx-home-content .nfx-cr-sub2 > .nfx-cr-sub::-webkit-details-marker { display: none; } #nfx-home-content .nfx-cr-sub2[open] > .nfx-cr-sub { background: rgba(0, 0, 0, .04); } #nfx-home-content .nfx-cr-courses { display: flex; flex-direction: column; gap: 1px; padding: 1px 4px 5px 24px; } #nfx-home-content .nfx-cr-course { text-align: left; background: none; border: none; cursor: pointer; width: 100%; font-size: 11px; color: var(--txt-mute-62); padding: 5px 8px; border-radius: 6px; line-height: 1.3; } #nfx-home-content .nfx-cr-course:hover { background: var(--coral-soft); color: #9a3d2b; } /* Titre de section catalogue */ #nfx-home-content .nfx-catalog-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 22px 0 10px; } #nfx-home-content .nfx-catalog-head h2 { font-size: 1.4rem; color: var(--ink); margin: 0; } #nfx-home-content .nfx-catalog-head .hint { color: #9ca3af; font-size: .85rem; font-weight: 500; } /* ============ « Le saviez-vous ? » — carte centrale ============ */ #nfx-home-content .nfx-dyk-center { margin: 0 0 22px; padding: 18px 22px; border-radius: 16px; background: linear-gradient(120deg, var(--blanc), #fff6f2); border: 1px solid var(--bord-carte); border-left: 4px solid var(--coral); min-height: 92px; } #nfx-home-content .nfx-dyk-center .dyk-kicker { font-weight: 800; font-size: 11px; letter-spacing: .04em; color: var(--coral); text-transform: uppercase; } #nfx-home-content .nfx-dyk-center .dyk-tag { margin-left: 8px; font-size: 10px; font-weight: 700; color: #9a3d2b; background: var(--coral-soft); padding: 2px 9px; border-radius: 20px; } #nfx-home-content .nfx-dyk-center .dyk-text { margin: 10px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--ink); } .dyk-inner { transition: opacity .28s ease; } .dyk-inner.dyk-out { opacity: 0; } /* ============ FILTRE NIVEAU + SOUS-THÈMES (corail conservé) ============ */ #nfx-home-content .nfx-lvl-chip.nfx-lvl-active { background: var(--coral); border-color: var(--coral); color: #fff; } #nfx-home-content .nfx-lvl-chip:hover { border-color: var(--coral); color: var(--coral); } #nfx-home-content .nfx-subtheme-count { color: var(--coral); } /* ============ ONGLET « OUTILS DU FORMATEUR » (refonte 4a) ============ */ /* L'onglet Outils ne contient QUE les outils du formateur (les simulateurs & labs sont sur l'accueil, rail gauche). Cartes claires façon « catalogue », accent corail. */ #nfx-home-content .nfx-fmt { padding: 24px 30px 44px; } #nfx-home-content .nfx-fmt-head { display: flex; align-items: center; gap: 15px; margin: 4px 0 24px; } #nfx-home-content .nfx-fmt-head-ico { width: 46px; height: 46px; flex: none; border-radius: 13px; display: grid; place-items: center; font-size: 24px; background: var(--coral-soft); border: 1px solid var(--bord-carte); } #nfx-home-content .nfx-fmt-head-txt h2 { margin: 0; font-size: 19px; font-weight: 700; color: var(--ink); } #nfx-home-content .nfx-fmt-head-txt p { margin: 4px 0 0; font-size: 12.5px; color: var(--txt-mute-50); max-width: 640px; line-height: 1.45; } #nfx-home-content .nfx-fmt-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 26px 16px; align-items: start; } #nfx-home-content .nfx-fmt-group-title { margin: 0 0 11px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--txt-mute-50); } #nfx-home-content .nfx-fmt-grid { display: grid; grid-template-columns: 1fr; gap: 10px; } #nfx-home-content .nfx-fmt-card { display: flex; align-items: center; gap: 13px; text-align: left; cursor: pointer; width: 100%; background: var(--blanc); border: 1px solid var(--bord-carte); border-radius: 13px; padding: 13px 15px; transition: border-color .15s, box-shadow .15s, transform .15s; } #nfx-home-content .nfx-fmt-card:hover { border-color: var(--coral); box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .3); transform: translateY(-1px); } #nfx-home-content .nfx-fmt-card:active { transform: scale(.99); } #nfx-home-content .nfx-fmt-ico { width: 42px; height: 42px; flex: none; border-radius: 11px; display: grid; place-items: center; background: var(--coral-soft); color: var(--coral); transition: background .15s, color .15s; } #nfx-home-content .nfx-fmt-ico svg { width: 21px; height: 21px; } #nfx-home-content .nfx-fmt-card:hover .nfx-fmt-ico { background: var(--coral); color: #fff; } #nfx-home-content .nfx-fmt-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } #nfx-home-content .nfx-fmt-title { font-weight: 700; font-size: 13.5px; color: var(--ink); line-height: 1.2; } #nfx-home-content .nfx-fmt-desc { font-size: 11px; color: var(--txt-mute-50); line-height: 1.3; } /* Action système « Fermer » (danger) */ #nfx-home-content .nfx-fmt-card[data-danger] .nfx-fmt-ico { background: #fee2e2; color: #ef4444; } #nfx-home-content .nfx-fmt-card[data-danger]:hover { border-color: #ef4444; } #nfx-home-content .nfx-fmt-card[data-danger]:hover .nfx-fmt-ico { background: #ef4444; color: #fff; } #nfx-home-content .nfx-fmt-card[data-danger] .nfx-fmt-title { color: #b91c1c; } /* ============ RESPONSIVE ============ */ @media (max-width: 1100px) { #nfx-home-content .nfx-home-3col { grid-template-columns: minmax(0, 1fr) 280px; } #nfx-home-content .nfx-labsrail { grid-column: 1 / -1; padding: 0 26px 20px; } #nfx-home-content .nfx-labsrail .nfx-catrail-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; } } @media (max-width: 820px) { #nfx-home-content .nfx-home-3col { grid-template-columns: 1fr; } #nfx-home-content .nfx-catrail { grid-column: 1 / -1; padding: 0 26px 30px; } #nfx-home-content .nfx-catrail .nfx-catrail-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; } #nfx-home-content .nfx-pc-grid { grid-template-columns: 1fr; } #nfx-home-content .nfx-topnav { flex-wrap: wrap; gap: 12px; } #nfx-home-content .nfx-fmt { padding: 18px 18px 36px; } #nfx-home-content .nfx-fmt-grid { grid-template-columns: 1fr; } } /* ============ KEYFRAME (pulsation) ============ */ @keyframes calyPulse { 0% { box-shadow: 0 0 0 0 rgba(255, 90, 60, .6); } 70% { box-shadow: 0 0 0 10px rgba(255, 90, 60, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 90, 60, 0); } } /* ============ (6) OVERLAY VEILLE — NON SCOPÉ (appendé à ) ============ */ .nfx-idle { position: fixed; inset: 0; z-index: 99999; cursor: pointer; overflow: hidden; background: #0d0d0f; } .nfx-idle-img { /* Photo d'origine 300×381 (portrait, petite) : PAS de plein-bleed `cover` (qui l'agrandissait ~6× et la rognait → effet « étiré »). Cadrage proportionnel `contain`, discret, en fond derrière le texte. */ position: absolute; inset: 0; background: #0d0d0f url('/assets/home/detroit-1912.webp') center / contain no-repeat; background-size: auto 78%; filter: grayscale(1) contrast(1.03); opacity: .55; } .nfx-idle-veil { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(13, 13, 15, .92), rgba(13, 13, 15, .35) 55%, rgba(13, 13, 15, .78)); } .nfx-idle-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px; } .nfx-idle-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: #ff9166; border: 1px solid rgba(255, 145, 102, .4); padding: 6px 14px; border-radius: 20px; margin-bottom: 30px; letter-spacing: .05em; } /* « Le saviez-vous ? » plein écran (veille) — non scopé (overlay sur ) */ .nfx-dyk-veille { max-width: 780px; text-align: center; margin-bottom: 34px; } .nfx-dyk-veille .dyk-inner { transition: opacity .35s ease; } .nfx-dyk-veille .dyk-inner.dyk-out { opacity: 0; } .nfx-dyk-veille .dyk-kicker { display: inline-block; font-weight: 800; font-size: 13px; letter-spacing: .06em; color: #ff9166; text-transform: uppercase; } .nfx-dyk-veille .dyk-tag { display: inline-block; margin-left: 10px; font-size: 11px; font-weight: 700; color: #ffd9c9; border: 1px solid rgba(255, 145, 102, .4); padding: 3px 10px; border-radius: 20px; } .nfx-dyk-veille .dyk-text { margin: 22px 0 0; font-weight: 800; font-size: 34px; line-height: 1.28; color: #fff; letter-spacing: -.01em; } @media (max-width: 700px) { .nfx-dyk-veille .dyk-text { font-size: 23px; } } .nfx-idle-title { font-weight: 800; font-size: 38px; line-height: 1.1; color: #fff; margin: 0 0 16px; letter-spacing: -.02em; max-width: 640px; } .nfx-idle-p { font-size: 15px; color: rgba(255, 255, 255, .72); margin: 0 0 34px; max-width: 540px; line-height: 1.55; } .nfx-idle-pill { display: inline-flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .25); color: #fff; font-weight: 600; font-size: 14px; padding: 13px 24px; border-radius: 30px; backdrop-filter: blur(4px); } .nfx-idle-dot { width: 9px; height: 9px; border-radius: 50%; background: #ff5a3c; animation: calyPulse 1.6s infinite; } .nfx-idle-legend { position: absolute; right: 22px; bottom: 16px; font-weight: 500; font-size: 10.5px; color: rgba(255, 255, 255, .45); } @media (max-width: 700px) { .nfx-idle-title { font-size: 30px; } } /* Rails latéraux : chacun « colle » au viewport et défile son propre contenu (défilement indépendant), pendant que la colonne centrale reste fixe — pratique pour glisser un cours d'un rail vers la boîte « Ma séance » sans perdre le centre. Uniquement en disposition 3 colonnes (>1100px) ; au-dessous, les rails s'empilent. */ @media (min-width: 1101px) { #nfx-home-content .nfx-labsrail, #nfx-home-content .nfx-catrail { position: sticky; top: 10px; max-height: calc(100vh - 20px); overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: rgba(15,23,42,.22) transparent; } #nfx-home-content .nfx-labsrail::-webkit-scrollbar, #nfx-home-content .nfx-catrail::-webkit-scrollbar { width: 8px; } #nfx-home-content .nfx-labsrail::-webkit-scrollbar-thumb, #nfx-home-content .nfx-catrail::-webkit-scrollbar-thumb { background: rgba(15,23,42,.2); border-radius: 4px; } #nfx-home-content .nfx-labsrail::-webkit-scrollbar-thumb:hover, #nfx-home-content .nfx-catrail::-webkit-scrollbar-thumb:hover { background: rgba(15,23,42,.35); } } /* Tuile désactivée temporairement */ #nfx-home-content .nfx-fmt-card[data-disabled], #nfx-home-content .nfx-fmt-card[data-disabled]:hover { opacity: .5; cursor: not-allowed; filter: grayscale(.7); border-color: var(--bord-carte); box-shadow: none; transform: none; } #nfx-home-content .nfx-fmt-card[data-disabled] .nfx-fmt-desc { font-style: italic; }