/* ═══════════════════════════════════════════════════════════════ DESIGN TOKENS — Dark Forest / Gold accent theme Copiez ce bloc dans votre propre ═══════════════════════════════════════════════════════════════ */ :root { /* Sidebar dimensions */ --sb-w: 268px; --sb-col: 66px; --hh: 60px; /* Greens */ --forest: #0d1f06; --canopy: #142b0a; --leaf: #1e4010; --fern: #2c5c1a; --moss: #3e7a25; --sage: #5da038; --lime: #84c84a; --g-pale: #d6f0b0; --g-mist: #eaf6d8; --g-tint: #f2fbea; /* Gold / Amber */ --gold: #c49a0a; --gilt: #f5c518; --amber: #d97010; /* Bordeaux */ --bord: #6e1515; --bord2: #9c1f1f; /* UI neutrals */ --snow: #ffffff; --off: #f8fdf2; --paper: #f1f8e8; --ink: #0d1a06; --mid: #3a5228; --muted: #5e7a46; --faded: #8aaa6a; --wire: #c8e0a4; --line: #daeebe; /* Semantic */ --danger: #c0392b; --ok: #27ae60; --info: #2471a3; --warn: #d68910; /* Geometry */ --r: 9px; --rmd: 13px; --rlg: 18px; /* Shadows */ --sh: 0 1px 4px rgba(10,30,5,.07), 0 4px 18px rgba(10,30,5,.07); --sh-lg: 0 8px 48px rgba(10,30,5,.14), 0 2px 12px rgba(0,0,0,.06); --sh-top: 0 -4px 24px rgba(10,30,5,.08); /* Transition */ --tr: .24s cubic-bezier(.4,0,.2,1); } /* ── Reset minimal ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 14px; scroll-behavior: smooth; } body { font-family: 'Manrope', sans-serif; background: var(--off); color: var(--ink); overflow-x: hidden; min-height: 100vh; } /* ═══════════════════════════════════════════════════════════════ LAYOUT SHELL ═══════════════════════════════════════════════════════════════ */ .shell { display: flex; min-height: 100vh; } /* ═══════════════════════════════════════════════════════════════ MOBILE OVERLAY (fond sombre derrière la sidebar sur mobile) ═══════════════════════════════════════════════════════════════ */ .sbovl { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 299; } .sbovl.on { display: block; } /* ═══════════════════════════════════════════════════════════════ SIDEBAR ═══════════════════════════════════════════════════════════════ */ .sidebar { width: var(--sb-w); background: var(--forest); position: fixed; top: 0; left: 0; bottom: 0; z-index: 300; display: flex; flex-direction: column; transition: width var(--tr), transform var(--tr); overflow: hidden; box-shadow: 4px 0 32px rgba(0,0,0,.18); } /* Mode réduit (icônes seulement) */ .sidebar.col { width: var(--sb-col); } /* ── Marque ── */ .sb-brand { display: flex; align-items: center; gap: 12px; padding: 18px 16px 16px; border-bottom: 1px solid rgba(255,255,255,.06); flex-shrink: 0; overflow: hidden; } .sb-logo { flex-shrink: 0; line-height: 0; } .sb-words { overflow: hidden; white-space: nowrap; } .sb-name { font-family: 'DM Serif Display', serif; font-size: 1.05rem; color: #fff; line-height: 1.1; } .sb-tagline { font-size: .6rem; font-weight: 700; letter-spacing: 3.5px; text-transform: uppercase; color: var(--gilt); margin-top: 3px; } /* ── Pill campus ── */ .campus-pill { margin: 10px 12px 2px; padding: 8px 12px 8px 10px; background: rgba(245,197,24,.1); border: 1px solid rgba(245,197,24,.22); border-radius: var(--r); display: flex; align-items: center; gap: 9px; overflow: hidden; transition: opacity var(--tr); } .c-pulse { width: 9px; height: 9px; background: var(--gilt); border-radius: 50%; flex-shrink: 0; animation: cpulse 2.2s ease infinite; } @keyframes cpulse { 0%,100% { box-shadow: 0 0 0 0 rgba(245,197,24,.45); } 60% { box-shadow: 0 0 0 7px rgba(245,197,24,0); } } .c-info { overflow: hidden; white-space: nowrap; } .c-tag { font-size: .58rem; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255,255,255,.4); display: block; } .c-name { font-size: .88rem; font-weight: 800; color: var(--gilt); display: block; overflow: hidden; text-overflow: ellipsis; } .sidebar.col .campus-pill { opacity: 0; pointer-events: none; } /* ── Zone de défilement nav ── */ .sb-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 6px 0 10px; } .sb-scroll::-webkit-scrollbar { width: 2px; } .sb-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 2px; } /* ── Labels de groupe ── */ .nav-group-lbl { font-size: .58rem; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,.25); padding: 14px 16px 4px; white-space: nowrap; overflow: hidden; transition: opacity var(--tr); } .sidebar.col .nav-group-lbl { opacity: 0; } /* ── Item de navigation ── */ .ni { display: flex; align-items: center; gap: 11px; padding: 9px 14px; color: rgba(255,255,255,.55); background: none; border: none; cursor: pointer; width: 100%; text-align: left; font-family: 'Manrope', sans-serif; font-size: .82rem; font-weight: 500; transition: color var(--tr), background var(--tr); position: relative; white-space: nowrap; } .ni:hover { color: #fff; background: rgba(255,255,255,.05); } .ni.active { color: #fff; background: rgba(93,160,56,.25); } .ni.active::before { content: ''; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px; background: var(--gilt); border-radius: 0 3px 3px 0; } .ni-ico { width: 18px; height: 18px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .ni-lbl { flex: 1; overflow: hidden; text-overflow: ellipsis; transition: opacity var(--tr), width var(--tr); } .sidebar.col .ni-lbl, .sidebar.col .nav-group-lbl { opacity: 0; width: 0; } .ni-badge { background: var(--gilt); color: var(--forest); font-size: .58rem; font-weight: 800; padding: 1px 6px; border-radius: 10px; flex-shrink: 0; transition: opacity var(--tr); } .sidebar.col .ni-badge { opacity: 0; width: 0; padding: 0; } .ni-arr { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--tr), opacity var(--tr); flex-shrink: 0; } .sidebar.col .ni-arr { opacity: 0; width: 0; } .ni.open .ni-arr { transform: rotate(90deg); } /* ── Sous-menus ── */ .sub-menu { max-height: 0; overflow: hidden; transition: max-height .32s cubic-bezier(.4,0,.2,1); } .sub-menu.open { max-height: 320px; } .sidebar.col .sub-menu { display: none; } .sub-item { display: flex; align-items: center; gap: 9px; padding: 7px 14px 7px 40px; color: rgba(255,255,255,.45); text-decoration: none; background: none; border: none; cursor: pointer; width: 100%; text-align: left; font-family: 'Manrope', sans-serif; font-size: .78rem; font-weight: 500; transition: color var(--tr), background var(--tr); white-space: nowrap; } .sub-item:hover { color: #fff; background: rgba(255,255,255,.04); } .sub-item.act { color: var(--gilt); font-weight: 700; } .sub-dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; flex-shrink: 0; margin-left: 2px; } /* ── Pied de sidebar ── */ .sb-foot { border-top: 1px solid rgba(255,255,255,.06); padding: 12px 14px; display: flex; align-items: center; gap: 10px; overflow: hidden; flex-shrink: 0; } .sb-av { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, var(--fern), var(--sage)); display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 800; color: #fff; } .sb-ud { overflow: hidden; white-space: nowrap; transition: opacity var(--tr); } .sidebar.col .sb-ud { opacity: 0; width: 0; } .sb-uname { font-size: .8rem; font-weight: 700; color: #fff; } .sb-urole { font-size: .65rem; color: rgba(255,255,255,.38); } /* ═══════════════════════════════════════════════════════════════ MAIN WRAP (contenu de la page) ═══════════════════════════════════════════════════════════════ */ .main { margin-left: var(--sb-w); flex: 1; min-width: 0; display: flex; flex-direction: column; transition: margin-left var(--tr); } .main.shifted { margin-left: var(--sb-col); } /* ═══════════════════════════════════════════════════════════════ TOP BAR ═══════════════════════════════════════════════════════════════ */ .topbar { height: var(--hh); background: var(--snow); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 12px; padding: 0 26px; position: sticky; top: 0; z-index: 100; box-shadow: var(--sh); } /* Bouton hamburger */ .tb-ham { background: none; border: none; cursor: pointer; padding: 7px; border-radius: var(--r); color: var(--muted); transition: all var(--tr); } .tb-ham:hover { background: var(--g-mist); color: var(--fern); } .tb-ham svg { display: block; width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; } /* Fil d'Ariane */ .tb-crumb { font-size: .78rem; color: var(--muted); display: flex; align-items: center; gap: 5px; flex-wrap: wrap; } .tb-crumb b { color: var(--fern); font-weight: 700; } .tb-crumb span { color: var(--faded); font-size: .72rem; } /* Droite de la topbar */ .tb-right { margin-left: auto; display: flex; align-items: center; gap: 8px; } /* Sélecteur de langue */ .lang-sw { display: flex; background: var(--g-mist); border-radius: 20px; padding: 3px; border: 1px solid var(--wire); } .lang-sw button { padding: 4px 12px; border: none; border-radius: 16px; font-family: 'Manrope', sans-serif; font-size: .7rem; font-weight: 700; cursor: pointer; background: transparent; color: var(--muted); transition: all var(--tr); letter-spacing: .5px; } .lang-sw button.on { background: var(--fern); color: #fff; box-shadow: 0 2px 8px rgba(46,92,26,.28); } /* Boutons icônes (cloche, aide) */ .ib { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--muted); transition: all var(--tr); position: relative; } .ib:hover { border-color: var(--fern); color: var(--fern); } .ib svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .ib .dot { position: absolute; top: 6px; right: 6px; width: 6px; height: 6px; background: var(--amber); border-radius: 50%; border: 2px solid var(--snow); } /* Avatar utilisateur */ .top-av { width: 34px; height: 34px; border-radius: 50%; cursor: pointer; background: linear-gradient(135deg, var(--fern), var(--sage)); display: flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 800; color: #fff; } /* ═══════════════════════════════════════════════════════════════ ZONE DE CONTENU DE PAGE Ajoutez votre propre contenu dans .content ═══════════════════════════════════════════════════════════════ */ .content { flex: 1; display: flex; flex-direction: column; gap: 22px; } /* ── Demo placeholder ── */ .demo-placeholder { background: var(--snow); border: 2px dashed var(--wire); border-radius: var(--rmd); padding: 60px 30px; text-align: center; color: var(--faded); } .demo-placeholder h2 { font-family: 'DM Serif Display', serif; font-size: 1.5rem; color: var(--fern); margin-bottom: 10px; } .demo-placeholder p { font-size: .85rem; line-height: 1.7; } .demo-placeholder code { background: var(--g-mist); padding: 2px 8px; border-radius: 5px; font-size: .8rem; color: var(--leaf); } /* ═══════════════════════════════════════════════════════════════ RESPONSIVE ═══════════════════════════════════════════════════════════════ */ @media (max-width: 820px) { /* Sur mobile : sidebar cachée par défaut, slide depuis la gauche */ .sidebar { transform: translateX(-100%); width: var(--sb-w) !important; } .sidebar.mob { transform: translateX(0); } .main { margin-left: 0 !important; } .content { padding: 16px; } .topbar { padding: 0 16px; } } @media (max-width: 640px) { .content { padding: 12px; gap: 14px; } /* Masquer le sélecteur de langue sur très petit écran si nécessaire */ /* .lang-sw { display: none; } */ } /* ═══════════════════════════════════════════════ SPINNER OVERLAY ═══════════════════════════════════════════════ */ #spinOverlay { display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(13,31,6,.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); flex-direction: column; align-items: center; justify-content: center; gap: 18px; } #spinOverlay.on { display: flex } .spin-ring { width: 58px; height: 58px; border-radius: 50%; border: 4px solid rgba(255,255,255,.15); border-top-color: var(--gilt); animation: rotate .75s linear infinite; } @keyframes rotate { to { transform: rotate(360deg) } } .spin-label { font-size: .95rem; font-weight: 600; color: #fff; letter-spacing: .4px } .spin-hint { font-size: .75rem; color: rgba(255,255,255,.45); margin-top: -10px }