:root { --ink:#21173c; --purple:#5b21b6; --paper:#fbfaff; --line:#e9e2ff; --muted:#5d5670; --surface:#fff; --topbar:rgb(255 255 255 / .95); --card-border:#ddd6fe; --card-first:#faf5ff; --card-first-end:#ede9fe; --card-second:#fdf4ff; --card-second-end:#fae8ff; --card-third:#f5f3ff; --card-third-end:#e0e7ff; --heading:#4c1d95; --accent:#6d28d9; --accent-soft:#ede9fe; --subtle:#f5f3ff; --input-border:#c4b5fd; --input-bg:#fff; --label:#374151; --card-action-line:#ede9fe; --arrow-bg:rgb(255 255 255 / .72); --author-ink:#4c1d95; --author-bg:#ede9fe; --author-border:#c4b5fd; font-family:Avenir Next,Avenir,Segoe UI,sans-serif; color:var(--ink); background:var(--paper); }
:root[data-theme="dark"] { --ink:#f7f2ff; --purple:#8b5cf6; --paper:#140d25; --line:#3d2960; --muted:#d0c7df; --surface:#211635; --topbar:rgb(23 14 42 / .95); --card-border:#4f3a70; --card-first:#2c1d47; --card-first-end:#33204f; --card-second:#382044; --card-second-end:#45244d; --card-third:#20284c; --card-third-end:#2b3260; --heading:#f0e8ff; --accent:#c4b5fd; --accent-soft:#35244f; --subtle:#2d2043; --input-border:#725799; --input-bg:#1c132e; --label:#ece6f7; --card-action-line:#493360; --arrow-bg:rgb(51 36 80 / .9); --author-ink:#f0e8ff; --author-bg:#452f67; --author-border:#725799; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; background:var(--paper); transition:background .2s,color .2s; }
button, input, textarea { font:inherit; }
button { cursor:pointer; }
.topbar { position:sticky; top:0; z-index:5; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); background:var(--topbar); padding:1rem max(1.25rem, calc((100vw - 72rem) / 2)); backdrop-filter:blur(10px); }
.brand { display:flex; gap:.75rem; align-items:center; border:0; background:transparent; color:var(--ink); text-align:left; }
.brand-mark { display:grid; place-items:center; width:2.5rem; height:2.5rem; border-radius:.75rem; color:#fff; background:#4c1d95; font-size:1.65rem; box-shadow:0 8px 18px rgb(76 29 149 / .22); }
.brand strong { display:block; font-size:1rem; letter-spacing:-.02em; }
.header-actions { display:flex; align-items:center; gap:.65rem; }
.editor-badge { border-radius:999px; padding:.4rem .8rem; color:var(--accent); background:var(--accent-soft); font-size:.875rem; font-weight:700; }
.user-connect, .theme-toggle, .menu-toggle { display:grid; place-content:center; gap:4px; width:2.5rem; height:2.5rem; border:1px solid var(--card-border); border-radius:.7rem; color:var(--heading); background:var(--surface); }
.user-connect:hover, .theme-toggle:hover, .menu-toggle:hover { background:var(--subtle); }
.user-connect svg { width:1.2rem; height:1.2rem; fill:currentColor; }
.theme-toggle span { font-size:1.35rem; line-height:1; }
.user-menu-wrap { position:relative; }
.menu-toggle span { display:block; width:1.1rem; height:2px; border-radius:2px; background:currentColor; }
.user-menu { position:absolute; top:calc(100% + .55rem); right:0; z-index:10; display:grid; min-width:12rem; overflow:hidden; border:1px solid var(--card-border); border-radius:.8rem; padding:.35rem; background:var(--surface); box-shadow:0 12px 30px rgb(35 20 60 / .18); }
.user-menu[hidden], .user-menu-wrap[hidden], .user-connect[hidden] { display:none; }
.user-menu-item { display:flex; align-items:center; gap:.65rem; width:100%; border:0; border-radius:.55rem; padding:.7rem .75rem; color:var(--ink); background:transparent; font-weight:700; text-align:left; white-space:nowrap; }
.user-menu-item:hover { color:var(--heading); background:var(--subtle); }
.disconnect-item { color:#be123c; }
.page-shell { max-width:72rem; margin:0 auto; padding:3.5rem 1.25rem; }
.page-heading { display:flex; align-items:end; justify-content:space-between; gap:1.25rem; margin-bottom:1.25rem; }
.page-heading h1 { margin:0; color:var(--heading); font-size:clamp(2.35rem, 6vw, 3.25rem); letter-spacing:-.055em; line-height:1; }
.search-results-heading { margin:0 0:1.25rem; }
.search-results-heading h1 { margin:0; color:var(--heading); font-size:clamp(2.1rem, 5vw, 2.8rem); letter-spacing:-.05em; line-height:1; }
.eyebrow { margin:0 0:.5rem; color:var(--accent); font-size:.8125rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.intro { max-width:34rem; margin:.9rem 0 0; color:var(--muted); font-size:1rem; line-height:1.65; }
.intro > :first-child { margin-top:0; }
.intro > :last-child { margin-bottom:0; }
.search-field { position:relative; max-width:34rem; margin:0 0 1.5rem; }
.search-field input { width:100%; border:1px solid var(--input-border); border-radius:.8rem; padding:.8rem 5.75rem .8rem 1rem; color:var(--ink); background:var(--input-bg); }
.search-field input::placeholder { color:var(--muted); }
.clear-search { position:absolute; top:50%; right:.45rem; transform:translateY(-50%); border:0; border-radius:.55rem; padding:.4rem .55rem; color:var(--accent); background:var(--subtle); font-size:.8rem; font-weight:800; }
.clear-search:hover { color:var(--heading); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.25rem; }
.card { display:flex; min-height:17rem; flex-direction:column; overflow:hidden; border:1px solid var(--card-border); border-radius:1.25rem; background:var(--surface); box-shadow:0 14px 32px rgb(76 29 149 / .07); transition:transform .2s,box-shadow .2s; }
.card:hover { transform:translateY(-4px); box-shadow:0 22px 40px rgb(76 29 149 / .13); }
.card-main { position:relative; flex:1; width:100%; min-height:13.5rem; border:0; padding:1.6rem; color:var(--ink); text-align:left; background:linear-gradient(135deg,var(--card-first),var(--card-first-end)); }
.card:nth-child(3n+2) .card-main { background:linear-gradient(135deg,var(--card-second),var(--card-second-end)); }
.card:nth-child(3n) .card-main { background:linear-gradient(135deg,var(--card-third),var(--card-third-end)); }
.card-arrow { position:absolute; top:1.35rem; right:1.35rem; display:grid; place-items:center; width:2.25rem; height:2.25rem; border-radius:50%; color:var(--purple); background:var(--arrow-bg); font-size:1.35rem; }
.card h2 { max-width:16rem; margin:0; color:var(--heading); font-size:1.48rem; letter-spacing:-.04em; line-height:1.12; }
.card p { display:-webkit-box; overflow:hidden; margin:.7rem 0 0; color:var(--muted); line-height:1.55; -webkit-box-orient:vertical; -webkit-line-clamp:3; }
.card .card-author { display:table; max-width:100%; margin-top:.9rem; border:1px solid var(--author-border); border-radius:999px; padding:.28rem .7rem; color:var(--author-ink); background:var(--author-bg); font-size:.78rem; font-weight:800; line-height:1.25; }
.card-actions { display:flex; justify-content:flex-end; gap:.25rem; border-top:1px solid var(--card-action-line); padding:.65rem .85rem; }
.text-button, .back-link { border:0; border-radius:.5rem; padding:.4rem .55rem; color:var(--accent); background:transparent; font-size:.875rem; font-weight:700; }
.text-button:hover, .back-link:hover { color:var(--heading); background:var(--subtle); }
.delete-button { color:#be123c; }
.delete-button:hover { color:#9f1239; background:#fff1f2; }
.primary-button, .secondary-button { display:inline-flex; align-items:center; justify-content:center; min-height:2.75rem; border:1px solid transparent; border-radius:.75rem; padding:.65rem 1rem; font-weight:800; }
.primary-button { color:#fff; background:#5b21b6; box-shadow:0 8px 16px rgb(91 33 182 / .16); }
.primary-button:hover { background:#4c1d95; }
.secondary-button { color:var(--heading); border-color:var(--card-border); background:var(--surface); }
.mobile-add { display:none; width:100%; margin-top:1.5rem; }
.empty-state { margin:0; border:1px dashed var(--input-border); border-radius:1rem; padding:3.5rem 1.25rem; color:var(--muted); background:var(--surface); text-align:center; }
.loading-state { display:flex; align-items:center; justify-content:center; gap:.7rem; margin:0; min-height:13.5rem; color:var(--muted); font-weight:700; }
.loading-state[hidden] { display:none; }
.loading-spinner { width:1.2rem; height:1.2rem; border:2px solid var(--line); border-top-color:var(--accent); border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.notice { margin:0 0:1.5rem; border:1px solid #fda4af; border-radius:.75rem; padding:.8rem 1rem; color:#9f1239; background:#fff1f2; line-height:1.5; }
:root[data-theme="dark"] .notice { color:#fecdd3; background:#3b1726; border-color:#9f1239; }
.modal { width:min(100% - 2rem, 32rem); border:1px solid var(--card-border); border-radius:1.25rem; padding:0; color:var(--ink); background:var(--surface); box-shadow:0 22px 70px rgb(0 0 0 / .4); }
.modal::backdrop { background:rgb(25 12 50 / .5); }
.modal form { position:relative; display:grid; gap:.7rem; padding:1.75rem; }
.modal h2 { margin:.2rem 2rem .1rem 0; color:var(--heading); font-size:1.7rem; letter-spacing:-.04em; }
.modal p { margin:0 0:.7rem; color:var(--muted); line-height:1.55; }
.modal .detail-author { margin:0 0:.7rem; color:var(--accent); font-size:.9rem; font-weight:800; }
.modal label { margin-top:.35rem; color:var(--label); font-size:.9rem; font-weight:800; }
.modal input, .modal textarea { width:100%; border:1px solid var(--input-border); border-radius:.75rem; padding:.75rem; color:var(--ink); background:var(--input-bg); }
.description-editor { min-height:9rem; overflow:auto; border:1px solid var(--input-border); border-radius:.75rem; padding:.75rem; color:var(--ink); background:var(--input-bg); line-height:1.55; white-space:pre-wrap; }
.description-editor:empty::before { content:"Écrivez une description ou collez une image"; color:var(--muted); }
.description-editor img, .detail-copy img, .intro img { display:block; width:auto; max-width:100%; max-height:24rem; margin:.8rem 0; border-radius:.75rem; cursor:zoom-in; }
.editor-help, .editor-feedback { margin:0; color:var(--muted); font-size:.82rem; line-height:1.45; }
.editor-feedback { min-height:1.2rem; color:var(--accent); }
.modal input:focus, .modal textarea:focus, .description-editor:focus, .search-field input:focus, button:focus-visible { outline:3px solid var(--input-border); outline-offset:2px; }
.modal-close { position:absolute; top:1rem; right:1rem; border:0; border-radius:.5rem; width:2rem; height:2rem; color:var(--accent); background:var(--subtle); font-size:1.4rem; }
.lock { display:grid; place-items:center; width:2.5rem; height:2.5rem; border-radius:.75rem; color:var(--accent); background:var(--accent-soft); font-size:1.5rem; }
.dialog-actions { display:flex; justify-content:flex-end; gap:.6rem; margin-top:.5rem; }
.detail-copy { overflow-wrap:anywhere; line-height:1.65; }
.detail-copy > :first-child { margin-top:0; }
.detail-copy > :last-child { margin-bottom:0; }
.detail-copy h1, .detail-copy h2, .detail-copy h3, .intro h1, .intro h2, .intro h3 { color:var(--heading); letter-spacing:-.03em; }
.detail-copy h1, .intro h1 { font-size:1.5rem; }
.detail-copy h2, .intro h2 { font-size:1.25rem; }
.detail-copy h3, .intro h3 { font-size:1.08rem; }
.detail-copy ul, .detail-copy ol, .intro ul, .intro ol { padding-left:1.35rem; }
.detail-copy blockquote, .intro blockquote { margin:1rem 0; border-left:3px solid var(--accent); padding-left:1rem; color:var(--muted); }
.detail-copy code, .intro code { border-radius:.3rem; padding:.1rem .3rem; background:var(--subtle); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.9em; }
.detail-copy a, .intro a { color:var(--accent); font-weight:700; }
.detail-copy hr, .intro hr { border:0; border-top:1px solid var(--line); margin:1.25rem 0; }
.image-modal { position:relative; width:auto; max-width:min(100% - 2rem, 72rem); max-height:calc(100vh - 2rem); overflow:hidden; border:1px solid var(--card-border); border-radius:1rem; padding:0; background:var(--surface); box-shadow:0 22px 70px rgb(0 0 0 / .55); }
.image-modal::backdrop { background:rgb(0 0 0 / .72); }
.image-modal img { display:block; max-width:100%; max-height:calc(100vh - 2rem); object-fit:contain; }
@media (max-width: 760px) { .topbar { padding:1rem 1.25rem; } .editor-badge { max-width:12rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .page-shell { padding:2.5rem 1.25rem; } .card-grid { grid-template-columns:1fr; } .desktop-add { display:none; } .mobile-add { display:inline-flex; } .topic-heading { align-items:start; } }