/* ========================================================= Parallel 14 — Site layout (nav, footer, pages) S'appuie sur le design system (tokens/base/effects/components) ========================================================= */ :root{--nav-h:84px;} /* ---------- Navigation ---------- */ /* Le header (#site-nav) porte le sticky : c'est un enfant direct de , donc son bloc conteneur est la page entière et il reste épinglé sur tout le scroll. Poser le sticky sur .nav (enfant d'un header qui l'enveloppe à sa hauteur exacte) ne laissait aucune marge de déplacement → la nav défilait avec la page. */ #site-nav{position:sticky;top:0;z-index:40;} .nav{ position:relative;z-index:40; /* Taille de typo unifiée pour tous les libellés du header (onglets méga-menu, liens directs, bascule langue, CTA). Contrainte : jusqu'à 5 onglets de méga-menu par univers (Academy, Formation Continue) → valeur compacte calée sur le plus long libellé d'onglet (« Parcours certifiants ») dans une grille à 5 colonnes égales, pour éviter tout chevauchement. */ --nav-text:.61rem; /* Glass cohérent avec .glass-vignette (effects.css) + glow par univers (--glow) */ -webkit-backdrop-filter:blur(22px) saturate(180%); backdrop-filter:blur(22px) saturate(180%); background:linear-gradient(180deg, rgba(8,20,32,.78), rgba(8,20,32,.55)); border-bottom:1px solid var(--border); box-shadow: 0 10px 30px rgba(8,20,32,.45), 0 8px 28px -10px var(--glow), inset 0 1px 0 rgba(220,231,239,.10); } .nav-inner{ max-width:1200px;margin-inline:auto;padding:14px var(--space-5); display:flex;align-items:center;gap:var(--space-4); } .brand{display:flex;align-items:center;gap:12px;font-family:var(--font-display);font-weight:700; font-size:var(--text-lg);letter-spacing:-.01em;color:var(--text);white-space:nowrap;} .brand .mark{ width:34px;height:34px;border-radius:9px;display:grid;place-items:center; font-family:var(--font-mono);font-weight:700;font-size:13px;color:var(--on-accent); background:linear-gradient(150deg, var(--accent-soft), var(--accent)); box-shadow:0 0 18px rgba(var(--accent-rgb),.5); } .brand small{display:block;font-family:var(--font-mono);font-weight:400;font-size:10px; letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted);margin-top:2px;} .nav-collapse{display:flex;align-items:center;gap:var(--space-4);flex:1;min-width:0;} .nav-menu{display:flex;align-items:center;gap:2px;flex:1;min-width:0;} .nav-link{ font-family:var(--font-mono);font-size:var(--nav-text);letter-spacing:.06em;text-transform:uppercase; color:var(--text-secondary);padding:9px 13px;border-radius:var(--radius-ui); transition:var(--dur) var(--ease-out);cursor:pointer;white-space:nowrap;border:0;background:transparent; } .nav-link:hover{color:var(--text);background:rgba(123,160,190,.08);} .nav-link.active{color:var(--text);background:rgba(var(--accent-rgb),.14); box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.30);} .nav-tools{display:flex;align-items:center;gap:8px;} .nav-cta{ font-family:var(--font-mono);font-size:var(--nav-text);font-weight:600;letter-spacing:.04em;text-transform:uppercase; padding:8px 11px;border-radius:var(--radius-ui);white-space:nowrap;cursor:pointer; color:#fff;background:rgba(var(--accent-rgb),.92); box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.5),0 4px 14px rgba(var(--accent-rgb),.28); transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out),background var(--dur); } .nav-cta:hover{background:rgb(var(--accent-rgb));transform:translateY(-1px); box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.6),0 6px 20px rgba(var(--accent-rgb),.38);} .lang-toggle{display:inline-flex;border-radius:var(--radius-ui);overflow:hidden; box-shadow:inset 0 0 0 1px var(--border-strong);} .lang-toggle button{ font-family:var(--font-mono);font-size:var(--nav-text);font-weight:600;letter-spacing:.08em; padding:7px 11px;border:0;cursor:pointer;background:transparent;color:var(--text-muted);transition:var(--dur); } .lang-toggle button.active{background:linear-gradient(165deg,var(--accent-soft),var(--accent));color:var(--on-accent);} /* ---- Bascule thème clair / sombre ---- */ .theme-toggle{display:grid;place-items:center;flex:0 0 auto;width:38px;height:38px; border:0;border-radius:var(--radius-ui);cursor:pointer;background:transparent;color:var(--text-secondary); box-shadow:inset 0 0 0 1px var(--border-strong); transition:color var(--dur),background var(--dur),box-shadow var(--dur),transform var(--dur);} .theme-toggle:hover{color:var(--text);background:rgba(var(--accent-rgb),.10); box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.5);} .theme-toggle:active{transform:translateY(1px);} .theme-toggle:focus-visible{outline:2px solid rgba(var(--accent-rgb),.6);outline-offset:2px;} .theme-toggle-icon{display:grid;place-items:center;width:18px;height:18px;} .theme-toggle-icon svg{grid-area:1/1;display:block; transition:opacity var(--dur),transform var(--dur);} /* On affiche l'icône de la CIBLE : soleil en mode sombre (→ passe en clair), lune en mode clair (→ passe en sombre). L'autre icône se fond en crossfade. */ .theme-toggle .ico-sun{opacity:1;transform:none;} .theme-toggle .ico-moon{opacity:0;transform:rotate(-45deg) scale(.55);pointer-events:none;} html.light .theme-toggle .ico-sun{opacity:0;transform:rotate(45deg) scale(.55);pointer-events:none;} html.light .theme-toggle .ico-moon{opacity:1;transform:none;} .nav-burger{display:none;margin-left:auto;background:transparent;border:0;cursor:pointer; width:42px;height:42px;border-radius:var(--radius-ui);color:var(--text); box-shadow:inset 0 0 0 1px var(--border-strong);font-size:18px;} .caret{font-size:.62rem;color:var(--text-muted);transition:transform .25s var(--ease-out);} /* ---- Sélecteur d'univers (volet à gauche) ---- */ .nav-switcher{position:relative;} .universe-trigger{display:flex;align-items:center;gap:10px;background:transparent;cursor:pointer; padding:6px 12px;border-radius:var(--radius-ui);border:0;color:var(--text); box-shadow:inset 0 0 0 1px var(--border-strong);transition:var(--dur);} .universe-trigger:hover{background:rgba(123,160,190,.08);} .universe-brand{height:36px;width:auto;max-width:200px;object-fit:contain;display:block;} .universe-brand.is-tinted{aspect-ratio:var(--ar,1144/280);background-color:rgb(var(--c)); -webkit-mask:var(--logo) center/contain no-repeat;mask:var(--logo) center/contain no-repeat;} .universe-panel{position:absolute;top:calc(100% + 8px);left:0;z-index:50;display:none;width:300px;padding:8px; border-radius:14px; background:linear-gradient(180deg, rgba(8,20,32,.97), rgba(8,20,32,.93)); -webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%); box-shadow:0 24px 60px rgba(8,20,32,.55), 0 0 28px var(--glow), inset 0 1px 0 rgba(220,231,239,.10), inset 0 0 0 1px var(--border);} .nav-switcher:hover .universe-panel,.nav-switcher.hover-open .universe-panel,.nav-switcher.open .universe-panel{display:block;} .universe-panel-label{font-family:var(--font-mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase; color:var(--text-muted);padding:6px 10px 8px;margin:0;} .universe-row{display:flex;align-items:center;padding:12px 14px;border-radius:10px;transition:background .2s;} .universe-row:hover{background:rgba(var(--u),.12);} .universe-row.active{background:rgba(var(--u),.14);box-shadow:inset 0 0 0 1px rgba(var(--u),.45);} .universe-row-logo{height:36px;width:auto;max-width:100%;object-fit:contain;display:block;} .universe-row-logo.is-tinted{aspect-ratio:var(--ar,1144/280);background-color:rgb(var(--c)); -webkit-mask:var(--logo) center/contain no-repeat;mask:var(--logo) center/contain no-repeat;} /* ---- Méga menu déroulant ---- */ .nav-item{position:relative;} .nav-toggle{display:inline-flex;align-items:center;gap:6px;} .nav-dropdown{position:absolute;top:calc(100% + 8px);left:0;z-index:50;display:none;min-width:240px;padding:8px; border-radius:14px; background:linear-gradient(180deg, rgba(8,20,32,.97), rgba(8,20,32,.93)); -webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%); box-shadow:0 24px 60px rgba(8,20,32,.55), 0 0 28px var(--glow), inset 0 1px 0 rgba(220,231,239,.10), inset 0 0 0 1px var(--border);} .nav-dropdown::before{content:"";position:absolute;top:-8px;left:0;right:0;height:8px;} .nav-item.has-children:hover .nav-dropdown,.nav-item.has-children.hover-open .nav-dropdown,.nav-item.open .nav-dropdown{display:block;} .nav-dropdown-link{display:block;padding:10px 12px;border-radius:8px; font-family:var(--font-mono);font-size:.74rem;letter-spacing:.04em;color:var(--text-secondary); transition:background .2s,color .2s;} .nav-dropdown-link:hover{background:rgba(var(--accent-rgb),.12);color:var(--text);} .nav-mega-head{font-family:var(--font-mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase; color:var(--accent);padding:6px 12px 8px;margin:0 0 2px; border-bottom:1px solid rgba(var(--accent-rgb),.18);} .nav-mega-grid{display:grid;grid-template-columns:1fr;gap:1px;padding-top:4px;} /* Un seul méga-menu par univers : toutes les rubriques en colonnes */ .nav-mega{right:0;left:auto;max-width:min(1060px,94vw);} .nav-mega .nav-mega-grid{grid-template-columns:repeat(var(--nav-cols,3),minmax(0,1fr));gap:2px 6px;align-items:start;padding-top:2px;} .nav-mega-col{display:flex;flex-direction:column;min-width:0;} /* ---- Barre méga « déroulante » : les titres de rubriques vivent dans le header, le panneau de liens descend en s'alignant sous chaque titre. ---- */ .nav-megabar{position:relative;flex:1 1 auto;min-width:0;} .nav-megabar-row{display:grid;grid-template-columns:repeat(var(--nav-cols,3),minmax(0,1fr)); gap:2px 6px;align-items:center;width:100%;padding:6px 4px;background:transparent;border:0;cursor:pointer; /* le