/* ===================================================================== Authentification par commune — feuille de style Registre repris des applications existantes (projet) : sobre et lisible, gamme sarcelle et vert d'eau inspirée du template Finexo (généralisation du 06/08/2026, docs/specs/ui-inspiration-finexo.md). Les NOMS des jetons --bleu* sont conservés (contrat menu.css). ===================================================================== */ :root { color-scheme: light; --encre: #1c2532; --encre-douce: #5a6472; --papier: #ecf3e9; --blanc: #ffffff; --surface: #ffffff; --bleu: #005554; --bleu-fonce: #003f3e; --bleu-texte: #005554; --bleu-pale: #dceeeb; --bleu-pale-survol: #cbe4e0; --bleu-bord: #a9cfca; --rouge: #b3352e; --rouge-pale: #f9ebea; --rouge-pale-survol: #f3ddda; --rouge-bord: #e3bdba; --vert: #2f6b45; --vert-pale: #e9f2ec; --vert-bord: #bfd8c8; --ambre: #806419; --ambre-pale: #fdf3df; --ambre-bord: #ecd9a8; /* fond plein de la tuile d'alerte du composant commun (contrat de lib/public/tuiles.css) : rouge orangé assombri jusqu'à 4,82:1 avec le blanc, seuil du texte de petite taille (RGAA 3.2) */ --tuile-alerte-fond: #d63410; --trait: #d3ded9; --champ-bord: #758885; --focus: #4d70b3; --ombre-carte: 0 5px 14px rgba(28, 37, 50, .07); --ombre: 0 5px 14px rgba(28, 37, 50, .07); /* contrat menu.css v2 */ --rayon: 8px; /* contrôles (recette Finexo réécrite maison) */ --rayon-carte: 12px; /* surfaces */ --hauteur-entete: 3.5rem; /* contrat menu.css v2, même valeur que projet */ } /* Palette sombre (registre repris du bloc sombre de l'appli projet). Appliquée dans deux cas : réglage système sombre non contredit par un forçage clair, ou forçage sombre explicite — l'attribut data-theme est posé sur par le layout d'après le cookie du sélecteur de thème. Les DEUX blocs ci-dessous doivent rester identiques. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="clair"]) { color-scheme: dark; --encre: #e2e6ec; --encre-douce: #a5aeba; --papier: #1a1c31; /* nuit indigo Finexo */ /* --blanc reste blanc : texte sur fond profond, fond du QR code */ --surface: #282b44; --bleu: #0d6660; --bleu-fonce: #117a72; --bleu-texte: #7fc0bc; --bleu-pale: #16333a; --bleu-pale-survol: #1c4046; --bleu-bord: #2e5a60; --rouge: #e0837c; --rouge-pale: #3a2422; --rouge-pale-survol: #4a2e2b; --rouge-bord: #6e3a36; --vert: #85c39d; --vert-pale: #1e2f25; --vert-bord: #3a5c47; --ambre: #d7b25f; --ambre-pale: #332b18; --ambre-bord: #66582d; --trait: #363a55; --champ-bord: #6f7890; --focus: #5b81c0; --ombre-carte: 0 5px 14px rgba(0, 0, 0, .45); --ombre: 0 5px 14px rgba(0, 0, 0, .45); /* contrat menu.css v2 */ /* même rouge d'alerte qu'en clair : une couleur d'alerte gagne à ne pas changer d'un thème à l'autre */ --tuile-alerte-fond: #d63410; } } :root[data-theme="sombre"] { color-scheme: dark; --encre: #e2e6ec; --encre-douce: #a5aeba; --papier: #1a1c31; /* nuit indigo Finexo */ /* --blanc reste blanc : texte sur fond profond, fond du QR code */ --surface: #282b44; --bleu: #0d6660; --bleu-fonce: #117a72; --bleu-texte: #7fc0bc; --bleu-pale: #16333a; --bleu-pale-survol: #1c4046; --bleu-bord: #2e5a60; --rouge: #e0837c; --rouge-pale: #3a2422; --rouge-pale-survol: #4a2e2b; --rouge-bord: #6e3a36; --vert: #85c39d; --vert-pale: #1e2f25; --vert-bord: #3a5c47; --ambre: #d7b25f; --ambre-pale: #332b18; --ambre-bord: #66582d; --trait: #363a55; --champ-bord: #6f7890; --focus: #5b81c0; --ombre-carte: 0 5px 14px rgba(0, 0, 0, .45); --ombre: 0 5px 14px rgba(0, 0, 0, .45); /* contrat menu.css v2 */ /* même rouge d'alerte qu'en clair : une couleur d'alerte gagne à ne pas changer d'un thème à l'autre */ --tuile-alerte-fond: #d63410; } * { box-sizing: border-box; } body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 1rem; line-height: 1.5; color: var(--encre); background: var(--papier); /* colonne pleine hauteur : la barre d'état reste au pied de la fenêtre même quand la page est courte */ min-height: 100vh; display: flex; flex-direction: column; } h1 { font-size: 1.35rem; margin: 0 0 .75rem; color: var(--bleu-texte); } h2 { font-size: 1.05rem; margin: 1rem 0 .5rem; color: var(--bleu-texte); } a { color: var(--bleu); } .centre { text-align: center; } /* ------------------------------------------------------------ en-tête */ /* La barre de menu (entête, navigation, hamburger, menus déroulants, pastille utilisateur) vit dans menu.css : copie conforme surveillée, commune aux quatre modules (outils/coherence/verifier.php). Ce fichier ne garde que les règles propres au module. */ /* gouvernail agrandi de la carte de connexion : posé sur la carte claire, il reprend le bleu des titres (le blanc de l'entête y serait invisible) */ .entete-picto.grande { width: 1.6rem; height: 1.6rem; display: inline-block; color: var(--bleu-texte); } /* ------------------------------------------------------------- contenu */ /* l'enveloppe .corps et la barre latérale vivent dans laterale.css (copie conforme surveillée, contrat de jetons en tête de ce fichier) ; ici, seulement la largeur du contenu propre au module */ .contenu { width: 100%; max-width: 62rem; margin: 0 auto; padding: 1.25rem 1rem 3rem; min-width: 0; } .contenu-centre { max-width: 62rem; padding-top: 8vh; } /* avec la barre latérale : pleine largeur (harmonisation avec projet) */ .avec-laterale .contenu { max-width: none; margin: 0; padding: 1.25rem 1.5rem 3rem; } .carte { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon-carte); padding: 1.25rem 1.5rem; box-shadow: var(--ombre-carte); } .carte-connexion { max-width: 26rem; margin: 0 auto; border-top: 3px solid var(--bleu); } .carte-connexion-entete { text-align: center; margin-bottom: 1rem; } .carte-connexion h1 { font-size: 1.2rem; margin: .25rem 0; } .sous-titre { color: var(--encre-douce); margin: 0; font-size: .95rem; } .grille-deux { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 1rem; align-items: start; } /* cartes empilées dans une même cellule de grille (Mon compte : Sécurité au-dessus de Double authentification) */ .pile-cartes { display: grid; gap: 1rem; align-content: start; } /* --------------------------------------------------------- formulaires */ label { display: block; margin: .9rem 0 .3rem; font-weight: 600; font-size: .95rem; } input[type="text"], input[type="password"], input[type="tel"] { width: 100%; padding: .5rem .6rem; border: 1px solid var(--champ-bord); border-radius: var(--rayon); font: inherit; background: var(--surface); color: var(--encre); } input:focus { outline: 2px solid var(--focus); outline-offset: 1px; } /* champ mot de passe avec bouton « afficher » : l'enveloppe et le bouton sont créés par mdp.js (amélioration progressive — sans JavaScript, le champ reste nu et masqué, aucun bouton mort) */ .champ-mdp { position: relative; display: block; } .champ-mdp input { padding-right: 2.7rem; } .mdp-bascule { position: absolute; top: 50%; right: .3rem; transform: translateY(-50%); display: inline-flex; padding: .25rem; border: none; border-radius: var(--rayon); background: none; color: var(--encre-douce); cursor: pointer; } .mdp-bascule:hover { color: var(--encre); } .mdp-bascule:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; } .mdp-bascule svg { width: 1.15rem; height: 1.15rem; } .champ-code { font-size: 1.4rem; letter-spacing: .35em; text-align: center; font-variant-numeric: tabular-nums; } /* Boutons : géométrie, fonctions et tailles dans /commun/boutons.css (boutons communs, docs/specs/boutons-communs.md). Ici, seuls les contextes du module. */ /* bouton de soumission sous les champs d'un formulaire : respiration */ form > .bouton { margin-top: 1rem; } .tableau td form > .bouton, form.en-ligne > .bouton { margin-top: 0; } .formulaire-secondaire { margin-top: .25rem; } .formulaire-secondaire > .bouton { margin-top: 0; } /* -------------------------------------------------------------- divers */ .flash { margin: 0 auto 1rem; max-width: 26rem; padding: .6rem .9rem; border: 1px solid; border-radius: var(--rayon); font-size: .95rem; } .contenu:not(.contenu-centre) .flash { max-width: none; } .flash-info { background: var(--bleu-pale); border-color: var(--bleu-bord); color: var(--bleu-texte); } .flash-succes { background: var(--vert-pale); border-color: var(--vert-bord); color: var(--vert); } .flash-erreur { background: var(--rouge-pale); border-color: var(--rouge-bord); color: var(--rouge); } .flash-alerte { background: var(--ambre-pale); border-color: var(--ambre-bord); color: var(--ambre); } .note { color: var(--encre-douce); font-size: .9rem; margin-top: 1rem; } .fiche { display: grid; grid-template-columns: auto 1fr; gap: .25rem .9rem; margin: .5rem 0; } .fiche dt { font-weight: 600; color: var(--encre-douce); } .fiche dd { margin: 0; overflow-wrap: anywhere; } .secret { font-size: 1.05rem; letter-spacing: .06em; } .qr { border: 1px solid var(--trait); border-radius: .4rem; padding: .4rem; background: var(--blanc); } .etat { display: inline-block; padding: .05rem .55rem; border: 1px solid; border-radius: 1rem; font-size: .85rem; font-weight: 600; vertical-align: middle; } .etat-actif { background: var(--vert-pale); border-color: var(--vert-bord); color: var(--vert); } .etat-inactif { background: var(--ambre-pale); border-color: var(--ambre-bord); color: var(--ambre); } /* accueil (tableau de bord) : portail des modules espacé des autres cartes ; écran de connexion : nom de la commune sous la marque */ .carte-modules { margin-bottom: 1rem; } .commune-connexion { margin: .1rem 0 .2rem; font-size: 1.05rem; font-weight: 700; color: var(--bleu-texte); } .portail-modules { display: flex; flex-wrap: wrap; gap: .6rem; margin: .5rem 0 0; } .choix-methode { border: 1px solid var(--trait); border-radius: var(--rayon); padding: .75rem 1rem; margin-top: 1rem; } .choix-methode h2 { margin-top: 0; } details { margin-top: .75rem; } summary { cursor: pointer; color: var(--bleu-texte); } /* filtres repliés d'une liste (journal…) : la carte entière est le dépliant, le summary sert de titre */ details.zone-filtres { margin: 0 0 1rem; } .zone-filtres > summary { font-weight: 600; } .zone-filtres[open] > summary { margin-bottom: .5rem; } /* --------------------------------------------- écrans d'administration */ .entete-page { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .75rem; } .entete-page h1 { margin: 0; } .carte-etroite { max-width: 36rem; } .carte-defilante { overflow-x: auto; } .tableau { width: 100%; border-collapse: collapse; } .tableau th { text-align: left; padding: .45rem .6rem; border-bottom: 2px solid var(--bleu-bord); color: var(--bleu-texte); font-size: .9rem; white-space: nowrap; } .tableau td { padding: .45rem .6rem; border-bottom: 1px solid var(--trait); vertical-align: top; } .tableau tbody tr:hover td { background: var(--bleu-pale); } .tableau-compact td, .tableau-compact th { padding: .3rem .5rem; font-size: .9rem; } .tableau-journal td:first-child { white-space: nowrap; } .tableau-journal .col-details { overflow-wrap: anywhere; font-size: .85rem; } .col-actions { text-align: right; white-space: nowrap; } .col-actions .bouton { margin-top: .25rem; } /* estompage d'une ligne désactivée : la classe _classe_ligne est portée par le en rendu large et par la carte en rendu étroit (composant commun Tableau, étude mobile §6.1) */ .ligne-inactive td, .carte-enr.ligne-inactive { color: var(--encre-douce); } .en-ligne { display: inline-block; margin: 0; } .etat-ferme { background: var(--rouge-pale); border-color: var(--rouge-bord); color: var(--rouge); } .etat-verrou { background: var(--ambre-pale); border-color: var(--ambre-bord); color: var(--ambre); } /* ------------------------------------------ formulaires (compléments) */ textarea, select, input[type="number"], input[type="date"] { width: 100%; padding: .5rem .6rem; border: 1px solid var(--champ-bord); border-radius: var(--rayon); font: inherit; background: var(--surface); color: var(--encre); } textarea:focus, select:focus, input[type="number"]:focus, input[type="date"]:focus { outline: 2px solid var(--focus); outline-offset: 1px; } .choix-groupes { margin: .9rem 0 0; padding: .6rem .9rem .75rem; border: 1px solid var(--trait); border-radius: var(--rayon); } .choix-groupes legend { font-weight: 600; font-size: .95rem; padding: 0 .3rem; } .case { display: block; margin: .25rem 0; font-weight: 400; } .case input { margin-right: .4rem; } .filtres { display: flex; flex-wrap: wrap; gap: .75rem; align-items: end; } .filtres > div { flex: 1 1 10rem; } .filtres label { margin-top: 0; } .pagination { display: flex; align-items: center; gap: .75rem; margin-top: 1rem; } .courriel-contenu { margin: .5rem 0 0; padding: .6rem .8rem; background: var(--papier); border: 1px solid var(--trait); border-radius: var(--rayon); white-space: pre-wrap; overflow-wrap: anywhere; font-family: inherit; font-size: .9rem; } .separateur { border: none; border-top: 1px solid var(--trait); margin: 1.25rem 0 1rem; } .visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ------------------------------------------------ thème hors session */ /* Sélecteur de thème des écrans sans session (connexion, création de compte…) : centré sous la carte, « Thème » sur sa propre ligne et les trois choix dessous (retour Yves du 08/08/2026). Il remplace la barre d'état, retirée de ces écrans. */ .theme-hors-session { margin: 1.5rem auto 0; text-align: center; font-size: .85rem; color: var(--encre-douce); } .theme-hors-session .theme-choix { display: block; } .theme-hors-session .theme-choix legend { float: none; display: block; width: 100%; margin-bottom: .35rem; } .theme-hors-session .theme-choix .theme-segments { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: .2rem 1rem; } .theme-hors-session .bouton { margin-top: .6rem; padding: .15rem .7rem; font-size: .85rem; } /* la pilule segmentée (theme-js, plus bas) garde sa présentation ; seul le décalage du libellé « Thème », inutile centré, est neutralisé */ .theme-hors-session.theme-js .theme-choix legend { margin-right: 0; } .theme-choix { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem 1rem; border: none; margin: 0; padding: 0; } .theme-choix legend { float: left; padding: 0; font-weight: 600; } .theme-choix label { display: inline-flex; align-items: center; gap: .35rem; margin: 0; font-weight: 400; font-size: .85rem; } .theme-choix input { margin: 0; } /* Avec JavaScript (classe .theme-js posée par theme.js) : les trois choix deviennent une pilule segmentée (visuel du sélecteur Finexo, réécrit maison : pas de « switch » coulissant, trois segments) et « Appliquer » disparaît (le choix s'applique immédiatement). Les radios restent dans le DOM, masquées visuellement mais focusables : sémantique et clavier natifs (RGAA) — flèches pour changer, focus visible reporté sur le segment. Le segment retenu passe en plein (blanc sur --bleu : couple « bouton principal » déjà déclaré) et en graisse — jamais la couleur seule. Sans JavaScript : radios classiques + « Appliquer », les pictogrammes restent de simples ornements devant les libellés. */ .theme-choix .theme-segments { display: contents; } .theme-choix span svg { width: .9rem; height: .9rem; vertical-align: -2px; margin-right: .3rem; } .theme-js button[type="submit"] { display: none; } .theme-js .theme-choix { gap: .2rem 0; } .theme-js .theme-choix legend { margin-right: .75rem; } .theme-js .theme-choix label { gap: 0; } .theme-js .theme-choix input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .theme-js .theme-choix .theme-segments { display: inline-flex; align-items: center; gap: .1rem; background: var(--bleu-pale); border: 1px solid var(--bleu-bord); border-radius: 99px; padding: .15rem; } .theme-js .theme-choix span { display: inline-flex; align-items: center; padding: .15rem .75rem; border-radius: 99px; background: transparent; color: var(--bleu-texte); cursor: pointer; user-select: none; } .theme-js .theme-choix span svg { margin-right: .35rem; } .theme-js .theme-choix span:hover { background: var(--bleu-pale-survol); } .theme-js .theme-choix input:checked + span { background: var(--bleu); color: var(--blanc); font-weight: 600; } .theme-js .theme-choix input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 1px; position: relative; /* l'anneau passe au-dessus des segments voisins */ } /* Portail des modules : la ligne d'information porte tour à tour la phrase générique et la description du module survolé ou focalisé (portail.js). Hauteur réservée pour DEUX lignes (3em = 2 x 1,5 de hauteur de ligne, mesuré jusqu'à 320 px de large) : le texte change sans faire sauter la carte ni les boutons. Les descriptions elles- mêmes sont masquées visuellement (technique clip) et restent dans l'arbre d'accessibilité, où aria-describedby va les chercher. */ /* les deux phrases fixes se suivent sans blanc (un simple retour à la ligne) ; la ligne de description réserve UNE ligne, les descriptions tiennent sur une ligne aux largeurs où elle est affichée (retour Yves du 23/08/2026 : l'espace réservé de deux lignes paraissait un trou) */ .note-acces { margin-bottom: 0; } .note-consigne { margin: 0; } .note-portail { min-height: 1.5em; margin: .5rem 0 0; } /* écran étroit : pas de survol au doigt, la ligne ne sert à rien (les descriptions restent servies par aria-describedby) */ @media screen and (max-width: 900px) { .note-portail { display: none; } } .portail-descriptions { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* Liste des groupes : en rendu large, la pastille « système » passe sous le nom technique (
) ; en rendu étroit (cartes du composant Tableau, même seuil que lib/public/tableau.css) le
s'efface et la pastille s'aligne à droite sur la ligne du nom technique. */ @media screen and (max-width: 900px) { .enr-sous .groupe-nom { display: flex; justify-content: space-between; align-items: center; gap: .5rem; } .enr-sous .groupe-nom br { display: none; } } /* Dépliants dans une cellule (sujet d'un courriel sur Mes notifications, détails d'une entrée du journal) : sans la marge haute des details du module, le summary s'aligne sur le haut des autres cellules ; déplié, la date reste en haut (retour Yves du 23/08/2026). */ .tableau td > details { margin-top: 0; } /* Tableaux à deux lignes par enregistrement (retour Yves du 23/08/2026) : la colonne la plus large (description d'un groupe, groupes d'un compte ou d'une invitation, détails d'une entrée du journal) passe en ligne secondaire sur toute la largeur, ce qui supprime le défilement horizontal aux largeurs intermédiaires. La ligne secondaire est rendue par le bloc ligne_secondaire de l'écran (tableau-guide.md) ; le filet et le survol se font par paire. Sous 900 px la pile de cartes remplace le tableau et le bloc carte_secondaire porte la même information. */ .tableau-deux-lignes tbody tr:has(+ .ligne-secondaire) td { border-bottom: none; padding-bottom: .1rem; } .tableau-deux-lignes .ligne-secondaire td { padding-top: 0; } .tableau-deux-lignes tbody tr:hover + .ligne-secondaire td, .tableau-deux-lignes tbody tr:has(+ .ligne-secondaire:hover) td { background: var(--bleu-pale); } .ligne-secondaire .note { font-size: .85rem; } .journal-details summary { font-size: .85rem; } /* en-têtes sur deux lignes si besoin (« Dernière connexion ») : à 910 px avec la latérale, le tableau des utilisateurs dépassait encore de 24 px */ .tableau-deux-lignes th { white-space: normal; } /* Abandon de la vérification 2FA en lien (retour Yves du 24/08/2026) : .lien-bouton (menu.css) enlève l'habillage de bouton, ici la couleur et le soulignement des liens du module ; l'action reste un POST. */ .lien-annuler { background: none; border: none; cursor: pointer; font: inherit; color: var(--bleu); text-decoration: underline; padding: .25rem 0; } .lien-annuler:hover { color: var(--bleu-fonce); } .lien-annuler:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }