:root { --page-bg: #EAECF0; --content-bg: #FFFFFF; --ink: #202122; --ink-soft: #54595D; --border: #A2A9B1; --border-soft: #C8CCD1; --link: #0645AD; --link-visited: #0645AD; --box-header-bg: #EAF3FF; --welcome-bg: linear-gradient(180deg, #F8FAFD 0%, #EAF1FA 100%); --infobox-band-bg: #3F6FA8; --infobox-band-ink: #FFFFFF; --infobox-section-bg: #D6E6F5; --link-missing: #0645AD; --radius: 2px; --serif: Georgia, "Times New Roman", Times, serif; --sans: Arial, Helvetica, "Helvetica Neue", sans-serif; } /* Clair par défaut (comme le vrai Wikipédia). Le sélecteur "Apparence" du header pose data-theme="light"/"dark" sur , ou le retire pour "Automatique" — dans ce dernier cas seulement, la préférence système ci-dessous s'applique. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --page-bg: #0F1113; --content-bg: #1B1E21; --ink: #E4E6E9; --ink-soft: #A2A9B1; --border: #3B3F42; --border-soft: #2B2F32; --link: #8AB4F8; --link-visited: #8AB4F8; --box-header-bg: #1D2B39; --welcome-bg: linear-gradient(180deg, #191D21 0%, #16202A 100%); --infobox-band-bg: #2A4A6B; --infobox-band-ink: #FFFFFF; --infobox-section-bg: #223A52; --link-missing: #8AB4F8; } } :root[data-theme="dark"] { --page-bg: #0F1113; --content-bg: #1B1E21; --ink: #E4E6E9; --ink-soft: #A2A9B1; --border: #3B3F42; --border-soft: #2B2F32; --link: #8AB4F8; --link-visited: #8AB4F8; --box-header-bg: #1D2B39; --welcome-bg: linear-gradient(180deg, #191D21 0%, #16202A 100%); --infobox-band-bg: #2A4A6B; --infobox-band-ink: #FFFFFF; --infobox-section-bg: #223A52; --link-missing: #8AB4F8; } :root[data-theme="light"] { --page-bg: #EAECF0; --content-bg: #FFFFFF; --ink: #202122; --ink-soft: #54595D; --border: #A2A9B1; --border-soft: #C8CCD1; --link: #0645AD; --link-visited: #0645AD; --box-header-bg: #EAF3FF; --welcome-bg: linear-gradient(180deg, #F8FAFD 0%, #EAF1FA 100%); --infobox-band-bg: #3F6FA8; --infobox-band-ink: #FFFFFF; --infobox-section-bg: #D6E6F5; --link-missing: #0645AD; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--page-bg); color: var(--ink); font-family: var(--sans); font-size: 14px; line-height: 1.65; } a { color: var(--link); text-decoration: none; } a:visited { color: var(--link-visited); } a:hover { text-decoration: underline; } a:focus-visible, input:focus-visible, button:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; } /* ---------- Header ---------- */ .site-header { background: var(--content-bg); border-bottom: 1px solid var(--border-soft); } .site-header__inner { max-width: 1300px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; } .main-menu { position: relative; flex: 0 0 auto; } .main-menu__toggle { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--content-bg); color: var(--ink); cursor: pointer; } .main-menu__toggle svg { width: 18px; height: 18px; } .main-menu__toggle:hover, .main-menu__toggle[aria-expanded="true"] { border-color: var(--link); color: var(--link); } .main-menu__panel { position: absolute; top: calc(100% + 8px); left: 0; z-index: 40; min-width: 230px; padding: 10px 0; background: var(--content-bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); } .main-menu__panel[hidden] { display: none; } .main-menu__title { margin: 0; padding: 2px 16px 10px; font-size: 13px; font-weight: 700; color: var(--ink); border-bottom: 1px solid var(--border-soft); } .main-menu__heading { margin: 10px 0 0; padding: 8px 16px 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-soft); border-top: 1px solid var(--border-soft); } .main-menu__group { display: flex; flex-direction: column; padding-top: 4px; } .main-menu__group a { padding: 7px 16px; font-size: 13.5px; color: var(--link); } .main-menu__group a:hover { background: var(--box-header-bg); text-decoration: none; } .notif-menu { position: relative; flex: 0 0 auto; } .notif-menu__toggle { position: relative; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid transparent; border-radius: 50%; background: none; color: var(--ink-soft); cursor: pointer; } .notif-menu__toggle svg { width: 18px; height: 18px; } .notif-menu__toggle:hover, .notif-menu__toggle[aria-expanded="true"] { color: var(--link); background: var(--box-header-bg); } .notif-menu__badge { position: absolute; top: -2px; right: -2px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px; background: #B5453D; color: #fff; font-size: 10px; font-weight: 700; line-height: 15px; text-align: center; } .notif-menu__panel { position: absolute; top: calc(100% + 8px); right: 0; left: auto; z-index: 40; width: 300px; max-height: 360px; overflow-y: auto; padding: 10px 0; background: var(--content-bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); } .notif-menu__panel[hidden] { display: none; } .notif-menu__title { margin: 0; padding: 2px 14px 10px; font-size: 13px; font-weight: 700; color: var(--ink); border-bottom: 1px solid var(--border-soft); } .notif-menu__empty { margin: 0; padding: 14px; font-size: 12.5px; color: var(--ink-soft); font-style: italic; } .notif-menu__list { list-style: none; margin: 0; padding: 4px 0 0; } .notif-menu__item { padding: 8px 14px; font-size: 12.5px; border-left: 3px solid transparent; } .notif-menu__item.is-unread { border-left-color: var(--link); background: var(--box-header-bg); } .notif-menu__item a, .notif-menu__item span { display: block; color: var(--ink); } .notif-menu__item a:hover { color: var(--link); text-decoration: none; } .notif-menu__date { display: block; margin-top: 2px; color: var(--ink-soft) !important; font-size: 11px; } .user-menu { position: relative; flex: 0 0 auto; } .user-menu__toggle { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: none; border-radius: 50%; background: none; cursor: pointer; } .user-menu__toggle[aria-expanded="true"] { outline: 2px solid var(--link); outline-offset: 2px; } .user-menu__avatar { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border-soft); } .user-menu__avatar--placeholder { background: var(--box-header-bg); color: var(--link); font-family: var(--serif); font-weight: 700; font-size: 13px; } .user-menu__panel { position: absolute; top: calc(100% + 8px); right: 0; left: auto; z-index: 40; min-width: 200px; padding: 10px 0; background: var(--content-bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); } .user-menu__panel[hidden] { display: none; } .user-menu__title { margin: 0; padding: 2px 16px 10px; font-size: 13px; font-weight: 700; color: var(--ink); border-bottom: 1px solid var(--border-soft); } .user-menu__group { display: flex; flex-direction: column; padding: 4px 0; border-bottom: 1px solid var(--border-soft); } .user-menu__group a { padding: 7px 16px; font-size: 13.5px; color: var(--link); } .user-menu__group a:hover { background: var(--box-header-bg); text-decoration: none; } .user-menu__logout { margin: 0; padding: 4px 0 0; } .user-menu__logout button { display: block; width: 100%; padding: 7px 16px; border: none; background: none; text-align: left; font-size: 13.5px; color: #B5453D; cursor: pointer; } .user-menu__logout button:hover { background: var(--box-header-bg); } .brand { display: flex; align-items: center; gap: 10px; color: var(--ink); } .brand:hover { text-decoration: none; } .brand__logo { display: block; height: 42px; width: auto; } .search { flex: 1 1 260px; max-width: 480px; display: flex; align-items: stretch; } .search__input-wrap { position: relative; flex: 1 1 auto; min-width: 0; } .search input { width: 100%; height: 100%; padding: 7px 12px; border: 1px solid var(--border); border-right: none; border-radius: var(--radius) 0 0 var(--radius); background: var(--content-bg); color: var(--ink); font-size: 13.5px; } .search__submit { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; padding: 0 12px; border: 1px solid var(--border); border-radius: 0 var(--radius) var(--radius) 0; background: var(--box-header-bg); color: var(--ink-soft); cursor: pointer; } .search__submit svg { width: 15px; height: 15px; flex: 0 0 auto; } .search__submit span { font-size: 13px; white-space: nowrap; } .search__submit:hover { color: var(--link); } @media (max-width: 700px) { .search__submit span { display: none; } } .search__suggestions { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 100; max-height: 70vh; overflow-y: auto; background: var(--content-bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); } .search__result { display: flex; align-items: center; gap: 10px; padding: 8px 12px; color: var(--ink); border-top: 1px solid var(--border-soft); } .search__result:first-child { border-top: none; } .search__result:hover, .search__result.is-active { background: var(--box-header-bg); text-decoration: none; } .search__thumb { flex: 0 0 auto; width: 36px; height: 36px; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--border-soft); } .search__thumb--placeholder { background: var(--page-bg); } .search__result-text { min-width: 0; display: flex; flex-direction: column; } .search__result-title { font-weight: 700; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .search__result-desc { font-size: 12px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .theme-switch { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-soft); } .theme-switch__label { white-space: nowrap; } .theme-switch select { padding: 4px 6px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--content-bg); color: var(--ink); font-size: 12px; } .account-nav { display: flex; gap: 18px; align-items: center; font-size: 13px; margin-left: auto; } .account-nav__primary, .account-nav__primary:visited { color: var(--ink); font-weight: 700; } .account-nav__user, .account-nav__user:visited { color: var(--ink); font-weight: 700; } .account-nav a:not(.account-nav__user):not(.account-nav__primary), .account-nav a:not(.account-nav__user):not(.account-nav__primary):visited { color: var(--ink-soft); } .account-nav a:not(.account-nav__user):not(.account-nav__primary):hover { color: var(--link); } .account-nav__logout { display: inline; margin: 0; } .link-button { background: none; border: none; padding: 0; margin: 0; font: inherit; color: var(--link); cursor: pointer; } .link-button:hover { text-decoration: underline; } .link-button--danger { color: #B5453D; } .article-delete-form { display: inline; } .article-meta .article-delete-form { font-size: inherit; } .site-nav { max-width: 1300px; margin: 0 auto; padding: 0 24px; display: flex; gap: 20px; font-size: 13px; } .site-nav a { color: var(--ink-soft); padding: 9px 2px; border-bottom: 2px solid transparent; } .site-nav a:hover { color: var(--link); text-decoration: none; } .site-nav a.is-active { color: var(--ink); border-bottom-color: var(--link); } .site-nav__create, .site-nav__create:visited { margin-left: auto; align-self: center; color: var(--link) !important; font-weight: 700; } .site-nav__create:hover { text-decoration: none; border-bottom-color: var(--link); } /* ---------- Content shell ---------- */ .content-shell { max-width: 1300px; margin: 0 auto; background: var(--content-bg); min-height: calc(100vh - 96px); } .page { padding: 26px 32px 12px; } /* ---------- Typography ---------- */ .hero h1 { font-family: var(--serif); font-weight: normal; font-size: 28px; color: var(--ink); margin: 0; } /* ---------- Forms (auth) ---------- */ .form-errors { background: #FDEEEE; border: 1px solid #D9534F; border-radius: var(--radius); padding: 12px 16px; margin: 16px 0; color: #7A1F1A; } .form-errors ul { margin: 0; padding-left: 18px; } :root[data-theme="dark"] .form-errors { background: #3A1F1F; color: #F3B4B0; border-color: #8A3B36; } .auth-form { display: flex; flex-direction: column; gap: 6px; max-width: 360px; margin: 20px 0; } .auth-form label { font-size: 13px; font-weight: 700; margin-top: 10px; } .auth-form input { padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--content-bg); color: var(--ink); font-size: 14px; } .auth-form button { margin-top: 16px; padding: 9px 18px; border: 1px solid var(--link); border-radius: var(--radius); background: var(--link); color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; align-self: flex-start; } .auth-form button:hover { opacity: 0.9; } .auth-alt { font-size: 13.5px; color: var(--ink-soft); } /* ---------- Article page ---------- */ .article-header h1 { font-family: var(--serif); font-weight: normal; font-size: 30px; margin: 0 0 8px; padding-bottom: 8px; border-bottom: 1px solid var(--border); } .article-meta { color: var(--ink-soft); font-size: 12.5px; margin: 0 0 10px; } .redirect-notice { margin: 0 0 6px; color: var(--ink-soft); font-size: 13px; font-style: italic; } .category-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; } .category-chip { font-size: 11.5px; padding: 3px 9px; border: 1px solid var(--border-soft); border-radius: 12px; color: var(--ink-soft); background: var(--box-header-bg); } .category-chip:hover { text-decoration: none; color: var(--link); } /* ---------- Category pages ---------- */ .category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin: 20px 0 40px; } .category-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; background: var(--content-bg); } .category-card__title { font-family: var(--serif); font-size: 17px; font-weight: 700; display: block; } .category-card__count { display: block; font-size: 12px; color: var(--ink-soft); margin-top: 2px; } .category-card__children { list-style: none; margin: 10px 0 0; padding: 10px 0 0; border-top: 1px solid var(--border-soft); font-size: 13px; display: flex; flex-direction: column; gap: 5px; } .article-layout { display: flex; align-items: flex-start; gap: 28px; } .article-main-wrap { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .article-body-row { display: flex; align-items: flex-start; gap: 28px; } .article-main { flex: 1 1 auto; min-width: 0; } .article-toc { flex: 0 0 200px; position: sticky; top: 96px; padding-right: 16px; border-right: 1px solid var(--border-soft); } .article-toc__title { margin: 0 0 8px; font-weight: 700; font-size: 14px; } .article-toc__list { margin: 0; padding-left: 0; list-style: none; font-size: 13px; line-height: 1.8; } .article-toc__level-3 { margin-left: 14px; } .article-toc__number { display: inline-block; min-width: 1.6em; color: var(--ink-soft); } @media (max-width: 1000px) { .article-layout { flex-direction: column; } .article-toc { position: static; flex: 1 1 100%; order: -1; border-right: none; border-bottom: 1px solid var(--border-soft); padding: 0 0 14px; margin-bottom: 14px; } } .infobox { flex: 0 0 300px; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; background: var(--content-bg); font-size: 13px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08); /* --infobox-custom est posée en style inline par l'article quand une couleur personnalisée est choisie ; sinon on retombe sur le bleu LSPEDIA par défaut. Les teintes de section/libellé en sont dérivées automatiquement, sans avoir à choisir plusieurs couleurs à la main. */ --infobox-title-bg: var(--infobox-custom, var(--infobox-band-bg)); --infobox-tint-bg: color-mix(in srgb, var(--infobox-title-bg) 22%, var(--content-bg)); } .infobox__title { position: relative; margin: 0; padding: 14px 46px; background: linear-gradient(180deg, color-mix(in srgb, var(--infobox-title-bg) 90%, white) 0%, var(--infobox-title-bg) 100%); color: var(--infobox-band-ink); border-bottom: 1px solid var(--border); font-family: var(--serif); font-weight: 700; font-size: 17px; text-align: center; } .infobox__title-icon { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 19px; line-height: 1; } .infobox__title-icon--image { height: 38px; width: auto; max-width: 84px; object-fit: contain; } /* Cadre neutre : les images d'infobox (portraits, logos, pochettes...) ont des formats très variables — on les fait tenir entières plutôt que de les rogner à une hauteur fixe, comme un cadre de fiche plutôt qu'une bannière. */ .infobox__image-frame { display: flex; align-items: center; justify-content: center; background: var(--box-header-bg); border-bottom: 1px solid var(--border-soft); padding: 10px; } .infobox__image { display: block; width: auto; max-width: 100%; max-height: 260px; object-fit: contain; cursor: zoom-in; } .infobox__caption { margin: 0; padding: 6px 12px; border-bottom: 1px solid var(--border-soft); font-size: 11.5px; font-style: italic; text-align: center; color: var(--ink-soft); } .infobox__table { width: 100%; border-collapse: collapse; } .infobox__table th, .infobox__table td { padding: 10px 12px; border-top: 1px solid var(--border-soft); text-align: left; vertical-align: top; line-height: 1.5; } .infobox__table td { padding-left: 14px; } .infobox__table tr:first-child th, .infobox__table tr:first-child td { border-top: none; } .infobox__table th { width: 38%; font-weight: 700; background: var(--row-tint, var(--infobox-tint-bg)); color: var(--ink-soft); } .infobox__section-row th { width: auto; text-align: center; background: var(--row-tint, var(--infobox-tint-bg)); color: var(--ink); font-weight: 700; letter-spacing: 0.02em; } .infobox__text-row td { text-align: center; line-height: 1.7; } /* « Sans couleur » : rendu neutre pur, sans reprendre même une teinte dérivée de la couleur principale de l'infobox. */ .infobox__table tr.infobox__row--neutral th, .infobox__table tr.infobox__row--neutral td { background: var(--content-bg); color: var(--ink-soft); } .infobox__table tr.infobox__section-row.infobox__row--neutral th { color: var(--ink); } .infobox__figure-row td { text-align: center; padding: 10px 12px 12px; } .infobox__figure-image { display: block; max-width: 100%; max-height: 220px; margin: 0 auto; object-fit: contain; cursor: zoom-in; } /* ---------- Visionneuse d'image plein écran (lightbox) ---------- */ .lightbox { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.85); cursor: zoom-out; } .lightbox[hidden] { display: none; } body.lightbox-open { overflow: hidden; } .lightbox__image { max-width: 90vw; max-height: 90vh; object-fit: contain; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5); } .lightbox__close { position: fixed; top: 16px; right: 24px; width: 40px; height: 40px; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.15); color: #FFFFFF; font-size: 24px; line-height: 1; cursor: pointer; } .lightbox__close:hover { background: rgba(255, 255, 255, 0.3); } .infobox__figure-caption { margin: 6px 0 0; font-size: 11.5px; font-style: italic; color: var(--ink-soft); } .infobox__audio-row td { text-align: center; padding: 10px 12px 12px; } .infobox__audio-caption { margin: 0 0 6px; font-size: 12px; color: var(--ink-soft); } .infobox__audio { width: 100%; height: 32px; } /* Tableaux insérés dans le corps de l'article (via le bouton "Tableau" de l'éditeur). Le wrapper permet le défilement horizontal sur mobile sans faire déborder toute la page. */ .table-wrap { overflow-x: auto; margin: 1em 0; } .article-table { width: 100%; border-collapse: collapse; font-size: 0.95em; } .article-table th, .article-table td { padding: 8px 12px; border: 1px solid var(--border-soft); vertical-align: top; line-height: 1.5; } .article-table th { background: var(--box-header-bg); color: var(--ink); font-weight: 700; text-align: left; } @media (max-width: 780px) { .article-body-row { flex-direction: column; } .infobox { flex: 1 1 auto; width: 100%; order: -1; margin-bottom: 16px; } } .article-content { max-width: 75ch; } .article-content h2 { position: relative; font-family: var(--serif); font-weight: normal; font-size: 22px; margin: 28px 0 10px; padding-bottom: 4px; border-bottom: 1px solid var(--border-soft); } .article-content h3 { position: relative; font-family: var(--serif); font-weight: normal; font-size: 18px; margin: 22px 0 8px; } .article-heading-anchor { position: absolute; left: -18px; opacity: 0; text-decoration: none; color: var(--ink-soft); font-weight: normal; font-size: 0.8em; transition: opacity 0.1s ease; } .article-content h2:hover .article-heading-anchor, .article-content h3:hover .article-heading-anchor, .article-heading-anchor--copied { opacity: 1; } .article-heading-anchor--copied { color: var(--link); } @media (max-width: 780px) { .article-heading-anchor { position: static; opacity: 1; margin-left: 6px; } } .article-content p { margin: 0 0 14px; } .article-content ul, .article-content ol { margin: 0 0 14px; padding-left: 26px; } .article-content li { margin-bottom: 4px; } .article-content blockquote { margin: 0 0 14px; padding: 4px 16px; border-left: 3px solid var(--border); color: var(--ink-soft); } .article-content pre { background: var(--page-bg); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 12px 14px; overflow-x: auto; font-size: 13px; } .article-content code { font-family: ui-monospace, "SF Mono", Consolas, monospace; background: var(--page-bg); padding: 1px 4px; border-radius: 3px; font-size: 0.9em; } .article-content pre code { background: none; padding: 0; } .article-footnote-ref a { text-decoration: none; font-size: 0.85em; } .article-footnotes-separator { margin: 28px 0 14px; border: none; border-top: 1px solid var(--border-soft); max-width: 300px; } .article-footnotes { margin: 0; padding-left: 22px; font-size: 13px; color: var(--ink-soft); line-height: 1.7; } .article-footnote-back { text-decoration: none; margin-left: 4px; } .article-content img { max-width: 100%; height: auto; border: 1px solid var(--border-soft); border-radius: var(--radius); } .wikilink { color: var(--link); } .wikilink-missing { color: var(--link-missing); } .article-figure { float: right; max-width: 320px; margin: 4px 0 16px 24px; padding: 4px; border: 1px solid var(--border-soft); background: var(--content-bg); border-radius: var(--radius); } .article-figure img { display: block; width: 100%; height: auto; border: none; border-radius: 0; cursor: zoom-in; } .article-figure figcaption { padding: 6px 4px 2px; font-size: 12px; font-style: italic; text-align: center; color: var(--ink-soft); } @media (max-width: 600px) { .article-figure { float: none; max-width: 100%; margin: 16px 0; } } /* ---------- Article form ---------- */ .article-form { display: flex; flex-direction: column; gap: 6px; margin: 20px 0 40px; } .article-form label { font-size: 13px; font-weight: 700; margin-top: 14px; } .article-form input[type="text"], .article-form textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--content-bg); color: var(--ink); font-size: 14px; font-family: inherit; } .article-form textarea { font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 13.5px; line-height: 1.5; resize: vertical; } #editor-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; padding: 6px; border: 1px solid var(--border-soft); border-radius: var(--radius); background: var(--page-bg); } .editor-toolbar__color { display: flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--border-soft); border-radius: var(--radius); background: var(--content-bg); color: var(--ink-soft); font-size: 13px; cursor: pointer; } .editor-toolbar__color input[type="color"] { width: 22px; height: 22px; padding: 1px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--content-bg); cursor: pointer; } #editor-toolbar button { margin-top: 0; padding: 5px 10px; font-size: 12.5px; font-weight: normal; border: 1px solid var(--border-soft); background: var(--content-bg); color: var(--ink-soft); border-radius: var(--radius); cursor: pointer; } #editor-toolbar button:hover { background: var(--box-header-bg); border-color: var(--link); color: var(--link); } #editor-toolbar #preview-toggle { margin-left: auto; font-weight: 700; color: var(--link); border-color: var(--link); } .editor-pane { margin-top: 6px; } .article-preview { width: 100%; min-height: 420px; border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; background: var(--content-bg); box-sizing: border-box; } .article-preview__title { font-family: var(--serif); font-weight: normal; font-size: 28px; margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--border-soft); } .article-preview .article-body-row { align-items: flex-start; } .category-picker { border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 12px 14px; margin-top: 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; } .category-picker legend { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); padding: 0 4px; } .category-picker__item { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: normal; margin-top: 0; } .infobox-editor { border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 12px 14px; margin-top: 14px; } .infobox-editor legend { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); padding: 0 4px; } .infobox-editor__hint { margin: 4px 0 12px; font-size: 12.5px; color: var(--ink-soft); font-weight: normal; } .infobox-image-picker { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border-soft); } .infobox-image-picker label { margin-top: 6px; font-size: 13px; font-weight: normal; } .infobox-image-picker input[type="text"] { padding: 7px 9px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--content-bg); color: var(--ink); font-size: 13px; } .infobox-image-picker__current { display: flex; align-items: center; gap: 12px; } .infobox-image-picker__preview { width: 96px; height: 64px; object-fit: cover; border: 1px solid var(--border-soft); border-radius: var(--radius); } .infobox-image-picker__remove { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-soft); font-weight: normal; margin-top: 0 !important; } .infobox-color-picker { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border-soft); font-size: 13px; } .infobox-color-picker label { margin-top: 0; font-weight: normal; } .infobox-color-picker input[type="color"] { width: 44px; height: 28px; padding: 2px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--content-bg); cursor: pointer; } .infobox-color-picker__hint { font-size: 12px; color: var(--ink-soft); } .infobox-banner-picker { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border-soft); font-size: 13px; } .infobox-banner-picker label { margin-top: 0; font-weight: normal; } .infobox-banner-picker select { padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--content-bg); color: var(--ink); font-size: 13px; } .infobox-row { display: flex; gap: 8px; margin-bottom: 8px; } .infobox-row input { padding: 7px 9px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--content-bg); color: var(--ink); font-size: 13.5px; } .infobox-row--field input[name="infobox_labels[]"], .infobox-row--audio input[name="infobox_labels[]"] { flex: 0 0 34%; } .infobox-row--audio input[name="infobox_values[]"], .infobox-row--field input[name="infobox_values[]"] { flex: 1 1 auto; } .infobox-row--image input[name="infobox_labels[]"] { flex: 0 0 34%; } .infobox-row--image input[name="infobox_values[]"] { flex: 1 1 auto; } .infobox-row__image-upload { flex: 0 0 auto; padding: 6px 10px; font-size: 12px; border: 1px solid var(--border-soft); border-radius: var(--radius); background: var(--content-bg); color: var(--ink-soft); cursor: pointer; } .infobox-row__image-upload:hover { background: var(--box-header-bg); color: var(--link); } .infobox-row--section { padding: 4px 8px; background: var(--infobox-section-bg); border-radius: var(--radius); } .infobox-row--section input[name="infobox_labels[]"] { flex: 1 1 auto; font-weight: 700; } .infobox-row input[type="color"] { flex: 0 0 auto; width: 32px; height: 28px; padding: 2px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--content-bg); cursor: pointer; } .infobox-row input[type="color"].is-no-color { opacity: 0.35; pointer-events: none; } .infobox-row__no-color { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; padding: 0 2px; font-size: 11px; font-weight: normal; color: var(--ink-soft); white-space: nowrap; cursor: pointer; } .infobox-row__no-color input[type="checkbox"] { width: auto; padding: 0; cursor: pointer; } .infobox-row__duration-toggle { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; padding: 0 2px; font-size: 11px; font-weight: normal; color: var(--ink-soft); white-space: nowrap; cursor: pointer; } .infobox-row__duration-toggle input[type="checkbox"] { width: auto; padding: 0; cursor: pointer; } .infobox-row__duration-fields { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; } .infobox-row__duration-fields input[type="date"] { padding: 5px 6px; font-size: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--content-bg); color: var(--ink); } .infobox-row__duration-fields span { color: var(--ink-soft); font-size: 11px; } /* Texte "(2 ans, 3 mois et 5 jours)" ajouté après la valeur dans l'infobox affichée */ .infobox__duration { font-size: 0.92em; color: var(--ink-soft); } .infobox-row--text textarea { flex: 1 1 auto; font-family: inherit; resize: vertical; } .infobox-editor__actions { flex-wrap: wrap; display: flex; gap: 8px; } .article-form .infobox-editor button { margin-top: 0; padding: 5px 10px; font-size: 12.5px; font-weight: normal; border: 1px solid var(--border-soft); background: var(--content-bg); color: var(--ink-soft); border-radius: var(--radius); cursor: pointer; align-self: auto; } .article-form .infobox-row__remove { flex: 0 0 auto; color: #B5453D; } .infobox-row__reorder { flex: 0 0 auto; display: flex; flex-direction: column; gap: 2px; } .article-form .infobox-editor .infobox-row__reorder button { padding: 1px 6px; font-size: 9px; line-height: 1.3; } .article-form .infobox-editor button:hover { background: var(--box-header-bg); color: var(--link); } .table-builder { border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 14px; } .table-builder__hint { margin: 0 0 12px; font-size: 12.5px; color: var(--ink-soft); } .table-builder__grid { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; } .table-builder__row { display: flex; gap: 6px; } .table-builder__row input { flex: 1 1 0; min-width: 0; padding: 7px 9px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--content-bg); color: var(--ink); font-size: 13.5px; } .table-builder__row--header input { font-weight: 700; background: var(--box-header-bg); } .table-builder__actions { display: flex; flex-wrap: wrap; gap: 8px; } .table-builder__actions button { margin-top: 0; padding: 5px 10px; font-size: 12.5px; font-weight: normal; border: 1px solid var(--border-soft); background: var(--content-bg); color: var(--ink-soft); border-radius: var(--radius); cursor: pointer; } .table-builder__actions button:hover { background: var(--box-header-bg); color: var(--link); } #table-insert { border-color: var(--link); color: var(--link); font-weight: 700; } .article-form button { margin-top: 18px; padding: 9px 18px; border: 1px solid var(--link); border-radius: var(--radius); background: var(--link); color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; align-self: flex-start; } .article-form button:hover { opacity: 0.9; } /* ---------- Welcome box ---------- */ .welcome-box { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin: 18px 0 28px; padding: 20px 24px; background: var(--welcome-bg); border: 1px solid var(--border-soft); border-radius: 6px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } .welcome-box__logo { flex: 0 0 auto; height: 76px; width: auto; } .welcome-box__intro { flex: 1 1 280px; } .welcome-box__title { margin: 0 0 2px; font-family: var(--serif); font-weight: 700; font-size: 20px; color: var(--ink); } .welcome-box__tagline { margin: 0; color: var(--ink-soft); max-width: 44ch; } .welcome-box__links { display: grid; grid-template-columns: repeat(2, auto); gap: 6px 28px; font-size: 13px; flex: 0 0 auto; padding-left: 24px; border-left: 1px solid var(--border-soft); } .welcome-box__links a, .welcome-box__links a:visited { color: var(--link); } /* ---------- Home columns (deux colonnes égales, comme la page d'accueil Wikipédia) ---------- */ .home-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; margin: 18px 0 32px; } .home-columns .panel { display: flex; flex-direction: column; } .panel--featured .article-thumb { width: 96px; height: 96px; } .panel--featured .article-list > li:first-child .article-thumb { width: 128px; height: 128px; } .article-thumb--placeholder { background: var(--page-bg); border-style: dashed; } @media (max-width: 780px) { .home-columns { grid-template-columns: 1fr; } } .panel { background: var(--content-bg); border: 1px solid var(--border); overflow: hidden; } .panel h2 { margin: 0; padding: 12px 16px 8px; border-bottom: 1px solid var(--link); font-family: var(--serif); font-variant: small-caps; letter-spacing: 0.02em; font-weight: normal; font-size: 18px; color: var(--ink); } .panel .article-list, .panel .empty-state, .panel__body { padding: 14px 16px; } .panel__body p { margin: 0 0 12px; color: var(--ink-soft); font-size: 13.5px; } /* ---------- Citer cette page ---------- */ .cite-block { padding: 4px 16px 16px; } .cite-block__text { margin: 0 0 8px; padding: 10px 12px; background: var(--page-bg); border: 1px solid var(--border-soft); border-radius: var(--radius); font-size: 13px; line-height: 1.6; word-break: break-word; } .cite-block__copy { padding: 5px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--content-bg); color: var(--ink); font-size: 13px; cursor: pointer; } .cite-block__copy:hover { border-color: var(--link); color: var(--link); } /* ---------- Sondage (accueil) ---------- */ .poll-widget { margin: 0 0 24px; } .poll-widget__question { margin: 0 0 12px; font-family: var(--serif); font-size: 16px; color: var(--ink); } .poll-widget__form { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; } .poll-widget__option { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--border-soft); border-radius: var(--radius); font-size: 13.5px; cursor: pointer; } .poll-widget__option:hover { border-color: var(--link); background: var(--box-header-bg); } .poll-widget__form button { align-self: flex-start; margin-top: 6px; } .poll-widget__thanks { margin: 0 0 12px; padding: 6px 10px; background: var(--box-header-bg); border-radius: var(--radius); font-size: 12.5px; color: var(--ink-soft); } .poll-widget__results { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; } .poll-widget__result-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 4px; } .poll-widget__result-label { font-size: 13px; } .poll-widget__result--mine .poll-widget__result-label { font-weight: 700; color: var(--link); } .poll-widget__result-pct { flex: 0 0 auto; font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--ink-soft); } .poll-widget__bar { display: block; height: 8px; background: var(--page-bg); border: 1px solid var(--border-soft); border-radius: 999px; overflow: hidden; } .poll-widget__bar-fill { display: block; height: 100%; background: var(--link); } .poll-widget__result--mine .poll-widget__bar-fill { background: #2E8540; } .poll-widget__total { margin: 12px 0 0; font-size: 12px; color: var(--ink-soft); } /* ---------- Détail des votes par option (admin/sondages) ---------- */ .poll-admin-results { margin: 0; padding: 4px 0 12px; list-style: none; display: flex; flex-direction: column; gap: 6px; max-width: 480px; } .poll-admin-results li { display: grid; grid-template-columns: minmax(80px, 160px) 1fr auto; align-items: center; gap: 10px; font-size: 12.5px; } .poll-admin-results__label { color: var(--ink-soft); } .poll-admin-results__bar { display: block; height: 8px; background: var(--page-bg); border: 1px solid var(--border-soft); border-radius: 999px; overflow: hidden; } .poll-admin-results__bar-fill { display: block; height: 100%; background: var(--link); } .poll-admin-results__count { color: var(--ink-soft); font-variant-numeric: tabular-nums; } /* ---------- Connexion GTA World ---------- */ .login-card { max-width: 420px; margin: 40px auto; padding: 32px 28px; background: var(--welcome-bg); border: 1px solid var(--border-soft); border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); text-align: center; } .login-card__logo { display: block; height: 88px; width: auto; margin: 0 auto 16px; } .login-card__title { margin: 0 0 6px; font-family: var(--serif); font-weight: 700; font-size: 24px; color: var(--ink); } .login-card__tagline { margin: 0 0 24px; color: var(--ink-soft); } .login-card__button, .login-card__button:visited { display: block; padding: 12px 20px; background: var(--link); color: #fff; border-radius: var(--radius); font-weight: 700; text-decoration: none; } .login-card__button:hover { opacity: 0.9; } .login-card__hint { margin: 18px 0 0; font-size: 12.5px; color: var(--ink-soft); } .auth-alt-gtaw { display: block; margin: 16px 0; padding: 12px 16px; background: var(--box-header-bg); border: 1px solid var(--border-soft); border-radius: var(--radius); text-align: center; font-weight: 700; } .oauth-character-option { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 8px; border: 1px solid var(--border-soft); border-radius: var(--radius); cursor: pointer; } .oauth-character-option:hover { border-color: var(--link); background: var(--box-header-bg); } .presentation-stats { display: flex; gap: 24px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-soft); } .presentation-stats__item { display: flex; flex-direction: column; align-items: center; flex: 1 1 0; text-align: center; } .presentation-stats__number { font-size: 22px; font-weight: 700; color: var(--link); font-variant-numeric: tabular-nums; } .presentation-stats__label { font-size: 11.5px; color: var(--ink-soft); } .article-list { list-style: none; margin: 0; display: flex; flex-direction: column; gap: 14px; } .article-list li { display: flex; gap: 12px; border-top: 1px solid var(--border-soft); padding-top: 14px; } .article-list li:first-child { border-top: none; padding-top: 0; } .article-thumb { flex: 0 0 auto; width: 64px; height: 64px; object-fit: cover; border: 1px solid var(--border-soft); border-radius: var(--radius); } .article-body { min-width: 0; } .article-list a { font-weight: 700; } .article-list p { margin: 4px 0 6px; color: var(--ink-soft); font-size: 13px; } .article-list .meta { font-size: 11.5px; color: var(--ink-soft); } .empty-state { margin: 0; color: var(--ink-soft); font-size: 13.5px; font-style: italic; } .wanted-pages__hint { margin: 0; padding: 14px 16px; color: var(--ink-soft); font-size: 13px; border-bottom: 1px solid var(--border-soft); } .wanted-pages__hint code { background: var(--box-header-bg); padding: 1px 5px; border-radius: var(--radius); } .wanted-pages__list { list-style: none; margin: 0; padding: 0; } .wanted-pages__item { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; padding: 14px 16px; border-top: 1px solid var(--border-soft); } .wanted-pages__item:first-child { border-top: none; } .wanted-pages__rank { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--box-header-bg); color: var(--ink-soft); font-size: 12px; font-weight: 700; } .wanted-pages__main { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; } .wanted-pages__label { font-weight: 700; color: var(--ink); } .wanted-pages__count { font-size: 12px; color: var(--ink-soft); } .wanted-pages__actions { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 8px; } .wanted-pages__action { padding: 6px 12px; border: 1px solid var(--border-soft); border-radius: var(--radius); font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; } .wanted-pages__action:hover { background: var(--box-header-bg); color: var(--link); text-decoration: none; } .wanted-pages__action--primary { border-color: var(--link); color: var(--link); font-weight: 700; } @media (max-width: 600px) { .wanted-pages__item { align-items: flex-start; } .wanted-pages__actions { width: 100%; margin-left: 38px; } } .changelog-list { list-style: none; margin: 0; padding: 14px 16px; display: flex; flex-direction: column; gap: 20px; } .changelog-entry { border-top: 1px solid var(--border-soft); padding-top: 16px; } .changelog-entry:first-child { border-top: none; padding-top: 0; } .changelog-entry__date { margin: 0 0 8px; font-weight: 700; font-size: 14px; color: var(--link); } .changelog-entry__items { margin: 0; padding-left: 20px; font-size: 13.5px; line-height: 1.7; } .trivia-list { margin: 0; padding: 14px 16px 14px 34px; display: flex; flex-direction: column; gap: 12px; font-size: 13.5px; line-height: 1.6; } .trivia-list li { color: var(--ink-soft); } .trivia-list a { font-weight: 700; } /* ---------- Chronologie (/chronologie) ---------- */ .timeline-year { margin: 20px 0 8px; padding-left: 10px; border-left: 4px solid var(--link); font-family: var(--serif); } .timeline-year:first-child { margin-top: 0; } .timeline-list { margin: 0 0 4px; padding: 0 0 0 34px; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; line-height: 1.6; } .timeline-date { display: inline-block; min-width: 40px; color: var(--ink-soft); font-variant-numeric: tabular-nums; } /* ---------- Vote "cet article vous a-t-il été utile ?" ---------- */ .helpful-widget { width: fit-content; max-width: 100%; margin: 24px auto 0; padding-top: 12px; border-top: 1px solid var(--border-soft); text-align: center; } .helpful-widget__question { margin: 0 0 8px; font-size: 12.5px; color: var(--ink-soft); } .helpful-widget__buttons { display: flex; justify-content: center; gap: 8px; } .helpful-widget__btn, .helpful-widget__pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border: 1px solid var(--border-soft); border-radius: 999px; font-size: 12px; } .helpful-widget__btn { background: transparent; color: var(--ink-soft); cursor: pointer; } .helpful-widget__btn svg, .helpful-widget__pill svg { width: 14px; height: 14px; } .helpful-widget__btn:hover { border-color: var(--link); color: var(--link); } .helpful-widget__btn--active { border-color: var(--link); background: var(--box-header-bg); color: var(--link); } .helpful-widget__pill { color: var(--ink-soft); cursor: default; } .helpful-widget__note { margin: 8px 0 0; font-size: 12px; color: var(--ink-soft); } .featured-image { display: block; padding: 14px 16px 0; text-align: center; } .featured-image img { display: inline-block; width: auto; height: auto; max-width: 100%; max-height: 260px; border: 1px solid var(--border-soft); border-radius: var(--radius); } .featured-image__caption { margin: 8px 0 0; padding: 0 16px 14px; font-size: 12.5px; font-style: italic; color: var(--ink-soft); text-align: center; } /* ---------- Lumière sur… (accueil) ---------- */ .featured-spotlight { display: flex; gap: 16px; align-items: flex-start; padding: 14px 16px; } .featured-spotlight__image-link { flex: 0 0 140px; } .featured-spotlight__image { display: block; width: 140px; height: 140px; object-fit: cover; border: 1px solid var(--border-soft); border-radius: var(--radius); } .featured-spotlight__text { min-width: 0; flex: 1 1 auto; } .featured-spotlight__title { display: block; font-family: var(--serif); font-weight: 700; font-size: 17px; margin-bottom: 6px; } .featured-spotlight__text p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.6; color: var(--ink); } .featured-spotlight__more { font-size: 12.5px; font-weight: 700; } @media (max-width: 560px) { .featured-spotlight { flex-direction: column; } .featured-spotlight__image-link { flex: none; align-self: stretch; } .featured-spotlight__image { width: 100%; height: 160px; } } /* ---------- Portails (accueil) ---------- */ .portals { margin: 0 0 40px; } .portals h2 { font-family: var(--serif); font-weight: normal; font-size: 20px; margin: 0 0 14px; padding-bottom: 8px; border-bottom: 2px solid #3F6FA8; } .portals__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; } .portal-card { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; background: var(--box-header-bg); border: 1px solid var(--border-soft); border-radius: var(--radius); text-align: center; color: var(--ink); } .portal-card:hover { border-color: var(--link); text-decoration: none; } .portal-card__name { font-family: var(--serif); font-weight: 700; font-size: 14.5px; color: var(--ink); } .portal-card__count { font-size: 11.5px; color: var(--ink-soft); } /* ---------- Footer ---------- */ .site-footer { border-top: 1px solid var(--border-soft); padding: 18px 32px 28px; color: var(--ink-soft); font-size: 12px; } .site-footer__revision { margin: 0 0 14px; } .site-footer__main { display: flex; gap: 32px; align-items: flex-start; } .site-footer__text { flex: 1 1 auto; min-width: 0; } .site-footer__copyright { margin: 0 0 10px; } .site-footer__links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; } .site-footer__links a { color: var(--link); } .site-footer__badges { flex: 0 0 auto; display: flex; gap: 10px; } .footer-badge { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100px; padding: 12px 8px 10px; border: 1px solid var(--border-soft); border-radius: var(--radius); background: var(--box-header-bg); text-align: center; } .footer-badge__icon { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; background: var(--content-bg); border: 1px solid var(--border-soft); color: var(--link); } .footer-badge__icon svg { width: 18px; height: 18px; } .footer-badge__label { font-size: 11px; line-height: 1.4; color: var(--ink-soft); font-weight: 700; } .site-footer__gtaw { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border-soft); text-align: center; } .site-footer__gtaw a { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-soft); font-size: 11.5px; } .site-footer__gtaw a:hover { color: var(--link); text-decoration: none; } .site-footer__gtaw img { height: 20px; width: auto; opacity: 0.85; } @media (max-width: 720px) { .site-footer__main { flex-direction: column; } .site-footer__badges { order: -1; } } /* ---------- Responsive ---------- */ @media (max-width: 720px) { .site-header__inner { padding: 12px 16px; } .account-nav { margin-left: 0; flex: 1 1 100%; justify-content: flex-end; } .site-nav { padding: 0 16px; overflow-x: auto; } .page { padding: 20px 18px 8px; } .welcome-box { padding: 16px 18px; } .welcome-box__links { grid-template-columns: 1fr; border-left: none; padding-left: 0; border-top: 1px solid var(--border-soft); padding-top: 12px; width: 100%; } } /* ---------- Profil ---------- */ .profile-header { display: flex; gap: 20px; align-items: flex-start; margin: 18px 0 28px; padding-bottom: 20px; border-bottom: 1px solid var(--border-soft); } .profile-header__avatar { flex: 0 0 auto; width: 88px; height: 88px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border-soft); } .profile-header__avatar--placeholder { display: flex; align-items: center; justify-content: center; background: var(--box-header-bg); color: var(--link); font-family: var(--serif); font-size: 34px; } .profile-header__info h1 { font-family: var(--serif); font-weight: normal; font-size: 26px; margin: 0 0 6px; } .profile-header__meta { margin: 6px 0 0; color: var(--ink-soft); font-size: 12.5px; } .profile-header__bio { margin: 10px 0 0; max-width: 60ch; font-size: 13.5px; } /* ---------- Badges ---------- */ .role-badge, .status-badge { display: inline-block; padding: 2px 9px; border-radius: 12px; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; } .role-badge { background: var(--box-header-bg); color: var(--link); } .role-badge--moderateur { background: #E9E1FA; color: #5B3FA8; } .role-badge--administrateur { background: #FDEBD8; color: #A85F1F; } .role-badge--super_admin { background: #FADCE1; color: #A81F3F; } :root[data-theme="dark"] .role-badge--moderateur { background: #2E2645; color: #C6AEF5; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .role-badge--moderateur { background: #2E2645; color: #C6AEF5; } } :root[data-theme="dark"] .role-badge--administrateur { background: #402E1B; color: #F2B67A; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .role-badge--administrateur { background: #402E1B; color: #F2B67A; } } :root[data-theme="dark"] .role-badge--super_admin { background: #402029; color: #F5A0B4; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .role-badge--super_admin { background: #402029; color: #F5A0B4; } } .status-badge--publie, .status-badge--actif { background: #E1F3E5; color: #1F7A3D; } .status-badge--brouillon, .status-badge--en_relecture { background: #FDF3D8; color: #8A6D1F; } .status-badge--archive, .status-badge--suspendu { background: var(--box-header-bg); color: var(--ink-soft); } .status-badge--banni { background: #FBE0DE; color: #A8271F; } :root[data-theme="dark"] .status-badge--publie, :root[data-theme="dark"] .status-badge--actif { background: #1B3324; color: #86D6A0; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .status-badge--publie, :root:not([data-theme]) .status-badge--actif { background: #1B3324; color: #86D6A0; } } :root[data-theme="dark"] .status-badge--brouillon, :root[data-theme="dark"] .status-badge--en_relecture { background: #332C14; color: #E3C567; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .status-badge--brouillon, :root:not([data-theme]) .status-badge--en_relecture { background: #332C14; color: #E3C567; } } :root[data-theme="dark"] .status-badge--banni { background: #3A1F1F; color: #F3B4B0; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .status-badge--banni { background: #3A1F1F; color: #F3B4B0; } } /* ---------- Formulaire de compte ---------- */ .form-success { background: #E1F3E5; border: 1px solid #3F9B5C; border-radius: var(--radius); padding: 12px 16px; margin: 16px 0; color: #1F5A32; } :root[data-theme="dark"] .form-success { background: #1B3324; color: #86D6A0; border-color: #2E6B45; } .account-form__avatar-preview { width: 72px; height: 72px; object-fit: cover; border-radius: 50%; border: 1px solid var(--border-soft); margin-bottom: 8px; } .account-form__hint { font-weight: normal; color: var(--ink-soft); font-size: 11.5px; } /* ---------- Administration ---------- */ .admin-nav { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 22px; padding-bottom: 12px; border-bottom: 1px solid var(--border-soft); } .admin-nav a { padding: 6px 12px; border: 1px solid var(--border-soft); border-radius: var(--radius); color: var(--ink-soft); font-size: 13px; font-weight: 700; } .admin-nav a:hover { color: var(--link); border-color: var(--link); text-decoration: none; } .admin-panel__more { padding: 0 16px 14px; margin: 0; font-size: 13px; } .table-scroll { overflow-x: auto; padding: 0 16px 16px; } .data-table { width: 100%; border-collapse: collapse; font-size: 13px; } .data-table th, .data-table td { padding: 8px 10px; border-bottom: 1px solid var(--border-soft); text-align: left; vertical-align: middle; } .data-table th { color: var(--ink-soft); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.03em; font-weight: 700; } .data-table__num { font-variant-numeric: tabular-nums; text-align: right; } .data-table__num-input { width: 64px; } .data-table__icon-input { width: 90px; } .data-table__icon-image-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; } .data-table__icon-preview { width: 44px; height: 44px; object-fit: cover; border-radius: 4px; border: 1px solid var(--border-soft); } .data-table__icon-file { max-width: 150px; font-size: 11px; } .data-table__icon-remove { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--ink-soft); white-space: nowrap; } .data-table input[type="text"], .data-table input[type="number"], .data-table select { padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--content-bg); color: var(--ink); font-size: 12.5px; font-family: inherit; } .data-table__actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .inline-form { display: inline-flex; } .data-table button, .inline-form button { padding: 6px 10px; border: 1px solid var(--link); border-radius: var(--radius); background: var(--link); color: #fff; font-size: 12px; font-weight: 700; cursor: pointer; } .data-table button:hover, .inline-form button:hover { opacity: 0.9; } .btn-danger { border-color: #B5453D !important; background: transparent !important; color: #B5453D !important; } .btn-danger:hover { background: #B5453D !important; color: #fff !important; } .journal-list { list-style: none; margin: 0; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; font-size: 13px; } .journal-entry { display: block; padding-top: 10px; border-top: 1px solid var(--border-soft); } .journal-list li:first-child .journal-entry { padding-top: 0; border-top: none; } .journal-entry__date { display: block; margin-top: 2px; color: var(--ink-soft); font-size: 11.5px; } /* ---------- Historique des révisions ---------- */ .revision-list { list-style: none; margin: 0; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; font-size: 13px; } .revision-list__item { padding-top: 10px; border-top: 1px solid var(--border-soft); } .revision-list li:first-child { padding-top: 0; border-top: none; } .revision-list__date { font-weight: 700; } .revision-list__meta { display: block; margin-top: 2px; color: var(--ink-soft); font-size: 12px; } /* ---------- Bandeau de validation en attente ---------- */ .review-notice { max-width: 1300px; margin: 14px auto 0; padding: 10px 16px; background: #FDF3D8; border: 1px solid #E3C567; border-radius: var(--radius); color: #6B551A; font-size: 13px; } :root[data-theme="dark"] .review-notice { background: #332C14; border-color: #6B551A; color: #E3C567; } /* ---------- Bandeaux de maintenance (ébauche, à sourcer, etc.) ---------- */ .maintenance-banner { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 620px; margin: 0 auto 12px; padding: 12px 16px; border-radius: var(--radius); border: 1px solid; border-left-width: 6px; font-size: 13px; text-align: left; box-sizing: border-box; } .maintenance-banner__icon { flex: 0 0 auto; } .maintenance-banner__title { margin: 0 0 2px; font-weight: bold; } .maintenance-banner__text { margin: 0; } /* ---------- Icônes de maintenance : SVG en ligne, traits fins, couleur héritée du bandeau parent via currentColor (suit le thème clair/sombre automatiquement). Pas d'emoji (rendu incohérent d'un système à l'autre). */ .maintenance-icon-svg { width: 26px; height: 26px; flex: 0 0 auto; } .admin-maintenance__title { display: flex; align-items: center; gap: 8px; } .admin-maintenance__title .maintenance-icon-svg { width: 20px; height: 20px; } .maintenance-banner--stub { background: #FDF3D8; border-color: #E3C567; color: #6B551A; } .maintenance-banner--warning { background: #FCEBD5; border-color: #E0A458; color: #6B3E10; } .maintenance-banner--danger { background: #FBE2E1; border-color: #D97371; color: #7A2321; } .maintenance-banner--info { background: #DCE9FB; border-color: #7FA8DE; color: #1F3D66; } :root[data-theme="dark"] .maintenance-banner--stub { background: #332C14; border-color: #6B551A; color: #E3C567; } :root[data-theme="dark"] .maintenance-banner--warning { background: #3A2A14; border-color: #6B3E10; color: #E0A458; } :root[data-theme="dark"] .maintenance-banner--danger { background: #3A1817; border-color: #7A2321; color: #D97371; } :root[data-theme="dark"] .maintenance-banner--info { background: #16233A; border-color: #1F3D66; color: #7FA8DE; } .maintenance-tag-option { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); cursor: pointer; } .maintenance-tag-option input { margin-top: 4px; } .maintenance-tag-option__text { display: block; color: var(--ink-soft); font-size: 13px; } /* ---------- Aperçu d'une modification en attente (admin) ---------- */ .admin-preview { max-width: 75ch; margin: 20px 0; padding: 16px 20px; background: var(--content-bg); border: 1px solid var(--border); border-radius: var(--radius); } .admin-preview h2 { font-family: var(--serif); font-weight: normal; margin: 0 0 8px; } .admin-preview__summary { color: var(--ink-soft); font-style: italic; margin: 0 0 16px; } .admin-preview__actions { display: flex; align-items: center; gap: 10px; margin: 0 0 40px; } /* ---------- Page d'aide ---------- */ .aide-hero { max-width: 640px; margin: 24px auto 36px; text-align: center; } .aide-hero__icon { display: block; width: 72px; height: 72px; margin: 0 auto 16px; object-fit: contain; } .aide-hero h1 { font-family: var(--serif); font-weight: 700; font-size: 26px; margin: 0 0 18px; } .aide-hero__lead { margin: 0 0 10px; color: var(--ink-soft); font-size: 14.5px; } .aide-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 0 0 32px; } .aide-card { padding: 18px 18px 20px; background: var(--box-header-bg); border: 1px solid var(--border-soft); border-radius: var(--radius); } .aide-card h2 { font-family: var(--serif); font-weight: 700; font-size: 17px; margin: 0 0 10px; text-align: center; } .aide-card > p { margin: 0 0 12px; font-size: 13px; color: var(--ink-soft); text-align: center; } .aide-card__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; text-align: center; } .aide-card__links a { font-weight: 700; } .aide-card__syntax { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; color: var(--ink-soft); } .aide-card__syntax code { background: var(--content-bg); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 1px 5px; font-size: 12px; color: var(--ink); } .aide-question { text-align: center; font-size: 14px; margin: 0 0 36px; } @media (max-width: 780px) { .aide-cards { grid-template-columns: 1fr; } } /* ---------- Guide de création d'article ---------- */ .aide-guide__intro { max-width: 70ch; margin: 0 0 28px; color: var(--ink-soft); font-size: 14px; } .aide-guide { list-style: none; margin: 0 0 32px; padding: 0; max-width: 760px; display: flex; flex-direction: column; } .aide-guide__step { padding: 20px 0; border-top: 1px solid var(--border-soft); } .aide-guide__step:first-child { border-top: none; padding-top: 0; } .aide-guide__step h2 { font-family: var(--serif); font-weight: 700; font-size: 19px; margin: 0 0 10px; color: var(--ink); } .aide-guide__step p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.65; } .aide-guide__step p:last-child { margin-bottom: 0; } .aide-guide__step .aide-card__syntax { margin: 0 0 12px; } /* ---------- Recherche ---------- */ .search-page-form { display: flex; gap: 8px; max-width: 480px; margin: 18px 0 24px; } .search-page-form input { flex: 1 1 auto; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--content-bg); color: var(--ink); font-size: 14px; } .search-page-form button { padding: 8px 16px; border: 1px solid var(--link); border-radius: var(--radius); background: var(--link); color: #fff; font-size: 13.5px; font-weight: 700; cursor: pointer; } .search-page-form button:hover { opacity: 0.9; } .search-results__count { margin: 0 0 14px; color: var(--ink-soft); font-size: 13px; } .search-results { list-style: none; margin: 0 0 40px; padding: 0; display: flex; flex-direction: column; max-width: 70ch; } .search-result { padding: 14px 0; border-top: 1px solid var(--border-soft); } .search-result:first-child { border-top: none; padding-top: 0; } .search-result__title { font-size: 16px; font-weight: 700; } .search-result__snippet { margin: 4px 0 0; font-size: 13.5px; color: var(--ink-soft); line-height: 1.6; } .search-result__snippet mark { background: #FDF3D8; color: var(--ink); padding: 0 1px; border-radius: 2px; } :root[data-theme="dark"] .search-result__snippet mark { background: #4A3F1A; color: var(--ink); }