/* ============================================================
* Charte visuelle du portail MSF — SOURCE UNIQUE (« éditorial artisanal »).
*
* Référence : le module projets (2026-08-13, décision Simon — « seul le
* module projets a conservé le bon visuel »). Cette feuille absorbe
* projets/web/charte-msf.css (tokens, standard V0.2) ET les composants
* partagés de la coquille (masthead, onglets, boutons, tableaux, tuiles,
* formulaires, badges, écran de connexion, modale).
*
* Règle (voir docs/design/2026-08-13-portail-unifie.md, « Charte visuelle ») :
* chaque page l'inclut AVANT sa feuille de module :
* (charte.css à la racine)
*
* Un CSS de module ne redéfinit NI les tokens ci-dessous NI les composants
* communs — garde-fou mécanique dans cloudflare/deployer-portail.sh.
* ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');
:root {
/* — Neutres (papier & encre) — */
--bg: #E9E4DB; /* page, taupe chaud derrière la feuille */
--sheet: #FBFAF8; /* papier du document (crème atelier) */
--surface: #F4F1EB; /* vélin — encarts, en-têtes de tableau, barres */
--surface-2: #EFEAE1; /* en-têtes de groupe */
--ink: #23201B; /* encre noyer — texte principal, titres */
--ink-2: #6F685D; /* encre estompée — texte secondaire */
--ink-3: #9A938A; /* faible — légendes, étiquettes */
--line: #E7E1D6; /* filet léger */
--line-2: #D9D3C7; /* trait taupe — filet marqué */
/* — Accent bronze — */
--accent: #9A6B3F; /* bronze terre — accent général, filets d'emphase */
--accent-deep: #774E27; /* bronze brûlé — texte d'accent (contraste AA) */
--accent-soft: #F1E7DA; /* voile bronze — fonds d'accent */
/* — États sémantiques — */
--s-option: #5E7459; --s-option-soft: #EAF0E7; --s-option-ink: #3F5439; /* ok / actif */
--s-avis: #9E4A33; --s-avis-soft: #F6E8E2; --s-avis-ink: #7E3A2A; /* alerte / inactif */
--s-alloc: #B68A4E; --s-alloc-soft: #F6EDD9; --s-alloc-ink: #7B5A22; /* attention */
/* — Typographie — */
--serif: "EB Garamond","Adobe Garamond Pro","Garamond","Hoefler Text",Georgia,serif;
--sans: "Helvetica Neue",Helvetica,"Segoe UI",system-ui,sans-serif;
--mono: "SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;
}
/* ---- Base ---------------------------------------------------------------- */
* { box-sizing: border-box; }
/* L'attribut HTML `hidden` (bascule auth/app dans auth.js) perd contre tout
* `display` posé par une classe (ex. .vue-auth flex) : on le rend prioritaire. */
[hidden] { display: none !important; }
body {
font-family: var(--sans);
margin: 0; color: var(--ink); background: var(--bg);
}
h1, h2, h3 {
font-family: var(--serif); font-weight: 600; color: var(--ink);
letter-spacing: .01em;
}
a { color: var(--accent-deep); }
/* Micro-libellé majuscule espacé — signature de la charte (en-têtes de table,
* étiquettes de section). Réutilisable : class="mono-label". */
.mono-label {
font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
color: var(--ink-2); font-weight: 600; /* --ink-2 : lisible AA sur papier */
}
/* ---- En-tête : masthead éditorial sur le papier -------------------------- */
header {
background: transparent; color: var(--ink);
max-width: 1100px; margin: 0 auto; padding: 1.5rem 1.5rem .75rem;
border-bottom: 2px solid var(--ink);
}
header h1 { font-size: 2rem; letter-spacing: .04em; margin: 0 0 .1rem; }
.sous-titre {
margin: 0; font-size: 10.5px; letter-spacing: .18em;
text-transform: uppercase; color: var(--ink-2);
}
.entete-haut { display: flex; justify-content: space-between; align-items: flex-start;
gap: 1rem; flex-wrap: wrap; }
.entete-compte { display: flex; align-items: center; gap: .75rem; color: var(--ink-2); }
.utilisateur { font-size: .85rem; color: var(--ink-2); }
.deconnexion {
background: var(--sheet); color: var(--ink-2);
border: 1px solid var(--line-2);
}
.deconnexion:hover { background: var(--surface); }
/* Liens de l'entête (retour portail, Comptes) — encre bronze sur le papier. */
.lien-portail { color: var(--accent-deep); text-decoration: underline; font-size: .82rem; }
/* ---- Onglets : languettes éditoriales ------------------------------------ */
.onglets { display: flex; gap: 0; margin-top: 1rem; border-bottom: 1px solid var(--line-2); }
.onglet {
background: transparent; color: var(--ink-2); cursor: pointer;
border: none; border-bottom: 2px solid transparent; border-radius: 0;
padding: .5rem 1rem; font-size: 10.5px; letter-spacing: .14em;
text-transform: uppercase; font-weight: 600; margin-bottom: -1px;
}
.onglet:hover { color: var(--ink); }
.onglet.actif { color: var(--accent-deep); border-bottom-color: var(--accent); }
/* ---- Zone de contenu : feuille de papier crème --------------------------- */
main {
background: var(--sheet); border: 1px solid var(--line);
box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 12px 40px rgba(0,0,0,.05);
padding: 1.75rem 2rem 2rem; margin: 1.5rem auto; border-radius: 2px;
max-width: 1100px;
}
/* ---- Barre de filtres / d'actions ---------------------------------------- */
.barre {
display: flex; gap: 1rem; align-items: end; flex-wrap: wrap;
margin-bottom: 1rem;
}
.barre label { font-size: .8rem; color: var(--ink-2); display: grid; gap: .2rem; }
/* ---- Formulaires et boutons ---------------------------------------------- */
input, select {
padding: .45rem .55rem; border: 1px solid var(--line-2);
border-radius: 6px; font-size: .9rem; background: var(--sheet);
color: var(--ink); font-family: var(--sans);
}
button {
padding: .5rem .9rem; border: 1px solid var(--line-2); border-radius: 6px;
background: var(--sheet); color: var(--ink); cursor: pointer; font-size: .9rem;
font-family: var(--sans);
}
button.primaire { background: var(--accent); border-color: var(--accent); color: #fff; }
button:hover { filter: brightness(.98); }
button.lien, .lien {
background: none; border: none; color: var(--accent-deep); cursor: pointer;
text-decoration: underline; padding: 0; font-size: .85rem;
}
/* ---- Tableaux : micro-en-têtes majuscules, filets taupe ------------------- */
table { width: 100%; border-collapse: collapse; background: transparent; }
th, td { padding: .5rem .65rem; text-align: left; font-size: .9rem; }
th {
background: transparent; color: var(--ink-2);
font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
font-weight: 600; border-bottom: 1px solid var(--line-2);
}
td { border-bottom: 1px solid var(--line); }
tr:hover td { background: var(--surface); }
td.code { font-family: var(--mono); font-size: .82rem; color: var(--ink-2); }
td.nom { font-weight: 500; }
td.vide { color: var(--ink-2); text-align: center; padding: 1.5rem; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
/* ---- Pilules de statut : voiles charte ------------------------------------ */
.badge { font-size: .72rem; padding: .1rem .45rem; border-radius: 999px; font-weight: 600; }
.badge.actif { background: var(--s-option-soft); color: var(--s-option-ink); }
.badge.inactif { background: var(--s-avis-soft); color: var(--s-avis-ink); }
/* ---- Notes, messages, erreurs --------------------------------------------- */
.note { font-size: .78rem; color: var(--ink-2); margin-top: .6rem; }
.message { padding: .6rem .8rem; border-radius: 6px; background: var(--accent-soft); }
.message.erreur { background: var(--s-avis-soft); }
.erreur { color: var(--s-avis-ink); font-size: .85rem; }
/* ---- Écran de connexion : carte papier ------------------------------------ */
.vue-auth {
min-height: 100vh; display: flex; align-items: center; justify-content: center;
padding: 1rem;
}
.carte-auth {
background: var(--sheet); border: 1px solid var(--line-2); border-radius: 2px;
box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 12px 40px rgba(0,0,0,.05);
padding: 2rem 2.25rem; width: min(400px, 92vw);
display: grid; gap: .8rem;
}
.carte-auth h1 { margin: 0; font-size: 1.75rem; letter-spacing: .04em; }
.sous-titre-auth {
margin: -.4rem 0 .4rem; font-size: 10.5px; letter-spacing: .18em;
text-transform: uppercase; color: var(--ink-2);
}
.carte-auth label { display: grid; gap: .25rem; font-size: .8rem; color: var(--ink-2); }
.carte-auth input { width: 100%; }
.actions-auth { display: flex; gap: .5rem; justify-content: flex-end; flex-wrap: wrap; }
/* ---- Tuiles (accueil du portail) : cartes papier -------------------------- */
.tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1rem; margin-top: .5rem; }
.tuile {
display: block; background: var(--sheet); border: 1px solid var(--line-2);
border-radius: 2px; padding: 1.1rem 1.25rem; text-decoration: none;
color: inherit; transition: box-shadow .12s ease, border-color .12s ease;
}
a.tuile:hover { border-color: var(--accent); box-shadow: 0 4px 16px rgba(35,32,27,.10); }
.tuile h2 { margin: 0 0 .4rem; font-size: 1.15rem; }
.tuile p { margin: 0; font-size: .82rem; color: var(--ink-2); line-height: 1.4; }
.tuile-fermee { opacity: .6; background: var(--surface); }
.tuile-fermee .verrou { margin-top: .5rem; font-size: .75rem; color: var(--s-avis-ink); }
/* ---- Patron liste/fiche (D-021) : en-tête d'identité + volets ------------- */
.fiche-titre {
display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
margin: 1.1rem 0 .4rem; font-size: 1.45rem;
font-family: var(--serif); font-weight: 600; color: var(--ink);
}
.titre-volet {
margin: 1.25rem 0 .35rem; font-family: var(--sans);
font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
font-weight: 600; color: var(--ink-2);
}
.table-fiche { max-width: 720px; }
.table-fiche td { font-size: .9rem; }
.table-fiche td.libelle-fiche { width: 220px; color: var(--ink-2); }
.table-fiche input, .table-fiche select { width: 100%; max-width: 420px; }
tr.modifie td { background: var(--accent-soft); }
/* ---- Modale : carte papier (patron carte-auth) ----------------------------- */
dialog {
background: var(--sheet); color: var(--ink);
border: 1px solid var(--line-2); border-radius: 2px;
box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 12px 40px rgba(0,0,0,.18);
padding: 1.75rem 2rem; width: min(440px, 92vw);
}
dialog::backdrop { background: rgba(35,32,27,.35); }
dialog h2 { margin: 0 0 .9rem; font-size: 1.3rem; }
dialog form { display: grid; gap: .65rem; }
dialog label { display: grid; gap: .25rem; font-size: .8rem; color: var(--ink-2); }
dialog .actions { display: flex; gap: .5rem; justify-content: flex-end; margin-top: .5rem; }
.actions { display: flex; gap: .5rem; justify-content: flex-end; margin-top: .5rem; }