/* ===================================================
   POLICE LUCIOLE (Spéciale Déficience Visuelle)
=================================================== */
@font-face {
  font-family: 'Luciole';
  src: url('../assets/fonts/Luciole-Regular.woff2') format('woff2'); /* Ajout de /assets/ */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Fais la même modification d'URL pour Italic, Bold et Bold-Italic */

@font-face {
  font-family: 'Luciole';
  src: url('../assets/fonts/Luciole-Regular-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Luciole';
  src: url('../assets/fonts/Luciole-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Luciole';
  src: url('../assets/fonts/Luciole-Bold-Italic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* ===================================================
   VARIABLES (Design System Épuré & Accessible)
=================================================== */
:root {
  --c-bg: #F9FAFB;
  --c-surface: #FFFFFF;
  --c-text: #111827;
  --c-text-muted: #4B5563;
  
  --c-primary: #0F172A;
  --c-accent: #2563EB;
  --c-accent-hover: #1D4ED8;
  --c-border: #E5E7EB;

  --f-heading: 'Luciole', sans-serif;
  --f-body: 'Luciole', sans-serif;
  
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-btn: 9999px;
  
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.02);
  
  --nav-h: 90px;
  --max-w: 1200px;

  --c-hero-box: #374151;    
  --c-hero-frame: #0F172A;  
  --text-zoom: 1;
}

/* ===================================================
   RESET & BASE
=================================================== */
*, *::before, *::after { 
  box-sizing: border-box !important; 
  margin: 0; 
  padding: 0; 
}

html { 
  scroll-behavior: smooth; 
  font-size: 16px; 
}

body {
  font-family: var(--f-body);
  font-weight: 400; /* LIGNE À AJOUTER */
  color: var(--c-text);
  background: var(--c-bg);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html, body {
  max-width: 100vw;
  position: relative;
}

main {
  width: 100%;
  overflow-x: hidden; 
}

img, svg { display: block; max-width: 100%; height: auto; }

a { color: var(--c-accent); text-decoration: none; transition: color 0.3s ease; }
a:hover { color: var(--c-primary); }

ul, ol { list-style: none; }

*:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 4px; }

.skip-link {
  position: absolute; 
  top: -500px; 
  left: 0;
  background: var(--c-surface); 
  color: var(--c-primary);
  border: 2px solid var(--c-primary);
  padding: 1rem 1.5rem; 
  z-index: 9999;
  font-family: var(--f-heading); 
  font-weight: 700;
  border-radius: 0 0 var(--radius-sm) 0;
  transition: top 0.3s ease; 
}

.skip-link:focus { top: 0; }

/* ===================================================
   TYPOGRAPHIE
=================================================== */
h1, h2, h3, h4 { font-family: var(--f-heading); color: var(--c-primary); line-height: 1.2; margin-bottom: 1rem; }
h1 { font-size: clamp(2.5rem, 4.5vw, 3.8rem); font-weight: 700; letter-spacing: -0.01em; }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.5rem); font-weight: 700; }
h3 { font-size: 1.35rem; font-weight: 700; }
h4 { font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-text-muted); font-weight: 600; }
p { margin-bottom: 1.5rem; color: var(--c-text-muted); font-size: 1.125rem; }

.text-center { text-align: center; }
.text-center p { margin-left: auto; margin-right: auto; }

/* ===================================================
   BOUTONS & TAGS
=================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 28px; font-family: var(--f-heading); font-size: 1rem; font-weight: 700;
  border-radius: var(--radius-btn); border: 1px solid transparent; cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); text-align: center;
}
.btn--primary { background: var(--c-primary); color: var(--c-surface); box-shadow: var(--shadow-md); }
.btn--primary:hover { background: var(--c-accent); color: var(--c-surface); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn--outline { background: transparent; color: var(--c-primary); border-color: var(--c-border); }
.btn--outline:hover { border-color: var(--c-primary); background: var(--c-surface); }

.label {
  display: inline-flex; align-items: center; font-family: var(--f-heading);
  background: var(--c-surface); color: var(--c-primary); padding: 6px 16px;
  border-radius: var(--radius-btn); font-size: 0.85rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 1.5rem;
  border: 1px solid var(--c-border); box-shadow: var(--shadow-sm);
}

.btn--inverse { background: var(--c-surface); color: var(--c-primary); box-shadow: var(--shadow-md); }
.btn--inverse:hover { background: var(--c-accent); color: #ffffff; transform: translateY(-2px); box-shadow: var(--shadow-lg); }

.btn--outline-inverse { background: transparent; color: var(--c-surface); border-color: var(--c-surface); }
.btn--outline-inverse:hover { background: var(--c-surface); color: var(--c-primary); border-color: transparent; }

/* ===================================================
   LAYOUT & GRID
=================================================== */
.container { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 2rem; }

.section { padding: 8rem 0; }

main > .section:first-child,
main > div.container.section:first-child,
main > .hero:first-child { padding-top: 3rem; }

.section--sm { padding: 4rem 0; }
.section--dark { background: var(--c-primary); color: var(--c-surface); }
.section--dark h2, .section--dark h3 { color: var(--c-surface); }
.section--dark p { color: #94A3B8; }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4rem; align-items: center; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; }

/* ===================================================
   HEADER : APPLE STYLE
=================================================== */
.header {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 0;
  z-index: 1000;
  height: 72px;
  width: 100%;
}

.header__wrapper { display: flex; align-items: center; justify-content: space-between; height: 100%; width: 100%; padding: 0 4%; }
.header__left, .header__right { flex: 1; display: flex; align-items: center; }
.header__center { flex: 2; display: flex; justify-content: center; }
.header__right { justify-content: flex-end; gap: 12px; } 

.nav__logo { display: flex; align-items: center; gap: 12px; }
.nav__logo-img { height: 52px; width: auto; }
.nav__logo-text { font-family: var(--f-heading); font-size: 1.25rem; font-weight: 700; color: var(--c-primary); letter-spacing: -0.02em; }

.nav__links { display: flex; gap: 1.5rem; }
.nav__link { font-family: var(--f-heading); color: var(--c-text-muted); font-weight: 600; font-size: 1.05rem; transition: all 0.3s ease; white-space: nowrap; padding: 4px 0; }
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--c-accent); }

.btn--contact { padding: 10px 24px; font-size: 1rem; font-family: var(--f-heading); font-weight: 700; border-radius: 99px; background: var(--c-primary); color: #ffffff; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); white-space: nowrap; border: none; cursor: pointer; }
.btn--contact:hover, .btn--contact[aria-current="page"] { background: var(--c-accent); color: #ffffff; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2); }

.theme-toggle { background: transparent; border: none; color: var(--c-text-muted); cursor: pointer; width: 40px; height: 40px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: all 0.3s ease; outline: none; }
.theme-toggle:hover { color: var(--c-accent); background: rgba(0, 0, 0, 0.05); }

.nav__burger { display: none; background: none; border: none; color: var(--c-primary); cursor: pointer; }
.mobile-contact-item { display: none; }
.logo--mobile { display: none; }

/* ===================================================
   VRAI MODE SOMBRE (PURE BLACK / OLED)
=================================================== */
body.dark-theme {
  --c-bg: #000000;         
  --c-surface: #111111;    
  --c-text: #FFFFFF;
  --c-text-muted: #A0A0A0; 
  --c-primary: #FFFFFF;
  --c-accent: #2563EB;     
  --c-border: #222222;     
  --c-hero-box: #535456;   
  --c-hero-frame: #2563EB; 
}
body.dark-theme .header { background: rgba(0, 0, 0, 0.85); border-bottom-color: #222222; }
body.dark-theme .btn--contact { color: #000000; }
body.dark-theme .btn--contact:hover, body.dark-theme .btn--contact[aria-current="page"] { color: #ffffff; }
body.dark-theme .card, body.dark-theme .event-preview, body.dark-theme .disease-card { background: #111111; border-color: #222222; }
body.dark-theme .theme-toggle { color: #FFFFFF; }
body.dark-theme .theme-toggle:hover { background: rgba(255, 255, 255, 0.1); color: var(--c-accent); }
body.dark-theme .card-step { background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.05); }
body.dark-theme .card-step:hover { border-color: var(--c-accent); background: rgba(255, 255, 255, 0.05); }

/* ===================================================
   COMPOSANTS : HERO 2 COLONNES (Photo Fixe - Pas d'animation)
=================================================== */
.hero { padding: 1.5rem 0 10rem; background: var(--c-bg); overflow: hidden; }
.hero__content { text-align: left; }
.hero__content p { max-width: 55ch; margin-bottom: 2.5rem; }
.hero__actions { display: flex; gap: 1rem; justify-content: flex-start; }

.hero__visual { position: relative; padding-right: 20px; padding-bottom: 20px; }
/* FIX : Taille normale et Pas d'animation */
.hero__visual-img { 
    width: 100%; height: 500px; object-fit: cover; 
    border-radius: var(--radius-md); box-shadow: var(--shadow-lg); 
    background: var(--c-hero-box); position: relative; z-index: 2;
    animation: none !important; /* Force la désactivation de l'animation */
}
.hero__visual::after { content: ''; position: absolute; bottom: 0; right: 0; width: 90%; height: 90%; border: 2px solid var(--c-hero-frame); border-radius: var(--radius-md); z-index: 1; }

.cta__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ===================================================
   ANIMATION BRAILLE (Décoration Hero)
=================================================== */
.hero-braille { position: absolute; bottom: -30px; right: -20px; display: flex; gap: 12px; font-size: 5rem; color: var(--c-text-muted); opacity: 0.15; user-select: none; pointer-events: none; z-index: 0; }
.hero-braille span { animation: illuminateWave 3s infinite ease-in-out; display: inline-block; }
.hero-braille span:nth-child(1) { animation-delay: 0.0s; }
.hero-braille span:nth-child(2) { animation-delay: 0.15s; }
.hero-braille span:nth-child(3) { animation-delay: 0.3s; }
.hero-braille span:nth-child(4) { animation-delay: 0.45s; }
.hero-braille span:nth-child(5) { animation-delay: 0.6s; }
.hero-braille span:nth-child(6) { animation-delay: 0.75s; }
.hero-braille span:nth-child(7) { animation-delay: 0.9s; }
@keyframes illuminateWave { 0%, 100% { opacity: 0.15; color: var(--c-text-muted); transform: translateY(0); } 15% { opacity: 1; color: var(--c-accent); transform: translateY(-6px); text-shadow: 0 0 15px rgba(37, 99, 235, 0.4); } }
#hero-title .text-accent { color: var(--c-accent); }

/* ===================================================
   COMPOSANTS : IMPACT & TÉMOIGNAGE
=================================================== */
.impact { background: var(--c-surface); border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); padding: 4rem 0; }
.impact-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2rem; text-align: center; }
.impact-number { font-family: var(--f-heading); font-size: 3rem; font-weight: 700; color: var(--c-primary); line-height: 1; margin-bottom: 0.5rem; }
.impact-number span { color: var(--c-accent); }
.impact-label { font-size: 0.9rem; color: var(--c-text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }

.testimonial { background: var(--c-primary); color: var(--c-surface); border-radius: var(--radius-md); padding: 4rem; position: relative; overflow: hidden; }
.testimonial-bg { position: absolute; top: -40px; right: 20px; font-size: 15rem; font-family: var(--f-heading); color: rgba(255,255,255,0.05); line-height: 1; user-select: none; }
.testimonial__quote { font-family: var(--f-heading); font-size: 1.75rem; font-weight: 600; line-height: 1.4; margin-bottom: 2.5rem; position: relative; z-index: 2; max-width: 800px; }
.testimonial__author { display: flex; align-items: center; gap: 1rem; position: relative; z-index: 2; }
.testimonial__avatar { width: 50px; height: 50px; border-radius: 50%; background: var(--c-accent); display: flex; align-items: center; justify-content: center; font-family: var(--f-heading); font-weight: 700; color: var(--c-surface); }
.testimonial__info h4 { color: var(--c-surface); margin-bottom: 0; }
.testimonial__info p { color: #94A3B8; margin-bottom: 0; font-size: 0.9rem; }

/* ===================================================
   COMPOSANTS : CARTES & SVG
=================================================== */
.icon-svg { width: 48px; height: 48px; color: var(--c-accent); margin-bottom: 1.5rem; stroke-width: 1.5; }
.card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-md); padding: 3rem 2.5rem; height: 100%; display: flex; flex-direction: column; transition: all 0.4s ease; box-shadow: var(--shadow-sm); }
.card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: transparent; }
.card__link { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-heading); font-weight: 700; font-size: 0.9rem; padding-top: 1.5rem; text-transform: uppercase; letter-spacing: 0.05em; }

.event-preview { display: flex; gap: 2rem; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-md); padding: 2rem; align-items: center; transition: box-shadow 0.3s ease; }
.event-preview:hover { box-shadow: var(--shadow-md); }
.event-preview__date { background: var(--c-bg); border-radius: var(--radius-sm); padding: 1.5rem 1rem; text-align: center; min-width: 120px; }
.event-preview__date .day { display: block; font-family: var(--f-heading); font-size: 2.5rem; font-weight: 700; color: var(--c-primary); line-height: 1; }
.event-preview__date .month { display: block; font-family: var(--f-heading); font-size: 0.85rem; font-weight: 700; text-transform: uppercase; color: var(--c-accent); margin-top: 0.5rem; letter-spacing: 0.05em; }

.disease-card { background: var(--c-surface); border-left: 4px solid var(--c-accent); padding: 2.5rem; border-radius: 0 var(--radius-md) var(--radius-md) 0; box-shadow: var(--shadow-sm); transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); position: relative; overflow: hidden; }
.disease-card:hover { box-shadow: var(--shadow-lg); transform: translateX(10px); border-left-color: var(--c-primary); }
.disease-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(37, 99, 235, 0.05) 0%, transparent 100%); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; }
.disease-card:hover::before { opacity: 1; }
.stat-circle { width: 120px; height: 120px; border-radius: 50%; border: 4px solid var(--c-accent); display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--f-heading); color: var(--c-primary); margin: 0 auto 1.5rem; }
.stat-circle span { font-size: 2rem; font-weight: 700; line-height: 1; }

.card-step { background: var(--c-bg); border: 1px solid var(--c-border); box-shadow: var(--shadow-sm); padding: 2rem; border-radius: var(--radius-md); transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; height: 100%; }
.card-step__number { font-family: var(--f-heading); font-size: 3.5rem; font-weight: 800; color: var(--c-accent); opacity: 0.2; line-height: 1; margin-bottom: 1rem; display: block; transition: opacity 0.3s ease, transform 0.3s ease; transform-origin: left bottom; }
.card-step:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); border-color: var(--c-accent); }
.card-step:hover .card-step__number { opacity: 0.6; transform: scale(1.1); }

/* ===================================================
   PAGE ARTICLE DE BLOG (Template Éditorial)
=================================================== */
.article-header { text-align: left; margin-bottom: 2rem; }
.article-meta { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.article-title { font-size: clamp(2.2rem, 5vw, 3.8rem); line-height: 1.1; margin-bottom: 0; }
.article-cover { width: 100%; height: 450px; object-fit: cover; border-radius: var(--radius-md); margin-bottom: 2.5rem; box-shadow: var(--shadow-md); }
.article-lead { font-size: 1.35rem; font-weight: 600; color: var(--c-primary); border-left: 4px solid var(--c-accent); padding-left: 1.5rem; margin-bottom: 3rem; line-height: 1.6; }
.article-body { font-size: 1.15rem; line-height: 1.8; color: var(--c-text); }
.article-body h2 { margin-top: 3rem; margin-bottom: 1.5rem; }
.article-quote { font-size: 1.35rem; font-family: var(--f-heading); color: var(--c-primary); border-left: 4px solid var(--c-accent); padding-left: 1.5rem; margin: 2.5rem 0; font-style: italic; }

/* ===================================================
   FOOTER
=================================================== */
.footer { background: var(--c-surface); border-top: 1px solid var(--c-border); padding: 6rem 0 2rem; margin-top: auto; }
.footer h4 { color: var(--c-primary); font-size: 1.1rem; margin-bottom: 2rem; }
.footer ul { display: flex; flex-direction: column; gap: 1rem; }
.footer a { color: var(--c-text-muted); }
.footer a:hover { color: var(--c-accent); }
.footer__bottom { margin-top: 5rem; padding-top: 2rem; border-top: 1px solid var(--c-border); display: flex; justify-content: space-between; align-items: center; font-size: 0.9rem; color: var(--c-text-muted); }

/* ===================================================
   ANIMATIONS & TRANSITIONS (SCROLL REVEAL)
=================================================== */
.reveal { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

/* ===================================================
   OUTIL ACCESSIBILITÉ : ZOOM & CONTRASTE
=================================================== */
.text-resizer { display: flex; gap: 4px; align-items: center; margin-right: 12px; padding-right: 12px; border-right: 1px solid var(--c-border); }
.text-resizer__btn { background: none; border: none; border-radius: 4px; color: var(--c-text-muted); width: 28px; height: 28px; font-family: var(--f-body); font-weight: 700; font-size: 14px !important; cursor: pointer; opacity: 0.7; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; }
.text-resizer__btn:hover { opacity: 1; color: var(--c-accent); background: rgba(0,0,0,0.05); }
body.dark-theme .text-resizer__btn:hover { background: rgba(255,255,255,0.1); }

.nav__logo-text { font-size: 20px !important; }
.nav__link { font-size: 17px !important; font-weight: 400 !important; }
.nav__links { gap: 24px !important; }
.btn--contact { font-size: 16px !important; font-weight: 400 !important; }

html.zoom-n2 { font-size: 12px !important; } 
html.zoom-n1 { font-size: 14px !important; } 
html.zoom-0  { font-size: 16px !important; } 
html.zoom-1  { font-size: 18px !important; } 
html.zoom-2  { font-size: 21px !important; } 
html.zoom-3  { font-size: 24px !important; } 
html.zoom-4  { font-size: 28px !important; } 
html.zoom-5  { font-size: 32px !important; } 

.accessibility-menu { position: relative; }
.a11y-dropdown { position: absolute; top: 120%; right: 0; width: 260px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; z-index: 1001; padding: 0.5rem 0; }
.a11y-dropdown[hidden] { display: none; }
.a11y-dropdown__header { padding: 0.5rem 1rem; font-family: var(--f-heading); font-weight: 700; font-size: 0.95rem; color: var(--c-primary); border-bottom: 1px solid var(--c-border); margin-bottom: 0.5rem; }
.a11y-theme-btn { background: none; border: none; padding: 0.6rem 1rem; text-align: left; font-family: var(--f-body); font-size: 0.9rem; color: var(--c-text); cursor: pointer; transition: background 0.2s ease; width: 100%; }
.a11y-theme-btn:hover, .a11y-theme-btn.is-active { background: rgba(37, 99, 235, 0.1); color: var(--c-accent); font-weight: bold; }

/* Thèmes Haut Contraste */
body.hc-black-white { --c-bg: #FFFFFF !important; --c-surface: #FFFFFF !important; --c-text: #000000 !important; --c-text-muted: #000000 !important; --c-primary: #000000 !important; --c-accent: #000000 !important; --c-border: #000000 !important; }
body.hc-white-black { --c-bg: #000000 !important; --c-surface: #000000 !important; --c-text: #FFFFFF !important; --c-text-muted: #FFFFFF !important; --c-primary: #FFFFFF !important; --c-accent: #FFFFFF !important; --c-border: #FFFFFF !important; }
body.hc-blue-yellow { --c-bg: #FFFF00 !important; --c-surface: #FFFF00 !important; --c-text: #0000FF !important; --c-text-muted: #0000FF !important; --c-primary: #0000FF !important; --c-accent: #0000FF !important; --c-border: #0000FF !important; }
body.hc-yellow-blue { --c-bg: #0000FF !important; --c-surface: #0000FF !important; --c-text: #FFFF00 !important; --c-text-muted: #FFFF00 !important; --c-primary: #FFFF00 !important; --c-accent: #FFFF00 !important; --c-border: #FFFF00 !important; }
body.hc-green-black { --c-bg: #000000 !important; --c-surface: #000000 !important; --c-text: #00FF00 !important; --c-text-muted: #00FF00 !important; --c-primary: #00FF00 !important; --c-accent: #00FF00 !important; --c-border: #00FF00 !important; }
body.hc-black-green { --c-bg: #00FF00 !important; --c-surface: #00FF00 !important; --c-text: #000000 !important; --c-text-muted: #000000 !important; --c-primary: #000000 !important; --c-accent: #000000 !important; --c-border: #000000 !important; }
body.hc-blue-white { --c-bg: #FFFFFF !important; --c-surface: #FFFFFF !important; --c-text: #0000FF !important; --c-text-muted: #0000FF !important; --c-primary: #0000FF !important; --c-accent: #0000FF !important; --c-border: #0000FF !important; }
body.hc-white-blue { --c-bg: #0000FF !important; --c-surface: #0000FF !important; --c-text: #FFFFFF !important; --c-text-muted: #FFFFFF !important; --c-primary: #FFFFFF !important; --c-accent: #FFFFFF !important; --c-border: #FFFFFF !important; }

body[class*="hc-"] .header { background: var(--c-surface) !important; backdrop-filter: none !important; border-bottom: 2px solid var(--c-primary) !important; transition: none !important; }
body[class*="hc-"] .nav__link, body[class*="hc-"] .nav__logo-text, body[class*="hc-"] .theme-toggle { color: var(--c-text) !important; }
body[class*="hc-"] .header .btn--contact { background: var(--c-primary) !important; color: var(--c-bg) !important; border: 2px solid var(--c-primary) !important; }
body[class*="hc-"] .btn--primary, body[class*="hc-"] .btn--contact { background: var(--c-primary) !important; color: var(--c-bg) !important; border: 2px solid var(--c-bg) !important; }
body[class*="hc-"] .btn--outline, body[class*="hc-"] .card, body[class*="hc-"] .disease-card, body[class*="hc-"] .event-preview, body[class*="hc-"] .value-card { background: var(--c-bg) !important; border: 2px solid var(--c-primary) !important; color: var(--c-text) !important; }
body[class*="hc-"] section[style*="background: var(--c-primary)"] { background: var(--c-bg) !important; border-top: 2px solid var(--c-primary) !important; border-bottom: 2px solid var(--c-primary) !important; }

body[class*="hc-"] .testimonial, body[class*="hc-"] .testimonial .testimonial__quote, body[class*="hc-"] .testimonial .testimonial__info h4, body[class*="hc-"] .testimonial .testimonial__info p { background: var(--c-bg) !important; border-color: var(--c-primary) !important; color: var(--c-text) !important; }
body[class*="hc-"] .testimonial-bg { opacity: 0.1; }
body[class*="hc-"] .article-quote, body[class*="hc-"] .article-lead { color: var(--c-text) !important; }
.testimonial .testimonial__quote, .testimonial .testimonial__info h4, .testimonial .testimonial__info p { color: var(--c-surface) !important; }

/* ===================================================
   RESPONSIVE & FIXES (Tablette & Mobile)
=================================================== */
@media (max-width: 1024px) {
  /* 1. FIX DU HEADER : On le passe en "fixed" pour qu'il ne disparaisse jamais */
  .header {
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      width: 100% !important;
      z-index: 10001 !important; /* Le header au-dessus de tout */
  }

  /* 2. On ajoute une marge en haut de la page égale à la hauteur du header (72px)
        pour éviter que le contenu ne glisse sous le header transparent */
  body {
      padding-top: 72px !important;
  }

  .header__wrapper { padding: 0 1rem; }
  .header__center { display: block !important; position: static; }
  .header__left { flex: 0 0 auto !important; padding-right: 10px; }
  .logo--desktop { display: none !important; }
  .logo--mobile { display: block !important; height: 38px !important; width: auto; }
  .header__right { flex: 1 1 auto; justify-content: flex-end; gap: 8px !important; }
  .header__right .desktop-contact-btn { display: none !important; }
  
  /* Le bouton burger reste prioritaire pour qu'on puisse toujours cliquer dessus */
  .nav__burger { display: block !important; margin-left: 8px; position: relative; z-index: 10002 !important; } 
  .text-resizer { margin-right: 4px; padding-right: 8px; }

  /* 3. FIX MENU BURGER : Position fixe parfaite juste sous le header */
  .nav__links { 
      position: fixed !important; 
      top: 72px !important; /* Démarre pile sous le header de 72px */
      left: 0 !important; 
      width: 100% !important; 
      height: calc(100vh - 72px) !important; 
      overflow-y: auto !important; 
      background: var(--c-surface) !important; 
      padding: 2rem !important; 
      box-shadow: var(--shadow-md) !important;
      z-index: 10000 !important; /* Se place juste en dessous du header (10001) */
      
      display: flex !important;
      flex-direction: column !important;
      transform: translateX(100%);
      transition: transform 0.4s ease;
      visibility: hidden;
  }
  
  .nav__links.is-open { 
      transform: translateX(0) !important; 
      visibility: visible !important;
  }

  .nav__link { white-space: normal; display: block; width: 100%; padding: 12px 0; } 
  .nav__link::after { display: none; }

  .mobile-contact-item { display: block; margin-top: 1rem; border-top: 1px solid var(--c-border); padding-top: 1.5rem; }
  .mobile-contact-item .btn { width: 100%; }
}

@media (max-width: 900px) {
  /* FIX MOBILE SAUVAGE : ANTI-SCROLL HORIZONTAL BLANC */
  html, body { overflow-x: clip !important; width: 100% !important; max-width: 100vw !important; margin: 0; padding: 0; }

  .hero { padding: 4rem 0; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; gap: 2rem; }
  .hero__content { text-align: center; }
  .hero__actions { justify-content: center; }
  
  /* FIX : Réinitialisation taille image hero sur mobile standard */
  .hero__visual-img { height: 350px; max-width: 100%; }
  
  .impact-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonial { padding: 2rem; }
  .testimonial__quote { font-size: 1.25rem; }

  h1 { font-size: 2.2rem !important; line-height: 1.15 !important; }
  h2 { font-size: 1.8rem !important; line-height: 1.2 !important; }

  main > div.container.section:first-child { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
  .section { padding: 4rem 0; }

  /* Empilement propre Hero */
  .hero__actions { display: flex !important; flex-direction: column !important; align-items: stretch !important; width: 100% !important; gap: 12px !important; }
  .hero__actions .btn { width: 100% !important; border-radius: 12px !important; white-space: normal !important; height: auto !important; padding: 14px 20px !important; }

  /* Empilement propre Agenda */
  .event-preview { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; padding: 1.5rem !important; gap: 1rem !important; }
  .event-preview > * { width: 100% !important; min-width: 0 !important; margin: 0 !important; }
  .event-preview .btn { margin-top: 1rem !important; border-radius: 12px !important; }

  /* Blog */
  .article-cover { height: 250px; }
  .article-lead { font-size: 1.15rem; padding-left: 1rem; margin-bottom: 2rem; }
  .article-quote { font-size: 1.15rem; padding-left: 1rem; }

  /* Braille décoratif */
  .hero-braille { font-size: 3rem; bottom: -20px; right: -10px; }
}

@media (max-width: 768px) {
  /* FIX : IMAGE HERO CENTRÉE SANS BORDURE (MOBILE) */
  .hero__visual {
      width: 100% !important; 
      margin: 20px auto 0 auto !important; 
      padding: 0 !important; /* LA CORRECTION EST ICI : on supprime l'espace vide à droite */
      transform: none !important;
      display: flex !important; 
      justify-content: center !important; 
      align-items: center !important;
  }

  .hero__visual-img {
      width: 100% !important; 
      height: auto !important;
      border-radius: 20px;
      margin: 0 auto !important; 
      display: block;
      animation: none !important; 
  }

  .hero__visual::after { display: none !important; }
}

/* ===================================================
   COMPOSANT : NEWSLETTER CLASSIQUE & ÉLÉGANTE
=================================================== */

/* 1. Le conteneur principal (Aéré et centré) */
.newsletter-section {
    background-color: var(--c-primary); /* Ton bleu nuit */
    padding: 4rem 0; /* Bel espace pour respirer */
    width: 100%;
}

/* 2. Textes simples et lisibles */
.newsletter-title {
    color: #ffffff;
    font-size: 1.75rem;
    margin-bottom: 0.25rem;
    font-family: var(--f-heading);
}

.newsletter-desc {
    color: #cbd5e1; /* Gris clair */
    font-size: 1rem;
    margin-bottom: 2rem; /* Espace équilibré avant le formulaire */
    font-family: var(--f-body);
}

/* 3. Le formulaire ultra-standard */
.newsletter-form-basic {
    display: flex;
    justify-content: center;
    gap: 8px; /* Tout petit espace entre le champ et le bouton */
    max-width: 450px; /* Formulaire pas trop large */
    margin: 0 auto;
}

/* 4. Le champ de saisie email */
.newsletter-form-basic input {
    flex-grow: 1;
    padding: 12px 16px;
    border: none;
    border-radius: 4px; /* Coins à peine arrondis (standard) */
    font-family: var(--f-body);
    font-size: 1rem;
    color: #111111;
    background-color: #ffffff;
    outline: none;
}

/* Bordure bleue au clic pour l'accessibilité */
.newsletter-form-basic input:focus {
    box-shadow: 0 0 0 3px var(--c-accent);
}

/* 5. Le bouton (avec effets 3D subtils) */
.newsletter-form-basic button {
    background-color: #ffffff;
    color: var(--c-primary);
    border: none;
    border-radius: 4px;
    padding: 12px 24px;
    font-family: var(--f-heading);
    font-weight: bold;
    font-size: 1rem;
    cursor: pointer;
    /* On prépare l'animation de soulèvement et d'ombre */
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

/* L'effet de survol (Dynamique mais sérieux) */
.newsletter-form-basic button:hover {
    background-color: #f8fafc; /* Gris très très clair */
    transform: translateY(-3px); /* Le bouton se soulève de 3 pixels */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Apparition de l'ombre */
}

/* L'effet de clic (Tactile) */
.newsletter-form-basic button:active {
    transform: translateY(0); /* Le bouton s'enfonce quand on clique */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* L'ombre rétrécit */
}

/* 6. Responsive pour mobile */
@media (max-width: 500px) {
    .newsletter-form-basic {
        flex-direction: column;
    }
}

/* ===================================================
   MODE SOMBRE : NEWSLETTER
=================================================== */
/* 1. La section devient presque noire pour reposer les yeux */
body.dark-theme .newsletter-section {
    background-color: #111111; /* Noir profond */
}

body.dark-theme .newsletter-title {
    color: #FFFFFF;
}

body.dark-theme .newsletter-desc {
    color: #94A3B8; /* Gris légèrement plus sombre qu'en mode clair */
}

/* 2. Le champ de texte ne doit plus être blanc pétant */
body.dark-theme .newsletter-form-basic input {
    background-color: #222222; /* Gris très sombre */
    color: #FFFFFF; /* Le texte tapé est blanc */
    border: 1px solid #444444; /* Petite bordure pour voir où taper */
}

body.dark-theme .newsletter-form-basic input::placeholder {
    color: #94A3B8;
}

/* 3. Le bouton repasse en bleu pour contraster sur le fond noir */
body.dark-theme .newsletter-form-basic button {
    background-color: var(--c-accent); /* Ton bleu vif */
    color: #ffffff;
}

/* L'effet de survol adapté au mode nuit */
body.dark-theme .newsletter-form-basic button:hover {
    background-color: #3B82F6; /* Bleu légèrement plus clair */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5); /* Ombre plus marquée pour le fond noir */
}

/* ===================================================
   LE FIX ULTIME : CONTRASTES TEXTES & TITRES (CLAIR + SOMBRE)
=================================================== */

/* 1. MODE CLAIR : Textes bien foncés et Titres profonds */
.card p, 
.event-preview p,
.disease-card p,
.impact p {
    color: #1F2937 !important;
    font-weight: 500 !important;
}

.card h2, .card h3, .card h4,
.card h2 a, .card h3 a, .card h4 a,
.event-preview h2, .event-preview h3, .event-preview h4,
.event-preview h2 a, .event-preview h3 a, .event-preview h4 a,
.disease-card h2, .disease-card h3, .disease-card h4,
.disease-card h2 a, .disease-card h3 a, .disease-card h4 a {
    color: var(--c-primary) !important;
    font-weight: 800 !important;
}

/* 2. MODE SOMBRE : Textes et Liens en Blanc pur (Le correctif de ta capture) */
body.dark-theme .card p, 
body.dark-theme .event-preview p,
body.dark-theme .disease-card p,
body.dark-theme .impact p {
    color: #F8FAFC !important; 
}

body.dark-theme .card h2, 
body.dark-theme .card h3, 
body.dark-theme .card h4,
body.dark-theme .card h2 a, 
body.dark-theme .card h3 a, 
body.dark-theme .card h4 a,
body.dark-theme .event-preview h2, 
body.dark-theme .event-preview h3, 
body.dark-theme .event-preview h2 a, 
body.dark-theme .event-preview h3 a, 
body.dark-theme .disease-card h2, 
body.dark-theme .disease-card h3,
body.dark-theme .disease-card h2 a, 
body.dark-theme .disease-card h3 a {
    color: #FFFFFF !important;
}

/* ===================================================
   LE VRAI FIX : CONTRASTES DES ARTICLES (NEWS-CARD)
=================================================== */

/* --- 1. MODE CLAIR --- */
/* Textes bien foncés */
.news-card__excerpt {
    color: #1F2937 !important;
    font-weight: 500 !important;
}

/* Titres profonds et gras (même avec le lien <a> dedans) */
.news-card__title, 
.news-card__title a {
    color: var(--c-primary) !important;
    font-weight: 800 !important;
}

/* --- 2. MODE SOMBRE --- */
/* Textes en blanc cassé très lisible */
body.dark-theme .news-card__excerpt {
    color: #F8FAFC !important; 
}

/* Titres et liens forcés en blanc pur ! */
body.dark-theme .news-card__title, 
body.dark-theme .news-card__title a {
    color: #FFFFFF !important;
}

/* Petit bonus : on éclaircit la date et le lien "Lire l'article" en mode sombre pour que ce soit parfait */
body.dark-theme .news-card__meta {
    color: #94A3B8 !important; 
}
body.dark-theme .news-card__link {
    color: #60A5FA !important; /* Un bleu un peu plus clair pour ressortir sur le noir */
}

/* ===================================================
   OUTIL : LECTURE VOCALE FLOTTANT (Haut Gauche)
=================================================== */
.audio-reader-widget {
    position: fixed;
    /* On le place à 90px du haut pour qu'il soit juste sous ton header de 72px */
    top: 90px; 
    left: 20px;
    z-index: 9999;
}

.audio-btn-main {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--c-surface);
    border: 2px solid var(--c-primary);
    color: var(--c-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    outline: none;
}

.audio-btn-main:hover {
    transform: scale(1.05);
    background: var(--c-primary);
    color: var(--c-surface);
}

/* État quand la voix parle */
.audio-btn-main.is-playing {
    background: var(--c-accent);
    border-color: var(--c-accent);
    color: #ffffff;
    animation: pulseAudio 2s infinite;
}

@keyframes pulseAudio {
    0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.4); }
    70% { box-shadow: 0 0 0 12px rgba(37, 99, 235, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}

/* Le menu déroulant des vitesses */
.audio-menu {
    position: absolute;
    top: 60px; /* S'ouvre sous le bouton rond */
    left: 0;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    width: 180px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
}

.audio-menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.audio-menu__header {
    padding: 10px 15px;
    font-size: 0.8rem;
    font-family: var(--f-heading);
    font-weight: 700;
    color: var(--c-text-muted);
    background: var(--c-bg);
    border-bottom: 1px solid var(--c-border);
    text-transform: uppercase;
}

.audio-speed-btn {
    background: none;
    border: none;
    padding: 12px 15px;
    text-align: left;
    font-family: var(--f-body);
    font-size: 0.95rem;
    color: var(--c-text);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.audio-speed-btn:hover {
    background: rgba(37, 99, 235, 0.1);
    color: var(--c-accent);
    font-weight: bold;
}

/* Modes Haut Contraste & Sombre pour le widget */
body.dark-theme .audio-btn-main,
body[class*="hc-"] .audio-btn-main { background: var(--c-bg); border-color: var(--c-primary); color: var(--c-text); }
body.dark-theme .audio-menu,
body[class*="hc-"] .audio-menu { background: var(--c-bg); border-color: var(--c-primary); }
body.dark-theme .audio-menu__header,
body[class*="hc-"] .audio-menu__header { background: var(--c-surface); color: var(--c-text); border-color: var(--c-primary); }
body.dark-theme .audio-speed-btn,
body[class*="hc-"] .audio-speed-btn { color: var(--c-text); }

/* ===================================================
   LE MASTER FIX : CARTES ET SECTIONS SOMBRES
=================================================== */

/* --- 1. IMMUNITÉ DES CARTES (Contraste toujours parfait) --- */
/* Les cartes gardent leurs propres couleurs, peu importe la section où elles se trouvent */
.card, .event-preview, .disease-card, .news-card {
    background-color: var(--c-surface) !important;
    border: 1px solid var(--c-border) !important;
}

/* Les titres des cartes : Bleu foncé (Mode Jour) / Blanc pur (Mode Nuit) */
.card h2, .card h3, .card h4, .card a,
.event-preview h2, .event-preview h3, .event-preview h4, .event-preview a,
.disease-card h2, .disease-card h3, .disease-card h4, .disease-card a,
.news-card h2, .news-card h3, .news-card h4, .news-card a {
    color: var(--c-primary) !important;
}

/* Les textes des cartes : Gris foncé (Mode Jour) / Gris clair (Mode Nuit) */
.card p, .card span,
.event-preview p, .event-preview span,
.disease-card p, .disease-card span,
.news-card p, .news-card span {
    color: var(--c-text-muted) !important;
    font-weight: 500 !important;
}


/* --- 2. CORRECTION DE LA SECTION SOMBRE EN MODE NUIT --- */
/* Empêche la section sombre de devenir blanche quand on active le mode nuit */
body.dark-theme .section--dark {
    background-color: #050505 !important; /* On force un noir profond */
    border-top: 1px solid #222222;
    border-bottom: 1px solid #222222;
}

body.dark-theme .section--dark h2,
body.dark-theme .section--dark h3,
body.dark-theme .section--dark h4 {
    color: #FFFFFF !important;
}

body.dark-theme .section--dark p {
    color: #A0A0A0 !important; /* Gris clair pour les sous-titres de la section */
}

/* ===================================================
   FIX : BALLON SVG ET ÉTIQUETTES (AUDIODESCRIPTION)
=================================================== */

/* 1. Le Ballon SVG (qui est directement sur le fond sombre) */
.section--dark svg {
    color: #FFFFFF !important;
}

/* 2. On protège les icônes à l'intérieur des cartes (car elles sont sur fond clair) */
.section--dark .card svg,
.section--dark [class*="card"] svg {
    color: var(--c-primary) !important;
}

/* 3. Sauvetage des étiquettes (Audiodescription) grisées par erreur */
.card .label, 
.card .btn--outline,
[class*="card"] .label {
    color: var(--c-primary) !important; /* Bleu foncé le jour, Blanc la nuit */
    border: 1px solid var(--c-border) !important;
}

/* 4. Sauvetage du texte du bouton bleu ("Accessibilité") */
.card .btn--primary,
[class*="card"] .btn--primary {
    color: #FFFFFF !important; /* Le texte reste bien blanc sur le fond bleu */
}

/* ===================================================
   FIX : BALLON ET ÉTIQUETTES (Section Sport)
=================================================== */

/* 1. Le gros ballon de foot (Blanc sur le fond sombre de la section) */
#sport .text-center > svg g {
    fill: #FFFFFF !important;
}

/* 2. Les étiquettes "Audiodescription" (Celles sans la couleur accent) */
/* ---> MODE CLAIR (Par défaut) : Fond gris très clair, Texte bleu nuit */
#sport .card > div:not([style*="var(--c-accent)"]) {
    background-color: var(--c-bg) !important;
    color: var(--c-primary) !important;
}
#sport .card > div:not([style*="var(--c-accent)"]) svg {
    color: var(--c-primary) !important;
}

/* ---> MODE SOMBRE : Fond blanc transparent, Texte blanc pur */
body.dark-theme #sport .card > div:not([style*="var(--c-accent)"]) {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #FFFFFF !important;
}
body.dark-theme #sport .card > div:not([style*="var(--c-accent)"]) svg {
    color: #FFFFFF !important;
}

/* 3. On protège l'étiquette "Accessibilité" pour qu'elle reste bien bleue tout le temps */
#sport .card > div[style*="var(--c-accent)"] {
    color: var(--c-accent) !important;
}
#sport .card > div[style*="var(--c-accent)"] svg {
    color: var(--c-accent) !important;
}

/* ===================================================
   FIX : BOUTONS "NOUS REJOINDRE" (MODE SOMBRE)
=================================================== */

/* 1. Bouton "Adhérer à l'association" (Bordure) 
   On le force en blanc pur avec un survol inversé */
body.dark-theme .btn--outline-inverse {
    color: #FFFFFF !important;
    border-color: #FFFFFF !important;
}

body.dark-theme .btn--outline-inverse:hover {
    background: #FFFFFF !important;
    color: #111111 !important; /* Texte sombre au survol */
}

/* 2. Bouton "Devenir bénévole" (Plein)
   On le passe en bleu vif pour attirer l'œil dans la nuit */
body.dark-theme .btn--inverse {
    background: var(--c-accent) !important;
    color: #FFFFFF !important;
    border: 1px solid var(--c-accent) !important;
}

body.dark-theme .btn--inverse:hover {
    background: #3B82F6 !important; /* Bleu légèrement plus clair au survol */
    border-color: #3B82F6 !important;
}

/* ===================================================
   FIX V2 : ÉLOIGNER A- SANS DÉCALER LE MENU
=================================================== */
@media (min-width: 1025px) {
    /* 1. On annule ma mauvaise marge de tout à l'heure au cas où */
    .header__right .text-resizer {
        margin-left: 0 !important;
        margin-right: 6px !important;
        padding-right: 6px !important;
    }

    /* 2. On rapproche subtilement les icônes entre elles pour libérer de l'espace à gauche */
    .header__right {
        gap: 6px !important; 
    }

    .header__right .audio-reader-widget {
        margin-right: 4px !important;
    }

    /* 3. On réduit un poil le padding du bouton contact pour gagner encore plus d'espace */
    .header__right .btn--contact {
        padding: 10px 16px !important; 
    }
}

/* ===================================================
   FIX : TEXTE INVISIBLE BOUTONS AGENDA
=================================================== */

/* 1. Boutons pleins ("S'inscrire" / "Réserver") 
   On force le texte à utiliser la couleur de surface (Blanc en mode clair, Sombre en mode nuit) */
.event-preview .btn--primary {
    color: var(--c-surface) !important;
}

/* 2. Bouton vide ("Complet") 
   On force le texte et la bordure à utiliser la couleur primaire pour qu'il soit bien visible */
.event-preview .btn--outline {
    color: var(--c-primary) !important;
    border-color: var(--c-primary) !important;
}

/* ===================================================
   FIX ULTIME V11 : ÉLÉMENTS DE DROITE PLUS GRANDS + BOUTON CONTACT
=================================================== */
@media (min-width: 1025px) {
    /* 1. MURS DU HEADER (Verrouillés) */
    .header__wrapper {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        position: relative !important;
        max-width: 1500px !important;
        padding: 0 24px !important; 
        min-height: 70px !important; 
        width: 100% !important;
        margin: 0 auto !important;
    }

    /* 2. LE LOGO (Verrouillé) */
    .nav__logo-img.logo--desktop {
        height: 48px !important; 
        width: auto !important;
    }

    /* 3. LE CENTRE ABSOLU (Verrouillé) */
    .header__center {
        position: absolute !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        display: flex !important;
        white-space: nowrap !important;
    }
    
    .nav__links {
        gap: 20px !important; 
    }
    
    .nav__link {
        font-size: 16px !important; 
        line-height: 1.5 !important;
        padding: 8px 0 !important;
        font-weight: 500 !important;
    }

    /* ===================================================
       4. LA DROITE : ENCORE AGRANDIE
       =================================================== */
    .header__right {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 4px !important; /* Un peu plus d'air pour compenser les tailles plus grandes */
    }

    /* Outils texte (A- A0 A+) */
    .header__right .text-resizer {
        display: flex !important;
        gap: 0px !important; 
        margin-right: 6px !important; 
        padding-right: 10px !important; 
        margin-left: 0 !important;
    }
    
    .header__right .text-resizer__btn {
        padding: 5px 8px !important; /* Cible de clic encore un peu plus grande */
        font-size: 15px !important; /* On monte à 15px */
        line-height: 1 !important;
    }

    /* Conteneurs des icônes */
    .header__right .audio-reader-widget,
    .header__right .accessibility-menu,
    .header__right .theme-toggle {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Fond des icônes (Un cran au dessus) */
    .header__right .theme-toggle,
    .header__right .audio-btn-main,
    .header__right .accessibility-menu > button {
        width: 36px !important; /* On passe de 34px à 36px */
        height: 36px !important; 
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        border-radius: 4px !important;
    }

    /* Taille du dessin de l'icône */
    .header__right svg {
        width: 20px !important; /* On passe de 19px à 20px */
        height: 20px !important; 
    }

    /* Bouton contact BIEN PLUS VISIBLE */
    .header__right .btn--contact {
        padding: 10px 20px !important; /* Bouton plus épais et plus large */
        margin-left: 10px !important; 
        font-size: 15px !important; /* Texte plus grand */
        line-height: 1.2 !important;
        height: auto !important;
    }
}

/* --- NOUVEAUX STYLES POUR LES ARTICLES DE BLOG --- */
.news-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    overflow: hidden; 
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.news-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-md);
}
.news-card__img-wrapper {
    width: 100%;
    aspect-ratio: 16/10; /* Garde toujours une belle proportion rectangulaire */
    height: auto;
    overflow: hidden;
    flex-shrink: 0; /* LE FIX : Interdit formellement au navigateur d'écraser l'image */
}

.news-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Coupe proprement l'image si elle ne rentre pas, sans la déformer */
    display: block;
    transition: transform 0.5s ease;
}
.news-card:hover .news-card__img {
    transform: scale(1.05); 
}
.news-card__content {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Oblige le texte à prendre tout l'espace disponible */
    height: 100%;
}
.news-card__meta {
    font-size: 0.85rem;
    color: var(--c-accent);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}
.news-card__title {
    font-size: 1.25rem;
    margin-bottom: 1rem;
}
.news-card__title a {
    color: var(--c-primary);
    text-decoration: none;
}
.news-card__title a:hover {
    color: var(--c-accent);
}
.news-card__excerpt {
    color: var(--c-text-muted);
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
}
.news-card__link {
    margin-top: auto; 
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--f-heading);
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

body.dark-theme .news-card {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.05);
}
body.dark-theme .news-card__title a { color: var(--c-surface); }
body.dark-theme .news-card__title a:hover { color: var(--c-accent); }

/* --- STYLE POUR LE BOUTON DON HERO --- */
.btn--donate-hero {
    background-color: var(--c-accent); 
    color: #ffffff !important;
    border: 1px solid var(--c-accent);
    transition: all 0.3s ease;
    box-shadow: var(--shadow-sm);
    padding: 12px 32px;
    font-size: 1rem;
}

.btn--donate-hero:hover {
    background-color: transparent !important; 
    color: var(--c-accent) !important; 
    border-color: var(--c-accent) !important;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

body.dark-theme .btn--donate-hero:hover {
    background-color: #ffffff !important; 
    color: var(--c-primary) !important;
    border-color: #ffffff !important;
}

/* --- FIX : LECTURE VOCALE INTÉGRÉE AU HEADER --- */
/* On annule la position fixe flottante pour l'intégrer au header */
.header__right .audio-reader-widget {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    display: flex;
    align-items: center;
    justify-content: center; /* Centrage horizontal dans son espace */
    margin-right: 8px; /* Espace par rapport à l'œil */
    height: 100%; /* Pour le centrage vertical */
}

/* On transforme le gros bouton rond en bouton discret de header */
.header__right .audio-btn-main {
    width: 40px !important;
    height: 40px !important;
    background: transparent !important;
    border: none !important;
    color: var(--c-text-muted) !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: var(--radius-sm) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease !important;
}

/* Effet au survol (identique au bouton lune/soleil) */
.header__right .audio-btn-main:hover {
    color: var(--c-accent) !important;
    background: rgba(0, 0, 0, 0.05) !important;
    transform: translateY(-1px) !important;
}

body.dark-theme .header__right .audio-btn-main:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* État actif (Quand la voix parle) */
.header__right .audio-btn-main.is-playing {
    color: var(--c-accent) !important;
    background: rgba(37, 99, 235, 0.1) !important;
    animation: none !important; /* On retire le pulse géant */
}

/* Menu de vitesse : on le place juste sous le bouton */
.header__right .audio-menu {
    top: 120% !important; 
    left: 50% !important; 
    transform: translateX(-50%) translateY(-10px) !important; 
    z-index: 100;
}
.header__right .audio-menu.is-open {
    transform: translateX(-50%) translateY(0) !important;
}

/* ===================================================
   CARROUSEL TÉMOIGNAGES (3D, FULL WIDTH & FLÈCHES)
=================================================== */
.testimonial-carousel {
    position: relative;
    background: var(--c-surface);
    border-top: 1px solid var(--c-border);
    border-bottom: 1px solid var(--c-border);
    padding: 5rem 10%; /* Full width avec un peu d'air sur les côtés */
    text-align: center;
    width: 100%;
}

.carousel-track-container {
    overflow: visible; /* Permet de voir les slides 3D sur les côtés */
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    perspective: 1200px; /* Active la profondeur 3D */
}

.carousel-track {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    transform-style: preserve-3d;
}

.testimonial-slide {
    min-width: 100%;
    box-sizing: border-box;
    padding: 0 2rem;
    opacity: 0.2; /* Les slides inactives sont presque transparentes */
    /* L'EFFET 3D MAGIQUE ICI : on rétrécit, on penche et on floute les côtés */
    transform: scale(0.8) rotateY(15deg); 
    filter: blur(4px);
    transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    pointer-events: none;
    position: relative;
}

/* On inverse l'inclinaison si la carte est à gauche */
.testimonial-slide.is-left {
    transform: scale(0.8) rotateY(-15deg);
}

.testimonial-slide.current-slide {
    opacity: 1;
    transform: scale(1) rotateY(0deg); /* La slide active avance et se redresse */
    filter: blur(0);
    pointer-events: auto;
}

/* FIX DES NOMS INVISIBLES */
.testimonial__info {
    text-align: left;
}
.testimonial__info h4 {
    font-size: 1.1rem !important;
    color: var(--c-primary) !important;
    margin-bottom: 0.2rem !important;
    font-weight: 700 !important;
}
.testimonial__info p {
    font-size: 0.9rem !important;
    color: var(--c-text-muted) !important;
    margin: 0 !important;
}

/* FLÈCHES DE NAVIGATION */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    color: var(--c-primary);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-sm);
}
.carousel-btn:hover {
    background: var(--c-primary);
    color: var(--c-surface);
    transform: translateY(-50%) scale(1.1);
}
.prev-btn { left: 2rem; }
.next-btn { right: 2rem; }

/* POINTS DE NAVIGATION */
.carousel-nav {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
}
.carousel-indicator {
    border: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}
body.dark-theme .carousel-indicator { background: rgba(255, 255, 255, 0.2); }
.carousel-indicator:hover { background: rgba(0, 0, 0, 0.3); }
body.dark-theme .carousel-indicator:hover { background: rgba(255, 255, 255, 0.4); }
.carousel-indicator.current-indicator {
    background: var(--c-accent);
    transform: scale(1.3);
}

@media (max-width: 768px) {
    .carousel-btn { display: none; /* On cache les flèches sur mobile pour laisser la place au texte */ }
    .testimonial-carousel { padding: 4rem 1rem; }
}

/* ===================================================
   FIX ULTIME V2 : HAUT CONTRASTE & SURVOLS SÉCURISÉS
=================================================== */

/* 1. INDICATEUR DE PAGE ACTIVE (Pour les modes HC) */
body[class*="hc-"] .nav__link[aria-current="page"] {
    text-decoration: underline !important;
    text-decoration-thickness: 3px !important;
    text-underline-offset: 6px !important;
}

/* ===================================================
   2. LE HAUT CONTRASTE ÉCRASE TOUT (Uniquement en mode HC)
=================================================== */
body[class*="hc-"],
body[class*="hc-"] .section--dark,
body[class*="hc-"] .hero,
body[class*="hc-"] .footer,
body[class*="hc-"] .header,
body[class*="hc-"] .news-card {
    background-color: var(--c-surface) !important;
    color: var(--c-primary) !important;
    border-color: var(--c-primary) !important;
}

body[class*="hc-"] h1, 
body[class*="hc-"] h2, 
body[class*="hc-"] h3, 
body[class*="hc-"] h4, 
body[class*="hc-"] p,
body[class*="hc-"] span,
body[class*="hc-"] .testimonial__quote {
    color: var(--c-primary) !important;
}

/* ===================================================
   3. BOUTONS STRICTS EN HAUT CONTRASTE 
=================================================== */
body[class*="hc-"] .btn,
body[class*="hc-"] .btn--primary,
body[class*="hc-"] .btn--donate-hero {
    background-color: var(--c-primary) !important;
    color: var(--c-surface) !important;
    border: 2px solid var(--c-primary) !important;
}

body[class*="hc-"] .btn:hover,
body[class*="hc-"] .btn--primary:hover,
body[class*="hc-"] .btn--donate-hero:hover {
    background-color: var(--c-surface) !important;
    color: var(--c-primary) !important;
}

body[class*="hc-"] .btn--outline,
body[class*="hc-"] .btn--outline-inverse,
body[class*="hc-"] .btn--inverse {
    background-color: transparent !important;
    color: var(--c-primary) !important;
    border: 2px solid var(--c-primary) !important;
}

body[class*="hc-"] .btn--outline:hover,
body[class*="hc-"] .btn--outline-inverse:hover,
body[class*="hc-"] .btn--inverse:hover {
    background-color: var(--c-primary) !important;
    color: var(--c-surface) !important;
}

/* ===================================================
   4. ANIMATIONS & SURVOLS (MODE NORMAL)
=================================================== */
/* On ajoute juste l'animation sans écraser tes couleurs d'origine */
.btn {
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, filter 0.3s ease !important;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Fix spécifique pour les boutons primary (ex: "Contacter l'équipe Presse") */
.btn--primary {
    background-color: var(--c-primary);
    color: var(--c-surface);
    border: 1px solid var(--c-primary);
}

/* SURVOL MODE CLAIR : Allumage avec le BLEU ÉLECTRIQUE (accent) */
.btn--primary:hover {
    background-color: var(--c-accent) !important;
    color: #ffffff !important; /* Blanc pur pour un contraste parfait */
    border-color: var(--c-accent) !important;
    filter: none; /* On enlève le filtre, la couleur accent fait le boulot */
}

/* SURVOL MODE SOMBRE : Fond blanc, texte noir strict (VERROUILLÉ) */
body.dark-theme .btn--primary:hover {
    background-color: #ffffff !important;
    color: #000000 !important;
    border-color: #ffffff !important;
    filter: none; 
}

.btn--outline:hover {
    background-color: var(--c-primary);
    color: var(--c-surface);
}

/* Survol des boutons sur fond sombre */
.btn--inverse:hover {
    background-color: transparent;
    border-color: currentColor;
}

.btn--outline-inverse:hover {
    background-color: #ffffff;
    color: #000000;
}

/* ===================================================
   CARROUSELS GÉNÉRIQUES (STYLE ÉDITORIAL & RAFFINÉ)
=================================================== */
.action-slider-wrapper {
    position: relative;
    width: 100%;
    padding: 0 70px; /* Espace pour les flèches, sans tasser le centre */
    margin: 0 auto;
}

.action-slider-container {
    overflow: hidden;
    width: 100%;
    padding: 10px 0; /* Légère respiration */
}

.action-slider-track {
    display: flex;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); /* Courbe d'animation plus naturelle et douce */
    width: 100%;
}

.action-slide {
    flex: 0 0 100%;
    min-width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr; 
    gap: 1.5rem;
    padding: 0 4px;
}

/* --- CARTES : MINIMALISME ET LISIBILITÉ --- */
.action-slide .card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    padding: 1.5rem;
    transition: all 0.3s ease;
    box-shadow: none; /* Fini les grosses ombres brutes au repos */
    height: 100%;
}

.action-slide .card:hover {
    /* Mouvement très subtil, juste pour marquer l'interactivité */
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.1);
}

/* --- FLÈCHES ÉPURÉES --- */
.action-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: transparent; /* Fond transparent pour un rendu plus léger */
    border: 1px solid var(--c-border);
    color: var(--c-text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 10;
}

.action-arrow:hover {
    background: var(--c-bg); /* Apparition subtile du fond */
    color: var(--c-primary);
    border-color: var(--c-primary);
    transform: translateY(-50%) scale(1.05); /* Zoom très léger */
}

.action-prev { left: 10px; }
.action-next { right: 10px; }

/* FIX CRUCIAL : ADAPTATION POUR LA SECTION SOMBRE (SPORT) */
/* S'applique SEULEMENT si le mode Haut Contraste n'est PAS actif */
body:not([class*="hc-"]) .section--dark .action-arrow {
    border-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    background: transparent;
}
body:not([class*="hc-"]) .section--dark .action-arrow:hover {
    background: #ffffff !important;
    color: #000000 !important;
    border-color: #ffffff !important;
}
body:not([class*="hc-"]) .section--dark .action-arrow:hover svg,
body:not([class*="hc-"]) .section--dark .action-arrow:hover polyline {
    color: #000000 !important;
    stroke: #000000 !important;
}
body:not([class*="hc-"]) .section--dark .action-slide .card {
    background: rgba(255, 255, 255, 0.03) !important; 
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}
body:not([class*="hc-"]) .section--dark .action-slide .card h4 {
    color: #ffffff !important; 
}
body:not([class*="hc-"]) .section--dark .action-slide .card p,
body:not([class*="hc-"]) .section--dark .action-slide .card div {
    color: rgba(255, 255, 255, 0.85) !important; 
}
body:not([class*="hc-"]) .section--dark .action-slide .card:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}
body:not([class*="hc-"]) .section--dark .action-dot {
    background: rgba(255, 255, 255, 0.2);
}
body:not([class*="hc-"]) .section--dark .action-dot.active {
    background: var(--c-accent);
}

/* Force la flèche (le SVG) à devenir noire au survol */
.section--dark .action-arrow:hover svg,
.section--dark .action-arrow:hover polyline {
    color: #000000 !important;
    stroke: #000000 !important;
}

.section--dark .action-slide .card {
    background: rgba(255, 255, 255, 0.03) !important; 
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important; /* Force la couleur de base en blanc */
}

/* On cible spécifiquement les titres et textes pour écraser les couleurs par défaut */
.section--dark .action-slide .card h4 {
    color: #ffffff !important; 
}

.section--dark .action-slide .card p {
    color: rgba(255, 255, 255, 0.85) !important; /* Blanc légèrement adouci pour que ça ne pique pas les yeux */
}

.section--dark .action-slide .card:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

/* --- NAVIGATION EN PILULES (PLUS MODERNE QUE DES POINTS) --- */
.action-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 1.5rem;
}

.action-dot {
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background: var(--c-border);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    padding: 0;
    border: none;
}

.action-dot.active {
    width: 24px; /* S'étire élégamment pour marquer la page active */
    background: var(--c-accent);
}

.section--dark .action-dot {
    background: rgba(255, 255, 255, 0.2);
}

.section--dark .action-dot.active {
    background: var(--c-accent);
}

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 1024px) {
    .action-slide { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .action-slider-wrapper { padding: 10px 0; }
    .action-arrow { display: none; } /* Navigation au doigt/points sur mobile */
}
@media (max-width: 600px) {
    .action-slide { grid-template-columns: 1fr; gap: 1rem; }
}

/* --- MODE SOMBRE CLASSIQUE ET HAUT CONTRASTE --- */
body.dark-theme .action-slide .card { background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.08); }
body.dark-theme .action-slide .card:hover { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.15); box-shadow: none; }
body.dark-theme .action-arrow { border-color: rgba(255,255,255,0.2); color: #fff; }
body.dark-theme .action-arrow:hover { background: #fff; color: #000; border-color: #fff; }
body.dark-theme .action-dot { background: rgba(255, 255, 255, 0.2); }
body.dark-theme .action-dot.active { background: var(--c-accent); }

body[class*="hc-"] .action-slide .card { background: var(--c-bg) !important; border: 2px solid var(--c-text) !important; }
body[class*="hc-"] .action-slide .card:hover { transform: translateY(-2px); box-shadow: none; border-color: var(--c-accent) !important; }
body[class*="hc-"] .action-arrow { background: var(--c-bg) !important; color: var(--c-text) !important; border: 2px solid var(--c-text) !important; }
body[class*="hc-"] .action-dot { background: var(--c-text) !important; opacity: 0.4; }
body[class*="hc-"] .action-dot.active { opacity: 1; width: 24px; }

/* ===================================================
   BOUCLIER HAUT CONTRASTE : L'ARME ABSOLUE
=================================================== */

/* 1. On nettoie les fonds et on remet le fond du HC partout */
body[class*="hc-"],
body[class*="hc-"].dark-theme,
body[class*="hc-"] header,
body[class*="hc-"] footer,
body[class*="hc-"] section,
body[class*="hc-"] article,
body[class*="hc-"] .section,
body[class*="hc-"] .section--dark,
body[class*="hc-"] .card,
body[class*="hc-"] .news-card,
body[class*="hc-"] [style*="background"] {
    background-color: var(--c-bg) !important;
    background: var(--c-bg) !important;
}

/* 2. On force la couleur de TOUT le texte avec une spécificité monstrueuse */
body[class*="hc-"] h1, body[class*="hc-"] h2, body[class*="hc-"] h3, 
body[class*="hc-"] h4, body[class*="hc-"] h5, body[class*="hc-"] h6,
body[class*="hc-"] p, body[class*="hc-"] span, body[class*="hc-"] a,
body[class*="hc-"] li, body[class*="hc-"] div, body[class*="hc-"] time,
body[class*="hc-"].dark-theme h1, body[class*="hc-"].dark-theme h2, 
body[class*="hc-"].dark-theme h3, body[class*="hc-"].dark-theme h4,
body[class*="hc-"].dark-theme p, body[class*="hc-"].dark-theme span, 
body[class*="hc-"].dark-theme a, body[class*="hc-"].dark-theme li,
body[class*="hc-"].dark-theme div,
body[class*="hc-"] .news-card__meta, body[class*="hc-"].dark-theme .news-card__meta,
body[class*="hc-"] .news-card__title, body[class*="hc-"].dark-theme .news-card__title,
body[class*="hc-"] .news-card__title a, body[class*="hc-"].dark-theme .news-card__title a,
body[class*="hc-"] .news-card__excerpt, body[class*="hc-"].dark-theme .news-card__excerpt,
body[class*="hc-"] .news-card__link, body[class*="hc-"].dark-theme .news-card__link,
body[class*="hc-"] .label, body[class*="hc-"].dark-theme .label,
body[class*="hc-"] .section--dark .card,
body[class*="hc-"] .section--dark .card h4,
body[class*="hc-"] .section--dark .card p,
body[class*="hc-"] .section--dark .card div,
body[class*="hc-"] .section--dark .action-slide .card h4,
body[class*="hc-"] .section--dark .action-slide .card p,
body[class*="hc-"] .section--dark .action-slide .card div {
    color: var(--c-text) !important;
}

/* 3. Les traits de séparation et bordures */
body[class*="hc-"] .section,
body[class*="hc-"] .footer,
body[class*="hc-"] .header,
body[class*="hc-"] [style*="border"],
body[class*="hc-"] .card,
body[class*="hc-"] .news-card {
    border-color: var(--c-text) !important;
}

/* 4. Les SVG (Icones et Formes pleines) */
body[class*="hc-"] svg,
body[class*="hc-"] svg path,
body[class*="hc-"] svg polyline,
body[class*="hc-"] svg circle,
body[class*="hc-"] svg rect,
body[class*="hc-"] svg line {
    stroke: var(--c-text) !important;
}

/* LE KO TECHNIQUE DU BALLON : 
   On cible directement les "path" (le dessin) et "g" (le groupe)
   UNIQUEMENT pour les SVG qui ne sont pas censés être vides/transparents */
body[class*="hc-"] svg:not([fill="none"]) path,
body[class*="hc-"] svg:not([fill="none"]) g {
    fill: var(--c-text) !important;
    color: var(--c-text) !important;
}

/* On protège à 100% tes icônes de type "contour" (le header, les petites flèches, etc.) */
body[class*="hc-"] svg[fill="none"],
body[class*="hc-"] svg[fill="none"] path,
body[class*="hc-"] svg[fill="none"] g {
    fill: none !important;
}

/* 5. VRAIS BOUTONS + BOUTON NEWSLETTER */
body[class*="hc-"] .btn,
body[class*="hc-"].dark-theme .btn,
body[class*="hc-"] .slider-arrow,
body[class*="hc-"] .action-arrow,
body[class*="hc-"] .newsletter-form-basic button,
body[class*="hc-"] button[type="submit"] {
    background: var(--c-bg) !important;
    background-color: var(--c-bg) !important;
    color: var(--c-text) !important;
    border: 2px solid var(--c-text) !important;
    box-shadow: none !important;
}

/* 6. SURVOL DES BOUTONS ET CARTES */
body[class*="hc-"] .btn:hover,
body[class*="hc-"].dark-theme .btn:hover,
body[class*="hc-"] .slider-arrow:hover,
body[class*="hc-"] .action-arrow:hover,
body[class*="hc-"] .newsletter-form-basic button:hover,
body[class*="hc-"] button[type="submit"]:hover {
    background: var(--c-text) !important;
    background-color: var(--c-text) !important;
    color: var(--c-bg) !important;
    border-color: var(--c-text) !important;
}

body[class*="hc-"] .btn:hover *,
body[class*="hc-"].dark-theme .btn:hover *,
body[class*="hc-"] .slider-arrow:hover *,
body[class*="hc-"] .action-arrow:hover *,
body[class*="hc-"] .newsletter-form-basic button:hover *,
body[class*="hc-"] button[type="submit"]:hover * {
    color: var(--c-bg) !important;
    stroke: var(--c-bg) !important;
}

body[class*="hc-"] .card:hover,
body[class*="hc-"] .value-card:hover {
    background-color: var(--c-bg) !important;
    color: var(--c-text) !important;
}
body[class*="hc-"] .card:hover svg,
body[class*="hc-"] .value-card:hover svg {
    stroke: var(--c-text) !important;
    color: var(--c-text) !important;
}

/* 7. Le cas de la bordure de fond de l'image Hero */
body[class*="hc-"] .hero__visual::before, 
body[class*="hc-"] .hero__visual::after {
    background: transparent !important;
    border-color: var(--c-text) !important;
    border-style: solid !important; 
    box-shadow: none !important;
}

body[class*="hc-"] .hero__visual-img {
    border: none !important;
    box-shadow: none !important;
}

/* ===================================================
   CORRECTIF HEADER POUR TABLETTES (769px à 1200px)
=================================================== */
@media (max-width: 1200px) and (min-width: 769px) {
    /* On réduit l'espace global entre les 3 blocs du header */
    .header__wrapper {
        gap: 10px;
    }
    
    /* On resserre les liens du menu central */
    .nav__links {
        gap: 8px; 
    }
    .nav__link {
        font-size: 0.85rem; 
        padding: 5px 8px;
    }
    
    /* On resserre les boutons d'accessibilité à droite */
    .header__right {
        gap: 8px; 
    }
    
    /* On rétrécit légèrement les boutons de redimensionnement de texte */
    .text-resizer__btn {
        font-size: 0.8rem;
        padding: 4px 6px;
        min-width: 28px;
    }
    
    /* Pour gagner un maximum de place, on masque le bouton "Nous contacter" 
       sur tablette (l'utilisateur pourra utiliser le menu burger ou le footer) */
    .desktop-contact-btn {
        display: none !important;
    }
}

/* ===================================================
   CORRECTIF HEADER IPAD PRO & PETITS PC (< 1440px)
=================================================== */
@media (max-width: 1440px) {
    /* 1. On masque le bouton contact pour libérer de l'espace vital */
    .desktop-contact-btn {
        display: none !important;
    }

    /* 2. On répartit l'espace et on réduit les marges globales */
    .header__wrapper {
        gap: 15px !important;
        justify-content: space-between !important;
    }

    /* 3. On resserre le menu de navigation central */
    .nav__links {
        gap: 8px !important; 
    }
    
    .nav__link {
        font-size: 0.9rem !important;
        padding: 5px 8px !important;
    }

    /* 4. On resserre les boutons d'accessibilité à droite */
    .header__right {
        gap: 10px !important;
    }
}