/* Cord'X — charte graphique (charte-graphique-cordx.md). Sans dependance externe. Deux themes poses par une classe sur : theme-gpfda (defaut, rouge et or) et theme-sta (Secretaire General / RDM, vert et or). La couleur principale du theme sert d'accent, jamais d'aplat massif. */ :root { /* Communes aux deux themes. */ --parchemin: #faf6ec; --blanc: #ffffff; --or: #c9a227; --or-clair: #e2c65a; --encre: #2a2320; --encre-douce: #6b625c; --bordure-chaude: #e7e0d3; --couleur-erreur: #a12b2b; --couleur-erreur-fond: #fbeaea; /* Redefinies par theme ci-dessous. */ --principale: #a3141f; --principale-claire: #f3e3e0; } body.theme-sta { --principale: #1f5a3c; --principale-claire: #e1ebe4; } * { box-sizing: border-box; } /* L'attribut hidden doit toujours l'emporter, y compris sur les regles button/.bouton qui fixent sinon leur propre display avec la meme specificite (le hidden du bouton Enregistrer de droits.php, entre autres, restait sinon visible malgre hidden="true"). */ [hidden] { display: none !important; } body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; color: var(--encre); background: var(--parchemin); font-size: 15px; line-height: 1.5; } h1, h2, h3, .nom-propre { font-family: Georgia, "Times New Roman", serif; font-weight: 600; color: var(--encre); } h1 { font-size: 24px; margin: 0 0 0.6rem; } h2 { font-size: 17px; margin: 0 0 0.6rem; } h3 { font-size: 15px; margin: 0 0 0.4rem; } p, td, th, label, input, select, textarea, button { font-size: 14px; } .mention { font-size: 12px; color: var(--encre-douce); } a { color: var(--principale); } a:hover { text-decoration: underline; } /* ================= Entete ================= */ .filet-tete { height: 3px; background: var(--principale); } .entete { display: flex; align-items: center; gap: 1.5rem; padding: 0.6rem 1.25rem; background: var(--blanc); border-bottom: 1px solid var(--bordure-chaude); flex-wrap: wrap; } .entete-logo { height: 32px; width: auto; } .entete-titre { font-family: Georgia, "Times New Roman", serif; font-weight: 700; font-size: 19px; letter-spacing: 0.02em; color: var(--encre); text-decoration: none; } .entete-titre:hover { text-decoration: none; } .entete-nav { display: flex; gap: 1rem; flex: 1; flex-wrap: wrap; } .entete-nav a { text-decoration: none; color: var(--encre); font-size: 13.5px; } .entete-nav a:hover { color: var(--principale); text-decoration: underline; } .entete-compte { font-size: 0.85em; color: var(--encre-douce); white-space: nowrap; } .entete-compte a { color: var(--encre-douce); } /* ================= Accueil ================= */ .accueil-hero { text-align: center; padding: 1.5rem 0 2rem; } .accueil-titre { font-family: Georgia, "Times New Roman", serif; font-weight: 700; font-size: 32px; letter-spacing: 0.03em; color: var(--or); margin: 0 0 1.5rem; } .accueil-logos { display: flex; justify-content: center; align-items: center; gap: 3rem; flex-wrap: wrap; } .accueil-logos img { height: 96px; width: auto; object-fit: contain; } /* ================= Mise en page generale ================= */ .conteneur { max-width: none; width: 100%; margin: 0; padding: 1.25rem 1.75rem 2.5rem; } code { font-family: ui-monospace, Consolas, monospace; background: var(--principale-claire); padding: 0.1rem 0.35rem; border-radius: 3px; font-size: 0.9em; } /* ================= Tableaux / listes compactes ================= */ table { width: 100%; border-collapse: collapse; background: var(--blanc); margin-bottom: 1.5rem; } th, td { text-align: left; padding: 0.4rem 0.65rem; border-bottom: 1px solid var(--bordure-chaude); white-space: nowrap; } td.colonne-large, th.colonne-large { white-space: normal; word-wrap: break-word; overflow-wrap: break-word; } th { background: var(--parchemin); font-weight: 600; color: var(--encre-douce); font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.03em; } tr:hover td { background: var(--principale-claire); } .enveloppe-table-pleine { overflow-x: auto; } /* Table a deux colonnes (libelle / valeur pouvant etre longue, ex. bloc Chevalier) : largeur du libelle fixee, la valeur se replie en plusieurs lignes dans le reste de la carte au lieu de forcer le tableau, et donc la carte, a s'elargir hors de sa colonne. */ table.table-colonnes-larges { table-layout: fixed; } table.table-colonnes-larges th { width: 110px; } tr.ligne-filtre td { background: var(--blanc); padding: 0.25rem 0.5rem; border-bottom: 2px solid var(--bordure-chaude); } tr.ligne-filtre input { margin: 0; padding: 0.25rem 0.4rem; font-size: 0.85em; width: 100%; min-width: 0; box-sizing: border-box; } th.entete-triable { cursor: pointer; user-select: none; } th.entete-triable:hover { color: var(--principale); } th.entete-triable .indicateur-tri { font-size: 0.8em; color: var(--principale); } /* Lien principal d'une ligne de liste (matricule ou nom) : ouvre la fiche. */ .lien-ligne { font-weight: 600; text-decoration: none; } .lien-ligne:hover { text-decoration: underline; } /* Vignette de blason dans une liste (charte : positions precisees par ecran). */ .vignette-liste { width: 28px; height: 28px; object-fit: contain; vertical-align: middle; } /* ================= Formulaires ================= */ .formulaire { background: var(--blanc); border: 1px solid var(--bordure-chaude); padding: 1.25rem; border-radius: 4px; max-width: 640px; } .action-inline { display: inline; } .action-inline input[type="date"] { display: inline-block; width: auto; } label { display: block; margin-top: 0.75rem; font-weight: 600; font-size: 0.85em; color: var(--encre-douce); } input, select, textarea { width: 100%; padding: 0.4rem 0.5rem; margin-top: 0.25rem; border: 1px solid var(--bordure-chaude); border-radius: 4px; font-size: 1em; font-family: inherit; background: var(--blanc); color: var(--encre); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--principale); } input[readonly], .champ-lecture { border: none; background: transparent; padding: 0.25rem 0; margin-top: 0.15rem; color: var(--encre); } button, .bouton { display: inline-block; margin-top: 1rem; padding: 0.5rem 1.1rem; background: var(--principale); color: var(--parchemin); border: none; border-radius: 4px; cursor: pointer; font-size: 0.95em; text-decoration: none; } button:hover, .bouton:hover { opacity: 0.9; text-decoration: none; } .lien-bouton { display: inline; margin: 0; padding: 0; background: none; border: none; border-radius: 0; color: var(--principale); text-decoration: underline; font-size: inherit; font-family: inherit; cursor: pointer; } .lien-bouton:hover { opacity: 1; text-decoration: underline; } .bouton-secondaire { background: transparent; color: var(--principale); border: 1px solid var(--or); } /* Formulaire de reinitialisation de mot de passe, revele en ligne sous le bouton qui le declenche (comptes.php) : reste compact, jamais un dialogue de navigateur (window.prompt), pour rester dans le fil de la page. */ .formulaire-reinit-mdp { display: flex; gap: 0.4rem; align-items: center; margin-top: 0.4rem; white-space: nowrap; } .formulaire-reinit-mdp input[type="password"] { width: 200px; margin-top: 0; } .formulaire-reinit-mdp button { margin-top: 0; } /* Mot de passe GED (cadrage-ged.md) en "ticket a gratter" : cache par defaut, revele au survol (CSS pur, jamais stocke ni journalise cote client), masque de nouveau des que la souris quitte la case. */ .mdp-grattage { display: inline-flex; align-items: center; justify-content: center; min-width: 90px; margin-top: 1rem; padding: 0.5rem 1.1rem; line-height: 1.43; font-size: 0.95em; background: var(--or-clair); border: 1px solid var(--or); border-radius: 4px; font-family: monospace; letter-spacing: 0.06em; box-sizing: border-box; } .mdp-grattage .mdp-valeur { display: none; } .mdp-grattage:hover .mdp-cache { display: none; } .mdp-grattage:hover .mdp-valeur { display: inline; } .message-flash { background: var(--principale-claire); border: 1px solid var(--principale); padding: 0.6rem 1rem; border-radius: 4px; margin-bottom: 1rem; } .message-erreur { background: var(--couleur-erreur-fond); border: 1px solid var(--couleur-erreur); color: var(--couleur-erreur); padding: 0.6rem 1rem; border-radius: 4px; margin-bottom: 1rem; } /* Echeance de fonction depassee, non cloturee (colonne "Jusqu'à", fiche BAF). */ .date-echeance-depassee { color: var(--couleur-erreur); } /* En-tete de niveau (droits.php : Prieuré, Directoire, Préfecture, Commanderie, Loge de St-André), non modifiable, ouvre chaque groupe de postes (cadrage-postes-structures.md). */ .section-titre { margin: 2rem 0 1rem; padding-bottom: 0.4rem; border-bottom: 2px solid var(--or); } .section-titre:first-child { margin-top: 0; } .section-titre h2 { color: var(--or); text-transform: uppercase; letter-spacing: 0.04em; font-size: 15px; margin: 0; } .barre-actions { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; gap: 0.5rem; } .barre-actions-fiche { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; flex-wrap: wrap; } .etiquette-role { display: inline-block; background: var(--principale-claire); border-radius: 4px; padding: 0.1rem 0.5rem; font-size: 0.85em; margin-right: 0.25rem; } /* Couleur de grade (phase 6) : fixe, independante du theme (charte, "les pastilles gardent leurs couleurs propres"). Seule la cellule Grade de la liste des BAF est coloree, jamais toute la ligne. */ td.grade-mesa { background: #c8e6c9; } td.grade-en { background: #ffffff; } td.grade-cbcs { background: #f8c9c9; } tr:hover td.grade-mesa, tr:hover td.grade-en, tr:hover td.grade-cbcs { filter: brightness(0.97); } .pastille-grade { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 4px; font-size: 0.85em; border: 1px solid #c9c9be; } .pastille-grade.grade-mesa { background: #c8e6c9; border-color: #8fbf93; } .pastille-grade.grade-en { background: #ffffff; } .pastille-grade.grade-cbcs { background: #f8c9c9; border-color: #d98a8a; } .bloc-reserve { background: var(--parchemin); border: 1px dashed var(--bordure-chaude); padding: 0.75rem 1rem; border-radius: 4px; color: var(--encre-douce); font-style: italic; } /* Ecran des droits : ligne modifiee non encore enregistree. */ tr.ligne-modifiee td { background: var(--couleur-erreur-fond); } tr.ligne-modifiee:hover td { background: #f7dede; } /* ================= Fiches en blocs cote a cote ================= */ /* Voir et Modifier partagent cette meme disposition (charte-graphique) : les blocs (cartes) se placent horizontalement, se repliant proprement sur petit ecran. Modifier ne fait que rendre les champs editables dedans. */ .fiche-blocs { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: flex-start; margin-bottom: 1.5rem; } .bloc-fiche { background: var(--blanc); border: 1px solid var(--bordure-chaude); border-radius: 6px; padding: 1rem 1.25rem; flex: 1 1 260px; min-width: 240px; overflow-x: auto; /* un tableau trop large defile dans son bloc, jamais sur le bloc voisin */ } .bloc-fiche h2 { font-size: 15px; color: var(--principale); border-bottom: 1px solid var(--bordure-chaude); padding-bottom: 0.4rem; margin-bottom: 0.75rem; } .bloc-fiche.bloc-large { flex-basis: 100%; } /* Champs d'une carte alignes en ligne (un par colonne) plutot qu'empiles, pour les groupes de champs courts type Coordonnees : gagne en hauteur, se replie proprement sur petit ecran. */ .bloc-fiche.bloc-fiche-ligne { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0 1.5rem; } .bloc-fiche.bloc-fiche-ligne h2 { grid-column: 1 / -1; } .bloc-fiche.bloc-fiche-ligne .champ-fiche { margin-bottom: 0; } .champ-fiche { margin-bottom: 0.6rem; } .champ-fiche label { margin-top: 0; } .champ-fiche .champ-lecture { min-height: 1.4em; } .fiche-titre { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; } .fiche-titre .vignette-fiche { width: 42px; height: 42px; object-fit: contain; } .fiche-titre h1 { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .fiche-titre h1 input.champ-titre { font: inherit; font-weight: inherit; width: auto; min-width: 8em; padding: 0.1rem 0.4rem; border: 1px solid var(--bordure-chaude); border-radius: 4px; } .etiquette-inactif { color: var(--couleur-erreur); font-size: 0.7em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; } /* Barre d'info a droite du nom, dans le fil du titre de fiche : statut, grade et rattachements en un coup d'oeil (Voir), memes champs mais editables sur place (Modifier) — meme disposition, meme emplacement, dans les deux cas. */ .barre-info-fiche { display: flex; align-items: center; gap: 0.6rem 1.25rem; flex-wrap: wrap; } .barre-info-fiche .champ-fiche { margin-bottom: 0; } .pastille-actif { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 4px; font-size: 0.85em; border: 1px solid #c9c9be; } .pastille-actif.actif { background: var(--parchemin); } .pastille-actif.inactif { background: var(--couleur-erreur-fond); border-color: var(--couleur-erreur); color: var(--couleur-erreur); } .info-rattachement .lib-rattachement { color: var(--principale); } .grille-documents { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; } .carte-document { background: var(--blanc); border: 1px solid var(--bordure-chaude); border-radius: 4px; overflow: hidden; } .vignette-document { display: flex; align-items: center; justify-content: center; height: 110px; background: var(--parchemin); border-bottom: 1px solid var(--bordure-chaude); } .vignette-document img { max-width: 100%; max-height: 100%; object-fit: contain; } .icone-document { font-size: 0.75em; font-weight: 700; letter-spacing: 0.05em; color: var(--encre-douce); border: 2px solid var(--bordure-chaude); border-radius: 4px; padding: 0.6rem 0.8rem; } .icone-document.icone-pdf { color: var(--couleur-erreur); border-color: var(--couleur-erreur); } .info-document { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.5rem 0.6rem; font-size: 0.85em; } .info-document .nom-document { word-break: break-all; } .info-document .date-document { color: var(--encre-douce); font-size: 0.9em; }