:root {
    --yellow: #fcd34d;
    --pink: #f43f5e;
    --dark-blue: #1e3a5f;
    --light-yellow: #fef9c3;
    --white: #ffffff;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Outfit', sans-serif; background: var(--dark-blue); color: var(--white); }

/* NAVBAR */
.navbar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1rem 5%; position: absolute; width: 100%; z-index: 10;
}
.logo { font-family: 'Fredoka', cursive; font-size: 2rem; color: var(--yellow); font-weight: 700; }
.logo span { color: var(--white); }
.nav-btns { display: flex; gap: 10px; align-items: center; }

/* BOUTONS STYLE POP */
.btn-yellow-sm, .btn-pink-sm {
    padding: 8px 20px; border-radius: 8px; text-decoration: none; font-weight: bold; color: var(--dark-blue); font-size: 0.9rem;
}
.btn-yellow-sm { background: var(--yellow); }
.btn-pink-sm { background: var(--pink); color: white; }

/* HERO SECTION AVEC IMAGE DE FOND (Type Tour Eiffel mais Montréal) */
.hero {
    background: url('background.png') no-repeat center center/cover;
    min-height: 100vh; position: relative; padding-top: 100px; text-align: center;
}

.hero-text h1 { 
    font-family: 'Fredoka', cursive; font-size: 8rem; line-height: 0.8; 
    color: var(--white); text-transform: lowercase; margin-bottom: 20px;
}
.hero-text h1 span { color: var(--yellow); }
.hero-text .top-title { font-size: 3rem; font-weight: bold; }

.action-box h2 { font-size: 3rem; color: var(--yellow); font-family: 'Fredoka', cursive; }

/* ACTIONS GRID (Les petites boites crème) */
.actions-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px;
    max-width: 1100px; margin: 40px auto; padding: 0 20px;
}
.action-card {
    background: var(--light-yellow); color: var(--dark-blue);
    padding: 20px; border-radius: 15px; text-align: center;
    min-height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.action-card h3 { font-size: 1rem; font-weight: 800; margin: 10px 0 5px; }
.action-card p { font-size: 0.85rem; line-height: 1.2; }
.icon-circle { width: 45px; height: 45px; border-radius: 50%; background: var(--pink); margin-bottom: 10px; }

/* SECTIONS COLORÉES */
.section-yellow { background: var(--yellow); color: var(--dark-blue); padding: 80px 10%; }
.section-blue { background: var(--dark-blue); color: var(--white); padding: 80px 10%; }

.content-split { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.img-box img { width: 100%; border-radius: 30px; border: 5px solid white; box-shadow: 10px 10px 0 rgba(0,0,0,0.1); }

.text-box h2 { font-family: 'Fredoka', cursive; font-size: 3.5rem; margin: 10px 0; }
.btn-blue-rect { background: var(--dark-blue); color: white; border: none; padding: 15px 30px; border-radius: 12px; font-weight: bold; font-size: 1.1rem; }

/* NEWSLETTER */
.newsletter-bar { background: var(--dark-blue); padding: 40px; text-align: center; }
.form-row { display: flex; justify-content: center; gap: 10px; margin-top: 20px; }
input { padding: 15px; border-radius: 10px; border: none; width: 300px; background: var(--light-yellow); }
.btn-yellow-input { background: var(--yellow); border: none; padding: 15px 30px; border-radius: 10px; font-weight: bold; cursor: pointer; }

@media (max-width: 900px) {
    .actions-grid { grid-template-columns: repeat(2, 1fr); }
    .hero-text h1 { font-size: 5rem; }
    .content-split { grid-template-columns: 1fr; }
}


/* FOOTER STYLES */
.main-footer {
    background-color: #1e3a5f; /* Bleu nuit profond du screenshot */
    color: #ffffff;
    padding: 60px 8% 30px;
    font-family: 'Outfit', sans-serif;
    border-top: 5px solid #fcd34d; /* Rappel du jaune vif en bordure */
}

.footer-top {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 40px;
    margin-bottom: 50px;
}

.footer-brand {
    max-width: 350px;
}

.logo-footer {
    font-family: 'Fredoka', cursive;
    font-size: 2.2rem;
    font-weight: 700;
    color: #fcd34d;
    margin-bottom: 15px;
}

.logo-footer span {
    color: #ffffff;
}

.footer-slogan {
    font-size: 1.1rem;
    margin-bottom: 25px;
    opacity: 0.9;
}

/* Réseaux Sociaux */
.social-icons {
    display: flex;
    gap: 15px;
}

.social-link {
    width: 45px;
    height: 45px;
    background: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.social-link:hover {
    transform: scale(1.15) rotate(5deg);
    background: #fcd34d;
}

/* Liens */
.footer-links {
    display: flex;
    gap: 60px;
}

.link-group h4 {
    color: #fcd34d;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.link-group ul {
    list-style: none;
}

.link-group ul li {
    margin-bottom: 12px;
}

.link-group ul li a {
    color: #ffffff;
    text-decoration: none;
    font-weight: 500;
    font-size: 1rem;
    transition: color 0.2s;
}

.link-group ul li a:hover {
    color: #f43f5e; /* Rose pour le survol */
}

/* Partie Légale Basse */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 30px;
}

.legal-notice {
    font-size: 0.8rem;
    line-height: 1.5;
    color: #a1a1aa;
    margin-bottom: 30px;
}

.legal-notice strong {
    color: #ffffff;
}

.copyright {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    opacity: 0.7;
    flex-wrap: wrap;
    gap: 15px;
}

.sub-links a {
    color: #ffffff;
    text-decoration: none;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .footer-top {
        flex-direction: column;
    }
    .footer-links {
        gap: 30px;
        flex-direction: column;
    }
    .copyright {
        flex-direction: column;
        text-align: center;
    }
}

.actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    padding: 20px;
}

.action-card {
    border: none;
    border-radius: 25px; /* Plus arrondi pour Montréal */
    padding: 30px;
    transition: transform 0.3s ease;
    cursor: pointer;
    color: var(--dark-blue);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.action-card:hover {
    transform: translateY(-10px) rotate(2deg);
}

/* Couleurs alternées type "Sarah" mais plus douces */
.color-1 { background-color: #fef9c3; } /* Jaune pâle */
.color-2 { background-color: #fee2e2; } /* Rose pâle */
.color-3 { background-color: #dcfce7; } /* Vert menthe */
.color-4 { background-color: #e0f2fe; } /* Bleu ciel */

.action-card h3 {
    font-family: 'Fredoka', cursive;
    margin: 15px 0 10px;
    font-size: 1.2rem;
}

.action-card .icon {
    font-size: 2.5rem;
}



.hero-text h1 {
    font-family: 'Outfit', sans-serif;
    font-size: 5rem;
    font-weight: 800;
    line-height: 0.9;
    text-transform: uppercase;
    margin-bottom: 30px;
}

.hero-text h1 span {
    display: inline-block;
    background-color: var(--yellow); /* #fcd34d */
    color: var(--dark-blue); /* #1e3a5f */
    padding: 5px 20px;
    transform: rotate(-3deg); /* L'inclinaison dynamique */
    font-family: 'Fredoka', cursive; /* Typo plus ronde pour "citoyenne" */
    border-radius: 10px;
}

.top-title {
    font-family: 'Outfit', sans-serif;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: 1.2rem;
    opacity: 0.9;
}

.action-box h2 {
    font-family: 'Fredoka', cursive;
    color: var(--yellow);
    font-size: 1.8rem;
    margin-bottom: 10px;
}

/* Couleurs des cartes pour l'aspect "Kit" */
.color-1 { background-color: #fef9c3; color: #1e3a5f; }
.color-2 { background-color: #fee2e2; color: #1e3a5f; }
.color-3 { background-color: #dcfce7; color: #1e3a5f; }
.color-4 { background-color: #e0f2fe; color: #1e3a5f; }



/* Bouton Burger Style */
.menu-burger {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--pink); /* On garde votre rose pétant */
    padding: 10px;
    border-radius: 8px;
    transition: 0.3s;
}

.menu-burger span {
    display: block;
    width: 25px;
    height: 3px;
    background: white;
    border-radius: 10px;
}

/* L'Overlay Plein Écran */
.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 0; /* Caché par défaut */
    background: rgba(30, 58, 95, 0.98); /* Votre bleu nuit */
    backdrop-filter: blur(15px);
    z-index: 2000;
    overflow: hidden;
    transition: height 0.5s cubic-bezier(0.77, 0, 0.175, 1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-overlay.active {
    height: 100%;
}

/* Contenu du Menu */
.menu-content {
    text-align: center;
    width: 100%;
}

.menu-logo {
    font-family: 'Fredoka', cursive;
    font-size: 2.5rem;
    color: var(--yellow);
    margin-bottom: 3rem;
}

.menu-links {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 3rem;
}

.menu-links a {
    font-family: 'Outfit', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    transition: 0.3s;
}

.menu-links a:hover {
    color: var(--yellow);
    transform: scale(1.1);
}

.close-btn {
    position: absolute;
    top: 30px;
    right: 5%;
    background: none;
    border: none;
    color: white;
    font-size: 4rem;
    cursor: pointer;
}

/* Boutons de conversion dans le menu */
.menu-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.btn-yellow-lg, .btn-pink-lg {
    width: 80%;
    max-width: 300px;
    padding: 15px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 800;
    text-transform: uppercase;
}

.btn-yellow-lg { background: var(--yellow); color: var(--dark-blue); }
.btn-pink-lg { background: var(--pink); color: white; }


_____-


/* L'overlay est crucial pour le style Pop-Politics */


.hero {
    background: url('background.png') no-repeat center center/cover;
    min-height: 100vh;
    width: 100%;
    position: relative;
}

.hero-overlay {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Espace le haut, le centre et le bas */
    padding: 80px 5% 40px;
    text-align: center;
}

/* Slogan Style Sarah Knafo */
.hero-text h1 {
    font-size: 5rem;
    font-weight: 800;
    line-height: 0.9;
    color: white;
}

.hero-text h1 span {
    display: inline-block;
    background: #fcd34d; /* Jaune */
    color: #1e3a5f;
    padding: 5px 20px;
    transform: rotate(-3deg);
    border-radius: 10px;
}

/* Grille des cartes */
.actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    max-width: 1200px;
    margin: 40px auto;
}

.action-card {
    padding: 25px;
    border-radius: 20px;
    transition: transform 0.3s;
}

.action-card:hover { transform: scale(1.05); }

/* Couleurs des cartes */
.color-yellow { background: #fef9c3; }
.color-pink { background: #fee2e2; }
.color-green { background: #dcfce7; }
.color-blue { background: #e0f2fe; }

/* Nouveau bouton "En faire plus" */
.btn-yellow-main {
    background: #fcd34d;
    border: none;
    padding: 15px 40px;
    border-radius: 50px;
    font-size: 1.2rem;
    font-weight: 800;
    color: #1e3a5f;
    cursor: pointer;
    box-shadow: 0 10px 0 #b45309; /* Effet Pop */
    transition: 0.2s;
}

.btn-yellow-main:active {
    transform: translateY(5px);
    box-shadow: 0 5px 0 #b45309;
}


.hero-cta {
    margin-top: 10px; /* Rapproche le bouton des cartes */
}
______-



.actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Gère la largeur des cartes */
    gap: 20px;
    width: 100%;
    max-width: 1200px;
    margin-bottom: 30px; /* Crée l'espace nécessaire avant le bouton */
}

.hero-cta {
    width: 100%;
    display: flex;
    justify-content: center; /* Centre le bouton horizontalement */
    margin-bottom: 100px;
}

.btn-yellow-main {
    background: #fcd34d;
    color: #1e3a5f;
    padding: 15px 40px;
    border-radius: 50px;
    font-weight: 800;
    font-size: 1.2rem;
    border: none;
    cursor: pointer;
    box-shadow: 0 8px 0 #b45309; /* Effet de relief Pop */
    transition: transform 0.1s;
}

.btn-yellow-main:active {
    transform: translateY(4px);
    box-shadow: 0 4px 0 #b45309;
}


___
/* Le conteneur du bouton Burger */
.menu-burger {
    cursor: pointer;
    background-color: #ef4444; /* Même rose/rouge que "Faire un don" */
    width: 50px;               /* Plus large pour l'impact */
    height: 45px;              /* Plus haut */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;                  /* Espace entre les barres blanches */
    border-radius: 12px;       /* Coins arrondis style Pop */
    transition: all 0.3s ease;
    box-shadow: 0 4px 0 #b91c1c; /* Effet de relief sous le bouton */
    border: none;
    padding: 0;
}

/* Les barres blanches à l'intérieur */
.menu-burger span {
    display: block;
    width: 26px;               /* Barres bien visibles */
    height: 3.5px;
    background-color: white;
    border-radius: 10px;
    transition: 0.3s;
}

/* Effet au survol (Hover) pour encourager le clic */
.menu-burger:hover {
    transform: translateY(-2px); /* Il remonte légèrement */
    background-color: #f87171;   /* Couleur un peu plus claire */
    box-shadow: 0 6px 0 #b91c1c;
}

/* Effet quand on clique */
.menu-burger:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #b91c1c;
}




_____
_____
.hero {
    position: relative;
    background: url('background.png') no-repeat center center/cover;
    height: 100vh;
    overflow: hidden;
}

/* Le voile magique qui change de couleur */
.hero::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    animation: dayNightCycle 20s infinite alternate ease-in-out;
}

@keyframes dayNightCycle {
    100% {
        /* JOUR : Très clair, ambiance dorée */
        background: rgba(253, 211, 77, 0.1); 
    }
    50% {
        /* CRÉPUSCULE : Ambiance actuelle de ta photo */
        background: rgba(30, 58, 95, 0.3);
    }
    0% {
        /* NUIT : Bleu profond pour un maximum de contraste */
        background: rgba(15, 23, 42, 0.8);
    }
}

/* On s'assure que le texte reste au-dessus du voile */
.hero-overlay {
    position: relative;
    z-index: 10;
}


_________________
/* ============================================================
   CARROUSEL THOMAS GREGOLIN - VERSION FINALE
   ============================================================ */

.project-stacked-section {
  padding: 80px 20px;
  background: #ffffff;
  text-align: center;
}

/* Container principal */
.project-stacked-section {
    background-color: #ffffff;
    padding: 80px 5% 40px 5%;
    text-align: center;
}

/* Typographie du Titre */
.project-subtitle {
    color: #1e3a5f; /* Ton bleu signature */
    font-family: 'Arial Black', sans-serif;
    font-size: 2.5rem; /* Taille imposante mais équilibrée */
    font-weight: 900;
    line-height: 1.2;
    text-transform: uppercase; /* Pour le côté institutionnel/presse */
    letter-spacing: -1.5px; /* Resserre pour plus d'impact visuel */
    max-width: 1000px;
    margin: 0 auto;
}

/* Style pour la partie après le ">" (Le slogan) */
.project-subtitle span {
    display: block; /* Force le passage à la ligne pour épurer */
    color: #64748b; /* Gris bleuté pour ne pas étouffer le titre principal */
    font-family: 'Arial', sans-serif;
    font-size: 1.2rem;
    font-weight: 400;
    text-transform: none; /* En minuscules pour le contraste */
    letter-spacing: 0.5px;
    margin-top: 15px;
}

/* Optionnel : La barre colorée pour le côté "Pop" */
.project-subtitle::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background-color: #ef4444; /* Ton rouge d'action */
    margin: 25px auto 0 auto;
    border-radius: 2px;
}



.carousel-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  max-width: 1400px;
  margin: 40px auto;
  position: relative;
}

.nav-arrow {
  width: 50px; height: 50px;
  border-radius: 50%;
  border: 2px solid #001f4d;
  background: white;
  cursor: pointer;
  z-index: 100;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
}

/* LA CARTE - CORRIGÉE */
.stack-item {
  border-radius: 25px;
  border: 4px solid #fff;
  background-image: var(--bg-img); /* LIGNE ESSENTIELLE REPLACÉE */
  background-size: cover;
  background-position: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0; /* On gère le padding dans stack-content */
  text-decoration: none;
  color: white;
  transition: 0.5s ease;
  overflow: hidden;
}

.stack-content {
  background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 100%);
  padding: 30px 20px;
  text-align: left;
  width: 100%;
}

/* VERSION PC : ÉTALÉ */
@media screen and (min-width: 1024px) {
  .card-stack {
    display: flex !important;
    gap: 15px;
    width: 1200px;
    height: 500px;
  }
  .stack-item {
    position: relative !important;
    flex: 1;
    height: 480px;
    transform: none !important;
    opacity: 1 !important;
  }
  .stack-item:hover { flex: 1.3; transform: translateY(-10px) !important; border-color: #BF2202; }
}

/* VERSION MOBILE : PILE */
@media screen and (max-width: 1023px) {
  .nav-arrow { display: none; }
  .card-stack { position: relative; width: 300px; height: 450px; margin: 0 auto; }
  .stack-item {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    transform: translateX(calc(var(--index) * 15px)) translateY(calc(var(--index) * -10px)) rotateZ(calc(var(--index) * 2deg));
    z-index: calc(10 - var(--index));
    opacity: calc(1 - (var(--index) * 0.2));
  }
}

/* Effet de survol sur PC */
@media screen and (min-width: 1024px) {
  .stack-item:hover {
    flex: 1.4 !important; /* La carte s'élargit */
    transform: translateY(-15px) !important; /* Elle monte */
    border-color: #BF2202; /* Bordure rouge dynamique */
    box-shadow: 0 25px 50px rgba(191, 34, 2, 0.3); /* Ombre colorée */
  }
}

/* Effet au toucher sur Mobile */
@media screen and (max-width: 1023px) {
  .stack-item:active {
    transform: scale(1.05) translateY(-10px) !important;
    z-index: 100;
  }
}

/* Effet de survol sur PC */
@media screen and (min-width: 1024px) {
  .stack-item:hover {
    flex: 1.4 !important; /* La carte s'élargit */
    transform: translateY(-15px) !important; /* Elle monte */
    border-color: #BF2202; /* Bordure rouge dynamique */
    box-shadow: 0 25px 50px rgba(191, 34, 2, 0.3); /* Ombre colorée */
  }
}

/* Effet au toucher sur Mobile */
@media screen and (max-width: 1023px) {
  .stack-item:active {
    transform: scale(1.05) translateY(-10px) !important;
    z-index: 100;
  }
}

/* --- CONTENEUR GLOBAL --- */
.carousel-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  max-width: 1400px;
  margin: 50px auto;
  position: relative;
  z-index: 10;
}

/* --- BOUTONS NAVIGATION (PC & MOBILE) --- */
.nav-arrow {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid #001f4d;
  background: white;
  color: #001f4d;
  font-size: 1.5rem;
  cursor: pointer;
  z-index: 1000 !important; /* Force le passage devant les cartes */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s ease;
  flex-shrink: 0;
  pointer-events: auto !important; /* Assure que le clic est détecté */
}

.nav-arrow:hover {
  background: #001f4d;
  color: white;
  transform: scale(1.1);
}

/* --- CARTES : STYLE DE BASE --- */
.stack-item {
  border-radius: 25px;
  border: 4px solid #fff;
  background-image: var(--bg-img);
  background-size: cover;
  background-position: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-decoration: none;
  color: white;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

/* --- VERSION ORDINATEUR (Étalé) --- */
@media screen and (min-width: 1024px) {
  .card-stack {
    display: flex !important;
    gap: 15px;
    width: 1200px;
    height: 550px;
  }
  .stack-item {
    position: relative !important;
    flex: 1;
    height: 500px;
    transform: none !important;
    opacity: 1 !important;
  }
  .stack-item:hover {
    flex: 1.4;
    transform: translateY(-15px) !important;
    border-color: #BF2202;
    box-shadow: 0 25px 50px rgba(191, 34, 2, 0.3);
  }
}

/* --- VERSION MOBILE (Pile avec Flèches) --- */
@media screen and (max-width: 1023px) {
  .carousel-wrapper { gap: 10px; }
  .nav-arrow { width: 45px; height: 45px; } /* Légèrement plus petit */
  
  .card-stack {
    position: relative;
    width: 280px; /* Moins large pour laisser respirer les flèches */
    height: 480px;
    margin: 0 auto;
  }
  .stack-item {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    transform: translateX(calc(var(--index) * 12px)) 
               translateY(calc(var(--index) * -10px)) 
               rotateZ(calc(var(--index) * 1.5deg));
    z-index: calc(10 - var(--index));
    opacity: calc(1 - (var(--index) * 0.25));
  }
}

/* Modifie la règle générique pour ne pas brider le carrousel */
section {
  padding: 80px 50px;
  max-width: 1200px; /* C'est cette ligne qui bloque sur PC */
  margin: 0 auto;
  text-align: center;
}

/* Ajoute ceci pour forcer la section projet à être pleine largeur */
.project-stacked-section {
  max-width: 100% !important; 
  width: 100%;
  padding: 80px 0; /* On réduit le padding latéral pour coller aux bords si besoin */
  background: #fdfdfd;
}
@media screen and (min-width: 1024px) {
  .carousel-wrapper {
    max-width: 1600px; /* Augmente cette valeur pour que le "blanc" s'étale */
    width: 95%;      /* Utilise 95% de la largeur de l'écran */
    margin: 40px auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .card-stack {
    width: 100%;    /* Le conteneur de cartes prend toute la place du wrapper */
    display: flex;
    gap: 20px;
    justify-content: center;
  }
}

_______
/* Grille principale */
.bio-grid {
  display: grid;
  grid-template-columns: 1fr 2fr; /* Photo plus petite que le texte */
  gap: 50px;
  align-items: start;
}

/* Cartes de valeurs alignées */
.values-grid {
  display: flex;
  gap: 20px;
  flex-wrap: wrap; /* S'empile sur mobile */
}

.value-card {
  flex: 1; /* Force l'égalité de largeur et hauteur */
  min-width: 280px;
  padding: 30px;
  border-radius: 20px;
  transition: transform 0.3s ease;
}

.value-card:hover {
  transform: translateY(-10px);
}
___
/* --- SECTION QUI SOMMES-NOUS --- */
.about-section {
    background-color: #1e3a5f; /* Bleu nuit signature */
    color: #ffffff;
    padding: 100px 8%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.about-container {
    display: flex;
    align-items: center;
    gap: 60px;
    max-width: 1200px;
    width: 100%;
}

.about-content {
    flex: 1.2; /* Donne un peu plus de place au texte */
    text-align: left;
}

.about-title {
    font-family: 'Arial Black', sans-serif;
    font-size: 3.5rem;
    line-height: 1.1;
    margin-bottom: 25px;
    text-transform: uppercase;
    letter-spacing: -2px;
}

.about-title span {
    color: #fcd34d; /* Jaune Vrai Citoyenne */
    display: block;
}

.about-text p {
    font-size: 1.15rem;
    line-height: 1.6;
    margin-bottom: 20px;
    color: #e2e8f0;
}

.about-list {
    list-style: none;
    margin: 25px 0;
}

.about-list li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 12px;
    font-weight: 500;
}

/* Petite puce rouge pour le style Pop */
.about-list li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: #ef4444; /* Rouge action */
    font-weight: 900;
}

.btn-manifeste {
    display: inline-block;
    background-color: #ef4444; 
    color: white;
    padding: 18px 40px;
    border-radius: 12px;
    font-weight: 800;
    text-decoration: none;
    text-transform: uppercase;
    transition: transform 0.2s ease;
    box-shadow: 0 5px 0 #b91c1c; /* Relief Pop */
}

.btn-manifeste:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 0 #b91c1c;
}

/* Colonne Image */
.about-image {
    flex: 0.8;
    position: relative;
}

.about-image img {
    width: 100%;
    border-radius: 20px;
    border: 5px solid white;
    box-shadow: 15px 15px 0 rgba(0,0,0,0.2); /* Effet décalé */
}

/* Responsive : On empile sur mobile */
@media screen and (max-width: 1024px) {
    .about-container {
        flex-direction: column;
        text-align: center;
    }
    .about-content { text-align: center; }
    .about-title { font-size: 2.5rem; }
}


_______-
/* Nettoyage du conteneur pour un look ultra-épuré */
.project-stacked-section {
    background-color: #ffffff !important; /* On force le blanc pur */
    max-width: 100% !important; 
    width: 100%;
    padding: 60px 0;
    text-align: center;
    border: none !important; /* On enlève toute bordure de séparation */
}

/* On s'assure que le wrapper du carrousel respire sur le blanc */
.carousel-wrapper {
    background: transparent;
    margin: 20px auto 60px auto;
}

/* On ajuste les ombres des cartes pour qu'elles ressortent mieux sur le blanc */
.stack-item {
    box-shadow: 0 15px 35px rgba(0,0,0,0.08); /* Ombre plus douce et élégante */
    border: 1px solid #f1f5f9; /* Bordure très fine pour définir la carte sur le blanc */
}

.nav-arrow {
    background: #ffffff;
    border: 2px solid #1e3a5f; /* Ton bleu signature pour le rappel */
    color: #1e3a5f;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.nav-arrow:hover {
    background: #1e3a5f;
    color: #ffffff;
}


/* Section Propositions */
.propositions-section {
    padding: 80px 5%;
    background: #f9f9f9;
    text-align: center;
}

.section-header {
    margin-bottom: 50px;
}

.badge {
    background-color: #fcd34d; /* Ton jaune actuel */
    color: #1e3a5f;            /* Ton bleu nuit profond pour le texte */
    padding: 6px 16px;
    border-radius: 50px;
    font-weight: 800;          /* On garde une graisse forte pour l'impact */
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;       /* Un peu d'espace entre les lettres pour le style */
    display: inline-block;
}
.title-main {
    font-family: 'Outfit', sans-serif;
    font-size: 3rem;
    margin-top: 15px;
}

.title-main span {
    color: #00528a; /* Bleu Union */
}

/* Grille de cartes */
.propositions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    margin-top: 40px;
}

.prop-card {
    background: white;
    padding: 40px 30px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: left;
    display: flex;
    flex-direction: column;
    border-bottom: 8px solid transparent;
}

.prop-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

.prop-icon {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.prop-card h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: #222;
}

.prop-card p {
    font-size: 1rem;
    color: #666;
    line-height: 1.5;
    margin-bottom: 25px;
    flex-grow: 1;
}

/* Couleurs des bordures */
.border-green { border-color: #2ecc71; }
.border-blue { border-color: #3498db; }
.border-pink { border-color: #e91e63; }
.border-yellow { border-color: #f1c40f; }

.btn-read-more {
    font-weight: 700;
    color: #222;
    text-decoration: none;
    font-size: 0.95rem;
    display: inline-block;
    transition: margin-left 0.2s;
}

.prop-card:hover .btn-read-more {
    margin-left: 10px;
}

.cta-programme-complet {
    margin-top: 60px;
}

.btn-main-black {
    background: #222;
    color: white;
    padding: 20px 40px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 800;
    font-size: 1.1rem;
    transition: background 0.3s;
}

.btn-main-black:hover {
    background: #00528a;
}


/* --- CORRECTIF AFFICHAGE PROPOSITIONS --- */

#programme.propositions-section {
    max-width: 100% !important; /* On casse la limite des 1200px */
    width: 100%;
    margin: 0;
    padding: 100px 5%; /* On redonne de l'air */
    background: #f4f7f9; /* Un gris bleuté plus moderne */
}

.propositions-grid {
    display: grid;
    /* On force 4 colonnes de largeur égale */
    grid-template-columns: repeat(4, 1fr); 
    gap: 15px; /* On réduit l'espace entre les boîtes pour gagner de la place */
    max-width: 1200px; /* On élargit un peu le conteneur pour aider l'alignement */
    margin: 40px auto;
    padding: 0 20px; /* Marges de sécurité sur les côtés */
}

.prop-card {
    padding: 25px 15px; /* Moins de place perdue à l'intérieur */
    min-width: 0; /* Empêche les boîtes de déborder de leur colonne */
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    text-align: left;
}

.prop-card h3 {
    font-size: 1.2rem; /* Titres un peu plus petits pour tenir sur moins de lignes */
    line-height: 1.2;
}

.prop-card p {
    font-size: 0.9rem; /* Texte affiné pour la densité visuelle */
}

/* On remonte les bordures de couleur en haut pour plus de visibilité */
.prop-card.border-green { border-top-color: #2ecc71; }
.prop-card.border-blue { border-top-color: #3498db; }
.prop-card.border-pink { border-top-color: #e91e63; }
.prop-card.border-yellow { border-top-color: #f1c40f; }



/* Effet Putaclic : Le bouton brille au survol de la carte */
.prop-card:hover .btn-read-more {
    color: #00528a;
    transform: translateX(10px);
    transition: 0.3s;
}

.section-desc {
    color: #1e3a5f; /* Le bleu nuit de ton logo pour un rappel constant */
    font-size: 1.1rem;
    max-width: 700px;
    margin: 10px auto 0; /* Centre le texte */
    opacity: 0.85; /* Un léger effet adouci pour faire ressortir le titre principal */
    line-height: 1.5;
}


/* Conteneur de l'icône pour lui donner du relief */
.prop-icon {
    width: 65px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem; /* Taille de l'émoji */
    border-radius: 18px; /* Coins arrondis façon App iOS */
    margin-bottom: 25px;
    position: relative;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}


@media (max-width: 1024px) {
    .propositions-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 par ligne sur tablette */
    }
}

@media (max-width: 600px) {
    .propositions-grid {
        grid-template-columns: 1fr; /* 1 par ligne sur mobile */
    }
}
/* On applique les couleurs de fond transparentes assorties aux bordures */
.border-green .prop-icon { background: #e8f9ee; color: #2ecc71; }
.border-blue .prop-icon { background: #ebf5fb; color: #3498db; }
.border-pink .prop-icon { background: #fdf2f5; color: #e91e63; }
.border-yellow .prop-icon { background: #fef9e7; color: #f1c40f; }

/* Effet d'animation au survol de la carte */
.prop-card:hover .prop-icon {
    transform: scale(1.1) rotate(-5deg);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}


______
.prop-card {
    background: white;
    border: 1px solid #e2e8f0; /* Bordure fine et unique pour tout le monde */
    border-radius: 20px;
    padding: 40px 30px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(30, 58, 95, 0.05); /* Ombre légère bleue */
}

.prop-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(30, 58, 95, 0.12);
    border-color: var(--blue-union); /* Se colore au survol seulement */
}

/* Style des icônes "App" */
.prop-icon {
    width: 60px;
    height: 60px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin-bottom: 20px;
}

/* Couleurs de fond douces pour les icônes */
.border-green .prop-icon { background: #dcfce7; }
.border-blue .prop-icon { background: #e0f2fe; }
.border-pink .prop-icon { background: #fee2e2; }
.border-yellow .prop-icon { background: #fef9c3; }

/* Style du bouton par défaut */
.btn-main-black {
    background-color: #1e3a5f !important; /* Bleu nuit signature */
    color: #ffffff !important;
    border-radius: 50px;
    padding: 18px 40px;
    font-weight: 800;
    text-transform: uppercase;
    border: none;
    box-shadow: 0 6px 0 #0f172a; /* Ombre portée profonde pour le relief */
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Effet au survol (Hoover) */
.btn-main-black:hover {
    background-color: #fcd34d !important; /* Jaune d'action */
    color: #1e3a5f !important; /* Le texte repasse en bleu pour la lisibilité */
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 0 #b45309; /* Ombre jaune plus chaude */
}




/* --- AÉRATION DU CARROUSEL --- */
.carousel-wrapper {
    max-width: 1100px !important; /* Largeur maximale identique aux propositions */
    margin: 40px auto !important; /* Centre parfaitement et donne de l'air en haut/bas */
    padding: 0 60px !important;   /* Grosses marges sur les côtés pour "respirer" */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px; /* Espace entre les flèches et les cartes */
}

.card-stack {
    width: 100% !important;
    display: flex !important;
    gap: 15px !important; /* Espace entre chaque guide */
    justify-content: center;
}

.stack-item {
    flex: 1;
    min-width: 200px; /* Empêche les cartes d'être trop larges */
    max-width: 250px; /* Limite la largeur pour un look plus "fiche" */
    height: 450px !important; /* Hauteur fixe pour l'élégance */
    border-radius: 20px !important;
}

.project-subtitle {
    max-width: 800px;
    margin: 0 auto 30px auto !important;
    padding: 0 20px;
    text-align: center;
}



-----
.main-footer {
    position: relative;
    background-color: #1e3a5f;
    padding-top: 100px; /* On laisse de la place pour la vague */
    border-top: none; /* On enlève l'ancienne bordure jaune */
}

/* La vague en haut du footer */
.main-footer::before {
    content: "";
    position: absolute;
    top: -50px;
    left: 0;
    width: 100%;
    height: 50px;
    background-color: #1e3a5f;
    clip-path: ellipse(60% 100% at 50% 100%); /* Crée une courbe douce */
}


.social-link {
    width: 50px;
    height: 50px;
    background: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 0 rgba(0,0,0,0.2);
    transition: all 0.2s ease;
}

.social-link:hover {
    transform: translateY(-5px);
    background: #fcd34d; /* Le jaune au survol */
    box-shadow: 0 10px 0 #b45309;
}


/* --- STYLE DE LA FLÈCHE POINTANTE --- */
.about-image {
    position: relative;
    padding-top: 40px; /* Espace pour la flèche */
}

.arrow-container {
    position: absolute;
    top: -40px;
    left: -80px; /* Ajuste selon ton écran */
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: rotate(-15deg);
    z-index: 5;
    animation: floatArrow 3s infinite ease-in-out;
}

.hand-arrow {
    width: 100px;
    height: 60px;
    filter: drop-shadow(0 4px 4px rgba(0,0,0,0.2));
}

.arrow-text {
    font-family: 'Fredoka', cursive;
    color: #fcd34d;
    font-size: 1.2rem;
    font-weight: 700;
    margin-top: -10px;
    text-shadow: 2px 2px 0px rgba(30, 58, 95, 0.8);
}

/* Lien sur l'image pour tout rendre cliquable */
.team-link-wrapper {
    display: block;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.team-link-wrapper:hover {
    transform: scale(1.02);
}

.team-link-wrapper:hover img {
    border-color: #fcd34d;
}

/* Animation de flottaison */
@keyframes floatArrow {
    0%, 100% { transform: translate(0, 0) rotate(-15deg); }
    50% { transform: translate(-10px, -5px) rotate(-18deg); }
}

/* Mobile : On cache ou on réduit la flèche si ça gêne */
@media screen and (max-width: 1024px) {
    .arrow-container {
        left: 0;
        top: -60px;
    }
}



.banner {
    /* On crée un dégradé qui part du transparent en haut vers un noir semi-opaque en bas */
    background: 
        linear-gradient(
            to bottom, 
            rgba(0, 0, 0, 0) 0%,   /* Transparent en haut */
            rgba(0, 0, 0, 0.4) 50%, /* Commence à s'assombrir au milieu */
            rgba(0, 0, 0, 0.7) 100% /* Plus sombre en bas pour le texte */
        ), 
        url('votre-image-montreal.jpg'); /* Ton image de fond */

    background-size: cover;
    background-position: center;
    color: white; /* Pour que ton texte ressorte bien */
    padding: 60px 20px;
    text-align: center;
}




/* Section globale */
.vote-section-pop {
    padding: 100px 5%;
    background-color: var(--dark-blue); /* Fond bleu nuit pour faire ressortir le cadre */
    display: flex;
    justify-content: center;
}

/* Le cadre jaune qui "pop" */
.vote-outer-frame {
    background-color: var(--white);
    border: 8px solid var(--yellow); /* Épaisseur style Sarah */
    border-radius: 40px;
    padding: 60px;
    max-width: 1200px;
    width: 100%;
    box-shadow: 15px 15px 0 rgba(0,0,0,0.2); /* Ombre décalée comme ton image About */
}

.vote-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

/* Typographies */
.title-pop {
    font-family: 'Fredoka', cursive;
    font-size: 3rem;
    color: var(--dark-blue);
    line-height: 1.1;
}

.badge-pop {
    background: var(--pink);
    color: white;
    padding: 5px 15px;
    border-radius: 10px;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.8rem;
}

/* Compteur Style "Dark Mode" pour le contraste */
.countdown-pop {
    display: flex;
    gap: 15px;
    margin: 30px 0;
}

.countdown-pop .time-unit {
    background: var(--dark-blue);
    color: var(--yellow);
    padding: 20px;
    border-radius: 15px;
    min-width: 90px;
    text-align: center;
}

.countdown-pop .time-unit span {
    font-size: 2.5rem;
    font-weight: 800;
    display: block;
}

/* Cartes d'action style épuré */
.action-card-pop {
    background: var(--light-yellow); /* Jaune très pâle pour la lecture */
    padding: 25px;
    border-radius: 20px;
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    color: var(--dark-blue);
    border: 2px solid transparent;
}

.highlight-pop {
    border-color: var(--pink);
    background: white;
}

.btn-link-pop {
    font-weight: 800;
    color: var(--pink);
    text-decoration: none;
    border-bottom: 3px solid var(--pink);
}

/* Formulaire Pop */
.reminder-form-pop {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.reminder-form-pop input {
    background: var(--light-yellow);
    border: 2px solid var(--dark-blue);
    padding: 12px;
    border-radius: 10px;
    flex: 1;
}

.reminder-form-pop button {
    background: var(--pink);
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 10px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px 0 #b91c1c;
}

/* On s'assure que le container des actions prend toute la hauteur disponible */
.vote-actions {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centre les deux boîtes verticalement par rapport au compteur */
    gap: 20px;
}

/* On harmonise la taille des cartes d'action */
.action-card-pop {
    background: #fff;
    border: 3px solid #1e3a5f; /* Bordure plus marquée pour le style Pop */
    padding: 20px;
    border-radius: 20px;
    display: flex;
    align-items: flex-start; /* Aligne l'icône en haut */
    gap: 15px;
    box-shadow: 8px 8px 0px rgba(0, 0, 0, 0.1); /* Ombre Pop typique */
    width: 100%;
}

/* Correctif pour le formulaire qui déborde */
.reminder-form-pop {
    display: flex;
    flex-wrap: nowrap; /* Empêche le bouton de passer à la ligne */
    gap: 8px;
    margin-top: 12px;
    width: 100%;
}

.reminder-form-pop input {
    flex: 2; /* L'input prend plus de place */
    min-width: 0; /* Important pour que le flex-shrink fonctionne */
    padding: 10px;
    border: 2px solid #1e3a5f;
    border-radius: 10px;
    font-size: 0.9rem;
}

.reminder-form-pop button {
    flex: 1; /* Le bouton s'adapte */
    white-space: nowrap; /* Garde le texte sur une ligne */
    padding: 10px 15px;
    background: #f43f5e; /* Rose action */
    color: white;
    border: none;
    border-radius: 10px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px 0 #b91c1c;
}

/* Mobile : On empile proprement */
@media (max-width: 900px) {
    .vote-container {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .action-card-pop {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .reminder-form-pop {
        flex-direction: column;
    }
}


.barometre-section {
    padding: 100px 5%;
background-color: #1e3a5f; /* Fond sombre pour faire ressortir le Dashboard */
    color: white;
}

.barometre-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    margin: 50px auto;
    max-width: 1200px;
}

.gauge-card {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    padding: 35px;
    border-radius: 25px;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.gauge-card:hover {
    border-color: var(--yellow);
    transform: scale(1.02);
    background: rgba(255, 255, 255, 0.08);
}

.gauge-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
}

.gauge-icon {
    font-size: 2rem;
    background: var(--white);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
}

.gauge-visual {
    margin-bottom: 20px;
}

.gauge-bar {
    height: 12px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 10px;
}

.gauge-fill {
    height: 100%;
    border-radius: 10px;
    transition: width 1.5s ease-in-out;
}

.gauge-fill.orange { background: #f97316; }
.gauge-fill.pink { background: var(--pink); }
.gauge-fill.yellow { background: var(--yellow); }

.gauge-value {
    font-family: 'Fredoka', cursive;
    font-size: 1.8rem;
    color: var(--yellow);
    font-weight: 700;
}

.gauge-detail {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #cbd5e1;
}

.barometre-footer {
    text-align: center;
    margin-top: 50px;
}

.barometre-footer p {
    margin-bottom: 30px;
    font-size: 1.1rem;
}


.stories-section {
    padding: 100px 5%;
    background: #ffffff;
}

.stories-container {
    max-width: 1100px;
    margin: 60px auto;
    display: flex;
    flex-direction: column;
    gap: 80px;
}

.story-row {
    display: flex;
    align-items: center;
    gap: 50px;
}

/* On inverse l'ordre pour une ligne sur deux */
.story-row.reverse {
    flex-direction: row-reverse;
}

.story-img {
    flex: 1;
}

.story-img img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 30px;
    border: 5px solid var(--dark-blue);
    box-shadow: 15px 15px 0 var(--yellow);
}

.story-text {
    flex: 1.2;
    padding: 40px;
    border-radius: 30px;
    border: 3px solid var(--dark-blue);
    box-shadow: 10px 10px 0 var(--dark-blue);
}

.profile-tag {
    display: inline-block;
    background: var(--dark-blue);
    color: white;
    padding: 5px 15px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 800;
    margin-bottom: 20px;
}

.story-text h3 {
    font-family: 'Fredoka', cursive;
    font-size: 1.8rem;
    color: var(--dark-blue);
    margin-bottom: 20px;
    line-height: 1.2;
}

.story-text p {
    color: var(--dark-blue);
    line-height: 1.6;
    margin-bottom: 15px;
}

.story-solution {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 2px dashed rgba(30, 58, 95, 0.2);
}

/* Couleurs de fond pour varier */
.color-blue { background-color: #e0f2fe; }
.color-green { background-color: #dcfce7; }
.color-yellow { background-color: #fef9c3; }

/* Mobile : On empile tout */
@media (max-width: 900px) {
    .story-row, .story-row.reverse {
        flex-direction: column;
        gap: 30px;
    }
    .story-img img {
        height: 300px;
    }
}



___________
/* STYLE TYPE CHANGE.ORG */
.alert-strip {
    background: #fee2e2;
    color: #ef4444;
    padding: 10px;
    border-radius: 8px;
    font-weight: 800;
    display: inline-block;
    margin-bottom: 20px;
}

.petition-grid-v2 {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 60px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Story Styling */
.image-hero-peq {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 30px;
}

.overlay-tag {
    position: absolute;
    top: 20px; left: 20px;
    background: #ef4444;
    color: white;
    padding: 5px 15px;
    border-radius: 5px;
    font-weight: 900;
    text-transform: uppercase;
}

.problem-box {
    background: #f1f5f9;
    padding: 30px;
    border-radius: 15px;
    border-left: 6px solid #1e3a5f;
    margin: 30px 0;
}

/* Form Styling */
.sticky-sidebar {
    position: sticky;
    top: 100px;
}

.petition-card-form {
    background: white;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 25px 50px rgba(0,0,0,0.15);
    border: 1px solid #e2e8f0;
}

.progress-bar {
    height: 12px;
    background: #ef4444; /* Rouge action */
    border-radius: 10px;
    margin-bottom: 10px;
}

.btn-fire {
    background: #ef4444;
    color: white;
    width: 100%;
    padding: 20px;
    border-radius: 12px;
    font-size: 1.2rem;
    font-weight: 900;
    border: none;
    cursor: pointer;
    box-shadow: 0 5px 0 #b91c1c;
    transition: 0.2s;
    margin-top: 20px;
}

.btn-fire:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 0 #b91c1c;
}

/* Mobile */
@media (max-width: 900px) {
    .petition-grid-v2 { grid-template-columns: 1fr; }
}


/* Correction du bloc de texte dans la pétition */
.problem-box {
    background: #ffffff !important;
    padding: 30px;
    border-radius: 20px;
    border-left: 6px solid #1e3a5f;
    margin: 30px 0;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.problem-box h4 {
    color: #1e3a5f !important; /* Bleu nuit pour le titre interne */
    margin-bottom: 10px;
}

.problem-box p {
    color: #475569 !important; /* Gris anthracite pour le texte */
    font-weight: 500;
}

/* Positionnement de la flèche dynamique */
.about-image {
    position: relative;
    display: inline-block;
}

.arrow-overlay {
    position: absolute;
    top: -20px;
    left: -120px; /* À ajuster selon la taille de ton écran */
    width: 140px;
    z-index: 10;
    transform: rotate(-10deg);
    pointer-events: none; /* Pour ne pas bloquer le clic sur l'image */
}

/* Texte sous la flèche */
.arrow-label {
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    color: #ffffff;
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    white-space: nowrap;
}

.change-style-form input, 
.change-style-form select {
    background-color: #f8fafc !important; /* Gris très clair au lieu du jaune */
    border: 2px solid #e2e8f0 !important;
    color: #1e3a5f !important;
    padding: 15px !important;
    transition: border-color 0.3s;
}

.change-style-form input:focus {
    border-color: #fcd34d !important; /* Bordure jaune quand on tape */
    outline: none;
}


.progress-container {
    background: #e2e8f0;
    border-radius: 50px;
    height: 14px;
    margin-bottom: 15px;
    overflow: hidden;
    position: relative;
}

.progress-bar {
    background: linear-gradient(90deg, #ef4444, #f43f5e) !important;
    height: 100%;
    border-radius: 50px;
    transition: width 1s ease-in-out;
}

/* --- DESIGN IMAGE & COMBAT --- */
.image-hero-peq {
    position: relative;
    border-radius: 25px;
    overflow: hidden;
    margin-bottom: 40px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    border: 4px solid rgba(255, 255, 255, 0.1);
}

.image-hero-peq img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    display: block;
}

.overlay-tag {
    position: absolute;
    top: 20px;
    left: 20px;
    background: #f43f5e; /* Rose action */
    color: white;
    padding: 8px 20px;
    border-radius: 10px;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 0.9rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

/* Correction visuelle du bloc de texte */
.problem-box {
    background: #ffffff !important;
    color: #1e3a5f !important; /* Bleu nuit pour la lisibilité */
    padding: 35px;
    border-radius: 25px;
    border-left: 10px solid #fcd34d; /* Jaune Citoyen */
    margin: 40px 0;
}

.problem-box h4 {
    margin-top: 0;
    font-size: 1.4rem;
    color: #1e3a5f;
}

.check-list {
    list-style: none;
    padding: 0;
}

.check-list li {
    position: relative;
    padding-left: 35px;
    margin-bottom: 20px;
    font-size: 1.1rem;
    line-height: 1.6;
}

.check-list li::before {
    content: "🔥";
    position: absolute;
    left: 0;
    font-size: 1.2rem;
}

.share-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.share-card {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 800;
    font-size: 0.85rem;
    color: white;
    transition: transform 0.2s, box-shadow 0.2s;
    font-family: 'Outfit';
}

.share-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.wa { background-color: #25D366; } /* WhatsApp Green */
.msg { background-color: #0084FF; } /* Messenger Blue */
.ig { background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); }

/* Pour faire tenir 3 boutons si tu veux */
.share-card.ig {
    grid-column: span 2;
}

.share-card .icon::before {
    margin-right: 8px;
    font-size: 1.1rem;
}


.stories-section {
    background-color: #ffffff; /* Le fond blanc actuel */
    border-radius: 40px;       /* Ajoute l'arrondi aux quatre coins */
    overflow: hidden;          /* Assure que le contenu respecte l'arrondi */
    margin-top: 20px;          /* Optionnel : pour détacher un peu le bloc du haut */
    margin-bottom: 20px;       /* Optionnel : pour détacher un peu le bloc du bas */
}


/* Animation de la bulle flottante */
.floating-bubble {
    display: inline-block;
    background: #1e3a5f;
    color: white;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-family: 'Outfit', sans-serif;
    margin-bottom: 15px;
    position: relative;
    animation: float 3s ease-in-out infinite;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.floating-bubble::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #1e3a5f;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* Bouton dynamique */
.btn-dynamic-story {
    background: #fcd34d;
    color: #1e3a5f;
    padding: 20px 40px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 800;
    font-family: 'Fredoka', sans-serif;
    font-size: 1.2rem;
    display: inline-flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 15px 30px rgba(252, 211, 77, 0.3);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.btn-dynamic-story:hover {
    transform: scale(1.05) translateY(-5px);
    box-shadow: 0 20px 40px rgba(252, 211, 77, 0.5);
    background: #fbc20c;
}

.btn-dynamic-story:hover .btn-icon {
    transform: translateX(5px);
}

.btn-icon {
    transition: transform 0.3s ease;
}

/* Décoration de fond */
.bg-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    background: rgba(252, 211, 77, 0.05);
    border-radius: 50%;
    z-index: 1;
}

.cta-story-section {
    padding-bottom: 10px !important; /* Réduit l'espace interne en bas */
    margin-bottom: 0 !important;      /* Supprime toute marge externe */
}

/* Si vous avez des <br> entre la section et le footer, supprimez-les du HTML */