/* === DADSAC Modern Stylesheet === */
/* Polices auto-hebergees le 2026-09-08.
Avant : @import vers fonts.googleapis.com, qui transmettait l IP, l User-Agent
et l URL consultee de chaque visiteur a Google - en contradiction directe avec
ce qu affirme privacy.html. Un @import en tete d une feuille bloquante est en
plus le pire cas de figure : invisible pour le preload scanner, il n est
decouvert qu apres telechargement ET analyse de ce fichier, puis serialise
trois allers-retours vers deux origines tierces avant le premier rendu.
Sous-ensemble latin uniquement : le site n emploie que du Latin-1 et de la
ponctuation generale (verifie sur les 28 pages). */
/* Open Sans est une police VARIABLE : un seul fichier couvre 400 a 600,
d ou la plage "font-weight: 400 600" au lieu de deux @font-face. */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400 600;
font-display: swap;
src: url('../fonts/open-sans-var-latin.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;
}
/* Poppins n est pas variable : une graisse = un fichier.
400 n est pas repris, aucune regle ne l utilise (les titres sont en 600/700,
les boutons et la navigation en 500). */
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('../fonts/poppins-500-latin.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: 'Poppins';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../fonts/poppins-600-latin.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: 'Poppins';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('../fonts/poppins-700-latin.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;
}
:root {
/* Palette inspirée du logo et modernisée */
--primary-green: #1B5E20; /* Vert foncé du logo, plus profond */
--accent-red: #D32F2F; /* Rouge du logo, légèrement ajusté */
--light-bg: #f9f9f9; /* Fond très clair, presque blanc */
--white-color: #ffffff;
--dark-text: #212121; /* Noir très foncé pour textes principaux */
--medium-text: #616161; /* Gris moyen pour textes secondaires */
--light-grey-border: #e0e0e0; /* Bordure gris clair */
--shadow-color: rgba(0, 0, 0, 0.1);
/* Typographie */
--font-family-headings: 'Poppins', sans-serif;
--font-family-body: 'Open Sans', sans-serif;
--base-font-size: 100%; /* 2026-09-08 : etait 16px. Une valeur en px sur
ecrase la taille de police choisie par
l'utilisateur dans son navigateur. 100% la suit. */
--line-height-base: 1.7;
/* Spacing */
--spacing-unit: 1rem; /* 16px */
}
/* --- Reset & Base Styles --- */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: var(--base-font-size);
}
/* Le defilement anime peut provoquer des nausees chez les personnes sujettes
aux troubles vestibulaires : on le conditionne a leur reglage systeme. */
@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
}
body {
font-family: var(--font-family-body);
line-height: var(--line-height-base);
background-color: var(--light-bg);
color: var(--dark-text);
display: flex;
flex-direction: column;
min-height: 100vh;
}
img {
max-width: 100%;
height: auto;
display: block;
}
a {
color: var(--primary-green);
text-decoration: none;
transition: color 0.3s ease;
}
a:hover {
color: var(--accent-red);
}
/* --- Typography --- */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-family-headings);
color: var(--primary-green); /* Titres en vert principal */
margin-bottom: calc(var(--spacing-unit) * 1.5);
font-weight: 600;
line-height: 1.3;
}
h1 { font-size: 2.8rem; margin-bottom: calc(var(--spacing-unit) * 2); font-weight: 700; }
h2 { font-size: 2.2rem; }
h3 { font-size: 1.8rem; }
h4 { font-size: 1.4rem; }
p {
margin-bottom: var(--spacing-unit);
color: var(--medium-text);
}
ul, ol {
padding-left: calc(var(--spacing-unit) * 1.5);
margin-bottom: var(--spacing-unit);
}
li {
margin-bottom: calc(var(--spacing-unit) / 2);
color: var(--medium-text);
}
strong {
font-weight: 600;
color: var(--dark-text);
}
/* --- Layout --- */
.container {
max-width: 1140px;
width: 90%;
margin-left: auto;
margin-right: auto;
padding-left: var(--spacing-unit);
padding-right: var(--spacing-unit);
}
main {
flex-grow: 1;
padding-top: calc(var(--spacing-unit) * 3);
padding-bottom: calc(var(--spacing-unit) * 3);
}
section {
padding: calc(var(--spacing-unit) * 3) 0;
}
/* --- Header --- */
/* WCAG 2.2 SC 2.4.11 (Focus Not Obscured) : cet en-tete est "sticky", il
recouvrait donc l'element amene par Tab ou par une ancre. scroll-margin-top
reserve sa hauteur (55px de logo + 2rem de padding, arrondi a 6rem). */
:target,
a, button, input, textarea, select, summary, [tabindex],
h1, h2, h3, h4, h5, h6 {
scroll-margin-top: 6rem;
}
header.main-header {
background-color: var(--white-color);
padding: var(--spacing-unit) 0;
box-shadow: 0 2px 5px var(--shadow-color);
position: sticky; /* Make header sticky */
top: 0;
z-index: 1000;
width: 100%;
}
header .container {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap; /* Allow wrap for smaller screens */
}
header .logo img {
height: 55px; /* Adjusted logo size */
width: auto;
}
/* Language Switcher */
.lang-switch {
list-style: none;
padding: 0;
margin: 0 0 0 var(--spacing-unit); /* Space to the left */
display: flex;
gap: calc(var(--spacing-unit) / 2);
order: 2; /* Position it after logo, before nav potentially */
}
.lang-switch li a {
color: var(--medium-text);
font-size: 0.85rem;
font-weight: 600;
padding: 0.2rem 0.5rem;
border: 1px solid var(--light-grey-border);
border-radius: 4px;
transition: all 0.3s ease;
display: block;
}
.lang-switch li a:hover {
background-color: var(--light-bg);
color: var(--primary-green);
border-color: var(--primary-green);
text-decoration: none;
}
.lang-switch li a.active-lang {
background-color: var(--primary-green);
color: var(--white-color);
border-color: var(--primary-green);
cursor: default;
}
/* Navigation */
nav.main-nav ul {
list-style: none;
display: flex;
gap: calc(var(--spacing-unit) * 1.5);
}
nav.main-nav ul li a {
color: var(--dark-text);
font-weight: 500; /* Medium weight for nav links */
padding: 0.5rem 0; /* Padding top/bottom only */
position: relative;
transition: color 0.3s ease;
}
nav.main-nav ul li a::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: 0;
left: 0;
background-color: var(--accent-red);
transition: width 0.3s ease;
}
nav.main-nav ul li a:hover,
nav.main-nav ul li a.active {
color: var(--primary-green);
}
nav.main-nav ul li a:hover::after,
nav.main-nav ul li a.active::after {
width: 100%;
}
/* Mobile Navigation (Basic - can be enhanced with JS) */
.menu-toggle {
display: none; /* Hide by default on larger screens */
background: none;
border: none;
cursor: pointer;
padding: 0.5rem;
margin-left: var(--spacing-unit); /* Space it from nav/logo */
}
.menu-toggle span {
display: block;
width: 25px;
height: 3px;
background-color: var(--dark-text);
margin: 5px 0;
transition: all 0.3s ease-in-out;
}
/* Styles for when the mobile menu is open (would be toggled by JS) */
body.mobile-menu-open nav.main-nav {
display: block; /* Show the nav */
position: absolute;
top: 100%; /* Position below header */
left: 0;
right: 0;
background-color: var(--white-color);
box-shadow: 0 5px 10px var(--shadow-color);
padding: var(--spacing-unit);
border-top: 1px solid var(--light-grey-border);
}
body.mobile-menu-open nav.main-nav ul {
flex-direction: column;
align-items: center;
gap: var(--spacing-unit);
}
body.mobile-menu-open .menu-toggle span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
body.mobile-menu-open .menu-toggle span:nth-child(2) {
opacity: 0;
}
body.mobile-menu-open .menu-toggle span:nth-child(3) {
transform: rotate(-45deg) translate(5px, -5px);
}
/* --- Footer --- */
footer.main-footer {
background-color: var(--dark-text);
color: var(--light-bg);
padding: calc(var(--spacing-unit) * 2) 0;
text-align: center;
margin-top: auto; /* Push to bottom */
}
footer.main-footer p {
color: var(--light-bg);
font-size: 0.9rem;
margin: 0;
}
footer.main-footer .contact-info {
margin-top: var(--spacing-unit);
font-size: 0.9rem;
}
footer.main-footer .contact-info a {
color: var(--light-bg);
text-decoration: underline;
}
footer.main-footer .contact-info a:hover {
color: var(--white-color);
}
/* --- Components --- */
/* Buttons */
.btn {
display: inline-block;
padding: calc(var(--spacing-unit) * 0.75) calc(var(--spacing-unit) * 1.8);
border-radius: 50px; /* Pill shape */
font-family: var(--font-family-headings);
font-weight: 500;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
border: 2px solid transparent;
font-size: 0.95rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.btn-primary {
background-color: var(--accent-red);
color: var(--white-color);
border-color: var(--accent-red);
}
.btn-primary:hover {
background-color: #B71C1C; /* Darker red */
border-color: #B71C1C;
color: var(--white-color);
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.btn-secondary {
background-color: transparent;
color: var(--primary-green);
border-color: var(--primary-green);
}
.btn-secondary:hover {
background-color: var(--primary-green);
color: var(--white-color);
transform: translateY(-2px);
}
/* 2026-09-08 : sur un fond photo assombri, le vert #1B5E20 du bouton secondaire
tombe a 2.21:1 (mesure sur le hero de la page d'accueil) alors que WCAG 1.4.3
exige 4.5:1 pour du texte de 14px. Le libelle etait de fait illisible.
Blanc + voile propre au bouton : la lisibilite ne depend plus de la zone de
photo situee derriere. Pire cas (photo blanche) : 7.7:1. */
.hero-section .btn-secondary,
.photo-band .btn-secondary {
color: var(--white-color);
border-color: var(--white-color);
background-color: rgba(0, 0, 0, 0.35);
}
.hero-section .btn-secondary:hover,
.photo-band .btn-secondary:hover {
background-color: var(--white-color);
color: var(--dark-text);
border-color: var(--white-color);
}
/* Cards */
.card {
background-color: var(--white-color);
border-radius: 8px;
box-shadow: 0 4px 15px var(--shadow-color);
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
display: flex;
flex-direction: column; /* Ensure content flows vertically */
height: 100%; /* Make cards in a grid equal height */
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
.card-body {
padding: calc(var(--spacing-unit) * 1.5);
flex-grow: 1; /* Allow body to grow */
}
.card-title {
font-size: 1.3rem;
margin-bottom: var(--spacing-unit);
color: var(--primary-green);
}
.card-text {
color: var(--medium-text);
font-size: 0.95rem;
margin-bottom: calc(var(--spacing-unit) * 1.5);
}
.card-footer {
padding: var(--spacing-unit) calc(var(--spacing-unit) * 1.5);
background-color: var(--light-bg);
border-top: 1px solid var(--light-grey-border);
margin-top: auto; /* Push footer to bottom of card */
}
/* Forms */
.form-group {
margin-bottom: calc(var(--spacing-unit) * 1.5);
}
.form-group label {
display: block;
margin-bottom: calc(var(--spacing-unit) / 2);
font-weight: 600;
color: var(--dark-text);
}
.form-control {
display: block;
width: 100%;
padding: calc(var(--spacing-unit) * 0.75);
font-size: 1rem;
font-family: var(--font-family-body);
line-height: var(--line-height-base);
color: var(--dark-text);
background-color: var(--white-color);
background-clip: padding-box;
border: 1px solid var(--light-grey-border);
border-radius: 4px;
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.form-control:focus {
border-color: var(--primary-green);
box-shadow: 0 0 0 0.2rem rgba(27, 94, 32, 0.25); /* Green glow */
}
/* 2026-09-08 : "outline: 0" retire d'ici. Il supprimait l'indicateur de focus
sur tous les champs, en ne laissant qu'un halo vert a 1.32:1 - sous le seuil. */
.form-control:focus-visible {
outline: 3px solid var(--white-color);
outline-offset: 0;
box-shadow: 0 0 0 6px var(--dark-text);
}
/* --- Specific Page Sections --- */
/* Homepage Hero */
/* --- Fonds de section en vrai ![]()
(2026-09-08) ---------------------------
Ces trois fonds (hero, bandeau photo, contexte Dandora) etaient poses en
background-image inline. Trois consequences mesurees :
1. image-set() ne bascule que sur le FORMAT et la DENSITE, jamais sur la
largeur du viewport. Les memes 293 Ko partaient donc vers un ecran de
375px comme vers un 1920 - alors que hero-home-800.webp (99 Ko) existait
deja sur le disque, reference par aucune page.
2. Un fond CSS est invisible pour le preload scanner du navigateur : il
n'est decouvert qu'apres telechargement ET analyse du CSS, donc l'image
LCP demarrait apres toute la chaine des polices au lieu du debut.
3. fetchpriority="high" n'existe pas pour un fond CSS : Chrome demarre les
images de fond en priorite basse et ne les repriorise qu'apres le layout.
En ![]()
, srcset choisit la largeur, sizes la decrit, fetchpriority remonte
la priorite. La couche est posee en absolu, sous la superposition sombre. */
.section-media,
.section-media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}
.hero-section {
overflow: hidden;
background-color: #2b2b2b; /* evite le flash blanc avant le decodage */
background-position: center center;
color: var(--white-color);
padding: calc(var(--spacing-unit) * 6) 0;
position: relative;
text-align: center;
min-height: 70vh; /* Make hero section tall */
display: flex;
align-items: center;
justify-content: center;
}
.hero-section::before {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background-color: rgba(0, 0, 0, 0.5); /* Dark overlay */
z-index: 1;
}
.hero-content {
position: relative;
z-index: 2;
max-width: 700px;
margin: 0 auto;
}
.hero-content h1 {
color: var(--white-color);
font-size: 3.5rem;
font-weight: 700;
margin-bottom: var(--spacing-unit);
}
.hero-content .subtitle {
color: rgba(255, 255, 255, 0.9);
font-size: 1.3rem;
margin-bottom: calc(var(--spacing-unit) * 2);
font-weight: 400;
}
/* About Section (Example) */
.about-section {
background-color: var(--white-color);
}
/* Project Grid */
.project-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: calc(var(--spacing-unit) * 2);
}
/* Team Grid */
.team-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: calc(var(--spacing-unit) * 2);
}
.team-member {
text-align: center;
}
.team-member img {
width: 150px;
height: 150px;
object-fit: cover; /* ajout 2026-09 : sans ca, les portraits non carres sont ecrases */
border-radius: 50%;
margin: 0 auto calc(var(--spacing-unit) * 1.5) auto;
border: 4px solid var(--white-color);
box-shadow: 0 4px 10px var(--shadow-color);
}
.team-member h3,
.team-member h4 {
color: var(--primary-green);
margin-bottom: calc(var(--spacing-unit) / 2);
}
.team-member .role {
font-size: 0.9rem;
color: var(--medium-text);
font-weight: 600;
display: block;
margin-bottom: var(--spacing-unit);
}
/* Donation Section */
.donation-options {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: calc(var(--spacing-unit) * 2);
margin-top: calc(var(--spacing-unit) * 1.5);
}
.donation-methods {
flex: 1;
min-width: 250px;
}
.donation-methods p strong {
display: block;
margin-bottom: var(--spacing-unit);
}
.twint-qr-code {
flex-basis: 180px;
text-align: center;
}
.twint-qr-code img {
max-width: 100%;
height: auto;
border: 1px solid var(--light-grey-border);
padding: var(--spacing-unit);
margin-bottom: calc(var(--spacing-unit) / 2);
background-color: var(--white-color);
}
.twint-qr-code p {
font-size: 0.9em;
color: var(--medium-text);
margin-top: 0;
}
.banking-details {
margin-top: calc(var(--spacing-unit) * 1.5);
padding-top: calc(var(--spacing-unit) * 1.5);
border-top: 1px solid var(--light-grey-border);
}
.banking-details h4 {
margin-bottom: var(--spacing-unit);
font-size: 1.2rem;
}
.banking-details p {
margin-bottom: calc(var(--spacing-unit) / 2);
line-height: 1.5;
font-size: 0.95rem;
}
.bank-qr-code {
flex-basis: 180px; /* Match Twint QR size */
text-align: center;
}
.bank-qr-code img {
max-width: 100%;
height: auto;
border: 1px solid var(--light-grey-border);
padding: var(--spacing-unit);
margin-bottom: calc(var(--spacing-unit) / 2);
background-color: var(--white-color);
}
.bank-qr-code p {
font-size: 0.9em;
color: var(--medium-text);
margin-top: 0;
}
/* --- Responsive --- */
@media (max-width: 992px) {
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
.hero-content h1 { font-size: 3rem; }
.hero-content .subtitle { font-size: 1.2rem; }
}
@media (max-width: 768px) {
html { font-size: 93.75%; } /* = 15/16 de la preference, pas 15px en dur */
header .container {
/* justify-content: space-between; */ /* Adjust for hamburger */
position: relative; /* Needed for absolute positioning of mobile nav */
}
.menu-toggle {
display: block; /* Show hamburger button on mobile */
/* 2026-09-08 : "order: 3" retire. Le bouton est desormais AVANT