html, body {
margin:0px;
height: 100%;
}
/*
La typographie du produit, telle qu'elle etait avant la migration.
Bootstrap 5 a change la base : 16px en police systeme, interligne 1.5, texte
#212529, la ou Bootstrap 3 posait 14px en Helvetica Neue, interligne 1.42857 et
texte var(--ink-800). Tout a donc grossi d'un huitieme d'un seul coup : lignes de tableau
plus hautes, noms de benevoles qui passent a la ligne, colonnes redistribuees.
La migration ne devait rien changer a l'ecran ; elle a change l'echelle entiere.
La base revient a 14px sur et non sur : Bootstrap 5 exprime en rem
les tailles de ses composants (boutons, champs, cellules de tableau), et seule la
racine les ramene tous ensemble a leurs proportions d'avant. Les points de rupture
et les largeurs de conteneur restent en px : la grille ne bouge pas.
*/
html {
font-size: 14px;
}
/*
Les jetons de style de Volunteo : couleurs, espacements, rayons, typographie.
Avant eux, une couleur s'ecrivait la ou on en avait besoin. Le violet de la marque
existait en quatre nuances voisines selon le fichier, le gris du texte secondaire en
cinq, et une pastille de legende pouvait annoncer un vert que la barre d'a cote
n'avait plus. Rien ne le signalait : une valeur codee en dur est toujours valide.
Tout part donc d'ici, et d'ici seulement. Une regle de cette feuille prend un jeton,
jamais une valeur : c'est ce que verifie tests/Unit/Assets/DesignTokensTest.php, qui
refuse une couleur ecrite en clair hors de ce bloc. Changer la teinte du produit,
c'est changer ces quelques lignes.
Les jetons s'articulent avec Bootstrap plutot que contre lui : les composants
(boutons, pagination, barre de navigation, menus) se teintent en redefinissant les
variables --bs-* que Bootstrap 5 lit lui-meme, et non en empilant des selecteurs de
plus en plus longs pour gagner en specificite.
Les valeurs viennent de la palette de l'etude ergonomique (docs/ux-audit-2026-09-04.md,
chapitre 6) : un seul accent derive du violet historique, des neutres legerement
teintes de ce violet, et des couleurs semantiques qui ne se confondent pas avec lui.
*/
:root {
/* Marque. Le 900 porte la barre de navigation et le pied de page, le 700 les
boutons primaires et l'onglet actif, le 600 les liens, le 300 le focus. */
--brand-950: #1f1345;
--brand-900: #2a1a5e;
--brand-800: #3d2470;
--brand-700: #4b2f8f;
--brand-600: #5b3a9e;
--brand-300: #b9a6e6;
--brand-200: #b3aac9;
--brand-100: #dcd7ea;
--brand-050: #f1edfa;
/* Texte. Les quatre niveaux tiennent le 4,5:1 sur blanc, seuil AA du texte
courant : 12,6 / 12,6 / 7,2 / 4,7. Le plus clair valait #8e8a9c, soit 3,35:1,
et le chapitre 6 de l'etude comme le commentaire qui etait ici affirmaient le
contraire ; axe-core l'a releve sur le tableau de bord. Il est assombri d'un
cran, ce qui ne se voit pas a l'oeil et se voit a la mesure. */
--ink-900: #1f1b2e;
--ink-800: #333;
--ink-600: #5a5568;
--ink-400: #767284;
/* Surfaces et bordures. Les neutres tirent vers le violet, sauf ceux du bouton
secondaire, qui reprend le gris du btn-default de Bootstrap 3. */
--surface-0: #fff;
--surface-1: #f7f6fa;
--surface-2: #efedf5;
--border: var(--brand-100);
--border-neutral-soft: #ddd;
--border-neutral: #ccc;
--border-neutral-strong: #adadad;
/* Sur fond de marque : la barre, le pied de page. */
--on-brand: #fff;
--on-brand-muted: #d8d6e6;
--on-brand-disabled: #9d97b3;
/* Semantique. Le vert dit « complet », pas « creer » ; le rouge dit le danger et
le manque critique, l'orange le partiel. Chacune porte du texte blanc a 4,5:1
au moins (5,0 / 5,1 / 6,5 / 6,5), ce que le #ffc107 de bg-warning ne faisait
pas. L'orange a ete assombri apres mesure : a #b26a00 il n'etait qu'a 4,24,
ce qui passe pour un gros titre et pas pour une pastille de 10 px. La forme
-rgb sert les utilitaires de Bootstrap, qui composent leur fond en rgba(). */
--ok: #1e7f4f;
--ok-rgb: 30, 127, 79;
--ok-050: #e3f3ea;
--warn: #a05f00;
--warn-rgb: 160, 95, 0;
--warn-050: #fbeedb;
--warn-900: #8a5200;
--danger: #b3261e;
--danger-rgb: 179, 38, 30;
--danger-050: #f7dedb;
--info: #245ea8;
--info-rgb: 36, 94, 168;
/* Frise du poste et Planning global : le meme vocabulaire des deux cotes. */
--shift-ok: var(--ok);
--shift-partial: var(--warn);
--shift-missing: var(--danger);
--shift-available: var(--surface-1);
--shift-assigned: var(--info);
--shift-elsewhere: var(--danger-050);
/* Reperes d'environnement : la barre change de couleur hors production, pour
qu'une manipulation de test ne se fasse jamais sur les vraies donnees. */
--env-dev: #666;
--env-noprod: #060;
--hero-fallback: #04c582;
/* Espacements. L'echelle de Bootstrap (0,25 / 0,5 / 1 / 1,5 / 3 rem) avec le cran
de 2 rem qui lui manque, celui des marges ecrites « 2em » dans les gabarits. */
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 1rem;
--space-4: 1.5rem;
--space-5: 3rem;
--space-6: 2rem;
/* Rayons. */
--radius-1: 4px;
--radius-2: 6px;
--radius-pill: 999px;
/* Typographie : l'echelle 13 / 14 / 16 / 18 / 20 / 24 / 28 de l'etude. */
--text-sm: 13px;
--text-base: 14px;
--text-md: 16px;
--text-lg: 18px;
--text-xl: 20px;
--text-2xl: 24px;
--text-3xl: 28px;
/* Ce que Bootstrap lit de lui-meme. */
--bs-body-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
--bs-body-color: var(--ink-800);
--bs-body-line-height: 1.42857143;
--bs-link-color: var(--brand-600);
--bs-link-hover-color: var(--brand-800);
--bs-border-radius: var(--radius-1);
/* Le bleu de Bootstrap ne sert plus a rien ici : bg-primary, text-primary,
border-primary et les pastilles text-bg-primary prennent la couleur de la
marque. Les boutons ont leurs propres regles, plus bas. */
--bs-primary: var(--brand-700);
--bs-primary-rgb: 75, 47, 143;
}
/*
Les utilitaires que Bootstrap 5 ne fournit pas, et dont les gabarits se passaient a
coups d'attributs style="". Ils suivent son vocabulaire : un cran d'espacement de
plus (6 = 2rem, celui qui manque entre mt-4 et mt-5, et celui qu'ecrivaient les
« margin-top:2em » des gabarits), la contrepartie de .clearfix, le pointeur, et la
coupure de page a l'impression.
L'echelle typographique est celle de l'etude : 13 / 14 / 16 / 18 / 20 / 24 / 28 px.
Les gabarits exprimaient leurs tailles en pourcentage du corps (90%, 110%, 130%,
160%...), ce qui donnait une vingtaine de tailles distinctes a l'ecran, dont aucune
ne se retrouvait d'une page a l'autre. Le prefixe fs- est celui de Bootstrap, dont
les crans numerotes (fs-1 a fs-6) servent les titres et ne descendent pas jusqu'au
corps de texte.
*/
.mt-6 { margin-top: var(--space-6) !important; }
.mb-6 { margin-bottom: var(--space-6) !important; }
.pt-6 { padding-top: var(--space-6) !important; }
.pb-6 { padding-bottom: var(--space-6) !important; }
.clear-none { clear: none !important; }
.clear-both { clear: both !important; }
.cursor-pointer { cursor: pointer; }
.page-break { page-break-before: always; break-before: page; }
.fs-sm { font-size: var(--text-sm) !important; }
.fs-base { font-size: var(--text-base) !important; }
.fs-md { font-size: var(--text-md) !important; }
.fs-lg { font-size: var(--text-lg) !important; }
.fs-xl { font-size: var(--text-xl) !important; }
.fs-2xl { font-size: var(--text-2xl) !important; }
.fs-3xl { font-size: var(--text-3xl) !important; }
/*
Le bouton neutre des barres d'outils. Bootstrap 3 le rendait blanc a bordure grise
(btn-default) ; btn-secondary, qui l'a remplace, est gris plein, et toutes les
barres d'outils de l'application s'en sont trouvees repeintes. Il retrouve son
apparence : ces trois cent dix boutons viennent tous de btn-default, aucun n'a
jamais ete voulu gris.
*/
.btn-secondary {
--bs-btn-color: var(--ink-800);
--bs-btn-bg: var(--surface-0);
--bs-btn-border-color: var(--border-neutral);
--bs-btn-hover-color: var(--ink-800);
--bs-btn-hover-bg: var(--surface-2);
--bs-btn-hover-border-color: var(--border-neutral-strong);
--bs-btn-active-color: var(--ink-800);
--bs-btn-active-bg: var(--surface-2);
--bs-btn-active-border-color: var(--border-neutral-strong);
--bs-btn-disabled-color: var(--ink-800);
--bs-btn-disabled-bg: var(--surface-0);
--bs-btn-disabled-border-color: var(--border-neutral);
--bs-btn-focus-shadow-rgb: 173, 173, 173;
}
/*
Bootstrap 3 bornait la largeur des tableaux (max-width:100%) ; Bootstrap 5 ne le
fait plus, et une colonne qui ne se coupe pas pousse la page entiere vers la
droite. C'est ce qui faisait deborder la page de confidentialite et celle d'aide.
*/
.table {
max-width: 100%;
}
/*
La largeur des pages, telle qu'elle etait.
Bootstrap 3 bornait le conteneur a 750, 970 puis 1170px ; Bootstrap 5 a change ces
trois valeurs et ajoute un quatrieme palier a 1400px, qui porte le conteneur a
1320px. Sur un grand ecran, toutes les pages se sont donc elargies de 150px d'un
coup, et les colonnes des tableaux se sont redistribuees avec elles.
Les paliers suivent le decalage retenu pour toute la migration : le sm de
Bootstrap 3 (768px) est le md de Bootstrap 5, et ainsi de suite. Le palier xxl,
que Bootstrap 3 n'avait pas, garde la largeur du precedent.
*/
@media (min-width: 768px) {
.container { max-width: 750px; }
}
@media (min-width: 992px) {
.container { max-width: 970px; }
}
@media (min-width: 1200px) {
.container { max-width: 1170px; }
}
@media (min-width: 1400px) {
.container { max-width: 1170px; }
}
/*
L'objet media, tel que Bootstrap 3 le dessinait.
Bootstrap 5 a supprime .media, .media-body et .media-object, sans equivalent : ce
sont des div inertes depuis la migration. Or .media-body portait « width: 10000px »,
l'astuce qui lui faisait prendre toute la place laissee libre a cote de la vignette.
C'est elle qui donnait sa largeur a la colonne des noms de la liste des benevoles :
755px avant, 206px apres, au point que les noms passaient sur deux lignes et que les
trois autres colonnes se redistribuaient le reste.
Trois gabarits s'en servent (liste des benevoles, journaux, consommation d'un
avantage). Les regles reviennent ici, telles quelles ; « float-start » remplace
« pull-left », d'ou le selecteur.
*/
.media,
.media-body {
overflow: hidden;
}
.media-body {
display: table-cell;
vertical-align: top;
width: 10000px;
}
.media-object {
display: block;
}
.media > .float-end {
padding-left: 10px;
}
.media > .float-start {
padding-right: 10px;
}
.media-heading {
margin-top: 0;
margin-bottom: 5px;
}
/*
Le formulaire en ligne, tel que Bootstrap 3 le posait.
Bootstrap 5 a supprime .form-inline sans equivalent nomme : la recette est
desormais d-flex et les utilitaires d'espacement. Neuf formulaires du site s'en
servent (recherche d'evenement, actions d'administration, facturation) et leurs
champs reprenaient toute la largeur depuis la migration, chacun sur sa ligne.
Seule la regle utile est reprise : un champ y reste en ligne et a la largeur de
son contenu. Le point de rupture suit le decalage de la migration, le 768px de
Bootstrap 3 etant celui du md de Bootstrap 5.
*/
@media (min-width: 768px) {
.form-inline .form-control,
.form-inline .form-select,
.form-inline .input-group {
display: inline-block;
width: auto;
vertical-align: middle;
}
.form-inline .form-label {
margin-bottom: 0;
vertical-align: middle;
}
}
.header {
background-color: var(--surface-0);
text-align: center;
padding-left:3em;
padding-right:3em;
margin: 0px;
}
.header h1 a {
font-size: 30px;
color: black;
}
.landing-hero {
background-image:url("../images/lp/green-volunteers-big-cf13a91344f43f3fa6ef1508f4de9f51.jpg");
/*background-image:url("../images/lp/orange-Outdoor-Event-Staff-big-b9a176da35732f0ba2c0e8abb67e920b.jpg");*/
background-size:cover;
position:absolute;
top:5em;
bottom:0;
left:0;
right:0;
z-index:-1000;
background-color:var(--hero-fallback);
}
.landing-hero--call-to-action {
margin-top:5em;
color:var(--ink-800);
smargin-right:10px;
}
.jumbotron {
text-align: center;
background-color: var(--surface-2);
margin-bottom:50px;
}
.jumbotron .btn {
padding: 14px 24px;
font-size: 21px;
}
.featurette-image {
border: 6px solid var(--border-neutral-soft);
}
.featurette .lead {
font-size: 120%;
}
.featurette-divider {
margin: 40px 0; /* Space out the Bootstrap
more */
}
/* Thin out the marketing headings */
.featurette-heading {
font-weight: 300;
line-height: 1;
letter-spacing: -1px;
padding-bottom: 1em;
}
/*
Bootstrap 5 a supprime .well, qui encadrait un bloc d'un fond gris et d'une bordure.
La classe reste utilisee par l'accroche de l'accueil et des pages d'atterrissage, ou
le fond translucide laisse voir la photo derriere : elle est donc definie ici, en
entier, plutot que remplacee par une carte qui ne ferait pas la meme chose.
*/
.well {
background-color: rgba(245, 245, 245, 0.7);
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 0.375rem;
padding: 1.25rem;
margin-bottom: 1.25rem;
}
.landing-hero--call-to-action h1 {
margin-top:0px;
font-size:250%;
font-weight:bold;
}
/*a {
outline: 0;
}
:focus {
outline:0;
}*/
/*
Le menu des pages publiques (À propos, Fonctionnalités, Tarifs...).
Bootstrap peint la pastille de l'onglet courant en bleu #337ab7 : une couleur
qui n'existe nulle part ailleurs dans la charte, et sur laquelle le violet du
texte devient illisible. On lui substitue un simple soulignement aux couleurs
de la marque, et le fond gris du survol s'en va avec elle.
La bordure de 2px est reprise sur le padding bas pour que la hauteur des
liens ne change pas d'un onglet à l'autre.
*/
a.headerNav {
color:var(--ink-600);
border-bottom:2px solid transparent;
padding-bottom:8px;
}
a.headerNav:hover, a.headerNav:focus, a.headerNav.active {
color:var(--brand-900);
}
a.headerNav:hover, a.headerNav:focus {
border-bottom-color:var(--brand-200);
}
a.headerNav.active {
font-weight:600;
border-bottom-color:var(--brand-900);
}
/*
La pastille de Bootstrap se neutralise ici, et pas seulement son fond : sa règle
« .nav-pills .nav-link.active » pèse trois classes et peint aussi le texte en
blanc, là où « a.headerNav.active » n'en pèse que deux. L'onglet courant sortait
donc en blanc sur blanc, et il n'en restait que le soulignement. Les règles
ci-dessous repassent devant, couleur comprise.
*/
.nav-pills .nav-link.headerNav {
background-color:transparent;
border-radius:0;
color:var(--ink-600);
}
.nav-pills .nav-link.headerNav:hover,
.nav-pills .nav-link.headerNav:focus,
.nav-pills .nav-link.headerNav.active {
background-color:transparent;
border-radius:0;
color:var(--brand-900);
}
button.ui-datepicker-close {
display: none;
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent footer by its height */
margin: 0 auto -3em;
/* Pad bottom by footer height */
padding: 0 0 100px;
}
/* Set the fixed height of the footer here */
#footer {
background-color: var(--brand-900);
text-align:center;
padding-bottom:2em;
}
#footer h3 {
color:var(--surface-0);
font-size: 120%;
font-weight:bold;
padding-bottom:1em;
}
#footer, #footer a {
color:var(--on-brand-muted);
}
#footer a:hover, #footer a:focus {
color:var(--surface-0);
}
.list-col {
padding-top:2em;
}
#footer hr {
border-color: var(--brand-700);
width:50%;
height:1px;
margin-top: 2em;
margin-bottom: 2em;
}
#footer p#copyright {
margin-top:2em;
smargin-bottom:2em;
}
.FB_UI_Hidden { width: 100px !important; }
/* Liens : violet de marque au lieu du bleu système, états survol/focus explicites */
a {
text-decoration:none;
color:var(--brand-600);
}
a:hover, a:focus {
color:var(--brand-800);
text-decoration: underline;
}
a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
outline: 2px solid var(--brand-300);
outline-offset: 2px;
}
a.no-underline:hover, a.no-underline:active, a.no-underline:visited, a.no-underline {
text-decoration: none;
}
/*
Un lien pose dans une phrase se souligne.
Le violet de la marque se detache bien du blanc de la page (7,4:1), mais du texte
noir qui l'entoure, pas du tout : 1,68:1 la ou WCAG 1.4.1 demande 3:1 quand la
couleur est le seul indice. Un lecteur daltonien, et plus simplement un lecteur
presse, ne voyait pas qu'il y avait un lien dans le paragraphe. axe-core en
comptait vingt-quatre, sur les journaux, l'aide, la fiche benevole et les tarifs.
Le soulignement ne concerne que le texte courant et les cellules de tableau. Ce
qui est deja reconnaissable a sa forme ne le prend pas : les boutons, les onglets,
les entrees de menu, la pagination, les cartes cliquables et la barre de
navigation. La classe .no-underline reste la sortie de secours.
*/
main a, #footer .card a {
text-decoration: underline;
}
/*
Ce qui se reconnait deja a sa forme ne se souligne pas : un bouton, un onglet, une
entree de menu, une pastille de pagination, une carte cliquable, une vignette, le
fil d'Ariane, la barre d'outils, les crayons d'edition et les listes de navigation
du pied de page et de l'administration. La classe .no-underline reste la sortie de
secours pour un cas particulier.
*/
main .btn, main .nav-link, main .dropdown-item, main .dropdown-toggle, main .page-link,
main .breadcrumb a, main .toolbar a, main .subnav a, main .list-group-item,
main .event-header a, main .my-page__tools a, main .reg-steps a,
main .admin-tile, main .admin-nav__link, main .settings-nav__link,
main .card-header a[role="button"], main .media > a, main .poste-progress-bar a,
main a.pbEdit, main a.piEdit, main a.no-underline, main a.circle-avatar,
main a:has(> img), main a:has(> .circle-avatar) {
text-decoration: none;
}
/*.navbar {
background:#307;
}*/
/*
La hauteur de la barre etait figee a 51px, parce que Bootstrap 3 sortait le menu
replie du flux et lui donnait son propre fond. Bootstrap 5 le laisse dans le flux,
a l'interieur de la barre : une hauteur fixe le faisait deborder sur la page, en
gris clair sur blanc et par-dessus les onglets de l'evenement. C'est donc une
hauteur minimale, et la barre grandit quand le menu se deplie.
*/
#navbar {
min-height: 51px;
}
/*.demo .navbar {
background:#646;
}*/
/************************************************/
.dev .navbar {
background:var(--env-dev);
}
.noProd .navbar {
background:var(--env-noprod);
}
/*section {
width:60%;
margin-left:auto;
margin-right:auto;
margin-top:1em;
margin-bottom:1em;
background-color:var(--surface-2);
padding:3em;
padding-top:1em;
}*/
/*footer {
background-color: var(--border-neutral-soft);
width:100%;
display:block;
text-align: center;
padding:0.5em;
margin-top:1em;
}*/
#fos_user_login_form {
max-width:40em;
margin-left:auto;
margin-right:auto;
}
/*#fos_user_registration_form, #fos_user_login_form, #equipe_form, #poste_form, #benevole_form {
width:40em;
margin-left:auto;
margin-right:auto;
}
#fos_user_registration_form div label, #fos_user_login_form div label, #equipe_form div label, #poste_form div label, #benevole_form div label {
width:20em;
display:block;
float:left;
}*/
#equipe_form div div ul {
/*display:block;*/
}
.custom_date_widget {
padding-bottom:2em;
}
.custom_date_input {
width:auto;
}
/*select {
display:inline;
color:red;
background:red;
}
.row {
display:inline;
background:blue;
}
.row {
margin-left: -15px;
margin-right: -15px;
}
.row:before,
.row:after {
content: none;
display: inline;
}
.row:after {
clear: none;
}*/
div.error {
text-align:center;
color:red;
margin:1em;
}
input[type="checkbox"].fontawsome { position: absolute; opacity: 0; z-index: -1; }
input[type="checkbox"].fontawsome+span { font: 16pt sans-serif; color: var(--ink-900); }
input[type="checkbox"].fontawsome+span:before { font: 16pt FontAwesome; content: '\00f096'; display: inline-block; width: 16pt; padding: 2px 0 0 3px; margin-right: 0.5em; }
input[type="checkbox"].fontawsome:checked+span:before {content: '\00f046'; color: var(--ink-900);}
input[type="checkbox"].fontawsome:focus+span:before { outline: 1px dotted var(--border-neutral-strong); }
input[type="checkbox"].fontawsome:disabled+span { color: var(--ink-400); }
input[type="checkbox"].fontawsome:not(:disabled)+span:hover:before { text-shadow: 0 1px 2px var(--brand-300); }
.navbar {
/*z-index:0;*/
}
.flashbag {
text-align:center;
}
table#benevoles tbody tr td .scrollable {
overflow-y:auto;
width:100%;
max-height:5em;
padding:0px;
margin:0px;
}
table#planningPoste tbody tr td {
vertical-align:middle;
}
/*#ui-datepicker-div {
z-index:10000;
background:red;
}*/
.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
.ui-timepicker-div dl { text-align: left; }
.ui-timepicker-div dl dt { float: left; clear:left; padding: 0 0 0 5px; }
.ui-timepicker-div dl dd { margin: 0 10px 10px 40%; }
.ui-timepicker-div td { font-size: 90%; }
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }
.ui-timepicker-rtl{ direction: rtl; }
.ui-timepicker-rtl dl { text-align: right; padding: 0 5px 0 0; }
.ui-timepicker-rtl dl dt{ float: right; clear: right; }
.ui-timepicker-rtl dl dd { margin: 0 40% 10px 10px; }
.ui-autocomplete { z-index: 9999 !important; }
/*
La pagination maison (liste des benevoles, journaux, evenements).
Le balisage et ces regles venaient de Bootstrap 2 : un