/* Wiki YOD Ingénierie — palette #1F1D36 #3F3351 #864879 #E9A6A6 (voir DESIGN.md). Deux thèmes via data-theme sur ; les blocs de code restent sombres. */ :root[data-theme="light"] { --fond: #faf8fb; --surface: #ffffff; --bordure: #e7e2ec; --encre: #1f1d36; --encre-douce: #625a73; --accent: #864879; --accent-contraste: #ffffff; --accent-teinte: rgb(134 72 121 / 0.09); --rose: #c77b93; --rose-teinte: rgb(199 123 147 / 0.14); --succes: #1a7f4b; --erreur: #c22f45; --erreur-contraste: #ffffff; --ombre-carte: 0 4px 16px rgb(134 72 121 / 0.10); } :root[data-theme="dark"] { --fond: #1f1d36; --surface: #2a2644; --bordure: #3f3351; --encre: #efeaf2; --encre-douce: #a79dbb; --accent: #e9a6a6; --accent-contraste: #1f1d36; --accent-teinte: rgb(233 166 166 / 0.12); --rose: #e9a6a6; --rose-teinte: rgb(233 166 166 / 0.14); --succes: #6fcf9a; --erreur: #f09aa8; --erreur-contraste: #1f1d36; --ombre-carte: 0 4px 18px rgb(0 0 0 / 0.35); } :root { --code-fond: #191731; --code-encre: #ece7f0; --mono: "SFMono-Regular", ui-monospace, "Cascadia Mono", Consolas, monospace; } * { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; background: var(--fond); color: var(--encre); line-height: 1.6; transition: background-color 0.2s ease-out, color 0.2s ease-out; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } } main { max-width: 1240px; margin: 0 auto; padding: 2.75rem 2rem 5rem; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ---------------------------------------------------------------- entête */ .entete { display: flex; align-items: center; gap: 2.5rem; padding: 1.1rem 2rem; background: var(--surface); border-bottom: 1px solid var(--bordure); position: sticky; top: 0; z-index: 10; } .marque { font-weight: 700; font-size: 1.05rem; color: var(--encre); letter-spacing: -0.01em; } .marque span { color: var(--accent); } .marque:hover { text-decoration: none; } .entete nav { display: flex; gap: 0.25rem; flex: 1; } .entete nav a { padding: 0.35rem 0.8rem; border-radius: 6px; color: var(--encre-douce); font-size: 0.92rem; } .entete nav a:hover { background: var(--fond); color: var(--encre); text-decoration: none; } .entete nav a.actif { background: var(--fond); color: var(--encre); font-weight: 600; } .session { display: flex; align-items: center; gap: 0.8rem; font-size: 0.88rem; } .membre-nom { font-family: var(--mono); color: var(--encre-douce); } .lien-discret { color: var(--encre-douce); } .lien-espace { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.3rem 0.7rem; border-radius: 8px; } .lien-espace:hover { background: var(--fond); text-decoration: none; } .lien-espace:hover .membre-nom, .lien-espace.actif .membre-nom { color: var(--encre); } /* ---------------------------------------------------------------- avatars */ .avatar { border-radius: 50%; object-fit: cover; flex-shrink: 0; vertical-align: middle; } .avatar-initiales { display: inline-flex; align-items: center; justify-content: center; background: hsl(var(--teinte) 42% 46%); color: #fff; font-weight: 700; letter-spacing: 0.02em; user-select: none; } .avatar-nav, img.avatar-nav { width: 38px; height: 38px; } .avatar-nav.avatar-initiales { font-size: 0.85rem; } .avatar-mini, img.avatar-mini { width: 30px; height: 30px; } .avatar-mini.avatar-initiales { font-size: 0.72rem; } .avatar-grand, img.avatar-grand { width: 112px; height: 112px; } .avatar-grand.avatar-initiales { font-size: 2.3rem; } #bascule-theme { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; border: 1px solid var(--bordure); border-radius: 8px; background: transparent; color: var(--encre-douce); cursor: pointer; } #bascule-theme:hover { color: var(--encre); border-color: var(--encre-douce); background: transparent; } :root[data-theme="light"] .icone-soleil { display: none; } :root[data-theme="dark"] .icone-lune { display: none; } /* ---------------------------------------------------------------- bandeau */ .bandeau { margin-bottom: 2.75rem; } .bandeau h1 { margin: 0 0 0.4rem; font-size: 2.1rem; letter-spacing: -0.02em; } .sous-titre { margin: 0; color: var(--encre-douce); } /* ---------------------------------------------------------------- catalogue */ .populaires { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem; margin-bottom: 2rem; padding: 0.9rem 1.2rem; background: var(--rose-teinte); border: 1px solid var(--bordure); border-radius: 10px; } .populaires-titre { font-size: 0.85rem; font-weight: 600; } .populaire { font-size: 0.85rem; color: var(--encre); background: var(--surface); border: 1px solid var(--bordure); border-radius: 999px; padding: 0.2rem 0.7rem; } .populaire:hover { border-color: var(--accent); text-decoration: none; color: var(--accent); } .populaire-compte { font-family: var(--mono); font-size: 0.78rem; color: var(--encre-douce); } .outils-catalogue { display: flex; flex-direction: column; gap: 1.2rem; margin-bottom: 2.4rem; } input[type="search"], input[type="password"], input[type="text"] { width: 100%; padding: 0.8rem 1.1rem; border: 1px solid var(--bordure); border-radius: 8px; font-size: 0.95rem; background: var(--surface); color: var(--encre); } input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; } input::placeholder { color: var(--encre-douce); opacity: 0.8; } .themes { display: flex; flex-wrap: wrap; gap: 0.5rem; } .puce { padding: 0.25rem 0.75rem; border: 1px solid var(--bordure); border-radius: 999px; background: var(--surface); color: var(--encre-douce); font-size: 0.85rem; font-family: var(--mono); } .puce:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; } .puce-active { background: var(--accent); border-color: var(--accent); color: var(--accent-contraste); } .puce-active:hover { color: var(--accent-contraste); } .compteur { opacity: 0.75; font-size: 0.78rem; } .grille-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.6rem; } .carte { background: var(--surface); border: 1px solid var(--bordure); border-radius: 12px; padding: 1.5rem 1.6rem; display: flex; flex-direction: column; gap: 0.7rem; transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out; } .carte:hover { border-color: var(--accent); box-shadow: var(--ombre-carte); } .carte-meta { display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; color: var(--encre-douce); font-family: var(--mono); } .etiquette { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.72rem; color: var(--accent); background: var(--accent-teinte); border-radius: 4px; padding: 0.15rem 0.5rem; } .carte h2 { margin: 0; font-size: 1.12rem; line-height: 1.35; } .carte h2 a { color: var(--encre); } .carte .synopsis { margin: 0; color: var(--encre-douce); font-size: 0.92rem; flex: 1; } .carte footer { display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; color: var(--encre-douce); } .carte-auteur { display: inline-flex; align-items: center; gap: 0.5rem; } .pile-avatars { display: inline-flex; align-items: center; } .avatar-empile { margin-left: -10px; box-shadow: 0 0 0 2px var(--surface); } .co-compte { font-family: var(--mono); font-size: 0.75rem; color: var(--accent); background: var(--accent-teinte); border-radius: 999px; padding: 0.05rem 0.45rem; } .carte-etoiles { font-family: var(--mono); font-size: 0.82rem; color: var(--rose); } .vide { color: var(--encre-douce); padding: 2rem 0; text-align: center; } /* ---------------------------------------------------------------- article */ .disposition-article { display: grid; grid-template-columns: 230px minmax(0, 1fr) 230px; gap: 3rem; max-width: 1340px; margin: 0 auto; } .panneau { font-size: 0.86rem; } .panneau-titre { margin: 0 0 0.5rem; font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--encre-douce); } .panneau ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.15rem; } .panneau ol { gap: 0.25rem; } .panneau a { display: block; padding: 0.38rem 0.7rem; border-radius: 6px; color: var(--encre-douce); line-height: 1.4; } .panneau a:hover { color: var(--encre); background: var(--accent-teinte); text-decoration: none; } .panneau a.actif { color: var(--accent); background: var(--accent-teinte); font-weight: 600; } .panneau-chapitres, .panneau-sections { position: sticky; top: 6.5rem; align-self: start; max-height: calc(100vh - 7.5rem); overflow-y: auto; } @media (max-width: 1100px) { .disposition-article { grid-template-columns: minmax(0, 1fr); } .panneau { display: none; } } .page-article { max-width: 72ch; margin: 0 auto; min-width: 0; width: 100%; } .article-entete { border-bottom: 1px solid var(--bordure); padding-bottom: 1.8rem; margin-bottom: 2.5rem; } .article-entete h1 { margin: 0.8rem 0 0.5rem; font-size: 2.1rem; letter-spacing: -0.02em; } .corps-article { line-height: 1.75; } .corps-article h2 { margin-top: 2.6rem; } .corps-article h3 { margin-top: 1.9rem; } .corps-article p, .corps-article ul, .corps-article ol { margin: 0.9rem 0; } .article-actions { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; } .signature { color: var(--encre-douce); font-size: 0.9rem; margin: 0; display: inline-flex; align-items: center; gap: 0.5rem; } .maj-le { color: var(--encre-douce); } .article-boutons { display: flex; align-items: center; gap: 0.6rem; } .btn-supprimer { padding: 0.35rem 0.8rem; border: 1px solid var(--bordure); border-radius: 8px; background: var(--surface); color: var(--encre-douce); font-size: 0.85rem; cursor: pointer; transition: border-color 0.15s ease-out, color 0.15s ease-out; } .btn-supprimer:hover { border-color: var(--erreur); color: var(--erreur); } .btn-etoile { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.35rem 0.8rem; border: 1px solid var(--bordure); border-radius: 8px; background: var(--surface); color: var(--encre); font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: border-color 0.15s ease-out, background-color 0.15s ease-out; } .btn-etoile svg { fill: none; color: var(--encre-douce); } .btn-etoile:hover { border-color: var(--rose); background: var(--surface); } .btn-etoile:hover svg { color: var(--rose); } .btn-etoile.etoile-active { background: var(--rose-teinte); border-color: var(--rose); } .btn-etoile.etoile-active svg { fill: var(--rose); color: var(--rose); } .etoile-compte { font-family: var(--mono); font-weight: 400; font-size: 0.8rem; color: var(--encre-douce); border-left: 1px solid var(--bordure); padding-left: 0.45rem; } .corps-article img { max-width: 100%; border-radius: 8px; border: 1px solid var(--bordure); } .corps-article h2, .corps-article h3 { scroll-margin-top: 6.5rem; } .corps-article pre { background: var(--code-fond); color: var(--code-encre); padding: 1rem 1.2rem; border-radius: 8px; overflow-x: auto; font-size: 0.88rem; } .corps-article code { font-family: var(--mono); } .corps-article :not(pre) > code { background: var(--accent-teinte); padding: 0.1rem 0.35rem; border-radius: 4px; font-size: 0.88em; } .corps-article table { border-collapse: collapse; width: 100%; } .corps-article th, .corps-article td { border: 1px solid var(--bordure); padding: 0.5rem 0.8rem; text-align: left; } .corps-article blockquote { margin: 0; padding: 0.2rem 1.2rem; border: 1px solid var(--bordure); border-radius: 8px; background: var(--accent-teinte); color: var(--encre-douce); } /* ---------------------------------------------------------------- publier */ .colonnes-publier { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2.5rem; align-items: start; } @media (max-width: 820px) { .colonnes-publier { grid-template-columns: 1fr; } } .regles, .formulaire { background: var(--surface); border: 1px solid var(--bordure); border-radius: 12px; padding: 1.9rem 2.1rem; } .regles h2, .formulaire h2 { margin-top: 0; margin-bottom: 1.2rem; font-size: 1.18rem; } .regles ol { padding-left: 1.2rem; display: flex; flex-direction: column; gap: 1rem; margin: 0; } .regles pre { background: var(--code-fond); color: var(--code-encre); padding: 0.9rem 1rem; border-radius: 8px; overflow-x: auto; font-size: 0.82rem; margin: 0.6rem 0 0; } .regles code { font-family: var(--mono); } .regles :not(pre) > code { background: var(--accent-teinte); padding: 0.1rem 0.3rem; border-radius: 4px; } .astuce { margin: 0.5rem 0 0; font-size: 0.85rem; color: var(--encre-douce); } .astuce code { overflow-wrap: anywhere; } .agent-plugin { margin-top: 2.5rem; background: var(--surface); border: 1px solid var(--bordure); border-radius: 12px; padding: 1.9rem 2.1rem; } .agent-plugin h2 { margin-top: 0; margin-bottom: 0.8rem; font-size: 1.18rem; } .agent-plugin > p { color: var(--encre-douce); max-width: 75ch; margin: 0 0 1.4rem; } .agent-plugin :not(pre) > code { background: var(--accent-teinte); padding: 0.1rem 0.3rem; border-radius: 4px; font-family: var(--mono); } .agent-etapes { display: flex; flex-direction: column; gap: 1.7rem; max-width: 75ch; } .agent-etapes h3 { margin: 0 0 0.7rem; font-size: 0.98rem; } .agent-etapes pre { background: var(--code-fond); color: var(--code-encre); padding: 1rem 1.2rem; border-radius: 8px; overflow-x: auto; font-size: 0.86rem; line-height: 1.55; margin: 0; font-family: var(--mono); } form { display: flex; flex-direction: column; gap: 1.3rem; } form label { display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.9rem; font-weight: 600; } input[type="file"] { border: 1px dashed var(--bordure); border-radius: 8px; padding: 1rem; background: var(--fond); color: var(--encre-douce); font-size: 0.85rem; font-weight: 400; } button[type="submit"] { align-self: flex-start; background: var(--accent); color: var(--accent-contraste); border: none; border-radius: 8px; padding: 0.7rem 1.8rem; font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: filter 0.15s ease-out; } button[type="submit"]:hover { filter: brightness(1.08); } .alerte { border-radius: 8px; padding: 0.8rem 1rem; margin-top: 1rem; font-size: 0.9rem; } .alerte ul { margin: 0.4rem 0 0; padding-left: 1.2rem; } .alerte-erreur { background: rgb(194 47 69 / 0.09); border: 1px solid var(--erreur); color: var(--erreur); } .alerte-succes { background: rgb(26 127 75 / 0.09); border: 1px solid var(--succes); color: var(--succes); } /* ---------------------------------------------------------------- stats */ .colonnes-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2rem; align-items: start; } .colonnes-stats section { background: var(--surface); border: 1px solid var(--bordure); border-radius: 12px; padding: 1.9rem 2.1rem; } .colonnes-stats h2 { margin-top: 0; margin-bottom: 1.2rem; font-size: 1.15rem; } table { width: 100%; border-collapse: collapse; font-size: 0.92rem; } th { text-align: left; font-family: var(--mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--encre-douce); } th, td { padding: 0.65rem 0.5rem; border-bottom: 1px solid var(--bordure); } tr:last-child td { border-bottom: none; } .nombre { text-align: right; font-family: var(--mono); } .rang { width: 2rem; text-align: center; } /* ---------------------------------------------------------------- mon espace */ .carte-section { background: var(--surface); border: 1px solid var(--bordure); border-radius: 12px; padding: 1.9rem 2.1rem; margin-bottom: 2rem; } .carte-section h2 { margin: 0 0 1.2rem; font-size: 1.18rem; } .profil { display: flex; align-items: center; gap: 1.6rem; } .profil-infos { display: flex; flex-direction: column; gap: 0.5rem; } .profil-nom { margin: 0; font-size: 1.25rem; font-weight: 700; } .form-avatar { display: flex; align-items: center; gap: 0.9rem; flex-direction: row; } .bouton-fichier { display: inline-block; padding: 0.45rem 1rem; border: 1px solid var(--bordure); border-radius: 8px; background: var(--surface); font-size: 0.88rem; font-weight: 600; cursor: pointer; } .bouton-fichier:hover { border-color: var(--accent); color: var(--accent); } .bouton-fichier input[type="file"] { display: none; } .form-avatar .astuce { margin: 0; } .actions-cellule { text-align: right; white-space: nowrap; } .date-cellule { font-family: var(--mono); font-size: 0.85rem; color: var(--encre-douce); } .btn-compact { padding: 0.3rem 0.75rem; font-size: 0.82rem; display: inline-block; } a.btn-secondaire { color: var(--encre); } a.btn-secondaire:hover { text-decoration: none; } .actions-cellule .btn-compact + .btn-compact { margin-left: 0.5rem; } .auteur-cellule { display: flex; align-items: center; gap: 0.5rem; } /* ---------------------------------------------------------------- admin */ .form-invitation { flex-direction: row; align-items: stretch; flex-wrap: wrap; gap: 0.9rem; } .form-invitation input[type="text"] { width: min(340px, 100%); } .form-invitation button[type="submit"] { align-self: auto; } .carte-section .astuce { margin-top: 1.1rem; max-width: 72ch; } .token-revele { background: var(--accent-teinte); border: 1px solid var(--accent); border-radius: 12px; padding: 1.5rem 1.8rem; margin-bottom: 2rem; } .token-revele-titre { margin: 0 0 0.9rem; } .token-ligne { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; } .token-ligne code { font-family: var(--mono); font-size: 0.92rem; background: var(--code-fond); color: var(--code-encre); padding: 0.6rem 0.95rem; border-radius: 8px; overflow-wrap: anywhere; } .token-avertissement { margin: 0.9rem 0 0; font-size: 0.85rem; color: var(--encre-douce); } .btn-copier.copie-ok { border-color: var(--succes); color: var(--succes); } .role-membre { color: var(--encre-douce); font-size: 0.88rem; } .badge-vous, .votre-compte { font-family: var(--mono); font-size: 0.78rem; color: var(--encre-douce); } .badge-inactif { display: inline-block; margin-left: 0.4rem; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.72rem; color: var(--encre-douce); border: 1px solid var(--bordure); border-radius: 4px; padding: 0.15rem 0.5rem; } .membre-inactif td:not(.actions-cellule) { opacity: 0.55; } /* ---------------------------------------------------------------- dialogue */ .dialogue { background: var(--surface); color: var(--encre); border: 1px solid var(--bordure); border-radius: 14px; padding: 1.8rem 2rem; width: min(460px, 90vw); box-shadow: 0 20px 60px rgb(31 29 54 / 0.35); } .dialogue[open] { animation: dialogue-entree 0.18s ease-out; } @keyframes dialogue-entree { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } } .dialogue::backdrop { background: rgb(31 29 54 / 0.55); } .dialogue-titre { margin: 0 0 0.6rem; font-size: 1.12rem; font-weight: 700; } .dialogue-question { margin: 0; color: var(--encre-douce); line-height: 1.55; } .dialogue-actions { display: flex; justify-content: flex-end; gap: 0.8rem; margin-top: 1.6rem; } .btn-secondaire { padding: 0.55rem 1.2rem; border: 1px solid var(--bordure); border-radius: 8px; background: var(--surface); color: var(--encre); font-size: 0.92rem; font-weight: 600; cursor: pointer; } .btn-secondaire:hover { border-color: var(--encre-douce); } .btn-danger { padding: 0.55rem 1.2rem; border: none; border-radius: 8px; background: var(--erreur); color: var(--erreur-contraste); font-size: 0.92rem; font-weight: 600; cursor: pointer; transition: filter 0.15s ease-out; } .btn-danger:hover { filter: brightness(1.08); } /* ---------------------------------------------------------------- connexion */ .page-connexion { display: grid; place-items: center; min-height: 100vh; background: var(--fond); } .boite-connexion { background: var(--surface); border: 1px solid var(--bordure); border-radius: 12px; padding: 2.6rem 2.8rem; width: min(440px, 90vw); display: flex; flex-direction: column; gap: 1rem; } .boite-connexion h1 { margin: 0; font-size: 1.4rem; } .boite-connexion h1 span { color: var(--accent); } .boite-connexion .aide { font-size: 0.85rem; color: var(--encre-douce); margin: 0; } .boite-connexion button { align-self: stretch; }