/* ————————————————————————-
VARIABLES & PALETTE OFFICIELLE (À NE JAMAIS MODIFIER)
————————————————————————- */
:root {
–vert-deep: #007A3E;
–vert-main: #62A420;
–vert-light: #8FBC4A;
–vert-mint: #E4F0D2;
–vert-pale: #F0F7E8;
–orange: #E87722;
–orange-pale: #FEF5E7;
–rouge: #DC2626;
–rouge-pale: #FEE2E2;
–bleu-doux: #B8D3D9;
–bleu-med: #0EA5E9;
–violet: #8B5CF6;
–cream: #FBF8EE;
–ink: #1F3B26;
–grey: #5B6B60;

/* Variables sémantiques de rendu par défaut (Light) */
–bg-page: var(–cream);
–bg-card: #FFFFFF;
–text-main: var(–ink);
–text-muted: var(–grey);
–border-color: rgba(91, 107, 96, 0.15);
–shadow-sm: 0 2px 4px rgba(31, 59, 38, 0.05);
–shadow-md: 0 10px 20px rgba(31, 59, 38, 0.08);
–transition-base: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Palette alternative (Mode Sombre) */
[data-theme= »dark »] {
–bg-page: #0F1C12;
–bg-card: #172B1D;
–text-main: #F3F7F4;
–text-muted: #A3B3A8;
–vert-mint: #1B3522;
–vert-pale: #132417;
–orange-pale: #351F10;
–rouge-pale: #3A1414;
–border-color: rgba(255, 255, 255, 0.1);
–shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2);
–shadow-md: 0 10px 20px rgba(0, 0, 0, 0.3);
}

/* ————————————————————————-
STYLES GÉNERAUX & RESET
————————————————————————- */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
font-family: ‘Inter’, sans-serif;
background-color: var(–bg-page);
color: var(–text-main);
line-height: 1.6;
overflow-x: hidden;
transition: background-color 0.3s, color 0.3s;
}
h1, h2, h3, .display-font {
font-family: ‘Space Grotesk’, sans-serif;
font-weight: 700;
line-height: 1.2;
}
a {
color: var(–vert-main);
text-decoration: none;
transition: var(–transition-base);
}
a:hover {
color: var(–vert-deep);
}
.container {
width: 100%;
max-width: 1140px;
margin: 0 auto;
padding: 0 24px;
}

/* UTILITIES */
.section-padding { padding: 80px 0; }
.text-center { text-align: center; }
.badge {
display: inline-block;
padding: 6px 12px;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
}

/* REVEAL ON SCROLL ANIMATIONS */
.reveal {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.reveal.active {
opacity: 1;
transform: translateY(0);
}

/* ————————————————————————-
1. LOADER ANIMÉ
————————————————————————- */
#loader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(–cream);
z-index: 9999;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
transition: opacity 0.5s ease, visibility 0.5s ease;
}
.loader-logo {
width: 120px;
height: 120px;
animation: pulse 0.8s ease-in-out infinite alternate;
}
@keyframes pulse {
0% { transform: scale(0.92); opacity: 0.8; }
100% { transform: scale(1.05); opacity: 1; }
}

/* ————————————————————————-
3. BARRE DE PROGRESSION SCROLL
————————————————————————- */
.scroll-progress-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 5px;
z-index: 1001;
background: transparent;
}
#scroll-progress-bar {
height: 100%;
width: 0%;
background: linear-gradient(90deg, var(–vert-main) 0%, var(–orange) 100%);
}

/* ————————————————————————-
2. NAVIGATION STICKY
————————————————————————- */
.sticky-nav {
position: fixed;
top: 5px;
left: 0;
width: 100%;
background-color: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
box-shadow: var(–shadow-sm);
z-index: 1000;
transform: translateY(-120%);
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border-bottom: 1px solid var(–border-color);
}
[data-theme= »dark »] .sticky-nav {
background-color: rgba(23, 43, 29, 0.95);
}
.sticky-nav.visible {
transform: translateY(0);
}
.nav-container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 24px;
max-width: 1200px;
margin: 0 auto;
}
.nav-links {
display: flex;
gap: 20px;
list-style: none;
}
.nav-links a {
font-size: 0.9rem;
font-weight: 600;
color: var(–text-main);
position: relative;
padding: 4px 0;
}
.nav-links a:hover, .nav-links a.active {
color: var(–vert-main);
}
.nav-links a::after {
content:  »;
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-color: var(–vert-main);
transition: var(–transition-base);
}
.nav-links a:hover::after, .nav-links a.active::after {
width: 100%;
}
.theme-toggle {
background: none;
border: 1px solid var(–border-color);
padding: 8px 14px;
border-radius: 20px;
cursor: pointer;
color: var(–text-main);
font-weight: 600;
font-size: 0.85rem;
display: flex;
align-items: center;
gap: 6px;
transition: var(–transition-base);
}
.theme-toggle:hover {
background-color: var(–vert-pale);
border-color: var(–vert-main);
}

/* ————————————————————————-
4. HERO SECTION
————————————————————————- */
.hero {
background: radial-gradient(circle at 80% 20%, var(–vert-mint) 0%, transparent 60%), var(–bg-card);
border-bottom: 4px solid var(–vert-deep);
padding: 80px 0 60px 0;
position: relative;
}
.hero-grid {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 40px;
}
.hero-brand {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 24px;
}
.logo-svg {
width: 70px;
height: 70px;
}
.baseline {
font-family: ‘Space Grotesk’, sans-serif;
font-weight: 700;
color: var(–orange);
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 0.95rem;
}
.publication-title {
font-size: 2.8rem;
color: var(–vert-deep);
margin-bottom: 16px;
line-height: 1.15;
}
[data-theme= »dark »] .publication-title {
color: #FFFFFF;
}
.tagline {
font-size: 1.2rem;
color: var(–text-muted);
max-width: 700px;
margin-bottom: 30px;
}
.meta-bar {
display: flex;
flex-wrap: wrap;
gap: 24px;
align-items: center;
font-size: 0.95rem;
color: var(–text-muted);
border-top: 1px solid var(–border-color);
padding-top: 20px;
}
.meta-item { display: flex; align-items: center; gap: 8px; }
.meta-item strong { color: var(–text-main); }
.issue-badge {
background-color: var(–vert-main);
color: white;
font-family: ‘Space Grotesk’, sans-serif;
font-size: 2.5rem;
font-weight: 700;
padding: 15px 25px;
border-radius: 16px;
text-align: center;
box-shadow: var(–shadow-md);
display: flex;
flex-direction: column;
justify-content: center;
line-height: 1;
}
.issue-badge span {
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.1em;
opacity: 0.9;
margin-bottom: 4px;
}

/* ————————————————————————-
5. SECTION « LES 3 CHOSES À RETENIR »
————————————————————————- */
.section-title {
font-size: 2rem;
color: var(–vert-deep);
margin-bottom: 40px;
position: relative;
display: inline-block;
}
[data-theme= »dark »] .section-title { color: #FFFFFF; }
.section-title::after {
content:  »;
position: absolute;
bottom: -8px;
left: 0;
width: 60px;
height: 4px;
background-color: var(–orange);
border-radius: 2px;
}
.retenir-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.retenir-card {
background-color: var(–bg-card);
border: 1px solid var(–border-color);
border-radius: 16px;
padding: 35px 30px;
position: relative;
box-shadow: var(–shadow-sm);
transition: var(–transition-base);
}
.retenir-card:hover {
transform: translateY(-5px);
box-shadow: var(–shadow-md);
border-color: var(–vert-light);
}
.card-number {
font-family: ‘Space Grotesk’, sans-serif;
font-size: 3.5rem;
font-weight: 700;
color: var(–vert-mint);
position: absolute;
top: 15px;
right: 25px;
line-height: 1;
z-index: 1;
transition: var(–transition-base);
}
[data-theme= »dark »] .card-number { color: rgba(143, 188, 74, 0.1); }
.retenir-card:hover .card-number {
color: var(–vert-light);
transform: scale(1.1);
}
.retenir-card h3 {
font-size: 1.3rem;
margin-bottom: 16px;
position: relative;
z-index: 2;
padding-right: 40px;
}
.retenir-card p {
color: var(–text-muted);
font-size: 0.95rem;
position: relative;
z-index: 2;
}

/* ————————————————————————-
6. SECTION « À LA UNE »
————————————————————————- */
.une-section { background-color: var(–vert-pale); }
.une-card {
background-color: var(–bg-card);
border-left: 8px solid var(–rouge);
border-radius: 16px;
box-shadow: var(–shadow-md);
overflow: hidden;
display: grid;
grid-template-columns: 1fr 200px;
}
.une-content { padding: 45px; }
.une-badge {
background-color: var(–rouge-pale);
color: var(–rouge);
margin-bottom: 20px;
}
.une-title {
font-size: 2.2rem;
color: var(–ink);
margin-bottom: 20px;
}
[data-theme= »dark »] .une-title { color: #FFFFFF; }
.une-chapo {
font-size: 1.2rem;
font-weight: 600;
color: var(–text-main);
margin-bottom: 20px;
line-height: 1.5;
}
.une-body {
color: var(–text-muted);
font-size: 1.05rem;
margin-bottom: 24px;
}
.une-side-number {
background: linear-gradient(135deg, var(–rouge) 0%, #b91c1c 100%);
color: rgba(255, 255, 255, 0.15);
display: flex;
align-items: center;
justify-content: center;
font-family: ‘Space Grotesk’, sans-serif;
font-size: 8rem;
font-weight: 700;
user-select: none;
padding: 20px;
}

/* ————————————————————————-
7. SECTION « EN BREF »
————————————————————————- */
.bref-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.bref-card {
background-color: var(–bg-card);
border: 1px solid var(–border-color);
border-radius: 14px;
padding: 24px;
text-align: center;
box-shadow: var(–shadow-sm);
}
.bref-category {
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 12px;
display: inline-block;
padding: 4px 10px;
border-radius: 12px;
}
.cat-moisson { background-color: var(–orange-pale); color: var(–orange); }
.cat-invest { background-color: var(–vert-mint); color: var(–vert-deep); }
.cat-network { background-color: rgba(139, 92, 246, 0.1); color: var(–violet); }
.cat-climat { background-color: rgba(14, 165, 233, 0.1); color: var(–bleu-med); }

.bref-stat {
font-family: ‘Space Grotesk’, sans-serif;
font-size: 2.5rem;
font-weight: 700;
color: var(–text-main);
margin-bottom: 8px;
line-height: 1.1;
}
.bref-desc {
color: var(–text-muted);
font-size: 0.9rem;
}

/* ————————————————————————-
8. SECTION « L’ÉDITO »
————————————————————————- */
.edito-section { background-color: var(–bg-card); border-top: 1px solid var(–border-color); border-bottom: 1px solid var(–border-color); }
.edito-wrapper {
max-width: 800px;
margin: 0 auto;
position: relative;
padding: 0 40px;
}
.edito-quote-mark {
font-family: ‘Georgia’, serif;
font-size: 6rem;
color: var(–vert-light);
position: absolute;
top: -40px;
left: -10px;
line-height: 1;
opacity: 0.3;
}
.edito-text {
font-style: italic;
font-size: 1.2rem;
color: var(–text-main);
line-height: 1.7;
margin-bottom: 24px;
}
.edito-author {
font-family: ‘Space Grotesk’, sans-serif;
font-weight: 700;
font-size: 1.05rem;
color: var(–vert-deep);
}
[data-theme= »dark »] .edito-author { color: var(–vert-light); }
.edito-role {
font-size: 0.85rem;
color: var(–text-muted);
}

/* ————————————————————————-
9. SECTION « LE DOSSIER DE LA SEMAINE »
————————————————————————- */
.dossier-box {
background-color: var(–bg-card);
border: 1px solid var(–border-color);
border-radius: 18px;
overflow: hidden;
box-shadow: var(–shadow-md);
}
.tabs-header {
display: flex;
background-color: var(–vert-pale);
border-bottom: 1px solid var(–border-color);
}
.tab-btn {
flex: 1;
padding: 18px 24px;
background: none;
border: none;
font-family: ‘Space Grotesk’, sans-serif;
font-size: 1.05rem;
font-weight: 600;
color: var(–text-muted);
cursor: pointer;
transition: var(–transition-base);
text-align: center;
border-bottom: 3px solid transparent;
}
.tab-btn:hover {
color: var(–vert-deep);
background-color: rgba(98, 164, 32, 0.05);
}
.tab-btn.active {
color: var(–vert-deep);
background-color: var(–bg-card);
border-bottom-color: var(–vert-main);
}
[data-theme= »dark »] .tab-btn.active { color: #FFFFFF; }

.tabs-content { padding: 40px; }
.tab-pane {
display: none;
animation: fadeIn 0.4s ease;
}
.tab-pane.active { display: block; }
@keyframes fadeIn {
from { opacity: 0; transform: translateY(5px); }
to { opacity: 1; transform: translateY(0); }
}
.tab-pane h3 {
font-size: 1.5rem;
color: var(–vert-deep);
margin-bottom: 16px;
}
[data-theme= »dark »] .tab-pane h3 { color: var(–vert-light); }
.tab-pane p {
color: var(–text-muted);
margin-bottom: 20px;
font-size: 1rem;
}
.tab-highlights {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-top: 24px;
}
.highlight-item {
background-color: var(–vert-pale);
padding: 16px;
border-radius: 10px;
border-left: 4px solid var(–vert-main);
font-size: 0.95rem;
}

/* ————————————————————————-
10. SECTION « AGENDA »
————————————————————————- */
.agenda-section { background-color: var(–vert-pale); }
.agenda-filters {
display: flex;
justify-content: center;
gap: 12px;
margin-bottom: 40px;
flex-wrap: wrap;
}
.filter-chip {
background-color: var(–bg-card);
border: 1px solid var(–border-color);
padding: 8px 18px;
border-radius: 25px;
font-size: 0.9rem;
font-weight: 600;
color: var(–text-muted);
cursor: pointer;
transition: var(–transition-base);
}
.filter-chip:hover, .filter-chip.active {
background-color: var(–vert-deep);
color: white;
border-color: var(–vert-deep);
}

.timeline {
position: relative;
max-width: 850px;
margin: 0 auto;
}
.timeline::before {
content:  »;
position: absolute;
top: 0;
left: 30px;
width: 4px;
height: 100%;
background-color: var(–border-color);
border-radius: 2px;
}
.timeline-item {
position: relative;
margin-bottom: 30px;
padding-left: 80px;
transition: var(–transition-base);
}
.timeline-item.hidden {
display: none;
}
.timeline-dot {
position: absolute;
top: 20px;
left: 22px;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: var(–bg-card);
border: 4px solid var(–grey);
z-index: 2;
transition: var(–transition-base);
}

/* Couleurs des catégories Agenda */
.timeline-item[data-category= »RESEAU »] .timeline-dot { border-color: var(–orange); }
.timeline-item[data-category= »DEPARTEMENTAL »] .timeline-dot { border-color: var(–vert-main); }
.timeline-item[data-category= »NATIONAL »] .timeline-dot { border-color: var(–vert-deep); }
.timeline-item[data-category= »ECHEANCE »] .timeline-dot { border-color: var(–bleu-med); }

.timeline-body {
background-color: var(–bg-card);
border: 1px solid var(–border-color);
border-radius: 14px;
padding: 24px;
box-shadow: var(–shadow-sm);
display: grid;
grid-template-columns: 140px 1fr auto;
align-items: center;
gap: 20px;
}
.event-date {
font-family: ‘Space Grotesk’, sans-serif;
font-weight: 700;
color: var(–text-main);
font-size: 1.05rem;
}
.event-cat-badge {
font-size: 0.7rem;
font-weight: 700;
padding: 2px 8px;
border-radius: 10px;
display: inline-block;
margin-top: 4px;
color: white;
}
.timeline-item[data-category= »RESEAU »] .event-cat-badge { background-color: var(–orange); }
.timeline-item[data-category= »DEPARTEMENTAL »] .event-cat-badge { background-color: var(–vert-main); }
.timeline-item[data-category= »NATIONAL »] .event-cat-badge { background-color: var(–vert-deep); }
.timeline-item[data-category= »ECHEANCE »] .event-cat-badge { background-color: var(–bleu-med); }

.event-details h4 {
font-size: 1.15rem;
color: var(–text-main);
margin-bottom: 4px;
}
.event-details p {
font-size: 0.9rem;
color: var(–text-muted);
}
.event-countdown {
font-family: ‘Space Grotesk’, sans-serif;
font-weight: 700;
font-size: 0.9rem;
color: var(–orange);
background-color: var(–orange-pale);
padding: 6px 12px;
border-radius: 8px;
text-align: center;
min-width: 110px;
}
.timeline-item[data-category= »ECHEANCE »] .event-countdown {
color: var(–bleu-med);
background-color: rgba(14, 165, 233, 0.1);
}

/* ————————————————————————-
11. SECTION « À FAIRE MAINTENANT »
————————————————————————- */
.checklist-box {
background-color: var(–bg-card);
border: 1px solid var(–border-color);
border-radius: 18px;
padding: 40px;
box-shadow: var(–shadow-md);
max-width: 850px;
margin: 0 auto;
}
.checklist-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
flex-wrap: wrap;
gap: 15px;
}
.checklist-progress-wrapper {
flex: 1;
max-width: 300px;
background-color: var(–vert-pale);
height: 12px;
border-radius: 6px;
overflow: hidden;
position: relative;
}
#checklist-progress-bar {
height: 100%;
width: 0%;
background-color: var(–vert-main);
transition: width 0.4s ease;
}
#checklist-counter {
font-family: ‘Space Grotesk’, sans-serif;
font-weight: 700;
font-size: 0.95rem;
color: var(–vert-deep);
}
.checklist-items {
display: flex;
flex-direction: column;
gap: 16px;
}
.checklist-item {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 16px;
border: 1px solid var(–border-color);
border-radius: 12px;
cursor: pointer;
transition: var(–transition-base);
}
.checklist-item:hover {
background-color: var(–vert-pale);
border-color: var(–vert-light);
}
.checklist-item input[type= »checkbox »] {
width: 20px;
height: 20px;
accent-color: var(–vert-main);
cursor: pointer;
margin-top: 2px;
}
.checklist-text {
font-size: 1rem;
color: var(–text-main);
font-weight: 600;
}
.checklist-item.checked {
background-color: var(–vert-pale);
border-color: transparent;
opacity: 0.75;
}
.checklist-item.checked .checklist-text {
text-decoration: line-through;
color: var(–text-muted);
}

/* Confetti Canvas overlay */
#confetti-canvas {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 9999;
display: none;
}

/* ————————————————————————-
12. FOOTER
————————————————————————- */
footer {
background-color: #0A1C10;
color: #E2E8F0;
padding: 60px 0 40px 0;
border-top: 6px solid var(–vert-main);
}
.footer-grid {
display: grid;
grid-template-columns: 1.51fr 2fr;
gap: 60px;
margin-bottom: 40px;
}
.footer-brand h3 {
font-size: 1.4rem;
color: #FFFFFF;
margin-bottom: 12px;
}
.footer-brand p {
color: #A0AEC0;
font-size: 0.9rem;
margin-bottom: 20px;
}
.footer-sources h4 {
font-family: ‘Space Grotesk’, sans-serif;
font-size: 1.1rem;
color: var(–vert-light);
margin-bottom: 16px;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.sources-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
list-style: none;
font-size: 0.85rem;
}
.sources-list a {
color: #CBD5E1;
}
.sources-list a:hover {
color: var(–vert-light);
padding-left: 4px;
}
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 30px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.85rem;
color: #A0AEC0;
flex-wrap: wrap;
gap: 15px;
}

/* ————————————————————————-
BADGE FLOTTANT
————————————————————————- */
.floating-badge {
position: fixed;
bottom: 24px;
right: 24px;
background-color: var(–orange);
color: white;
font-family: ‘Space Grotesk’, sans-serif;
font-weight: 700;
padding: 10px 16px;
border-radius: 30px;
box-shadow: var(–shadow-md);
z-index: 999;
font-size: 0.85rem;
letter-spacing: 0.05em;
opacity: 0;
transform: translateY(20px);
transition: var(–transition-base);
pointer-events: none;
}
.floating-badge.visible {
opacity: 1;
transform: translateY(0);
}

/* ————————————————————————-
RESPONSIVE DESIGN (Safari iOS, Chrome Optimized)
————————————————————————- */
@media (max-width: 992px) {
.retenir-grid { grid-template-columns: 1fr; gap: 20px; }
.une-card { grid-template-columns: 1fr; }
.une-side-number { display: none; }
.bref-grid { grid-template-columns: repeat(2, 1fr); }
.footer-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 768px) {
.hero-grid { grid-template-columns: 1fr; justify-items: start; }
.issue-badge { display: none; }
.publication-title { font-size: 2.2rem; }
.nav-links { display: none; } /* On conserve une barre simplifiée pour mobile */
.timeline-body { grid-template-columns: 1fr; gap: 12px; }
.timeline::before { left: 15px; }
.timeline-item { padding-left: 45px; }
.timeline-dot { left: 7px; }
.tabs-header { flex-direction: column; }
.tab-btn { border-bottom: none; border-left: 3px solid transparent; text-align: left; }
.tab-btn.active { border-left-color: var(–vert-main); }
.tab-highlights { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
.bref-grid { grid-template-columns: 1fr; }
.section-title { font-size: 1.6rem; }
}

/* ————————————————————————-
13. PRINT STYLES
————————————————————————- */
@media print {
body { background: white; color: black; }
.sticky-nav, .scroll-progress-container, .theme-toggle, .agenda-filters, .floating-badge, #loader, button {
display: none !important;
}
.hero, .retenir-card, .une-card, .bref-card, .dossier-box, .timeline-body, .checklist-box {
border: 1px solid #ccc !important;
box-shadow: none !important;
background: white !important;
page-break-inside: avoid;
}
.text-muted { color: #555 !important; }
.section-padding { padding: 30px 0; }
}

// Configuration temporelle fixe de référence de la revue (Juillet 2026)
const CURRENT_MOCK_DATE = new Date(‘2026-07-06T09:00:00’);

window.addEventListener(‘DOMContentLoaded’, () => {
// 1. GESTION DU LOADER ANIMÉ
setTimeout(() => {
const loader = document.getElementById(‘loader’);
loader.style.opacity = ‘0’;
setTimeout(() => {
loader.style.display = ‘none’;
// Démarrer les animations au retrait du loader
initCounters();
}, 500);
}, 800);

// Initialisations diverses
initTheme();
initChecklist();
initCountdowns();
initStickyNavAndFloatingBadge();
initRevealOnScroll();
});

// 2 & 3. STICKY NAV, SCROLL BAR PROGRESS & FLOATING BADGE
function initStickyNavAndFloatingBadge() {
const nav = document.getElementById(‘main-nav’);
const floatBadge = document.getElementById(‘float-badge’);
const progressBar = document.getElementById(‘scroll-progress-bar’);
const navLinks = document.querySelectorAll(‘.nav-links a’);
const sections = document.querySelectorAll(‘section’);

window.addEventListener(‘scroll’, () => {
const scrollTop = window.scrollY;
const docHeight = document.documentElement.scrollHeight – window.innerHeight;
const scrollPercent = (scrollTop / docHeight) * 100;

// Barre de progression supérieure
progressBar.style.width = scrollPercent + ‘%’;

// Visibilité Navigation Sticky (> 200px)
if (scrollTop > 200) {
nav.classList.add(‘visible’);
} else {
nav.classList.remove(‘visible’);
}

// Visibilité du Badge Flottant (Apparaît au scroll puis s’estompe vers le bas)
if (scrollTop > 400 && scrollTop {
const sectionTop = section.offsetTop – 100;
if (scrollTop >= sectionTop) {
currentSectionId = section.getAttribute(‘id’);
}
});

navLinks.forEach(link => {
link.classList.remove(‘active’);
if (link.getAttribute(‘href’) === `#${currentSectionId}`) {
link.classList.add(‘active’);
}
});
});
}

// REVEAL ON SCROLL VIA INTERSECTION OBSERVER
function initRevealOnScroll() {
const reveals = document.querySelectorAll(‘.reveal’);
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add(‘active’);
}
});
}, { threshold: 0.1 });

reveals.forEach(el => observer.observe(el));
}

// COMPTEURS ANIMÉS (COUNT-UP)
function initCounters() {
const counters = document.querySelectorAll(‘.count-up’);
counters.forEach(counter => {
const target = parseFloat(counter.getAttribute(‘data-target’));
const duration = 1500; // ms
const startTime = performance.now();

function updateCounter(currentTime) {
const elapsedTime = currentTime – startTime;
if (elapsedTime btn.classList.remove(‘active’));
tabPanes.forEach(pane => pane.classList.remove(‘active’));

event.currentTarget.classList.add(‘active’);
document.getElementById(tabId).classList.add(‘active’);
}

// FILTRES AGENDA
function filterAgenda(category) {
const chips = document.querySelectorAll(‘.filter-chip’);
chips.forEach(chip => chip.classList.remove(‘active’));
event.currentTarget.classList.add(‘active’);

const items = document.querySelectorAll(‘.timeline-item’);
items.forEach(item => {
if (category === ‘TOUT’ || item.getAttribute(‘data-category’) === category) {
item.classList.remove(‘hidden’);
} else {
item.classList.add(‘hidden’);
}
});
}

// COMPTE À REBOURS DYNAMIQUE PAR ÉVÉNEMENT (Basé sur la date simulée S28 2026)
function initCountdowns() {
const countdownElements = document.querySelectorAll(‘.event-countdown’);
countdownElements.forEach(el => {
const dateStr = el.getAttribute(‘data-date’);
const eventDate = new Date(dateStr + ‘T00:00:00’);

// Calcul de la différence en millisecondes par rapport à CURRENT_MOCK_DATE
const diffTime = eventDate – CURRENT_MOCK_DATE;
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));

if (diffDays > 0) {
el.textContent = `Dans ${diffDays} jours`;
} else if (diffDays === 0) {
el.textContent = `Aujourd’hui`;
} else {
el.textContent = `Passé`;
el.style.backgroundColor = ‘var(–border-color)’;
el.style.color = ‘var(–text-muted)’;
}
});
}

// CHECKLIST ACTIONS PERSISTANTE (LOCALSTORAGE)
function initChecklist() {
const storageKey = ‘cuma-actions’;
let savedData = JSON.parse(localStorage.getItem(storageKey)) || {};

const items = document.querySelectorAll(‘.checklist-item’);
items.forEach(item => {
const id = item.getAttribute(‘data-id’);
const checkbox = item.querySelector(‘input[type= »checkbox »]’);

if (savedData[id]) {
checkbox.checked = true;
item.classList.add(‘checked’);
}
});

updateChecklistProgress(false); // Pas de confetti au chargement initial
}

function toggleAction(checkbox) {
const item = checkbox.closest(‘.checklist-item’);
const id = item.getAttribute(‘data-id’);

if (checkbox.checked) {
item.classList.add(‘checked’);
} else {
item.classList.remove(‘checked’);
}

// Sauvegarde LocalStorage
const storageKey = ‘cuma-actions’;
let savedData = JSON.parse(localStorage.getItem(storageKey)) || {};
savedData[id] = checkbox.checked;
localStorage.setItem(storageKey, JSON.stringify(savedData));

updateChecklistProgress(true); // Autorise le confetti si 100% accompli
}

function updateChecklistProgress(allowConfetti) {
const checkboxes = document.querySelectorAll(‘.checklist-items input[type= »checkbox »]’);
const total = checkboxes.length;
let checkedCount = 0;

checkboxes.forEach(cb => {
if (cb.checked) checkedCount++;
});

const percent = total > 0 ? (checkedCount / total) * 100 : 0;
document.getElementById(‘checklist-progress-bar’).style.width = percent + ‘%’;
document.getElementById(‘checklist-counter’).textContent = `${checkedCount}/${total}`;

if (checkedCount === total && allowConfetti) {
triggerConfettiAnimation();
}
}

// SCRIPT CONFETTI MULTICOLORE (80 particules sur Canvas)
function triggerConfettiAnimation() {
const canvas = document.getElementById(‘confetti-canvas’);
const ctx = canvas.getContext(‘2d’);
canvas.style.display = ‘block’;

let width = canvas.width = window.innerWidth;
let height = canvas.height = window.innerHeight;

const colors = [‘#007A3E’, ‘#62A420’, ‘#8FBC4A’, ‘#E87722’, ‘#0EA5E9’, ‘#8B5CF6’];
const particles = [];

for (let i = 0; i {
p.tiltAngle += p.tiltAngleIncremental;
p.y += (Math.cos(p.d) + 3 + p.r / 2) / 2;
p.x += Math.sin(p.tiltAngle);
p.tilt = Math.sin(p.tiltAngle – index / 3) * 15;

ctx.beginPath();
ctx.lineWidth = p.r;
ctx.strokeStyle = p.color;
ctx.moveTo(p.x + p.tilt + p.r / 2, p.y);
ctx.lineTo(p.x + p.tilt, p.y + p.tilt + p.r / 2);
ctx.stroke();
});

// Arrêt automatique après 3.5 secondes pour libérer les ressources
if (Date.now() – startTime {
width = canvas.width = window.innerWidth;
height = canvas.height = window.innerHeight;
});
}

// MODE SOMBRE AVEC TOGGLE PERSISTÉ
function initTheme() {
const themeBtn = document.getElementById(‘theme-btn’);
const themeIcon = document.getElementById(‘theme-icon’);
const themeText = document.getElementById(‘theme-text’);
const storageKey = ‘cuma-theme’;

let currentTheme = localStorage.getItem(storageKey) || ‘light’;
document.documentElement.setAttribute(‘data-theme’, currentTheme);
updateThemeUI(currentTheme);

themeBtn.addEventListener(‘click’, () => {
let targetTheme = document.documentElement.getAttribute(‘data-theme’) === ‘light’ ? ‘dark’ : ‘light’;
document.documentElement.setAttribute(‘data-theme’, targetTheme);
localStorage.setItem(storageKey, targetTheme);
updateThemeUI(targetTheme);
});

function updateThemeUI(theme) {
if (theme === ‘dark’) {
themeIcon.textContent = ‘☀️’;
themeText.textContent = ‘Clair’;
} else {
themeIcon.textContent = ‘🌙’;
themeText.textContent = ‘Sombre’;
}
}
}