Styleguides

Couleurs

Base Lightest

var(--color-base-lightest)

Base Lighter

var(--color-base-lighter)

Base Light

var(--color-base-light)

Base

var(--color-base)

Base Dark

var(--color-base-dark)

Base Darker

var(--color-base-darker)

Base Darkest

var(--color-base-darkest)

Contrast Lowest

var(--color-contrast-lowest)

Contrast Lower

var(--color-contrast-lower)

Contrast Low

var(--color-contrast-low)

Contrast Medium

var(--color-contrast-medium)

Contrast High

var(--color-contrast-high)

Contrast Higher

var(--color-contrast-higher)

Contrast Highest

var(--color-contrast-highest)

Primary Lightest

var(--color-primary-lightest)

Primary Lighter

var(--color-primary-lighter)

Primary Light

var(--color-primary-light)

Primary

var(--color-primary)

Primary Dark

var(--color-primary-dark)

Primary Darker

var(--color-primary-darker)

Primary Darkest

var(--color-primary-darkest)

Accent Lightest

var(--color-accent-lightest)

Accent Lighter

var(--color-accent-lighter)

Accent Light

var(--color-accent-light)

Accent

var(--color-accent)

Accent Dark

var(--color-accent-dark)

Accent Darker

var(--color-accent-darker)

Accent Darkest

var(--color-accent-darkest)

Secondary Lightest

var(--color-secondary-lightest)

Secondary Lighter

var(--color-secondary-lighter)

Secondary Light

var(--color-secondary-light)

Secondary

var(--color-secondary)

Secondary Dark

var(--color-secondary-dark)

Secondary Darker

var(--color-secondary-darker)

Secondary Darkest

var(--color-secondary-darkest)

Tertiary Lightest

var(--color-tertiary-lightest)

Tertiary Lighter

var(--color-tertiary-lighter)

Tertiary Light

var(--color-tertiary-light)

Tertiary

var(--color-tertiary)

Tertiary Dark

var(--color-tertiary-dark)

Tertiary Darker

var(--color-tertiary-darker)

Tertiary Darkest

var(--color-tertiary-darkest)

Quaternary Lightest

var(--color-quaternary-lightest)

Quaternary Lighter

var(--color-quaternary-lighter)

Quaternary Light

var(--color-quaternary-light)

Quaternary

var(--color-quaternary)

Quaternary Dark

var(--color-quaternary-dark)

Quaternary Darker

var(--color-quaternary-darker)

Quaternary Darkest

var(--color-quaternary-darkest)

Black

var(--color-black)

White

var(--color-white)

Typographie

Général

Font Families

Primary (Source Serif 4)

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

'Source Serif 4', Georgia, serif

Secondary (Source Sans 3)

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

'Source Sans 3', system-ui, sans-serif

System

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

system-ui, sans-serif

Heading + Body

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pretium commodo nulla, non fringilla nibh laoreet vel. Curabitur leo libero, mattis vulputate neque quis, euismod malesuada metus. In eget pharetra risus, et tincidunt mi. Vivamus congue, leo ac commodo tristique, mi nibh blandit lacus, a sodales nibh dui sit amet ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vivamus blandit leo id urna accumsan porta. Curabitur suscipit augue id porttitor imperdiet. Pellentesque auctor rhoncus pulvinar. Praesent id fringilla nisl, ut commodo risus. Phasellus sollicitudin est nulla, at egestas sapien molestie dapibus.

Typographie

Échelle de tailles

Petit (14px)

Lorem ipsum

var(--text-sm)

Normal (16px)

Lorem ipsum

var(--text-base)

Moyen (20px → 24px)

Lorem ipsum

var(--text-lg)

Grand (24px → 30px)

Lorem ipsum

var(--text-xl)

Très grand (36px → 48px)

Lorem ipsum

var(--text-3xl)

Énorme (48px → 60px)

Lorem ipsum

var(--text-4xl)

Espacements

Très petit (8px)

var(--space-2xs)

Petit (12px)

var(--space-xs)

Normal (16px)

var(--space-sm)

Moyen (20px → 24px)

var(--space-md)

Grand (24px → 32px)

var(--space-lg)

Très grand (32px → 48px)

var(--space-xl)

Énorme (48px → 64px)

var(--space-2xl)

Immense (64px → 96px)

var(--space-3xl)

Container Margin X (20px)

var(--container-margin-x)

Boutons

Images par défaut

BSA Web UI

arrow-right
arrow-left
close
menu
plus
minus

Font Awesome – Light

location-dot
mobile-screen-button

Marques

facebook
flickr
google
instagram
linkedin
mail
pinterest
snapchat
spotify
twitch
twitter
vimeo
wordpress
youtube

Marques en couleur

facebook
instagram
twitter

Des Arbres dans nos Assiettes

brackets-x
database-01
terminal-square
brackets-slash
dataflow-03
code-circle-03
code-circle-01
cpu-chip-02
brackets
package-check
data
qr-code-02
server-04
dataflow-01
code-square-02
variable
server-06
puzzle-piece-01
folder-code
server-01
file-code-01
database-02
terminal
browser
qr-code-01
git-merge
container
codepen
package
brackets-check
terminal-browser
dataflow-02
cpu-chip-01
code-02
package-plus
server-03
git-branch-02
brackets-plus
file-code-02
code-browser
database-03
package-x
terminal-circle
package-minus
puzzle-piece-02
dataflow-04
git-pull-request
server-05
code-circle-02
git-commit
server-02
brackets-minus
code-01
git-branch-01
package-search
brackets-ellipses
code-square-01
recording-01
fast-forward
bluetooth-signal
power-01
tablet-01
sliders-04
volume-max
headphones-01
tablet-02
sliders-01
gaming-pad-01
stop
tv-01
monitor-01
skip-forward
modem-01
lightbulb-01
shuffle-01
tv-03
disc-01
battery-full
lightbulb-04
power-03
bluetooth-connect
webcam-02
monitor-04
play-square
repeat-01
repeat-03
signal-01
laptop-02
speaker-03
airplay
microphone-01
sliders-03
mouse
video-recorder-off
pause-circle
bluetooth-off
power-02
battery-low
recording-03
battery-mid
sliders-02
speaker-01
monitor-02
battery-empty
youtube
music-note-02
monitor-05
stop-circle
pause-square
volume-x
keyboard-01
stop-square
volume-min
battery-charging-02
monitor-03
video-recorder
podcast
wifi-off
hard-drive
volume-minus
play-circle
volume-plus
rss-01
film-02
microphone-off-02
voicemail
microphone-02
music-note-plus
speaker-02
keyboard-02
music-note-01
skip-back
laptop-01
recording-02
usb-flash-drive
shuffle-02
signal-02
chrome-cast
film-01
clapperboard
lightbulb-02
printer
lightbulb-05
phone-02
play
signal-03
headphones-02
fast-backward
battery-charging-01
lightbulb-03
webcam-01
wifi
film-03
phone-01
rss-02
airpods
repeat-04
microphone-off-01
disc-02
simcard
bluetooth-on
repeat-02
tv-02
gaming-pad-02
modem-02
corner-right-down
arrow-down
arrow-narrow-right
arrow-up-right
arrow-circle-down-right
corner-down-left
arrow-circle-up-left
arrow-up
arrow-circle-broken-down-left
chevron-right
switch-vertical-02
arrow-down-right
arrow-narrow-up
refresh-ccw-01
flip-forward
arrow-square-up
chevron-down
arrow-narrow-left
arrow-circle-down-left
arrows-up
arrow-block-right
reverse-right
expand-02
arrow-circle-up
corner-up-left
chevron-selector-vertical
refresh-cw-03
expand-03
arrows-triangle
expand-06
arrow-narrow-down
arrow-left
switch-horizontal-01
arrow-circle-broken-up-right
chevron-up-double
arrow-right
arrow-block-left
arrow-block-down
arrows-left
arrow-square-right
arrow-circle-broken-up
expand-04
arrow-circle-broken-right
arrow-block-up
arrow-circle-left
arrow-narrow-up-right
arrow-square-left
arrow-circle-broken-left
infinity
arrow-circle-right
refresh-ccw-02
refresh-ccw-05
refresh-cw-02
refresh-ccw-04
refresh-cw-05
arrow-square-up-left
chevron-right-double
refresh-ccw-03
chevron-selector-horizontal
chevron-left-double
arrow-square-down-left
expand-01
arrow-square-up-right
corner-down-right
arrow-up-left
arrow-square-down
switch-horizontal-02
chevron-down-double
arrow-down-left
arrows-right
switch-vertical-01
arrow-square-down-right
flip-backward
arrow-circle-broken-up-left
corner-left-up
corner-up-right
expand-05
arrow-circle-up-right
chevron-left
arrow-circle-broken-down-right
reverse-left
arrows-down
corner-left-down
corner-right-up
refresh-cw-04
arrow-narrow-down-right
arrow-narrow-up-left
refresh-cw-01
chevron-up
arrow-narrow-down-left
arrow-circle-down
arrow-circle-broken-down
vertical-leaf-2
vertical-leaf
leaf-duotone
minus
help-hexagon
loading-03
trash-03
help-octagon
hearts
log-in-04
tool-01
target-05
search-lg
speedometer-02
home-01
edit-01
dots-vertical
log-out-03
check-done-02
download-04
speedometer-04
download-cloud-01
check-square
speedometer-03
pin-01
building-06
edit-05
search-refraction
medical-circle
building-01
info-octagon
equal-not
trash-02
download-03
toggle-02-left
asterisk-01
slash-circle-01
link-02
share-02
wheelchair
filter-lines
building-03
settings-03
toggle-03-right
zap
google-chrome
life-buoy-02
hash-02
bookmark-check
target-04
plus
link-01
link-external-01
share-04
placeholder
zap-circle
check-done-01
copy-03
log-in-01
link-04
info-hexagon
x
copy-02
cloud-blank-01
link-05
link-external-02
percent-01
menu-04
heart-octagon
activity-heart
divide-01
cloud-blank-02
zap-fast
toggle-01-right
eye-off
heart-circle
download-cloud-02
share-07
percent-02
loading-02
heart-hexagon
heart-rounded
target-03
pin-02
home-03
edit-02
save-02
share-01
share-06
link-broken-02
life-buoy-01
check
heart-square
copy-07
archive
slash-circle-02
medical-cross
filter-funnel-02
translate-02
search-sm
menu-01
log-out-02
check-circle-broken
edit-04
divide-02
edit-03
upload-04
upload-03
check-heart
anchor
copy-01
building-07
bookmark
share-05
building-08
check-verified-01
download-02
help-circle
check-circle
bookmark-minus
medical-square
at-sign
settings-04
x-circle
check-verified-03
settings-02
percent-03
building-05
settings-01
copy-04
building-04
link-broken-01
bookmark-x
x-square
eye
target-01
trash-04
virus
log-in-02
copy-05
hash-01
trash-01
activity
heart-hand
search-md
info-square
upload-cloud-01
plus-circle
menu-03
menu-05
upload-cloud-02
divide-03
download-01
check-verified-02
upload-02
check-square-broken
home-02
log-in-03
slash-divider
heart
speedometer-01
toggle-03-left
translate-01
filter-funnel-01
toggle-02-right
link-03
home-04
zap-off
tool-02
log-out-04
asterisk-02
share-03
log-out-01
home-05
help-square
info-circle
target-02
equal
home-smile
plus-square
upload-01
building-02
bookmark-add
dots-horizontal
copy-06
toggle-01-left
loading-01
minus-square
zap-square
minus-circle
menu-02
home-line
dots-grid
save-01
slash-octagon
x-close
save-03
shield-02
lock-unlocked-01
fingerprint-03
lock-03
shield-off
file-lock-03
lock-keyhole-square
file-lock-01
shield-tick
key-01
passcode-lock
lock-04
folder-shield
scan
key-02
lock-keyhole-circle
passcode
file-shield-02
fingerprint-01
fingerprint-02
face-id-square
file-shield-01
shield-zap
fingerprint-04
face-id
shield-01
lock-unlocked-02
file-shield-03
file-lock-02
lock-01
lock-unlocked-04
lock-02
shield-dollar
shield-03
shield-plus
lock-unlocked-03
message-smile-circle
message-plus-square
message-question-circle
phone-x
phone-incoming-01
phone-outgoing-01
message-chat-square
message-heart-square
annotation-check
mail-01
message-x-circle
message-dots-square
phone-incoming-02
phone-hang-up
message-notification-circle
annotation-question
message-text-circle-01
phone-call-01
mail-04
annotation-alert
message-check-circle
send-02
message-x-square
send-03
message-text-square-01
phone-outgoing-02
message-check-square
inbox-01
message-square-01
phone-pause
message-plus-circle
message-square-02
phone
message-heart-circle
message-text-square-02
phone-call-02
message-circle-01
send-01
phone-plus
annotation-x
message-alert-square
annotation-dots
message-chat-circle
message-smile-square
mail-02
message-notification-square
annotation-info
inbox-02
annotation
annotation-plus
message-text-circle-02
message-question-square
annotation-heart
message-dots-circle
mail-03
mail-05
message-circle-02
message-alert-circle
align-horizontal-centre-01
align-vertical-center-01
minimize-02
layout-alt-02
layers-three-02
flex-align-bottom
rows-03
align-top-01
spacing-width-02
maximize-02
align-bottom-01
columns-01
table
grid-03
grid-dots-bottom
grid-dots-top
layers-two-01
flex-align-top
spacing-height-02
distribute-spacing-horizontal
maximize-01
layout-left
flex-align-right
grid-01
intersect-square
layers-three-01
align-horizontal-centre-02
spacing-width-01
list
align-left-02
layout-bottom
spacing-height-01
layout-alt-01
columns-02
layout-grid-01
columns-03
rows-01
grid-dots-vertical-center
intersect-circle
minimize-01
layout-right
align-vertical-center-02
layer-single
layout-alt-03
layout-alt-04
grid-dots-right
grid-dots-left
align-top-02
grid-02
distribute-spacing-vertical
layout-grid-02
rows-02
layers-two-02
grid-dots-horizontal-center
grid-dots-outer
layout-top
grid-dots-blank
align-left-01
align-bottom-02
flex-align-left
align-right-02
divider
align-right-01
bar-chart-12
line-chart-down-04
bar-chart-05
presentation-chart-03
bar-chart-11
line-chart-down-02
trend-up-01
bar-chart-03
chart-breakout-circle
line-chart-up-03
bar-chart-square-plus
bar-chart-circle-03
bar-chart-08
bar-chart-02
chart-breakout-square
bar-chart-square-01
bar-chart-square-up
pie-chart-04
line-chart-up-02
bar-chart-01
bar-chart-07
line-chart-up-04
horizontal-bar-chart-02
bar-chart-04
presentation-chart-02
bar-chart-06
bar-chart-circle-02
bar-chart-square-02
trend-down-01
bar-chart-10
bar-chart-square-minus
trend-down-02
horizontal-bar-chart-01
bar-chart-square-down
line-chart-down-03
pie-chart-02
bar-chart-09
line-chart-up-05
bar-chart-circle-01
presentation-chart-01
line-chart-up-01
pie-chart-01
line-chart-down-01
bar-line-chart
line-chart-down-05
bar-chart-square-03
horizontal-bar-chart-03
pie-chart-03
trend-up-02
bell-off-03
alert-hexagon
announcement-01
notification-box
bell-minus
bell-03
alert-octagon
bell-01
announcement-02
alert-square
bell-ringing-02
thumbs-up
alert-circle
bell-02
bell-off-01
thumbs-down
notification-text
bell-off-02
alert-triangle
notification-message
announcement-03
bell-plus
bell-ringing-04
bell-04
bell-ringing-01
bell-ringing-03
calendar-check-01
alarm-clock-minus
alarm-clock-check
calendar
watch-square
calendar-date
clock-stopwatch
calendar-minus-01
hourglass-01
calendar-check-02
calendar-plus-02
alarm-clock-off
clock-fast-forward
clock-snooze
calendar-heart-01
calendar-plus-01
alarm-clock
clock-check
alarm-clock-plus
calendar-minus-02
hourglass-02
hourglass-03
clock-refresh
watch-circle
clock
calendar-heart-02
clock-plus
clock-rewind
bezier-curve-03
pen-tool-plus
heading-01
cursor-03
cursor-02
cursor-click-02
underline-01
perspective-02
italic-square
letter-spacing-02
image-indent-right
paragraph-wrap
cursor-01
dotpoints-01
magic-wand-01
pencil-02
palette
colors
move
delete
align-left
pilcrow-01
pen-tool-minus
dotpoints-02
text-input
dropper
bold-square
subscript
type-strikethrough-02
paint
scissors-cut-01
pen-tool-02
feather
line-height
right-indent-02
reflect-01
italic-02
attachment-01
paint-pour
zoom-out
cursor-click-01
italic-01
scale-02
pencil-01
crop-02
scissors-cut-02
pilcrow-02
paragraph-spacing
align-justify
scale-01
brush-02
left-indent-01
crop-01
transform
attachment-02
bezier-curve-02
type-01
type-square
drop
brush-01
cursor-box
brush-03
type-02
strikethrough-01
heading-square
cursor-04
framer
pilcrow-square
bold-01
right-indent-01
align-center
scissors-01
eraser
letter-spacing-01
contrast-03
circle-cut
underline-square
pen-tool-01
magic-wand-02
bezier-curve-01
contrast-01
pencil-line
skew
hand
roller-brush
strikethrough-square
bold-02
scissors-02
reflect-02
image-indent-left
code-snippet-02
type-strikethrough-01
code-snippet-01
strikethrough-02
contrast-02
scale-03
underline-02
heading-02
perspective-01
left-indent-02
command
zoom-in
figma
align-right
image-user-check
image-check
image-user-right
camera-off
image-user-down
image-02
flash-off
image-user-x
image-user-plus
image-03
image-01
image-left
image-down
image-user-up
camera-lens
flash
image-04
image-05
image-user
image-x
camera-plus
image-user-left
colors
image-right
image-plus
camera-03
camera-01
image-up
camera-02
square
cube-01
triangle
dice-3
cube-outline
hexagon-02
dice-2
cube-02
cube-03
star-02
star-04
dice-6
octagon
dice-1
star-05
hexagon-01
dice-4
star-01
circle
pentagon
star-06
star-07
dice-5
cube-04
star-03
sale-03
credit-card-minus
piggy-bank-02
bank-note-02
currency-bitcoin-circle
gift-02
shopping-bag-02
currency-rupee-circle
sale-01
receipt
cryptocurrency-03
sale-04
coins-03
coins-02
piggy-bank-01
credit-card-x
cryptocurrency-04
currency-ethereum-circle
wallet-01
currency-yen
credit-card-lock
tag-01
currency-ruble
scales-01
currency-ruble-circle
currency-pound
credit-card-download
currency-dollar
coins-swap-01
coins-stacked-02
tag-03
scales-02
cryptocurrency-02
coins-hand
credit-card-refresh
bank-note-03
coins-stacked-03
currency-pound-circle
credit-card-up
currency-dollar-circle
credit-card-search
coins-04
currency-euro
cryptocurrency-01
coins-swap-02
currency-yen-circle
currency-rupee
currency-bitcoin
credit-card-shield
wallet-02
credit-card-down
credit-card-01
shopping-cart-02
diamond-01
shopping-bag-01
credit-card-edit
coins-01
credit-card-upload
wallet-05
tag-02
receipt-check
shopping-cart-01
gift-01
shopping-cart-03
credit-card-02
bank-note-01
shopping-bag-03
sale-02
wallet-03
wallet-04
credit-card-plus
credit-card-check
bank
coins-stacked-04
currency-ethereum
safe
diamond-02
currency-euro-circle
coins-stacked-01
book-open-01
calculator
award-03
briefcase-01
trophy-02
beaker-01
graduation-hat-02
trophy-01
graduation-hat-01
globe-slated-02
ruler
backpack
glasses-01
award-05
beaker-02
microscope
award-04
award-01
stand
certificate-01
book-open-02
award-02
atom-01
atom-02
briefcase-02
compass
globe-slated-01
glasses-02
certificate-02
telescope
book-closed
user-down-01
face-sad
user-01
user-x-01
users-x
user-plus-02
user-x-02
user-02
face-frown
user-up-01
users-minus
user-circle
user-right-02
face-smile
user-edit
users-left
users-03
face-neutral
users-right
users-down
face-wink
users-check
user-check-02
user-left-02
users-02
users-edit
user-down-02
user-minus-02
user-left-01
user-03
user-plus-01
user-minus-01
user-right-01
user-up-02
users-up
users-01
user-square
face-content
user-check-01
face-happy
users-plus
stars-01
cloud-raining-02
hurricane-03
wind-02
sun
cloud-raining-06
umbrella-02
sunset
moon-02
lightning-01
droplets-03
cloud-raining-04
hurricane-02
cloud-moon
cloud-snowing-01
stars-03
sun-setting-02
cloud-raining-05
droplets-01
cloud-sun-02
cloud-raining-03
waves
moon-01
snowflake-01
sunrise
sun-setting-03
thermometer-warm
wind-01
thermometer-01
snowflake-02
cloud-off
sun-setting-01
wind-03
lightning-02
thermometer-02
cloud-02
cloud-03
umbrella-03
stars-02
cloud-sun-01
thermometer-cold
cloud-raining-01
thermometer-03
cloud-snowing-02
cloud-lightning
cloud-01
umbrella-01
moon-star
hurricane-01
moon-eclipse
droplets-02
cloud-sun-03
file-plus-01
folder-question
file-heart-01
box
file-attachment-01
file-03
clipboard-attachment
sticker-square
clipboard-check
file-question-01
clipboard-minus
file-02
file-minus-01
file-01
folder-minus
clipboard-plus
file-07
file-question-02
file-search-02
folder-check
file-04
clipboard-download
clipboard-x
file-minus-03
file-check-01
folder-closed
file-question-03
paperclip
file-minus-02
file-check-03
file-plus-03
file-05
clipboard
file-download-01
file-search-01
file-heart-02
folder-download
file-attachment-05
file-download-03
folder-plus
folder-search
file-x-02
file-attachment-02
file-06
sticker-circle
file-x-01
file-attachment-03
file-search-03
file-x-03
folder-lock
file-attachment-04
folder-x
file-download-02
folder
file-plus-02
file-heart-03
file-check-02
navigation-pointer-02
luggage-03
flag-06
globe-03
truck-02
marker-pin-01
navigation-pointer-off-02
globe-02
globe-06
truck-01
train
mark
plane
map-02
marker-pin-06
flag-02
passport
marker-pin-05
route
globe-04
car-02
flag-05
rocket-01
marker-pin-03
tram
luggage-02
navigation-pointer-off-01
compass-02
globe-01
flag-03
ticket-01
car-01
globe-05
luggage-01
ticket-02
marker-pin-04
map-01
marker-pin-02
rocket-02
compass-01
navigation-pointer-01
compass-03
bus
flag-01
flag-04

Blocs Gutenberg courants

Typographie

Titre de niveau 1 — Des arbres dans nos assiettes

Titre de niveau 2 — Publications pedagogiques

Titre de niveau 3 — Agroforesterie et biodiversite

Titre de niveau 4 — Ressources pour enseignants

Titre de niveau 5 — Categories
Titre de niveau 6 — Metadata

La deforestation est responsable de 10 % des emissions mondiales de gaz a effet de serre. Ensemble, explorons les alternatives durables comme l’agroforesterie. Ce texte illustre le rendu d’un paragraphe standard avec la police Source Sans 3 en corps de texte et les titres en Source Serif 4.

Texte en taille small — utilise pour les metadonnees, dates et informations secondaires. 12 mars 2026 · Lycee Jean Moulin, Clermont-Ferrand.

Texte en taille large — utilise pour les introductions et les textes d’accroche. L’agroforesterie combine arbres et cultures agricoles sur une meme parcelle.

Listes

  • Soja — principale cause de deforestation en Amerique du Sud
  • Cacao — deforestation en Afrique de l’Ouest
  • Cafe — impact sur les forets tropicales
  • Huile de palme — destruction de la biodiversite en Asie du Sud-Est
  1. Observer et documenter la deforestation locale
  2. Proposer des alternatives alimentaires
  3. Partager ses decouvertes avec d’autres classes
  4. Agir collectivement pour le changement

Citation

La Terre n’est pas un heritage de nos parents, c’est un pret de nos enfants.

Proverbe amerindien

Boutons

Primary
Primary
Primary
Accent
Accent
Accent
Secondary
Secondary
Secondary
Tertiary
Tertiary
Tertiary
Quaternary
Quaternary
Quaternary

Icônes

Tableau

CultureSurface deforestee (ha/an)Region principale
Soja3 500 000Amerique du Sud
Huile de palme2 700 000Asie du Sud-Est
Cacao1 200 000Afrique de l’Ouest
Cafe600 000Amerique Centrale

Colonnes

Deforestation

Chaque annee, 10 millions d’hectares de foret disparaissent, soit l’equivalent de la superficie du Portugal.

Agroforesterie

L’agroforesterie est une pratique ancestrale qui integre les arbres dans les systemes agricoles pour ameliorer la productivite et la biodiversite.

Biodiversite

Les forets tropicales abritent plus de 50 % de la biodiversite mondiale sur seulement 6 % de la surface terrestre.

Sections avec fond

Section sur fond base-dark

Cette section utilise la couleur base-dark comme fond — utile pour alterner les sections et creer une hierarchie visuelle.

Section sur fond base-darker

Fond encore plus marque pour les zones de mise en avant ou les appels a l’action.

Section sur fond primary-darkest

Pour les sections hero ou les mises en avant fortes, avec texte blanc sur fond vert fonce.

Blocs BSA Web

Note

Lorem Ipsum

Lorem Ipsum

Accordion

L’agroforesterie est un mode d’exploitation des terres agricoles associant des arbres a des cultures ou a l’elevage. Cette pratique permet d’ameliorer la fertilite des sols, de proteger la biodiversite et de sequestrer du carbone.

Les enseignants peuvent s’inscrire sur la plateforme, puis soumettre des publications restreintes. Apres validation par un administrateur, les publications peuvent etre rendues publiques.