/* * FAB Nord — additions propres au portail (feuille n° 3). * * POURQUOI CE FICHIER EXISTE * `assets/css/ct.css` est la feuille de la maquette de référence, reprise * telle quelle (voir son en-tête). Elle ne connaît que ce que la maquette * contenait : un document unique, sans formulaire serveur, sans message * flash, sans lien d'évitement. Le portail, lui, a ces trois choses. Plutôt * que de les glisser dans `ct.css` — ce qui rendrait impossible toute * comparaison ultérieure avec la maquette —, elles vivent ici. * * ORDRE DE CHARGEMENT (inc/partials/entete.php) * 1. polices.css les @font-face, servies par le site lui-même * 2. ct.css la charte, verbatim * 3. portail.css ce fichier — il passe donc APRÈS et peut ajuster * 4. legacy.css seulement sur les pages pas encore reprises sur la * charte, et lui-même cantonné sous `.zone-legacy` * * RÈGLE : on n'écrit ici que ce que la maquette n'avait pas. Aucun réglage * qui contredirait `ct.css` — si un écart est nécessaire, il se discute et * se documente à sa ligne. Tous les jetons employés (`--or`, `--texte-2`, * `--bord`, `--r`, `--e3`…) sont ceux de `ct.css` : cette feuille n'en * définit aucun de son côté. */ /* ------------------------------------------------------------------ * 1. Lien d'évitement * * La maquette n'en avait pas (document unique, navigation au clavier * traitée autrement). Il est obligatoire ici : c'est le premier élément * focusable de chaque page, il saute la barre de navigation et les six * entrées du menu pour atterrir sur le contenu. * * Il ne s'appelle PAS `.saut` : dans `ct.css`, `.saut` est le petit bloc * flottant « remonter / descendre » en bas à droite. Deux sens pour un même * nom dans deux feuilles chargées ensemble, c'est la collision garantie. * ------------------------------------------------------------------ */ .lien-saut{ position:fixed; top:10px; left:10px; z-index:120; transform:translateY(-200%); padding:11px 18px; border-radius:99px; background:var(--nuit); color:var(--texte); border:1px solid var(--bord-fort); font:700 14px var(--f); text-decoration:none; box-shadow:0 18px 40px -22px rgba(0,0,0,.9); } .lien-saut:focus-visible{ transform:none; } /* ------------------------------------------------------------------ * 2. Messages flash * * Posés par `flash()` (inc/helpers.php) et rendus par `entete.php` en tête * de
, sur TOUTES les pages : c'est le retour qui suit un envoi de * formulaire, une connexion, une suppression. Trois types seulement — * succès, erreur, information — et un liseré de couleur, sans icône : la * couleur seule ne porte jamais l'information, le texte du message se * suffit à lui-même. * ------------------------------------------------------------------ */ .messages{ max-width:var(--lg); margin:0 auto; padding:var(--e4) var(--e4) 0; display:grid; gap:10px; } .message{ border:1px solid var(--bord); border-left-width:3px; border-radius:var(--r); padding:14px 18px; background:rgba(14,43,60,.55); color:var(--texte); font-size:15px; } .message-ok{ border-left-color:var(--ok); } .message-err{ border-left-color:var(--hausse); } .message-info{ border-left-color:var(--or); } /* `ct.css` ne remet à zéro aucune liste — chaque classe s'en charge elle-même. Une liste d'erreurs dans un message héritait donc du retrait de 40 px du navigateur, qui la décalait hors de son bloc. */ .message ul{ margin:6px 0 0; padding-left:1.1em; display:grid; gap:4px; } /* ------------------------------------------------------------------ * 3. Menu du site : le volet « compte » * * Les six entrées du menu viennent de la maquette, verbatim. Le portail y * ajoute ce que la maquette ignorait : l'accès au compte, et * l'administration pour qui en a le droit. Ces entrées sont séparées des * six premières par un filet, pour qu'on voie qu'elles relèvent d'autre * chose que la visite du site. * ------------------------------------------------------------------ */ .menu-mobile .menu-filet{ height:1px; margin:6px 12px; background:var(--bord); border:0; } .menu-mobile .menu-compte .ic{ color:var(--focus); } /* ------------------------------------------------------------------ * 4. Zone de contenu des pages pas encore reprises * * Tant qu'une page vit sur l'ancien gabarit (compte, tickets, * administration…), son contenu s'affiche dans ce conteneur, qui lui rend * la largeur de lecture et l'espacement du site. Il disparaîtra avec la * dernière page reprise — en même temps que `legacy.css`. * ------------------------------------------------------------------ */ .zone-legacy{ max-width:var(--lg); margin:0 auto; padding:var(--e5) var(--e4) var(--e6); } .zone-legacy > .titre-page{ margin:0 0 var(--e5); } .titre-page h1{ font:800 clamp(28px, 4vw, 44px)/1.1 var(--f); letter-spacing:-.02em; margin:6px 0 0; } .titre-page .fil{ font-family:var(--f-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--texte-3); margin:0; } .titre-page .actions{ margin-top:var(--e3); display:flex; gap:10px; flex-wrap:wrap; } /* ------------------------------------------------------------------ * 5. Pied : l'adresse du service * * La maquette proposait ici un formulaire d'abonnement à une lettre * d'information. Il répondait « C'est noté » sans rien enregistrer, et * aucune liste de diffusion n'existe : il a été retiré (voir * `inc/partials/pied.php`). À sa place, l'adresse du service, dans la * même colonne et la même graisse que le texte qu'il accompagnait. * ------------------------------------------------------------------ */ .pied-contact{ font-size:14px; color:var(--texte-2); margin:var(--e3) 0 0; max-width:38ch; line-height:1.7; } .pied-contact a{ color:var(--texte); text-decoration-color:var(--bord-fort); } .pied-contact a:hover{ color:var(--or); } /* ------------------------------------------------------------------ * 6. Les écrans de compte * * La maquette n'avait NI compte NI mot de passe : le suivi d'une demande * s'y faisait avec un numéro tiré au sort, et les inscriptions aux séances * étaient signées d'un nom tapé à la main, rangé dans le navigateur. Il n'y * a donc aucun modèle à reprendre pour la connexion, la création de compte * ou la confirmation d'adresse : ces trois écrans sont écrits avec le * vocabulaire de la charte (`.form`, `.champ`, `.saisie`, `.aide`), et ce * qui manquait est ici. * * Aucune de ces règles ne contredit `ct.css` : elles ajoutent une largeur * de lecture, une case à cocher et un champ-piège que la charte n'avait pas * l'occasion d'avoir. * ------------------------------------------------------------------ */ /* Colonne étroite : un formulaire de connexion sur toute la largeur d'un écran de 1 920 px se lit mal, et `.form` de `ct.css` ne borne rien — dans la maquette il vivait dans une grille à deux colonnes qui s'en chargeait. */ .ecran-compte{ max-width:560px; display:grid; gap:var(--e4); } .ecran-compte .form{ gap:var(--e3); } .ecran-compte .btn{ justify-self:start; } .ecran-compte .pied-form{ margin:0; font-size:14px; color:var(--texte-2); } .ecran-compte .pied-form a{ color:var(--focus); } /* Case à cocher : la charte n'en contenait aucune. L'étiquette est cliquable sur toute sa longueur, et la case garde son repère de focus. */ .champ-case{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px; align-items:start; cursor:pointer; } .champ-case input[type="checkbox"]{ width:18px; height:18px; margin-top:2px; accent-color:var(--or); } .champ-case input[type="checkbox"]:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; } .champ-case span{ font-size:14px; line-height:1.55; color:var(--texte-2); } .champ-case a{ color:var(--focus); } /* Le champ-piège de l'inscription. * * ATTENTION : cette règle N'EST PAS cosmétique. `inscription.php` pose un * champ que seule une machine remplit ; s'il est visible, une personne le * remplit de bonne foi et son inscription est silencieusement abandonnée. * La classe existait dans `legacy.css`, qui n'est plus chargée sur une page * reprise sur la charte : sans ce bloc, le piège se refermerait sur les * gens qu'il devait protéger. * * `display:none` est écarté à dessein : plusieurs robots ignorent les * champs non rendus, et c'est exactement ceux-là qu'on veut attraper. */ .hors-ecran{ position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; } /* Le mot « facultatif » à côté d'une étiquette. */ .facultatif{ font-weight:400; color:var(--texte-3); } /* ------------------------------------------------------------------ * 7. Mon compte * * Même raison qu'au § 6 : la maquette n'avait pas de compte. Trois * ajouts seulement, aucun ne contredit `ct.css`. * ------------------------------------------------------------------ */ /* Les blocs de `compte.php` sont des `.form` de la charte, mais chacun porte un vrai titre : `.form` est une grille, rien n'y annule la marge par défaut d'un `

`, qui s'ajouterait à son `gap`. */ .ecran-compte .form h3{ margin:0; } /* La liste des accès. * * L'ancienne page en faisait un `` de trois * colonnes — classe de `legacy.css`, qui n'est plus chargée ici. La * charte n'a pas de tableau, et n'en a pas besoin : ce n'est pas un * croisement de deux dimensions, c'est une liste d'accès dont chacun * porte un état. En liste, elle tient aussi sur un téléphone, ce qu'un * tableau à trois colonnes ne fait pas. */ .acces-l{ list-style:none; margin:0; padding:0; display:grid; gap:1px; border:1px solid var(--bord); border-radius:var(--r-sm); overflow:hidden; background:var(--bord); } .acces-l li{ background:var(--abysse); padding:12px 16px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 12px; align-items:baseline; } .acces-l li b{ font-size:14.5px; } .acces-l li .d{ grid-column:1 / -1; font-size:12.5px; color:var(--texte-3); } .acces-l li .statut{ margin-left:0; justify-self:end; } /* L'intitulé d'un groupe d'accès : une ligne de rupture, pas un accès. */ .acces-l .acces-g{ grid-template-columns:1fr; padding:9px 16px; background:rgba(14,43,60,.5); font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--texte-3); } /* Un accès fermé. `.statut` de `ct.css` est doré — la couleur de ce qui avance ; un accès fermé n'avance pas. Modificateur, pas contradiction : seul le fond et la couleur du texte changent. */ .statut.ferme{ background:rgba(166,192,206,.12); color:var(--texte-3); } /* Le bouton qui supprime le compte. * * `.btn-danger` vivait dans `legacy.css`. La charte n'a que `.btn` (doré, * l'action qu'on attend) et `.btn-verre` (neutre) : rendre « Supprimer * définitivement mon compte » avec l'un ou l'autre le ferait passer pour * une action ordinaire. Il reprend la géométrie de `.btn-verre` et la * seule couleur d'alerte de la charte, `--hausse`. */ .btn-danger{ background:rgba(255,77,87,.10); color:var(--texte); border-color:rgba(255,77,87,.45); box-shadow:none; } .btn-danger:hover{ border-color:rgba(255,77,87,.9); box-shadow:0 10px 30px -16px rgba(255,77,87,.8); } /* ------------------------------------------------------------------ * 8. Confidentialité : l'inventaire des données * * La maquette n'a pas de page de confidentialité, donc pas de forme à * reprendre. L'inventaire était un tableau à quatre colonnes de * `legacy.css` ; il devient une fiche par donnée, chacune portant ses * trois attributs dans la grille `.su-l` de `ct.css` — déjà écrite, déjà * repliable. Ne restent à définir ici que l'espacement des fiches et la * remise à zéro des marges que le navigateur pose d'office sur `
`. * ------------------------------------------------------------------ */ .don-l{ display:grid; gap:var(--e3); } .don-l article{ padding:var(--e4); display:grid; gap:var(--e3); } .don-l h4{ margin:0; font-size:16px; font-weight:800; letter-spacing:-.015em; color:var(--texte); } /* La remise a zero des marges de `
`/`
` etait ecrite ici, sous * `.don-l`. Elle n'a rien de propre a l'inventaire : `.su-l` de `ct.css` * prevoit `dt` mais laisse le navigateur poser son retrait de 40 px sur * `
`, et trois pages s'en servent deja. La regle est donc portee par * `.su-l` lui-meme, une fois pour toutes. */ dl.su-l{ margin:0; } .su-l dd{ margin:0; } /* ------------------------------------------------------------------ * 9. Téléchargements * * La maquette ne distribue aucun binaire : il n'y a pas de forme à * reprendre. La page emprunte donc à la charte tout ce qui existe déjà — * la fiche de la page de suivi (`.su-carte`, `.su-ref`, `.su-l`), le * journal des versions de l'état des services (`.journal`, `.version`) — * et ne définit ici que ce qu'aucune des deux ne porte : l'espacement * entre logiciels, et le dépliant `
`. * * Le dépliant reprend le geste de la foire aux questions de `etat.php` * (`.questions details`) : même fond, même marqueur + / −, sans le * prendre à `.questions` dont il est le descendant direct. * ------------------------------------------------------------------ */ .dl, .log{ display:grid; gap:var(--e6); } .dl-g, .log-g{ display:grid; gap:var(--e3); } .dl-g > h3, .log-g > h3{ margin:0; font-size:clamp(20px, 2.2vw, 26px); font-weight:800; letter-spacing:-.03em; } .dl-accroche{ margin:0 0 var(--e2); font-size:14.5px; color:var(--texte-2); max-width:62ch; } .dl-actions{ display:flex; flex-wrap:wrap; gap:var(--e3); } .dl-mono{ font-family:var(--f-mono); font-size:13px !important; letter-spacing:.02em; } .dl-plus{ padding:0 var(--e4); border-radius:var(--r-sm); background:rgba(14,43,60,.5); border:1px solid var(--bord); } .dl-plus summary{ cursor:pointer; padding:var(--e3) 0; font-weight:700; font-size:14.5px; list-style:none; display:flex; gap:var(--e3); align-items:baseline; } .dl-plus summary::-webkit-details-marker{ display:none; } .dl-plus summary::after{ content:"+"; margin-left:auto; color:var(--texte-3); } .dl-plus[open]{ padding-bottom:var(--e3); } .dl-plus[open] summary::after{ content:"\2212"; } .dl-plus p{ margin:var(--e2) 0 0; font-size:13.5px; color:var(--texte-2); } .dl-plus code{ font-family:var(--f-mono); font-size:12.5px; color:var(--texte); word-break:break-all; } .dl-plus .journal{ margin-top:var(--e3); } .dl-plus .version .lien-fl{ margin-top:8px; } /* ------------------------------------------------------------------ */ /* 10. Fiche d'un logiciel (`logiciel.php`) */ /* ------------------------------------------------------------------ */ /* La page est le prolongement du volet que `logiciels.php` ouvre sur la * meme fiche : elle en reprend les classes — `.specs`, `.modules`, * `.engage`, `.journal` / `.version` —, toutes deja ecrites dans `ct.css`. * Le rythme des intertitres est celui des groupes de `telechargements.php`, * ecrit une seule fois au § 9. Ne restent ici que trois choses que la * charte n'a pas : le corps de texte long, la grille des apercus, et la * largeur des `.specs` — figee a quatre colonnes dans `ct.css` pour le * volet, alors que la fiche n'en porte que trois. */ .log .specs{ grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); margin-top:0; } .log-para{ margin:0; font-size:15.5px; line-height:1.7; color:var(--texte-2); max-width:72ch; } .log-g .engage li{ padding-top:var(--e3); padding-bottom:var(--e3); } .log-g .engage li::before{ top:var(--e3); bottom:var(--e3); } .log-capt{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:var(--e3); } .log-capt a{ display:block; border-radius:var(--r-sm); overflow:hidden; border:1px solid var(--bord); } .log-capt a:hover{ border-color:var(--bord-fort); } .log-capt img{ display:block; width:100%; height:auto; } /* ------------------------------------------------------------------ */ /* 11. Tableau de bord de la maintenance (`maintenance.php`) */ /* ------------------------------------------------------------------ */ /* La maquette n'a pas de tableau de bord : rien a reprendre. La page * emprunte donc tout — la fiche de suivi (`.su-carte`, `.su-haut`, * `.su-l`), la liste des acces (`.acces-l`, § 7), le chiffre des pages * de gestion (`.pg-chiffre`) — et ne definit ici que les deux grilles * qui les disposent, plus le titre d'une fiche : `.su-haut` attendait * une reference en chiffres (`.su-ref`), elle porte ici un nom de * logiciel. */ .mnt-l{ display:grid; gap:var(--e3); grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); } .mnt-l h4{ margin:0; font-size:16px; font-weight:800; letter-spacing:-.015em; color:var(--texte); } .mnt-l .su-carte{ align-content:start; } .mnt-c{ display:grid; gap:var(--e3); grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); } .mnt-c a{ display:grid; gap:4px; padding:var(--e4); border:1px solid var(--bord); border-radius:var(--r-sm); background:rgba(14,43,60,.5); text-decoration:none; color:inherit; transition:border-color .2s var(--courbe); } .mnt-c a:hover{ border-color:var(--bord-fort); } .mnt-c span{ font-size:13px; color:var(--texte-3); } /* ------------------------------------------------------------------ */ /* 12. File des tickets (`tickets.php`) */ /* ------------------------------------------------------------------ */ /* La liste elle-meme est celle des acces (§ 7) : rien a redefinir. Ne * restent ici que les filtres de l'administration, la gravite bloquante * et la pagination — cette derniere n'existait que dans `legacy.css`, * et la maquette ne pagine rien, n'ayant aucune liste assez longue pour * en avoir besoin. */ .tk-filtres{ padding:var(--e4); display:grid; gap:var(--e4); } .tk-champs{ display:grid; gap:var(--e4); grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); } /* `.acces-l li b` est un selecteur de descendance : sans cette remise a * l'echelle, la gravite de la seconde ligne prendrait la taille du titre * de la premiere. Elle emprunte la seule couleur d'alerte de la charte. */ .acces-l li .d b{ font-size:inherit; color:var(--hausse); } .pagination{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:var(--e4); } .pagination a, .pagination span{ display:inline-flex; align-items:center; min-width:38px; justify-content:center; padding:7px 12px; border:1px solid var(--bord); border-radius:var(--r-sm); font-size:13.5px; text-decoration:none; color:var(--texte-2); background:rgba(14,43,60,.5); transition:border-color .2s var(--courbe); } .pagination a:hover{ border-color:var(--bord-fort); color:var(--texte); } .pagination .est-courante{ border-color:var(--focus); color:var(--texte); font-weight:700; } .pagination .est-inactive{ opacity:.45; } /* ------------------------------------------------------------------ */ /* 13. Le champ de depot d'une capture, et ce qui l'entoure */ /* ------------------------------------------------------------------ */ /* `assets/js/fabnord.js` est charge sur TOUTES les pages, reprises * comprises. Le compteur de caracteres, le pochoir de masquage et la * visionneuse d'image FONCTIONNENT donc sur une page reprise — il leur * manquait seulement leur mise en forme, restee dans `legacy.css` sous * le prefixe `.zone-legacy`. Les voici ecrites dans la charte. * * BOGUE TROUVE AU PASSAGE, ANTERIEUR A LA REPRISE. `fabnord.js` construit * la visionneuse et l'attache a `document.body` (l. 147), donc HORS de * `.zone-legacy` : le selecteur `.zone-legacy .visionneuse` de `legacy.css` * ne l'a jamais atteinte. Sur les pages pas encore reprises, cliquer une * vignette empile donc l'image brute en bas de page au lieu de l'ouvrir * par-dessus. Les regles ci-dessous ne sont volontairement PAS prefixees : * elles reparent aussi les pages legacy, le temps qu'elles soient reprises. */ .compteur{ display:block; margin-top:6px; font-size:12.5px; text-align:right; color:var(--texte-3); font-variant-numeric:tabular-nums; } .compteur.est-proche-limite{ color:var(--focus); } .compteur.est-au-dela{ color:var(--hausse); font-weight:600; } /* `.champ label` de `ct.css` met le libelle en gras ; la mention * « (facultatif) » doit rester en retrait a l'interieur de ce gras. */ .est-facultatif{ font-weight:400; font-size:.88em; color:var(--texte-3); } /* L'avertissement RGPD du champ d'image detourne `.message-err` * deliberement (cf. le commentaire de `inc/partials/champ_image.php`) : * sa premiere phrase se detache sur sa propre ligne. */ .champ-image{ gap:var(--e3); } .champ-image .message-err strong{ display:block; margin-bottom:.25em; } /* Un champ de fichier ne se dessine pas comme une zone de saisie : seul * son bouton est peint par le navigateur. On borde le champ et on habille * ce bouton-la. */ .saisie-fichier{ padding:10px 12px; font-size:13.5px; cursor:pointer; } .saisie-fichier::file-selector-button{ margin-right:12px; padding:6px 12px; border:1px solid var(--bord-fort); border-radius:999px; background:rgba(14,43,60,.7); color:var(--texte-2); font:inherit; font-size:12.5px; cursor:pointer; } .saisie-fichier::file-selector-button:hover{ border-color:var(--focus); color:var(--texte); } .pochoir{ margin-top:var(--e3); padding:var(--e3); border:1px solid var(--bord); border-radius:var(--r-sm); background:rgba(14,43,60,.5); display:grid; gap:var(--e3); } .pochoir-barre{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; } .pochoir-etat{ margin-left:auto; font-size:12.5px; color:var(--texte-3); } .pochoir-toile{ display:flex; overflow:auto; max-height:60vh; border:1px dashed var(--bord-fort); border-radius:var(--r-sm); background:var(--abysse); } .pochoir-toile canvas{ max-width:100%; cursor:crosshair; } .pochoir-toile canvas.est-masquage{ cursor:cell; } .media-galerie{ list-style:none; margin:var(--e3) 0 0; padding:0; display:grid; gap:var(--e2); grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); } .media-vignette{ display:block; overflow:hidden; aspect-ratio:4 / 3; border:1px solid var(--bord); border-radius:var(--r-sm); background:var(--abysse); transition:border-color .2s var(--courbe); } .media-vignette img{ width:100%; height:100%; object-fit:cover; } a.media-vignette:hover, a.media-vignette:focus-visible{ border-color:var(--focus); } .visionneuse{ position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center; padding:var(--e5); background:rgba(4,11,24,.88); } .visionneuse[hidden]{ display:none; } .visionneuse img{ max-width:100%; max-height:90vh; border-radius:var(--r); box-shadow:0 30px 80px rgba(0,0,0,.6); } .visionneuse-fermer{ position:absolute; top:var(--e4); right:var(--e4); width:40px; height:40px; border-radius:50%; border:1px solid var(--bord-fort); background:rgba(8,40,58,.9); color:var(--texte); font-size:21px; line-height:1; cursor:pointer; } .visionneuse-fermer:hover{ border-color:var(--focus); } /* ------------------------------------------------------------------ */ /* 14. Un ticket et sa conversation (`ticket.php`) */ /* ------------------------------------------------------------------ */ /* La maquette ne montre aucune conversation : le plus proche qu'elle ait * est le journal des versions (`.journal`, `.version`), une suite de * blocs dates. C'est ce rythme-la qui est repris ici — un encadre de * verre par message, surtitre en `.oeil`, texte en `.log-para`. Une note * interne se distingue par un filet dore a gauche : la charte n'a pas de * couleur d'accent tiede, et `--or` est deja la couleur de ce qui vient * du service. */ .tk{ display:grid; gap:var(--e4); } .tk-corps, .tk-adm, .tk-rep, .tk-msg{ padding:var(--e4); border-radius:var(--r); display:grid; gap:var(--e3); } .tk h3{ margin:0; font-size:17px; font-weight:800; letter-spacing:-.015em; color:var(--texte); } .tk-conv{ display:grid; gap:var(--e3); } .tk-adm .oeil{ margin:0; } .tk-adm-g{ display:grid; gap:var(--e4); grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); } .tk-adm form.champ{ align-content:start; } .tk-msg{ gap:10px; } .tk-msg .oeil{ margin:0; } .tk-msg.interne{ border-left:3px solid var(--or); } .tk-msg-pied{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--e3); padding-top:var(--e3); border-top:1px solid var(--bord); } /* ------------------------------------------------------------------ */ /* 15. Les deux formulaires de depot (`poser.php`, `nouveau-ticket.php`) */ /* ------------------------------------------------------------------ */ /* Ces deux pages n'ont rien a elles : `.form`, `.rangee`, `.champ`, * `.saisie` et `.aide` sont toutes de `ct.css`. Ne reste que le defaut * de saisie, qui s'affichait jusqu'ici dans le gris discret de `.aide` — * il se lisait donc comme un conseil et non comme un refus. */ .aide.erreur{ color:var(--hausse); font-weight:600; } /* ===================================================================== § 16 — LES PAGES DE SÉANCES (session.php, mon-academy.php) `ct.css` porte déjà tout le vocabulaire : `.seance-h` pour la ligne de date et d'état, `.su-l` pour un intitulé et sa valeur, `.su-vide` pour un bloc sans contenu. Ne manquaient que les boîtes qui les portent. ===================================================================== */ .sn-l{ margin:0 0 var(--e4); padding:var(--e4); } .sn-b{ margin-top:var(--e4); padding:var(--e4); display:grid; gap:var(--e3); } .sn-b h3{ margin:0; font-size:clamp(18px, 2vw, 22px); font-weight:800; letter-spacing:-.01em; } .sn-b .oeil{ margin:0; } .sn-b form{ margin:0; } .sn-b .message{ margin:0; } .sn-b .su-l{ margin:0; } .sn-b .aide{ margin:0; max-width:72ch; } /* Le bloc d'administration n'est pas une boîte de verre : c'est la page qui continue, avec sa propre liste d'accès. */ .sn-b:not(.verre){ padding:var(--e4) 0 0; } /* ===================================================================== § 17 — MES MASTERCLASSES (mon-academy.php) Trois comptes réels, et les cartes de séance de `ct.css` réemployées telles quelles. `.seance-c` y gagne seulement de quoi porter un lien dans son titre et une rangée de boutons en pied : sur la page du programme, la carte entière était le lien. ===================================================================== */ .ma-ch{ display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:var(--e4); margin-bottom:var(--e5); } .ma-ch > div{ padding:var(--e4); } .ma-ch .pg-h4{ margin:0 0 var(--e2); } .ma-ch .pg-chiffre{ margin:0; color:var(--focus); } .ma-ch .pg-chiffre small{ display:block; margin:6px 0 0; } .seance-c .seance-t a{ color:inherit; text-decoration:none; } .seance-c .seance-t a:hover{ color:var(--focus); } .seance-c .dl-actions{ margin-top:auto; padding-top:var(--e2); } .seance-c .message{ margin:0; } .seance-c .aide{ margin:0; }