/*
* Charte graphique Etrebil — feuille de référence.
*
* Source unique : Ecosystem/platform/ui/charte/. Chaque application en tient une copie dans
* wwwroot/charte/ (son image Docker ne voit que son propre dossier) : une retouche se fait ici,
* puis se reporte dans les copies, comme Directory.Packages.props.
*
* Cinq teintes, rien d'autre en couleur de marque (palette du 28/10/2026, qui remplace les cinq
* Pantone d'origine ; les jetons gardent leurs anciens noms pour ne rien casser dans les applications) :
*
* --etre-violet prune #6A1B4D couleur principale : boutons, liens, cartouche
* --etre-lilas rose #F25CA2 accent secondaire, graphiques ; principale du thème sombre
* --etre-turquoise bleu #3B6FD9 accent, sélection, repères
* --etre-anis jaune #FFD166 mise en avant ponctuelle, logo ETRE (jamais du texte sur fond clair)
* (fond de page) blanc rosé #FFF5F9, et sa nuance #F4DCE8 (--etre-grege) pour les bordures
*
* La prune se lit en texte sur fond clair (11,2:1 sur blanc). Le bleu se lit en texte sur blanc (4,7:1)
* et porte du texte blanc (4,7:1), pas de l'encre (3,7:1). Rose, jaune et grège sont des fonds : on y
* écrit en encre (--etre-encre), jamais en blanc.
*
* Les états (succès, avertissement, danger, information) ont leurs jetons, qui basculent avec le
* thème : une application n'écrit jamais un rouge ou un vert en dur.
*
* Deux polices : Inter (hébergée ici, licence OFL, fonts/OFL.txt) pour tout, et Courier New pour
* le seul cartouche du nom de l'application (.etre-cartouche).
*/
/* ------------------------------------------------------------------------------------ Polices */
/* Inter variable, graisses 100 à 900, en deux sous-ensembles : latin de base et latin étendu
(ŒÆ, lettres d'Europe centrale). Servie par l'application elle-même : aucun appel extérieur. */
@font-face {
font-family: "Inter";
font-style: normal;
font-display: swap;
font-weight: 100 900;
src: url("fonts/inter-latin-wght-normal.woff2") format("woff2-variations"),
url("fonts/inter-latin-wght-normal.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
U+FEFF, U+FFFD;
}
@font-face {
font-family: "Inter";
font-style: normal;
font-display: swap;
font-weight: 100 900;
src: url("fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations"),
url("fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* ------------------------------------------------------------------------------------ Jetons */
:root {
/* Les cinq teintes de la charte. */
--etre-turquoise: #3B6FD9; /* bleu */
--etre-lilas: #F25CA2; /* rose */
--etre-violet: #6A1B4D; /* prune */
--etre-anis: #FFD166; /* jaune */
--etre-grege: #F4DCE8; /* rose grège */
/* Dérivées : mêmes teintes, plus claires ou plus sombres, pour les états et les fonds. */
--etre-violet-fonce: #4F1239; /* survol, appui */
--etre-violet-clair: #F9E6EF; /* fond d'un élément choisi */
--etre-turquoise-fonce: #2C58B8; /* bleu foncé, texte sur blanc (6,6:1) */
--etre-turquoise-clair: #E7EEFB;
--etre-lilas-clair: #FDE8F2;
--etre-anis-clair: #FFF3D6;
--etre-grege-clair: #FFF5F9; /* fond de page */
--etre-grege-fonce: #E6BFD2; /* bordure marquée */
/* Encre et nuit : la prune poussée au noir, pour le texte et les fonds sombres. */
--etre-encre: #2B0F21; /* texte principal (17,6:1 sur blanc) */
--etre-encre-douce: #6E4A5E; /* texte secondaire (7,5:1 sur blanc) */
--etre-nuit: #1C0B16; /* fond de page du thème sombre */
--etre-nuit-surface: #2B1222; /* cartes et panneaux du thème sombre */
--etre-nuit-bordure: #4C2238;
/* Rôles : ce que les applications utilisent. */
--etre-fond: var(--etre-grege-clair);
--etre-surface: #FFFFFF;
--etre-bordure: var(--etre-grege);
--etre-texte: var(--etre-encre);
--etre-texte-secondaire: var(--etre-encre-douce);
--etre-primaire: var(--etre-violet);
--etre-primaire-survol: var(--etre-violet-fonce);
--etre-primaire-texte: #FFFFFF;
--etre-accent: var(--etre-turquoise);
--etre-focus: rgba(106, 27, 77, .35);
/* États : messages, étiquettes, montants, boutons de suppression. La couleur d'état s'écrit (texte, icône, filet) sur
--etre-surface, sur --etre-fond ou sur le fond de l'état ; un fond plein de la couleur d'état porte son texte en
--etre-surface (même contraste, à l'envers). Contrastes WCAG, thème clair :
succès #1E7A46 5,3:1 sur la surface (#FFFFFF), 5,0:1 sur le fond de page, 4,7:1 sur #E3F4EA
avertissement #7A5300 6,9:1 sur la surface, 6,4:1 sur le fond de page, 6,0:1 sur #FBF0D2
danger #9B2C22 7,6:1 sur la surface, 7,1:1 sur le fond de page, 6,8:1 sur #FDF1F0
information #6A1B4D 11,2:1 sur la surface, 10,5:1 sur le fond de page, 9,6:1 sur #FDE8F2
Le texte courant (--etre-texte) reste lisible sur chacun de ces fonds (14:1 au moins). */
--etre-succes: #1E7A46;
--etre-succes-fond: #E3F4EA;
--etre-avertissement: #7A5300;
--etre-avertissement-fond: #FBF0D2;
--etre-danger: #9B2C22;
--etre-danger-fond: #FDF1F0;
--etre-info: var(--etre-violet);
--etre-info-fond: var(--etre-lilas-clair);
/* Polices. */
--etre-police: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system,
BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
--etre-police-cartouche: "Courier New", Courier, "Liberation Mono", "Nimbus Mono PS",
"Cousine", monospace;
}
/* Thème sombre, sur l'attribut de Bootstrap (data-bs-theme) comme sur un attribut neutre. */
[data-bs-theme="dark"],
[data-etre-theme="sombre"] {
--etre-fond: var(--etre-nuit);
--etre-surface: var(--etre-nuit-surface);
--etre-bordure: var(--etre-nuit-bordure);
--etre-texte: var(--etre-grege);
--etre-texte-secondaire: #CBAEBD;
--etre-primaire: var(--etre-lilas); /* la prune se perd sur la nuit : le rose la relaie (6,2:1) */
--etre-primaire-survol: #F8A5CA;
--etre-primaire-texte: var(--etre-nuit);
--etre-violet-clair: #401630;
--etre-focus: rgba(242, 92, 162, .45);
/* États du thème sombre. Contrastes WCAG :
succès #7FD3A3 9,7:1 sur la surface (#2B1222), 10,6:1 sur le fond de page, 7,0:1 sur #173A2B
avertissement #E8C46A 10,3:1 sur la surface, 11,3:1 sur le fond de page, 7,8:1 sur #3A3015
danger #F4A099 8,5:1 sur la surface, 9,3:1 sur le fond de page, 6,8:1 sur #4A1F27
information #F8A5CA 9,3:1 sur la surface, 10,1:1 sur le fond de page, 8,2:1 sur #401630
Le texte courant (grège) se lit sur chacun de ces fonds (9:1 au moins). */
--etre-succes: #7FD3A3;
--etre-succes-fond: #173A2B;
--etre-avertissement: #E8C46A;
--etre-avertissement-fond: #3A3015;
--etre-danger: #F4A099;
--etre-danger-fond: #4A1F27;
--etre-info: #F8A5CA;
--etre-info-fond: #401630;
}
/* ------------------------------------------------------------------------------------ Titres */
/* FocusOnNavigate (Routes.razor des applications Blazor) place le focus sur le h1 à chaque page,
pour les lecteurs d'écran. Après un clic, le cadre noir du navigateur barre le titre sans rien
apporter ; au clavier, il reste, dans la couleur de la charte. */
h1:focus:not(:focus-visible) {
outline: none;
}
h1:focus-visible {
outline: 2px solid var(--etre-primaire);
outline-offset: 4px;
border-radius: 2px;
}
/* ------------------------------------------------------------------------------------ Cartouche */
/*
* Le petit rectangle au nom de l'application : 4 à 6 lettres, capitales, Courier New gras, grège
* sur prune. Les applications sur la coque commune (décision 0079) portent à sa place le logo ETRE
* suivi du nom de l'application (LogoCoque) ; le cartouche ne reste que là où la coque n'est pas
* (documents imprimés, applications qui ne l'ont pas encore).
*
* IMMO
*
* Variantes : etre-cartouche--anis (sur un fond prune), etre-cartouche--petit (barre étroite).
*/
.etre-cartouche {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
min-width: 4.6em;
padding: .34em .5em .3em .62em; /* à droite, l'espacement des lettres est déjà là */
border-radius: 2px;
background: var(--etre-violet);
color: var(--etre-grege);
font-family: var(--etre-police-cartouche);
font-size: .95rem;
font-weight: 700;
font-style: normal;
line-height: 1;
letter-spacing: .12em;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
user-select: none;
flex: none;
}
a.etre-cartouche:hover,
a.etre-cartouche:focus-visible {
color: var(--etre-grege);
background: var(--etre-violet-fonce);
text-decoration: none;
}
.etre-cartouche--anis {
background: var(--etre-anis);
color: var(--etre-nuit);
}
a.etre-cartouche--anis:hover,
a.etre-cartouche--anis:focus-visible {
background: #FFDB85;
color: var(--etre-nuit);
}
.etre-cartouche--petit {
font-size: .8rem;
}
/* Sur la nuit, la prune garde sa place mais se détache par un filet rose. */
[data-bs-theme="dark"] .etre-cartouche:not(.etre-cartouche--anis),
[data-etre-theme="sombre"] .etre-cartouche:not(.etre-cartouche--anis) {
box-shadow: inset 0 0 0 1px var(--etre-lilas);
}
/*
* Logo de l'organisation cliente, à côté du cartouche (domaine personnalisé, décision 0009) :
*
* BUDGET
* 
*
* Sur une pastille claire : l'en-tête est prune, et le logo d'un client n'est pas dessiné pour ça.
*/
.etre-logo-client {
box-sizing: border-box;
height: 1.9rem;
max-width: 9rem;
margin-inline-start: .6rem;
padding: .2rem .45rem;
border-radius: 2px;
background: #fff;
object-fit: contain;
flex: none;
vertical-align: middle;
}
@media (forced-colors: active) {
.etre-cartouche {
border: 1px solid CanvasText;
}
}