/* Road to GOAT - systeme visuel « La Ruche » Bleu marine profond + miel / or, motif nid-d'abeille hexagonal en fond, panneaux verre (glassmorphism) a bordure en degrade, halos de pollen. .light sur bascule vers la version claire (cire chaude / rayon de miel). */ :root { /* sombre (defaut) - la ruche de nuit */ --paper: #0d1524; --cream: #16223a; /* surface panneau */ --mist: #1f2d49; --line: #2d3e60; --ink: #eef3fd; --fog: #93a3c4; --ember: #f5a623; /* miel / accent principal */ --flame: #e0890c; /* miel profond */ --honey: #fbc650; /* or clair */ --terra: #f2704f; /* destructif */ --font-display: "Inter", ui-sans-serif, system-ui, sans-serif; --font-sans: "Inter", "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; /* nid-d'abeille - teinte miel en sombre */ --hex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill='%23f5a623' fill-opacity='0.05' fill-rule='evenodd'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v11.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/svg%3E"); } :root.light { --paper: #f7f1e3; --cream: #fffdf7; --mist: #f0e7d2; --line: #e7dcc0; --ink: #16233c; --fog: #6f6650; --ember: #cf860d; --flame: #a86c08; --honey: #b1841c; --terra: #c2543a; /* nid-d'abeille - teinte marine en clair */ --hex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill='%2316233c' fill-opacity='0.055' fill-rule='evenodd'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v11.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/svg%3E"); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; color: var(--ink); font-family: var(--font-sans); font-size: 15px; line-height: 1.6; min-height: 100dvh; -webkit-font-smoothing: antialiased; background-color: var(--paper); background-image: var(--hex), radial-gradient(1100px 700px at 84% -18%, rgb(245 166 35 / .13), transparent 60%), radial-gradient(950px 680px at -14% 112%, rgb(56 118 224 / .16), transparent 60%), radial-gradient(650px 480px at 52% 30%, rgb(13 21 36 / .5), transparent 65%); background-attachment: fixed; } :root.light body { background-image: var(--hex), radial-gradient(1100px 700px at 84% -18%, rgb(207 134 13 / .14), transparent 60%), radial-gradient(950px 680px at -14% 112%, rgb(56 118 224 / .1), transparent 60%), radial-gradient(650px 480px at 52% 30%, rgb(255 253 247 / .7), transparent 65%); } a { color: inherit; } code { font-family: var(--font-mono); font-size: .9em; } ::selection { background: rgb(245 166 35 / .32); } /* ----- Panneau (verre a bordure degradee) ----- */ .panel { border: 1px solid transparent; border-radius: 1rem; background: linear-gradient(rgb(22 34 58 / .72), rgb(20 31 53 / .72)) padding-box, linear-gradient(155deg, rgb(245 166 35 / .55), rgb(45 62 96 / .65) 34%, rgb(45 62 96 / .65) 64%, rgb(251 198 80 / .38)) border-box; box-shadow: 0 26px 52px -30px rgb(0 0 0 / .8), inset 0 1px 0 rgb(255 255 255 / .04); backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); } :root.light .panel { background: linear-gradient(rgb(255 253 247 / .82), rgb(255 253 247 / .82)) padding-box, linear-gradient(155deg, rgb(207 134 13 / .55), rgb(231 220 192 / .9) 34%, rgb(231 220 192 / .9) 64%, rgb(177 132 28 / .4)) border-box; box-shadow: 0 1px 2px rgb(40 32 15 / .05), 0 18px 44px -26px rgb(40 32 15 / .28); } /* ----- Titre en degrade (or / miel) ----- */ .title-magic { background: linear-gradient(120deg, #fde79b 8%, var(--honey) 45%, var(--ember)); background-clip: text; -webkit-background-clip: text; color: transparent; } :root.light .title-magic { background-image: linear-gradient(120deg, #a86c08 12%, var(--ember) 60%, #d98a0f); } /* ----- Logo hexagone (ruche) ----- */ .hex-mark { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; color: #1a1206; filter: drop-shadow(0 4px 12px rgb(245 166 35 / .45)); } .hex-mark svg { width: 100%; height: 100%; } /* ----- Boutons ----- */ .btn-magic { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-sans); font-weight: 600; font-size: 14px; cursor: pointer; border: none; border-radius: .7rem; padding: 10px 18px; text-decoration: none; background: linear-gradient(180deg, #ffc04a, var(--flame)); color: #1a1206; box-shadow: inset 0 1px 0 rgb(255 255 255 / .4), 0 10px 30px -10px rgb(245 166 35 / .55); transition: box-shadow .2s ease, transform .2s ease, filter .2s ease; } .btn-magic:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: inset 0 1px 0 rgb(255 255 255 / .4), 0 14px 36px -10px rgb(245 166 35 / .65); } .btn-magic:active { transform: translateY(0); } :root.light .btn-magic { background: linear-gradient(180deg, #f2a417, var(--flame)); color: #2a1a02; box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), 0 8px 24px -10px rgb(207 134 13 / .5); } .btn-quiet { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; text-decoration: none; font-family: var(--font-sans); font-weight: 500; font-size: 13.5px; border: 1px solid var(--line); background: color-mix(in srgb, var(--cream) 70%, transparent); color: var(--ink); border-radius: .6rem; padding: 9px 14px; transition: background-color .15s ease, border-color .15s ease, transform .1s ease; } .btn-quiet:hover { background: var(--mist); border-color: rgb(245 166 35 / .55); } .btn-quiet:active { transform: scale(.98); } .btn-danger { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; text-decoration: none; font-family: var(--font-sans); font-weight: 500; font-size: 13px; border: 1px solid rgb(242 112 79 / .45); background: transparent; color: var(--terra); border-radius: .6rem; padding: 8px 13px; transition: background-color .15s ease, border-color .15s ease; } .btn-danger:hover { background: rgb(242 112 79 / .12); border-color: rgb(242 112 79 / .7); } /* ----- Champs ----- */ .field, .input { width: 100%; border-radius: .625rem; border: 1px solid var(--line); background-color: color-mix(in srgb, var(--cream) 82%, transparent); padding: .65rem .9rem; font-family: var(--font-sans); font-size: 14px; color: var(--ink); outline: none; transition: border-color .15s ease, box-shadow .15s ease; } .field::placeholder, .input::placeholder { color: color-mix(in srgb, var(--fog) 75%, transparent); } .field:focus, .input:focus { border-color: rgb(245 166 35 / .65); box-shadow: 0 0 0 3px rgb(245 166 35 / .2); } /* ----- Filet d'apparat (eyebrow) ----- */ .ornament { display: inline-flex; align-items: center; gap: .875rem; font-family: var(--font-mono); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--honey); } .ornament::before, .ornament::after { content: ""; height: 1px; width: 40px; background: linear-gradient(to right, transparent, rgb(251 198 80 / .6)); } .ornament::after { background: linear-gradient(to left, transparent, rgb(251 198 80 / .6)); } /* ----- Top bar ----- */ .topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; height: 66px; padding: 0 clamp(20px, 5vw, 48px); background: color-mix(in srgb, var(--paper) 72%, transparent); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--line); } .brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; font-family: var(--font-display); font-weight: 600; font-size: 20px; letter-spacing: -.02em; } .brand .mark { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; color: var(--fog); text-transform: uppercase; align-self: flex-end; margin-bottom: 3px; } .nav { display: flex; align-items: center; gap: 8px; } .navlink { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 500; text-decoration: none; color: var(--fog); padding: 8px 12px; border-radius: 8px; background: none; border: none; cursor: pointer; font-family: var(--font-sans); transition: background .15s ease, color .15s ease; } .navlink:hover { color: var(--ink); background: var(--mist); } .icon-btn { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; border: 1px solid var(--line); background: color-mix(in srgb, var(--cream) 70%, transparent); color: var(--fog); cursor: pointer; transition: .15s ease; } .icon-btn:hover { color: var(--ember); border-color: rgb(245 166 35 / .55); } .icon-btn .i-moon { display: none; } :root.light .icon-btn .i-sun { display: none; } :root.light .icon-btn .i-moon { display: inline; } /* ----- Layout ----- */ .wrap { max-width: 1000px; margin: 0 auto; padding: clamp(40px, 8vw, 72px) clamp(20px, 5vw, 48px) 100px; } h1.page { font-family: var(--font-display); font-weight: 700; font-size: clamp(34px, 6vw, 60px); line-height: 1.04; letter-spacing: -.03em; margin: 18px 0 14px; } .lead { color: var(--fog); font-size: 16px; max-width: 60ch; margin: 0; } /* ----- Toolbar / recherche ----- */ .toolbar { display: flex; align-items: center; gap: 12px; margin: 38px 0 8px; flex-wrap: wrap; } .search { flex: 1; min-width: 220px; display: flex; align-items: center; gap: 10px; padding: 0 14px; height: 44px; } .search input { flex: 1; background: none; border: none; outline: none; color: var(--ink); font-family: var(--font-sans); font-size: 14px; } .search input::placeholder { color: var(--fog); } .search svg { flex: none; color: var(--fog); } .count { font-family: var(--font-mono); font-size: 12px; color: var(--fog); white-space: nowrap; } /* ----- Sections dossier ----- */ .folder { margin-top: 52px; } .folder-head { display: flex; align-items: baseline; gap: 12px; padding-bottom: 12px; margin-bottom: 22px; border-bottom: 1px solid var(--line); } .folder-head h2 { font-family: var(--font-display); font-weight: 600; font-size: 24px; letter-spacing: -.02em; margin: 0; } .folder-head .n { font-family: var(--font-mono); font-size: 12px; color: var(--honey); } /* ----- Cartes de cours (panel verre + halo de pollen) ----- */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 18px; } .card { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 12px; padding: 22px 24px 24px; text-decoration: none; color: inherit; transition: transform .22s ease, box-shadow .22s ease; } .card::before { content: ""; position: absolute; top: -55%; right: -25%; width: 12rem; height: 12rem; border-radius: 9999px; background: radial-gradient(closest-side, var(--glow, rgb(245 166 35 / .22)), transparent); pointer-events: none; } .card:hover { transform: translateY(-3px); box-shadow: 0 32px 62px -30px rgb(0 0 0 / .78); } :root.light .card:hover { box-shadow: 0 1px 2px rgb(40 32 15 / .05), 0 28px 54px -28px rgb(40 32 15 / .35); } .card.tp { --glow: rgb(245 166 35 / .24); } .card.cours{ --glow: rgb(56 118 224 / .2); } .card .t { font-family: var(--font-display); font-weight: 600; font-size: 19px; line-height: 1.24; letter-spacing: -.015em; } .card .f { font-family: var(--font-mono); font-size: 11.5px; color: var(--fog); word-break: break-all; } .card .go { margin-top: auto; font-size: 13px; font-weight: 500; color: var(--honey); display: inline-flex; align-items: center; gap: 6px; } .card:hover .go { color: var(--ember); } /* ----- Tags ----- */ .tag { display: inline-flex; align-items: center; align-self: flex-start; font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 5px 10px; border-radius: 9999px; border: 1px solid; } .tag.tp { background: rgb(245 166 35 / .15); color: var(--ember); border-color: rgb(245 166 35 / .32); } .tag.cours { background: rgb(56 118 224 / .16); color: #7ea8f0; border-color: rgb(56 118 224 / .34); } :root.light .tag.cours { color: #2f68c8; background: rgb(56 118 224 / .1); border-color: rgb(56 118 224 / .3); } .tag.ok { background: rgb(52 199 130 / .16); color: #57d29a; border-color: rgb(52 199 130 / .34); } :root.light .tag.ok { color: #1f9d63; background: rgb(52 199 130 / .12); border-color: rgb(52 199 130 / .32); } /* ----- Etat vide ----- */ .empty { text-align: center; padding: 64px 24px; } .empty b { display: block; font-family: var(--font-display); font-weight: 500; color: var(--ink); font-size: 22px; margin-bottom: 8px; } .empty a { color: var(--ember); font-weight: 500; text-decoration: none; } /* ----- Createur : chips dossiers / drop / rows ----- */ .chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; } .chip { display: inline-flex; align-items: center; font-family: var(--font-sans); font-size: 13px; font-weight: 500; padding: 8px 14px; border-radius: 9999px; border: 1px solid var(--line); background: color-mix(in srgb, var(--cream) 70%, transparent); color: var(--fog); cursor: pointer; transition: .15s ease; } .chip:hover { border-color: rgb(245 166 35 / .5); color: var(--ink); } .chip.active { background: linear-gradient(180deg, #ffc04a, var(--flame)); color: #1a1206; border-color: transparent; box-shadow: inset 0 1px 0 rgb(255 255 255 / .4), 0 8px 22px -12px rgb(245 166 35 / .6); } .chip .x { margin-left: 8px; opacity: .55; font-size: 15px; line-height: 1; } .chip .x:hover { opacity: 1; } .field-row { display: flex; gap: 8px; margin: 12px 0 4px; } .field-row .input { flex: 1; } .drop { border: 1.5px dashed var(--line); border-radius: 1rem; padding: 48px 24px; text-align: center; color: var(--fog); cursor: pointer; transition: .16s ease; background: color-mix(in srgb, var(--cream) 45%, transparent); } .drop:hover { border-color: rgb(245 166 35 / .55); } .drop.hover { border-color: var(--ember); background: var(--mist); color: var(--ink); } .drop .ico { color: var(--ember); margin-bottom: 12px; } .drop b { color: var(--ember); font-weight: 600; } .drop small { display: block; margin-top: 8px; color: var(--fog); font-size: 12.5px; } .msg { margin: 14px 2px 0; font-size: 13.5px; min-height: 20px; font-family: var(--font-mono); color: var(--fog); } .msg.ok { color: var(--honey); } .msg.err { color: var(--terra); } .sechead { font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--fog); margin: 46px 0 6px; } .rows { display: flex; flex-direction: column; margin-top: 10px; } .row { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 6px 14px 18px; transition: background-color .15s ease; } .row::before { content: ""; position: absolute; left: 4px; top: 12px; bottom: 12px; width: 3px; border-radius: 9999px; background: var(--row-accent, var(--line)); } .row.tp { --row-accent: var(--ember); } .row.cours { --row-accent: #3876e0; } .row + .row { border-top: 1px solid var(--line); } .row:hover { background: rgb(245 166 35 / .05); } .row .t { font-weight: 500; } .row .f { font-family: var(--font-mono); font-size: 11.5px; color: var(--fog); } .row .spacer { flex: 1; } /* ----- Login ----- */ .center-wrap { position: relative; min-height: calc(100dvh - 66px); display: grid; place-items: center; padding: 24px; overflow: hidden; } .login-card { position: relative; z-index: 1; width: 100%; max-width: 400px; padding: 44px 38px; text-align: center; } .login-card .hex-mark { width: 46px; height: 46px; margin: 0 auto 18px; } .login-card .ornament { margin: 0 0 14px; } .login-card h1 { font-family: var(--font-display); font-weight: 700; font-size: 34px; letter-spacing: -.03em; margin: 0 0 8px; } .login-card .sub { color: var(--fog); font-size: 14px; margin: 0 0 26px; } .login-card .input { margin-bottom: 12px; text-align: left; } .login-card .btn-magic { width: 100%; padding: 13px; } .login-err { color: var(--terra); font-size: 13px; font-family: var(--font-mono); min-height: 18px; margin-top: 12px; } /* ----- Motion ----- */ @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .rise { animation: rise .7s cubic-bezier(.2,.7,.2,1) both; } .rise-2 { animation-delay: .1s; } .rise-3 { animation-delay: .2s; } .rise-4 { animation-delay: .32s; } .rise-5 { animation-delay: .44s; } /* pollen flottant (ex-firefly) - grains de miel lumineux */ .firefly { position: absolute; width: 5px; height: 5px; border-radius: 9999px; background: var(--honey); box-shadow: 0 0 12px 3px rgb(245 166 35 / .5); opacity: 0; animation: firefly 11s ease-in-out infinite; } @keyframes firefly { 0%, 100% { opacity: 0; transform: translate3d(0,0,0); } 12% { opacity: .7; } 45% { opacity: .25; transform: translate3d(16px, -30px, 0); } 70% { opacity: .55; transform: translate3d(-4px, -52px, 0); } 92% { opacity: 0; transform: translate3d(6px, -70px, 0); } } @media (prefers-reduced-motion: reduce) { .rise { animation: none; } .firefly { animation: none; opacity: .2; } .btn-magic, .btn-quiet, .card, .field, .input, .chip { transition: none; } } @media (max-width: 560px) { .grid { grid-template-columns: 1fr; } .row { flex-wrap: wrap; } }