/* ============================================================================================ pages.css — L'IDENTITÉ PARTAGÉE : la vitrine et les pages créées en ligne. Une seule feuille possède l'apparence des blocs éditables. La dupliquer en ferait deux, et l'une des deux finirait par mentir — c'est la raison d'être de ce fichier, pas un rangement. ⚠️ CONTRAT À TROIS : les classes ci-dessous sont EXACTEMENT celles de `CLASSE_OK` (server/account-api/app.mjs) et celles que propose la barre d'édition. Une classe absente d'un seul des trois est une commande morte : le serveur la jette, ou rien ne la rend, et l'auteur croit avoir mis en forme. ============================================================================================ */ :root { --fond: #0c0d10; --panneau: #16181c; --panneau-2: #1b1e23; --trait: rgba(150,156,168,.18); --trait-fort: rgba(150,156,168,.34); --bleu: #3486e0; --bleu-sourd: #2a6bb0; --texte: #dcdee2; --doux: #969ba4; --muet: #6b7079; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; } /* ============================================================================================ LE VOCABULAIRE DE MISE EN FORME — dix-huit classes, et pas une de plus. L'éditeur en ligne n'écrit JAMAIS de `style=` : il pose une de ces classes, et c'est cette feuille qui possède l'apparence. Deux raisons, l'une de sûreté et l'autre de tenue : · un attribut `style` libre rendrait l'assainissement indécidable côté serveur ; · une police libre laisserait un bloc publié casser l'identité de la page. ⚠️ CONTRAT À TROIS : la même liste vit ici, dans `CLASSE_OK` (server/account-api/app.mjs) et dans la barre d'édition. Une classe absente d'un des trois est une commande MORTE — le serveur la jette, ou le style ne la rend pas, et l'auteur croit avoir mis en forme. ============================================================================================ */ [data-bloc] .ta-gauche, [data-bloc].ta-gauche { text-align: left; } [data-bloc] .ta-centre, [data-bloc].ta-centre { text-align: center; } [data-bloc] .ta-droite, [data-bloc].ta-droite { text-align: right; } [data-bloc] .po-titre, [data-bloc].po-titre { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-weight: 600; letter-spacing: -.01em; } [data-bloc] .po-texte, [data-bloc].po-texte { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-weight: 400; letter-spacing: 0; } [data-bloc] .po-mono, [data-bloc].po-mono { font-family: var(--mono); letter-spacing: .01em; } [data-bloc] .tx-petit, [data-bloc].tx-petit { font-size: .82em; line-height: 1.55; } [data-bloc] .tx-normal, [data-bloc].tx-normal { font-size: 1em; line-height: 1.6; } [data-bloc] .tx-grand, [data-bloc].tx-grand { font-size: 1.28em; line-height: 1.45; } [data-bloc] .tx-geant, [data-bloc].tx-geant { font-size: 1.9em; line-height: 1.2; letter-spacing: -.015em; } [data-bloc] .cl-muet, [data-bloc].cl-muet { color: var(--muet); } [data-bloc] .cl-doux, [data-bloc].cl-doux { color: var(--doux); } [data-bloc] .cl-fort, [data-bloc].cl-fort { color: var(--texte); } [data-bloc] .cl-accent, [data-bloc].cl-accent { color: var(--bleu); } /* Mise en page. `mp-colonnes` retombe SEULE à une colonne en étroit : deux colonnes de six mots ne se lisent pas. */ [data-bloc] .mp-encadre, [data-bloc].mp-encadre { border: 1px solid var(--trait-fort); border-radius: 8px; padding: 16px 18px; background: var(--panneau); } [data-bloc] .mp-colonnes, [data-bloc].mp-colonnes { column-count: 2; column-gap: 34px; } @media (max-width: 720px) { [data-bloc] .mp-colonnes, [data-bloc].mp-colonnes { column-count: 1; } } [data-bloc] .mp-espace, [data-bloc].mp-espace { margin-top: 26px; display: block; } [data-bloc] .mp-etiquette, [data-bloc].mp-etiquette { display: inline-block; font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muet); margin-bottom: 8px; } /* ---- LES BRIQUES DU MINI-CMS ------------------------------------------------------------ Colonnes à contenu propre, cadre, image légendée, bloc de code, filet. Comme le reste du vocabulaire, ce sont des CLASSES : l'éditeur les pose, cette feuille les rend. ⚠️ `min-width:0` sur les cases : un enfant de grille ne descend PAS sous la taille de son contenu, et une image ou une ligne de code un peu large pousse alors la page entière. Leçon payée trois fois côté application. */ [data-bloc] .mp-grille-2, [data-bloc] .mp-grille-3 { display: grid; gap: 26px; margin: 18px 0; } [data-bloc] .mp-grille-2 { grid-template-columns: 1fr 1fr; } [data-bloc] .mp-grille-3 { grid-template-columns: 1fr 1fr 1fr; } [data-bloc] .mp-case { min-width: 0; } @media (max-width: 720px) { [data-bloc] .mp-grille-2, [data-bloc] .mp-grille-3 { grid-template-columns: 1fr; } } [data-bloc] .mp-media { margin: 18px 0; } [data-bloc] .mp-media img { display: block; max-width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--trait); } [data-bloc] .mp-legende { margin-top: 8px; font: 400 12px/1.5 var(--mono); color: var(--muet); } /* Un bloc de code défile DANS SON BLOC : la page, elle, ne part jamais de côté. */ [data-bloc] .mp-code { margin: 18px 0; padding: 14px 16px; border: 1px solid var(--trait-fort); border-radius: 6px; background: #0a0b0d; overflow-x: auto; } [data-bloc] .mp-code code { font: 400 12.5px/1.65 var(--mono); color: var(--doux); white-space: pre; display: block; } [data-bloc] .mp-filet { border: 0; border-top: 1px solid var(--trait-fort); margin: 30px 0; } /* La palette d'insertion et le sélecteur d'images vivent sous la barre. */ #be-outil { position: fixed; left: 18px; top: calc(var(--h-barre, 62px) + 10px); z-index: 310; width: min(560px, calc(100vw - 36px)); max-height: 66vh; overflow: auto; background: var(--panneau); border: 1px solid var(--trait-fort); border-radius: 8px; box-shadow: 0 18px 50px rgba(0,0,0,.5); padding: 14px 16px; } #be-outil h4 { margin: 0 0 10px; font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muet); } #be-outil input[type=text], #be-outil textarea { width: 100%; box-sizing: border-box; background: #0a0b0d; color: var(--texte); border: 1px solid var(--trait-fort); border-radius: 5px; padding: 8px 10px; font: inherit; font-size: 13px; } #be-outil textarea { min-height: 130px; font-family: var(--mono); font-size: 12.5px; } #be-outil .be-rang { display: flex; gap: 8px; align-items: center; margin-top: 10px; } .be-vignettes { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; margin-top: 10px; } .be-vignette { border: 1px solid var(--trait); border-radius: 6px; overflow: hidden; background: #0a0b0d; cursor: pointer; padding: 0; } .be-vignette:hover { border-color: var(--bleu); } .be-vignette img { display: block; width: 100%; height: 74px; object-fit: cover; } .be-vignette span { display: block; font: 400 10px/1.3 var(--mono); color: var(--muet); padding: 4px 6px; } /* -------------------------------------------------------------------------------------------- L'ÉDITEUR EN LIGNE — rien de tout cela n'existe pour un visiteur : la barre n'est créée que si `/api/me` confirme le rôle. Les styles restent ici (page autonome, aucun second fichier) mais ne s'appliquent qu'à des éléments qui ne seront jamais construits autrement. -------------------------------------------------------------------------------------------- */ /* EN HAUT (demande du 14/08) : c'est là qu'on regarde quand on écrit, et une barre du bas passe sous le clavier logiciel sur une tablette. Trois choses vont ensemble et ne peuvent pas se deviner : · la barre doit passer DEVANT la navigation, qui est elle-même collée en haut ; · la navigation doit DESCENDRE de la hauteur de la barre, sinon elles se recouvrent ; · cette hauteur n'est PAS une constante — la barre passe à deux ou trois lignes en étroit. On la MESURE et on l'écrit dans `--h-barre` (même leçon que `--dock-full-bottom` côté application : un décalage codé en dur ment dès que le contenu change de forme). */ #barre-edition { position: fixed; left: 0; right: 0; top: 0; z-index: 300; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 18px; background: #101317; border-bottom: 1px solid var(--trait-fort); font: 400 13px/1 system-ui, sans-serif; box-shadow: 0 8px 28px rgba(0,0,0,.45); } body.a-barre { padding-top: var(--h-barre, 62px); } body.a-barre .nav { top: var(--h-barre, 62px); } /* ---- la seconde rangée : la MISE EN FORME ------------------------------------------------ Elle n'apparaît qu'en édition — hors édition, elle n'aurait rien à commander. */ #be-forme { display: none; flex-basis: 100%; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 9px; border-top: 1px dashed var(--trait); } body.en-edition #be-forme { display: flex; } #be-forme .be-sep { width: 1px; height: 18px; background: var(--trait-fort); margin: 0 2px; } #be-forme .be-g { font: 500 10px/1 var(--mono); letter-spacing: .1em; color: var(--muet); text-transform: uppercase; } .be-f { background: transparent; color: var(--doux); border: 1px solid var(--trait-fort); border-radius: 4px; padding: 5px 9px; font: inherit; font-size: 12px; cursor: pointer; min-width: 30px; } .be-f:hover { background: var(--panneau-2); color: var(--texte); } .be-f:disabled { opacity: .35; cursor: default; } .be-titre { font: 500 11px/1 var(--mono); letter-spacing: .12em; color: var(--muet); } #barre-edition select { background: #0a0b0d; color: var(--texte); font: inherit; font-size: 12.5px; border: 1px solid var(--trait-fort); border-radius: 5px; padding: 6px 8px; } .be-b { background: transparent; color: var(--texte); border: 1px solid var(--trait-fort); border-radius: 5px; padding: 7px 12px; font: inherit; font-size: 12.5px; cursor: pointer; } .be-b:hover:not(:disabled) { background: var(--panneau-2); } .be-b:disabled { opacity: .4; cursor: default; } .be-b-plein { background: var(--bleu-sourd); border-color: var(--bleu-sourd); color: #fff; } .be-b-plein:hover:not(:disabled) { background: var(--bleu); } #be-etat { font-size: 12.5px; color: var(--doux); } #be-compte { font: 400 11.5px/1 var(--mono); color: var(--muet); } /* Un bloc dont le texte vient du SERVEUR porte un liseré : sans lui, on ne sait pas si l'on corrige le fichier ou une version publiée qui l'écrase déjà. */ body.en-edition [data-bloc].be-publie { outline-color: rgba(217,164,65,.55); } body.en-edition [data-bloc].be-publie:hover { outline-color: rgba(217,164,65,.9); } #be-etat.be-ok { color: #6fbe86; } #be-etat.be-erreur { color: #e07a7a; } #be-etat.be-attente { color: #d9a441; } #be-sorties { margin-left: auto; display: inline-flex; align-items: center; gap: 16px; } #barre-edition a { font-size: 12.5px; color: var(--doux); } /* Le vocabulaire de mise en forme (dix-huit classes) et les briques du mini-CMS vivent dans `pages.css` : la vitrine ET les pages créées en ligne le partagent, donc une seule feuille possède l'apparence. Le dupliquer ici en ferait deux, et l'une des deux finirait par mentir. */ /* Le bloc qu'on édite doit se VOIR : sans bordure, on ne sait pas où l'un finit et l'autre commence, et l'on tape dans le mauvais. */ body.en-edition [data-bloc] { outline: 1px dashed rgba(52,134,224,.45); outline-offset: 6px; border-radius: 2px; } body.en-edition [data-bloc]:focus { outline: 1px solid var(--bleu); outline-offset: 6px; } body.en-edition [data-bloc]:hover { outline-color: rgba(52,134,224,.75); } #be-panneau { position: fixed; right: 18px; top: calc(var(--h-barre, 62px) + 10px); z-index: 310; width: min(460px, calc(100vw - 36px)); max-height: 60vh; overflow: auto; background: var(--panneau); border: 1px solid var(--trait-fort); border-radius: 8px; box-shadow: 0 18px 50px rgba(0,0,0,.5); } .be-p-t { padding: 12px 14px; border-bottom: 1px solid var(--trait); font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--doux); } .be-p-c { padding: 8px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--doux); } .be-rev { display: flex; flex-direction: column; gap: 3px; text-align: left; background: transparent; border: 1px solid transparent; border-radius: 5px; padding: 8px 10px; cursor: pointer; color: var(--texte); font: inherit; font-size: 12.5px; } .be-rev:hover { background: var(--panneau-2); border-color: var(--trait); } .be-rev-t { color: var(--muet); font-size: 11.5px; } /* ============================================================================================ LES ICÔNES DE LA BARRE D'ÉDITION Un bouton doit dire ce qu'il FAIT avant qu'on ait lu son nom. Les dessins vivent dans `editeur.js` (SVG inline — la page n'embarque aucune bibliothèque d'icônes et n'appelle aucun serveur tiers) ; ici vit leur mise en place. ============================================================================================ */ .be-f, .be-b { display: inline-flex; align-items: center; gap: 6px; } .be-i { width: 15px; height: 15px; flex: 0 0 auto; } .be-b .be-i { width: 14px; height: 14px; opacity: .85; } #be-forme .be-g { display: inline-flex; align-items: center; gap: 5px; } #be-forme .be-g .be-i { width: 13px; height: 13px; opacity: .6; } /* L'APERÇU — la taille et la couleur se montrent mieux par l'exemple qu'en pictogramme : « Aa+ » s'affiche plus grand, « Accent » s'affiche en bleu. ⚠️ Ces règles ne sont PAS celles du rendu : les classes de mise en forme sont scopées à `[data-bloc]` et ne touchent donc jamais un bouton. C'est un aperçu BORNÉ — l'ordre des tailles est le même que celui du texte, les valeurs sont plafonnées pour tenir dans une barre d'outils, et les couleurs viennent des mêmes variables. Si l'un dérive de l'autre le bouton paraîtra un peu faux ; rien ne cassera, et rien ne mentira sur ce qui est publié. */ #be-forme .be-ap.tx-petit { font-size: 10px; } #be-forme .be-ap.tx-normal { font-size: 12px; } #be-forme .be-ap.tx-grand { font-size: 14px; } #be-forme .be-ap.tx-geant { font-size: 16px; font-weight: 600; letter-spacing: -.01em; } #be-forme .be-ap.po-titre { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-weight: 600; letter-spacing: -.01em; } #be-forme .be-ap.po-texte { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } #be-forme .be-ap.po-mono { font-family: var(--mono); font-size: 11px; } /* La PASTILLE porte la couleur qu'elle applique — c'est l'icône la plus honnête possible. */ #be-forme .be-pastille::before { content: ''; width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: currentColor; box-shadow: 0 0 0 1px rgba(255,255,255,.12); } #be-forme .be-pastille.cl-muet { color: var(--muet); } #be-forme .be-pastille.cl-doux { color: var(--doux); } #be-forme .be-pastille.cl-fort { color: var(--texte); } #be-forme .be-pastille.cl-accent { color: var(--bleu); } #be-forme .be-pastille:hover { background: var(--panneau-2); } /* Retirer un bloc est le seul geste qu'on ne défait pas d'un clic : il se signale au survol. */ .be-f.be-danger:hover { color: #e07a7a; border-color: rgba(224,122,122,.6); } .be-lien { display: inline-flex; align-items: center; gap: 6px; } .be-lien .be-i { width: 13px; height: 13px; opacity: .75; } /* ============================================================================================ LES PAGES LÉGALES — mentions, confidentialité, conditions (24/08). Tout est porté par `body.legal` : ces règles ne peuvent donc pas déborder sur la vitrine, la présentation ni les pages créées en ligne, qui partagent pourtant la même feuille. Une seule feuille possède l'identité — trois copies d'un même gabarit finiraient par diverger, et c'est toujours celle qu'on ne relit pas qui garde l'ancienne adresse. ============================================================================================ */ body.legal { margin: 0; background: var(--fond); color: var(--texte); font: 400 16px/1.68 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; min-height: 100vh; } body.legal * { box-sizing: border-box; } body.legal a { color: var(--bleu); text-decoration: none; } body.legal a:hover { text-decoration: underline; } body.legal .dedans { width: 100%; max-width: 760px; margin: 0 auto; padding: 0 24px; } body.legal .nav { border-bottom: 1px solid var(--trait); } body.legal .nav .dedans { display: flex; align-items: center; gap: 20px; height: 62px; max-width: 900px; } body.legal .marque { font: 500 15px/1 system-ui, sans-serif; color: var(--texte); } body.legal .nav .droite { margin-left: auto; display: flex; gap: 18px; font-size: 14px; flex-wrap: wrap; } body.legal .nav .droite a { color: var(--doux); } body.legal main { flex: 1; padding: 56px 0 80px; } body.legal h1 { font: 600 clamp(30px, 5vw, 42px)/1.1 system-ui, sans-serif; letter-spacing: -.025em; margin: 0 0 10px; text-wrap: balance; } body.legal .maj { color: var(--muet); font: 400 13px/1 var(--mono); margin: 0 0 40px; } body.legal h2 { font: 600 20px/1.3 system-ui, sans-serif; letter-spacing: -.015em; margin: 44px 0 12px; padding-top: 22px; border-top: 1px solid var(--trait); text-wrap: balance; } body.legal h3 { font: 600 15px/1.4 system-ui, sans-serif; margin: 26px 0 8px; } body.legal p { margin: 0 0 14px; } body.legal ul { margin: 0 0 16px; padding-left: 20px; } body.legal li { margin: 6px 0; } body.legal strong { font-weight: 600; } body.legal code { font: 400 13.5px/1.5 var(--mono); background: var(--panneau); border: 1px solid var(--trait); border-radius: 4px; padding: 1px 5px; } /* Un ENCADRÉ pour ce qui doit être lu même en diagonale — la phrase qui rassure ou qui engage. */ body.legal .encadre { border: 1px solid var(--trait); border-left: 3px solid var(--bleu-sourd); border-radius: 0 8px 8px 0; background: var(--panneau); padding: 16px 18px; margin: 18px 0; } body.legal .encadre p:last-child { margin-bottom: 0; } /* ⚠️ UN BLANC SE VOIT. Un `[À COMPLÉTER]` en texte courant se lit comme du contenu et part en ligne sans que personne ne le remarque : celui-ci est teinté, encadré, en chasse fixe. */ body.legal .trou { background: rgba(210,165,61,.14); border: 1px solid rgba(210,165,61,.5); border-radius: 4px; padding: 1px 6px; font: 500 13.5px/1.5 var(--mono); color: #d2a53d; } body.legal .tableau { overflow-x: auto; } body.legal table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14.5px; } body.legal th, body.legal td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--trait); vertical-align: top; } body.legal th { font: 500 11px/1.4 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--muet); } body.legal footer { border-top: 1px solid var(--trait); padding: 26px 0; color: var(--muet); font-size: 13px; } body.legal footer .dedans { display: flex; gap: 10px 22px; flex-wrap: wrap; align-items: center; max-width: 900px; } body.legal footer a { color: var(--muet); } body.legal footer .fin { margin-left: auto; } @media (max-width: 680px) { body.legal footer .fin { margin-left: 0; } }