/* Reset et base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', sans-serif;
  color: #222;
  line-height: 1.6;
  background: #f5f8ff;
}

/* Header */
/* Menu général */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 50px;
  background-color: white; /* bleu clair */
  position: relative;
}

.logo-img {
  height: 60px;
}

/* Desktop menu */
.nav {
  display: flex;
}

.nav-list {
  display: flex;
  gap: 40px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-list li a {
  text-decoration: none;
  color: black;
  transition: 0.3s;
}

.nav-list li a:hover {
  color: #0F1AD1; /* couleur dorée au hover */
    font-weight: bold;
}

/* Hamburger menu */
.nav-toggle {
  display: none;
}

.hamburger {
  display: none;
  flex-direction: column;
  cursor: pointer;
  gap: 5px;
}

.hamburger span {
  display: block;
  width: 25px;
  height: 3px;
  background: black;
  border-radius: 2px;
}

/* Mobile menu */
.mobile-nav {
  display: none; /* Cache le menu par défaut */
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: #004aad;
  z-index: 1000; /* Assure qu'il passe devant le reste au clic */
}

.mobile-nav ul {
  list-style: none;
  margin: 0;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.mobile-nav ul li a {
  color: #fff;
  font-weight: bold;
  text-decoration: none;
}

.mobile-nav ul li a:hover {
  color: #ffd700;
}

/* Responsive */
@media screen and (max-width: 900px) {
  .nav {
    display: none;
  }

  .hamburger {
    display: flex;
  }

  .nav-toggle:checked ~ .mobile-nav {
    display: block;
  }
}

/* Hero */
.hero {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 80px 50px;
background: linear-gradient(150deg, #001f4d, #001f4d),
            url('background.jpg') center/cover no-repeat;


  color: #fff;
  border-radius: 0 0 40px 40px;
}

.hero-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 1200px;
  width: 100%;
  align-items: center;
}

.hero-text {
  flex: 1 1 400px;
}

.hero-text h1 {
  font-size: 2.8em;
  margin-bottom: 20px;
  line-height: 1.2;
}

.hero-text p {
  font-size: 1.2em;
  margin-bottom: 30px;
}

.cta-button {
  display: inline-block;
  padding: 15px 30px;
  background-color: #BF2202;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  border-radius: 50px;
  border: 3px solid white;
  transition: 0.3s;
}

.cta-button:hover {
  background-color: #254A8F;
}

.hero-image img {
  max-width: 350px;
  border-radius: 50%;
  border: 5px solid #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

/* Sections */
section {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.about-text {
  max-width: 800px;
  margin: 20px auto;
  font-size: 1.1em;
  color: #0a3d91;
}

/* Project cards */
.project-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
  margin-top: 40px;
}

.card {
  background: #fff;
  padding: 30px;
  border-radius: 30px;
  width: 250px;
  box-shadow: 0 10px 30px rgba(10,61,145,0.15);
  transition: transform 0.3s, box-shadow 0.3s;
}

.card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 40px rgba(10,61,145,0.25);
}

.card h3 {
  color: #0a3d91;
  margin-bottom: 15px;
}

/* Join Section */
.join form {
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-width: 400px;
  margin: 30px auto 0;
}

.join input, .join button {
  padding: 15px;
  font-size: 1em;
  border-radius: 50px;
  border: 1px solid #ccc;
}

.join button {
  background-color: #0a3d91;
  color: #fff;
  border: none;
  font-weight: 700;
  cursor: pointer;
  transition: 0.3s;
}

.join button:hover {
  background-color: #023e8a;
}

/* Footer */
footer {
  background-color: #001f4d; /* Bleu foncé */
  color: #fff;
  text-align: center;
  padding: 40px 20px 20px 20px;
}

.footer-logo {
  height: 60px;
  margin-bottom: 15px;
}

.footer-separator {
  border: none;
  border-top: 1px solid #fff;
  width: 80px;
  margin: 0 auto 20px auto;
}

.footer-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 25px;
  font-weight: 500;
}

.footer-links a {
  color: #fff;
  text-decoration: none;
  transition: 0.3s;
}

.footer-links a:hover {
  text-decoration: underline;
}






/* Responsive pour la mise en page à deux colonnes */
@media screen and (max-width: 1000px) {
  .toc-layout {
    grid-template-columns: 1fr; /* On passe sur une seule colonne */
    gap: 20px;
    margin: 10px auto;
    padding: 0 15px;
  }

  .toc-sidebar {
    position: static; /* On enlève le côté collant */
    display: block;
    padding: 12px;
  }

  .toc-nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Les liens se mettent côte à côte */
    gap: 8px;
  }

  .toc-link {
    padding: 10px;
    font-size: 0.85rem;
    text-align: center;
    border-left: 4px solid transparent !important; /* On réduit la bordure */
    border-bottom: 3px solid transparent; 
  }

  /* On adapte les couleurs pour le format "bouton" mobile */
  .toc-link.theme-education { border-bottom-color: #1565c0; }
  .toc-link.theme-pouvoir { border-bottom-color: #d84315; }
  .toc-link.theme-justice { border-bottom-color: #BF2202; }
  /* ... etc pour les autres couleurs ... */

  .toc-note {
    display: none; /* On cache l'astuce sur mobile pour gagner de la place */
  }
}


/* ====== CONTACT PAGE ====== */
.contact-page {
  padding: 80px 20px;            /* la section a déjà un padding global ; on réajuste pour mobile */
  background: #f5f8ff;
}

.contact-container {
  max-width: 900px;
  margin: 0 auto;
  text-align: left;              /* on force l’alignement à gauche pour le formulaire */
}

.contact-container h1 {
  font-size: 2.2rem;
  margin-bottom: 10px;
  color: #0a3d91;
}

.contact-container p {
  color: #334;
  margin-bottom: 30px;
}

/* Grille du formulaire */
.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 24px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group.full {
  grid-column: 1 / -1;          /* pour les champs pleine largeur (sujet, message, alerts) */
}

.contact-form label {
  font-weight: 700;
  color: #0a3d91;
}

.contact-form input,
.contact-form textarea {
  padding: 14px 16px;
  border: 1px solid #cfd8ea;
  border-radius: 12px;
  background: #fff;
  font: inherit;
  color: #222;
  outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
}

.contact-form textarea {
  min-height: 160px;
  resize: vertical;
}

/* Focus & Hover states */
.contact-form input:hover,
.contact-form textarea:hover {
  background: #f9fbff;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: #254A8F;
  box-shadow: 0 0 0 4px rgba(37,74,143,0.12);
}

/* Bouton d’envoi : on réutilise .cta-button existant */
.contact-form .cta-button {
  grid-column: 1 / -1;
  justify-self: start;          /* laisse le bouton aligné à gauche ; mets 'center' si tu préfères */
}

/* Petites aides / messages */
.field-help {
  font-size: 0.9rem;
  color: #556;
}

.required-asterisk::after {
  content: " *";
  color: #BF2202;
  font-weight: 700;
}

/* États de validation (optionnels si tu ajoutes une classe en JS/PHP) */
.is-error {
  border-color: #d93025 !important;
  box-shadow: 0 0 0 4px rgba(217,48,37,0.12) !important;
  background: #fff7f7;
}

.is-success {
  border-color: #1e8e3e !important;
  box-shadow: 0 0 0 4px rgba(30,142,62,0.12) !important;
}

.alert {
  grid-column: 1 / -1;
  padding: 14px 16px;
  border-radius: 12px;
  font-size: 0.95rem;
  border: 1px solid transparent;
}

.alert-success {
  background: #effaf3;
  border-color: #c9ecd6;
  color: #196b35;
}

.alert-error {
  background: #fff4f2;
  border-color: #f3c1bb;
  color: #9d2b20;
}

/* Lien actif dans le menu (Contact) */
.nav-list li a.active {
  color: #0F1AD1;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Accessibilité : focus visible sur tous les liens/boutons */
a:focus,
button:focus,
.hamburger:focus {
  outline: 3px solid rgba(37,74,143,0.4);
  outline-offset: 3px;
  border-radius: 8px;
}

/* Responsive */
@media screen and (max-width: 900px) {
  .contact-form {
    grid-template-columns: 1fr;  /* une seule colonne sur mobile */
    gap: 14px;
  }
  .contact-container h1 {
    font-size: 1.9rem;
  }
}

/* ====== Mentions légales ====== */
.mentions h1 {
  color: #0a3d91;
  margin-bottom: 10px;
  font-size: 2rem;
}
.mentions h2 {
  color: #0a3d91;
  margin: 28px 0 10px;
  font-size: 1.3rem;
  text-align: left;
}
.mentions p, .mentions ul {
  text-align: left;
  max-width: 900px;
  margin: 0 auto;
}
.mentions ul {
  padding-left: 18px;
}


____________--_______
/* ====== Layout Thématiques (table des matières à gauche) ====== */
html {
  scroll-behavior: smooth; /* défilement doux vers les ancres */
}

.toc-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 20px;
}

/* Colonne gauche */
.toc-sidebar {
  position: sticky;
  top: 20px;                 /* reste visible au scroll */
  align-self: start;
  background: #fff;
  border: 1px solid #e2e8f5;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 10px 30px rgba(10,61,145,0.08);
}

.toc-heading {
  font-weight: 700;
  color: #0a3d91;
  margin-bottom: 8px;
  font-size: 0.95rem;
  letter-spacing: .3px;
}

.toc-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.toc-link {
  display: block;
  padding: 12px 14px;
  text-decoration: none;
  border: 1px solid #e2e8f5;
  border-radius: 12px;
  background: #fff;
  color: #222;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.toc-link:hover {
  transform: translateX(2px);
  box-shadow: 0 6px 16px rgba(10,61,145,0.12);
  border-color: #cfd8ea;
}

.toc-note {
  margin-top: 10px;
  font-size: .9rem;
  color: #556;
}

/* variantes couleur sur les liens (bordure gauche) */
.toc-link.theme-justice { border-left: 6px solid #BF2202; }
.toc-link.theme-ecologie { border-left: 6px solid #2e7d32; }
.toc-link.theme-education { border-left: 6px solid #1565c0; }
.toc-link.theme-securite { border-left: 6px solid #6a1b9a; }
.toc-link.theme-energie { border-left: 6px solid #f9a825; }
.toc-link.theme-pouvoir { border-left: 6px solid #d84315; }
.toc-link.theme-budget { border-left: 6px solid #00897b; }

/* Colonne droite */
.toc-content .breadcrumb {
  color: #4a4a4a;
  font-size: .95rem;
  margin-bottom: 12px;
}

.topic-section {
  background: #fff;
  border: 1px solid #e2e8f5;
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 28px;
  box-shadow: 0 10px 30px rgba(10,61,145,0.06);
}

.topic-section h1 {
  color: #0a3d91;
  font-size: 1.6rem;
  line-height: 1.25;
  margin-bottom: 10px;
}

.topic-section .lead {
  color: #4a4a4a;
  font-style: italic;
  margin-bottom: 18px;
}

/* Bloc "Mesure clé" (bandeau coloré) */
.key-measure {
  border-radius: 12px;
  padding: 18px 20px;
  margin: 16px 0 14px 0;
  color: #fff;
}

.key-title {
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .5px;
  opacity: .95;
  text-transform: uppercase;
  margin-bottom: 6px;
}

/* variantes couleur du bandeau */
.key-justice { background: #BF2202; }
.key-ecologie { background: #2e7d32; }
.key-education { background: #1565c0; }
.key-securite { background: #6a1b9a; }
.key-energie { background: #f9a825; color: #1b1b1b; } /* meilleure lisibilité sur jaune */
.key-pouvoir { background: #d84315; }
.key-budget { background: #00897b; }

/* Liste à puces élégante */
.bullet {
  text-align: left;
  max-width: 900px;
  margin: 0;
  padding-left: 18px;
}
.bullet li { margin: 10px 0; }

/* Bouton retour haut */
.back-to-top {
  display: inline-block;
  margin: 16px 0 0 0;
  text-decoration: none;
  font-weight: 700;
  color: #0a3d91;
}

/* État "actif" visuel au clic via :target (option simple sans JS) */
.topic-section:target {
  outline: 3px solid rgba(37,74,143,.25);
  outline-offset: 2px;
}

/* Responsive */
@media screen and (max-width: 1000px) {
  .toc-layout {
    grid-template-columns: 1fr;
    gap: 16px;
    margin: 20px auto 40px;
  }
  .toc-sidebar {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 10px;
  }
  .toc-heading { grid-column: 1 / -1; }
  .toc-note { grid-column: 1 / -1; }
}

@media screen and (max-width: 520px) {
  .toc-sidebar {
    grid-template-columns: 1fr;
  }
}

/* ====== Surbrillance latérale sur le lien actif (hover + section ciblée) ====== */
.toc-link {
  position: relative;
  overflow: hidden;                  /* cache la barre animée */
  border-left: 6px solid transparent;/* garde l'alignement propre */
}

/* Barre colorée qui glisse sur le côté gauche */
.toc-link::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 6px;
  transform: scaleY(0);
  transform-origin: center top;
  transition: transform .18s ease;
  border-radius: 0 3px 3px 0;
}

/* Hover = on affiche la barre et on renforce la carte */
.toc-link:hover {
  border-color: #cfd8ea;
  box-shadow: 0 6px 16px rgba(10,61,145,0.12);
  transform: translateX(2px);
}
.toc-link:hover::before { transform: scaleY(1); }

/* Style commun quand le lien est "actif" (section ciblée par l’ancre) */
.toc-link.is-active,
.toc-link[aria-current="true"] {
  font-weight: 700;
  background: #f7f9ff;
  border-color: #cfd8ea;
}

/* ====== Couleurs par thématique pour la barre latérale ====== */
/* Au hover (déjà OK via ::before) ET à l'état actif (via :target ci-dessous) */
.toc-link.theme-justice::before  { background:#BF2202; }
.toc-link.theme-ecologie::before { background:#2e7d32; }
.toc-link.theme-education::before{ background:#1565c0; }
.toc-link.theme-securite::before { background:#6a1b9a; }
.toc-link.theme-energie::before  { background:#f9a825; }
.toc-link.theme-pouvoir::before  { background:#d84315; }
.toc-link.theme-budget::before   { background:#00897b; }

/* ====== Activation CSS pure via l’ancre :target (sans JS) ======
   On met le lien en état "actif" quand sa section correspondante est ciblée.
   (on utilise :has() — supporté par Chrome, Edge, Safari récents) */
html:has(#justice:target)  .toc-link[href="#justice"],
html:has(#ecologie:target) .toc-link[href="#ecologie"],
html:has(#education:target).toc-link[href="#education"],
html:has(#securite:target) .toc-link[href="#securite"],
html:has(#energie:target)  .toc-link[href="#energie"],
html:has(#pouvoir-achat:target) .toc-link[href="#pouvoir-achat"],
html:has(#budget:target)   .toc-link[href="#budget"] {
  font-weight: 700;
  background: #f7f9ff;
  border-color: #cfd8ea;
}

/* On affiche la barre colorée aussi quand la section est ciblée */
html:has(#justice:target)  .toc-link.theme-justice[href="#justice"]::before,
html:has(#ecologie:target) .toc-link.theme-ecologie[href="#ecologie"]::before,
html:has(#education:target).toc-link.theme-education[href="#education"]::before,
html:has(#securite:target) .toc-link.theme-securite[href="#securite"]::before,
html:has(#energie:target)  .toc-link.theme-energie[href="#energie"]::before,
html:has(#pouvoir-achat:target) .toc-link.theme-pouvoir[href="#pouvoir-achat"]::before,
html:has(#budget:target)   .toc-link.theme-budget[href="#budget"]::before {
  transform: scaleY(1);
}

/* Accessibilité : focus clavier = même effet que hover */
.toc-link:focus {
  outline: none;
  border-color: #cfd8ea;
  box-shadow: 0 0 0 4px rgba(37,74,143,0.12);
}
.toc-link:focus::before { transform: scaleY(1); }


___________
/* ====== À PROPOS ====== */
.about-wrap {
  max-width: 1200px;
  margin: 20 auto 60px;
  padding: 0 20px;
}

.bio-grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 30px;
  align-items: start;
      margin-left: 90px;
}

/* Portrait encadré */
.portrait-card {
  position: sticky;
  top: 20px;                 /* reste visible au scroll desktop */
  align-self: start;
}

.portrait-frame {
  background: linear-gradient(135deg, #001f4d 0%, #254A8F 100%);
  padding: 14px;
  border-radius: 24px;
  box-shadow: 0 12px 36px rgba(10,61,145,0.25);
  border: 3px solid #fff;
}

.portrait-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}

.portrait-caption {
  text-align: center;
  margin-top: 12px;
  font-weight: 700;
  color: #0a3d91;
}
.portrait-caption span {
  display: block;
  font-weight: 400;
  color: #4a4a4a;
  font-size: 0.95rem;
}

/* Texte bio */
.bio-content h3 {
  color: #0a3d91;
  margin-bottom: 12px;
  
}
.bio-content p {
  margin: 10px 0;
  text-align: justify;
    margin-right: 200px;

}
.bio-list {
  text-align: justify;
  padding-left: 18px;
      margin-right: 200px;

  
  
}
.bio-list li { margin: 6px 0; }

/* Valeurs */
.values {
  margin-top: 20px;
}
.values-grid {
  display: grid;!important;
  grid-template-columns: repeat(auto-fit, minmax(220px,1fr));!important;
  gap: 18px;
}
.value-card {
  background: #FFFCFC;
  border: 1px solid #e2e8f5;
  border-radius: 18px;
  padding: 18px;
  text-align: left;
  box-shadow: 0 8px 24px rgba(10,61,145,0.08);
  transition: transform .25s ease, box-shadow .25s ease;
}
.value-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(10,61,145,0.16);
}
.value-card h4 { margin-bottom: 6px; color: #0a3d91; }

/* Liserés de couleur par valeur */
.v-travail { border-left: 8px solid #254A8F; }
.v-justice { border-left: 8px solid white; }
.v-fierte  { border-left: 8px solid #BF2202; }

/* Responsive */
@media screen and (max-width: 1024px) {
  /* On annule la grille pour empiler les éléments */
  .bio-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 0; /* Supprime le décalage PC */
    gap: 30px;
  }

  /* Portrait centré et taille adaptée */
  .portrait-card {
    position: static;
    max-width: 300px; /* Plus petit sur mobile */
    width: 100%;
  }

  .portrait-frame {
    margin: 0 auto;
  }

  /* TEXTE : On libère toute la largeur */
  .bio-content {
    width: 100%;
    max-width: 100%;
    padding: 0 10px; /* Légère marge interne pour ne pas toucher les bords */
  }

  .bio-content p, 
  .bio-list, 
  .letter-body p, 
  .bio-hidden p {
    margin-right: 0 !important; /* SUPPRIME LE BLOCAGE QUE TU VOIS SUR TES PHOTOS */
    width: 100% !important;
    text-align: left; /* Plus lisible que le justifié sur mobile */
    font-size: 1.05rem;
    line-height: 1.6;
  }

  /* Valeurs : on les passe en une seule colonne */
  .values-grid {
    flex-direction: column;
    gap: 15px;
  }
}


.v-travail {
  background: #e9f0ff;   /* bleu clair */
  border-left: 6px solid #254A8F;
}

.v-justice {
  background: #FCFCF7;   /* vert clair */
  border-left: 6px solid white;
}

.v-fierte {
  background: #fff0ec;   /* rouge/orangé clair */
  border-left: 6px solid #BF2202;
}


/* ============================================================
   SECTION À PROPOS - VERSION AMÉLIORÉE
   ============================================================ */

.about-wrap {
  max-width: 1200px;
  margin: 40px auto 80px;
  padding: 0 20px;
}

.bio-grid {
  display: grid;
  grid-template-columns: 320px 1fr; /* Largeur portrait fixe plus équilibrée */
  gap: 50px;
  align-items: start;
}

/* Portrait avec effet de profondeur */
.portrait-card {
  position: sticky;
  top: 40px;
  z-index: 5;
}

.portrait-frame {
  background: linear-gradient(135deg, #001f4d 0%, #254A8F 100%);
  padding: 10px;
  border-radius: 24px;
  box-shadow: 0 20px 40px rgba(0, 31, 77, 0.2);
  transition: transform 0.4s ease;
}

.portrait-frame:hover {
  transform: rotate(-2deg) scale(1.02);
}

.portrait-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
}

/* Typographie et Lisibilité */
.bio-content {
  max-width: 750px; /* Limite la longueur des lignes pour le confort de lecture */
}

.bio-content h3 {
  color: #001f4d;
  font-size: 2rem;
  margin-bottom: 20px;
  position: relative;
}

.bio-content p {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #333;
  margin-bottom: 20px;
  text-align: justify;
}

/* Grille de Valeurs - Glassmorphism & Flex */
.values {
  margin-top: 60px;
}

.values-grid{
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
  outline: 3px solid blue !important;
}



.value-card {
  flex: 1 1 300px; /* S'adapte sur PC, s'empile sur mobile */
  background: rgba(255, 255, 255, 0.7); /* Effet translucide */
  backdrop-filter: blur(10px); /* Glassmorphism */
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 20px;
  padding: 30px;
  display: flex;
  flex-direction: row;
  box-shadow: 0 10px 30px rgba(0, 31, 77, 0.05);
  transition: all 0.3s ease;
}

.value-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 31, 77, 0.12);
  background: rgba(255, 255, 255, 0.95);
}

.value-card h4 {
  font-size: 1.3rem;
  margin-bottom: 12px;
  color: #001f4d;
}

/* Couleurs Thématiques (Bordures animées) */
.v-travail { border-top: 6px solid #254A8F; }
.v-justice { border-top: 6px solid #BF2202; } /* Correction couleur pour contraste */
.v-fierte  { border-top: 6px solid #001f4d; }

/* RESPONSIVE TABLETTE ET MOBILE */
@media screen and (max-width: 1024px) {
  .bio-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 30px;
  }
  
  .portrait-card {
    position: relative;
    top: 0;
    max-width: 400px;
    margin: 0 auto;
  }
  
  .bio-content {
    max-width: 100%;
    text-align: center;
  }
}

@media screen and (max-width: 600px) {
  .section h2 { font-size: 1.8rem; }
  .value-card { padding: 20px; }
}



/* ============================
   AJOUTS — Page "S'unir"
   À coller APRÈS ton CSS actuel
   ============================ */

/* Conteneurs de sections de la page S'unir */
.about-wrap .section {
  background: #fff;
  border: 1px solid #e2e8f5;
  border-radius: 20px;
  padding: clamp(18px, 3vw, 36px);
  box-shadow: 0 10px 30px rgba(10,61,145,0.10);
  text-align: left;
}

/* Titres internes */
.about-wrap .section h3 {
  color: #0a3d91;
  margin: 0 0 6px 0;
  font-size: clamp(1.3rem, 1.1rem + .6vw, 1.8rem);
}

/* Texte standard */
.about-wrap .section p {
  color: #334;
}

/* ---------- Cartes d'entrée (Devenir bénévole / Don / Newsletter) ---------- */
.values-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.value-card {
  border-radius: 18px;
  border: 1px solid #e2e8f5;
  background: #fff;
  box-shadow: 0 8px 24px rgba(10,61,145,0.08);
  transition: transform .22s ease, box-shadow .22s ease;
}
.value-card:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(10,61,145,0.14); }
.value-card h4 { color: #0a3d91; margin: 2px 0 8px; }

/* ---------- Boutons dédiés à S'unir ---------- */
.btn {
  display: inline-block;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid #cfd8ea;
  background: #fff;
  color: #001f4d;
  font-weight: 700;
  text-decoration: none;
  transition: transform .06s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  box-shadow: 0 2px 0 rgba(0,0,0,0.06);
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 16px rgba(10,61,145,.12); text-decoration: none; }
.btn.primary { background: #0a3d91; color: #fff; border-color: #0a3d91; }
.btn.primary:hover { background: #254A8F; }
.btn.outline { background: transparent; color: #0a3d91; border-color: #0a3d91; }
.btn.small { padding: 8px 14px; font-size: .95rem; }

/* Ligne de CTA du bandeau d'intro */
.cta-row .btn { margin: 4px 6px; }

/* ---------- Formulaire Newsletter (bloc carte) ---------- */
.inline-form {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 10px 0;
}
.inline-form input[type="email"] {
  flex: 1;
  min-width: 180px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid #cfd8ea;
  border-radius: 12px;
  background: #fff;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.inline-form input[type="email"]:focus {
  outline: none;
  border-color: #254A8F;
  box-shadow: 0 0 0 4px rgba(37,74,143,.12);
}

/* ---------- Formulaires (Bénévolat & Don) ---------- */
.form { margin-top: 14px; }
.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 720px) {
  .form-grid { grid-template-columns: repeat(2, 1fr); }
}
.form-field { display: grid; gap: 6px; }
.form-field label, legend { font-weight: 700; color: #0a3d91; }
.form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form input[type="number"],
.form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #cfd8ea;
  border-radius: 12px;
  background: #fff;
  font: inherit;
  color: #222;
  outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.form textarea { min-height: 120px; resize: vertical; }
.form input:hover, .form textarea:hover { background: #f9fbff; }
.form input:focus, .form textarea:focus {
  border-color: #254A8F;
  box-shadow: 0 0 0 4px rgba(37,74,143,.12);
}

/* Groupes de cases à cocher */
.choices { display: flex; flex-wrap: wrap; gap: 10px 14px; }
.choices label {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  border: 1px dashed #cfd8ea;
  border-radius: 12px;
  background: #fff;
}

/* Checkbox d’acceptation */
.checkbox { display: flex; align-items: flex-start; gap: 10px; margin: 10px 0; }
.form-note { color: #556; font-size: .95rem; }

/* Sélecteur de montant (Don) */
.amounts { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.amount {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #cfd8ea;
  transition: border-color .2s, box-shadow .2s, transform .06s;
}
.amount:hover { border-color: #254A8F; box-shadow: 0 6px 14px rgba(10,61,145,.10); transform: translateY(-1px); }
.amount input { accent-color: #0a3d91; }

/* Bouton principal des formulaires */
#benevolat .btn.primary, #don .btn { margin-top: 6px; }

/* ---------- Liste d’événements ---------- */
.event-list {
  list-style: none;
  padding: 0; margin: 0;
  display: grid; gap: 14px;
}
.event-list li {
  background: #fff;
  border: 1px solid #e2e8f5;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 8px 24px rgba(10,61,145,0.08);
}
.event-list strong { display: block; margin-bottom: 4px; color: #0a3d91; }
.event-list .btn { margin-top: 8px; }

/* ---------- Kit militant (téléchargements) ---------- */
.downloads { display: flex; flex-wrap: wrap; gap: 10px; }
.download {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid #e2e8f5;
  background: #fff;
  transition: transform .06s ease, box-shadow .2s ease, border-color .2s ease;
}
.download:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 16px rgba(10,61,145,.10);
  text-decoration: none;
  border-color: #cfd8ea;
}

/* ---------- FAQ ---------- */
details {
  background: #fff;
  border: 1px solid #e2e8f5;
  border-radius: 14px;
  padding: 12px 14px;
  margin: 10px 0;
  box-shadow: 0 6px 16px rgba(10,61,145,0.06);
}
summary {
  cursor: pointer;
  font-weight: 700;
  color: #0a3d91;
  list-style: none;
}
summary::-webkit-details-marker { display: none; }

/* ---------- Petites adaptations responsives ---------- */
@media (max-width: 700px) {
  .inline-form { flex-direction: column; align-items: stretch; }
  .inline-form input[type="email"] { height: 46px; }
  .downloads { justify-content: center; }
}

/* Accessibilité commune (cohérente avec ton thème) */
.btn:focus,
.download:focus,
.toc-link:focus,
.inline-form input[type="email"]:focus,
.form input:focus,
.form textarea:focus {
  outline: 3px solid rgba(37,74,143,0.35);
  outline-offset: 3px;
  border-radius: 10px;
}

_______________
/* Slogan entre logo et menu */
.slogan {
  font-size: 1.8em;
  color: #0a3d91;
  margin-left: 30px;
  flex-grow: 1;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  white-space: nowrap;
}


/* Alignement en pyramide (2 en haut, 3 en bas) */
.project-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
  margin-top: 40px;
  max-width: 1000px; /* Limite la largeur pour forcer la forme */
  margin-left: auto;
  margin-right: auto;
}

/* Force les deux premiers blocs à prendre de la place pour rejeter les autres */
.project-cards .card-link {
  text-decoration: none;
  color: inherit;
  flex: 0 1 250px; /* Taille de base des cartes */
}

/* Sur grand écran, on peut forcer la cassure si besoin avec un conteneur */
@media screen and (min-width: 900px) {
  /* Optionnel : si vous voulez être certain que le 3ème descend */
  .project-cards .card-link:nth-child(3) {
    /* Cette règle peut varier selon la largeur de votre écran */
  }
}


@media screen and (max-width: 600px) {
  .topic-section {
    padding: 15px; /* Moins de padding interne sur petit écran */
  }

  .topic-section h1 {
    font-size: 1.4rem; /* Titre un peu plus petit */
  }

  .key-measure h3 {
    font-size: 1.1rem; /* Ajuste la taille des mesures clés */
    margin-bottom: 5px;
  }

  .bullet li {
    font-size: 0.95rem; /* Texte plus lisible */
  }

  /* Correction du slogan qui déborde peut-être */
  .slogan {
    font-size: 18px !important;
    margin-left: 10px;
  }
}


@media screen and (max-width: 900px) {
  /* Réduit la taille du logo sur mobile */
  .logo-img {
    height: 40px; 
  }

  /* Ajuste le slogan pour qu'il ne pousse pas le bouton menu */
  .slogan {
    font-size: 16px !important;
    margin-left: 10px;
    text-align: center;
    white-space: normal; /* Permet le retour à la ligne si nécessaire */
    line-height: 1.2;
  }

  /* Padding du header pour éviter que le menu touche les bords */
  .topbar {
    padding: 10px 20px;
  }
}

@media screen and (max-width: 1000px) {
  .toc-layout {
    display: flex;
    flex-direction: column;
    margin-top: 0;
  }

  .toc-sidebar {
    position: static;
    width: 100%;
    border-radius: 0;
    box-shadow: none;
    background: #f5f8ff; /* Même couleur que le fond pour la discrétion */
    padding: 20px;
  }

  .toc-nav {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Deux colonnes de boutons */
    gap: 10px;
  }

  .toc-link {
    margin: 0; /* Supprime les marges qui causent le décalage sur l'image */
    text-align: center;
    justify-content: center;
  }
}

/* Correction spécifique pour la section Hero sur mobile */
@media screen and (max-width: 900px) {
  .hero {
    padding: 40px 20px; /* Réduit l'espacement pour gagner de la place */
    flex-direction: column; /* Force l'empilement vertical */
    text-align: center;
  }

  .hero-content {
    flex-direction: column-reverse; /* Met l'image au-dessus du texte ou inversement selon votre choix */
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  .hero-image {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 20px; /* Espace entre l'image et le texte */
  }

  .hero-image img {
    max-width: 280px; /* Ajuste la taille pour mobile */
    height: auto;
    margin: 0 auto; /* Centre l'image horizontalement */
    border-radius: 50%; /* Garde l'aspect arrondi de la photo */
    border: 4px solid #fff;
  }

  .hero-text {
    flex: none;
    width: 100%;
  }

  .hero-text h1 {
    font-size: 1.8rem; /* Titre plus adapté aux petits écrans */
    margin-top: 15px;
  }
}


.countdown-wrap {
  background: #001f4d;
  color: white;
  padding: 40px 20px;
  text-align: center;
}

#countdown {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}

.time-unit {
  background: rgba(255, 255, 255, 0.1);
  padding: 15px;
  border-radius: 12px;
  min-width: 80px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.time-unit span {
  display: block;
  font-size: 2.5rem;
  font-weight: bold;
  color: #BF2202; /* Rouge de votre charte */
}

.time-unit p {
  margin: 0;
  font-size: 0.9rem;
  text-transform: uppercase;
}

@media (max-width: 600px) {
  #countdown { gap: 10px; }
  .time-unit { min-width: 60px; padding: 10px; }
  .time-unit span { font-size: 1.5rem; }
}

______
/* Style du décompte dans le Hero */
.hero-countdown {
  margin: 25px 0;
  background: rgba(255, 255, 255, 0.1);
  padding: 15px;
  border-radius: 20px;
  display: inline-block;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.countdown-title {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 10px !important;
  color: #fff;
  opacity: 0.9;
}

#countdown {
  display: flex;
  gap: 15px;
  justify-content: center;
}

.time-unit {
  text-align: center;
  min-width: 60px;
}

.time-unit span {
  display: block;
  font-size: 1.8rem;
  font-weight: bold;
  color: #fff; /* On reste sur du blanc pour l'élégance du Hero */
}

.time-unit p {
  font-size: 0.7rem;
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.8);
}

/* Correction responsive pour mobile */
@media screen and (max-width: 900px) {
  .hero-content {
    flex-direction: column-reverse; /* Photo en haut, texte en bas */
    text-align: center;
  }

  .hero-image img {
    max-width: 250px;
    margin-bottom: 20px;
  }

  .hero-countdown {
    width: 100%;
    max-width: 320px;
  }

  .time-unit span {
    font-size: 1.4rem;
  }
}


/* Section Réseaux Sociaux */
.social-section {
  padding: 80px 20px;
  background-color: #f5f8ff;
  text-align: center;
}

.social-container {
  max-width: 1000px;
  margin: 0 auto;
}

.social-text h2 {
  font-family: "Times New Roman", Times, serif;
  font-size: 2.5rem;
  color: #001f4d;
  margin-bottom: 15px;
}

.social-text p {
  font-size: 1.1rem;
  color: #4a4a4a;
  margin-bottom: 40px;
}

.social-grid {
  display: flex;
  gap: 30px;
  justify-content: center;
  flex-wrap: wrap;
}

.social-card {
  background: white;
  text-decoration: none;
  border-radius: 24px;
  padding: 30px;
  width: 320px;
  display: flex;
  align-items: center;
  gap: 20px;
  box-shadow: 0 10px 30px rgba(0, 31, 77, 0.08);
  transition: all 0.3s ease;
  border: 1px solid #e2e8f5;
}

.social-icon img {
  width: 50px;
  height: 50px;
}

.social-info {
  text-align: left;
}

.social-info h3 {
  margin: 0;
  color: #001f4d;
  font-size: 1.4rem;
}

.social-info p {
  margin: 5px 0 15px 0;
  font-size: 0.9rem;
  color: #666;
}

.social-btn {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 50px;
  font-weight: bold;
  font-size: 0.85rem;
  background: #001f4d;
  color: white;
  transition: background 0.3s;
}

/* Effets de survol */
.social-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 31, 77, 0.15);
}

.instagram:hover {
  border-color: #E1306C;
}

.tiktok:hover {
  border-color: #000000;
}

.social-card:hover .social-btn {
  background: #BF2202; /* Rouge de votre charte au hover */
}

/* Mobile */
@media screen and (max-width: 700px) {
  .social-grid {
    flex-direction: column;
    align-items: center;
  }
  .social-card {
    width: 100%;
    max-width: 350px;
  }
}

/* État de base des cartes projet */
.project-cards .card {
  background: #fff;
  padding: 30px;
  border-radius: 24px; /* Arrondi identique aux réseaux */
  width: 250px;
  box-shadow: 0 10px 30px rgba(0, 31, 77, 0.08); /* Ombre douce de base */
  border: 1px solid #e2e8f5; /* Bordure discrète */
  transition: all 0.3s ease; /* Transition fluide */
  text-align: center;
}

/* Effet de survol identique aux réseaux sociaux */
.project-cards .card-link:hover .card {
  transform: translateY(-10px); /* Montée de la carte */
  box-shadow: 0 20px 40px rgba(0, 31, 77, 0.15); /* Ombre accentuée */
  border-color: #0a3d91; /* Bordure qui prend la couleur du mouvement au survol */
}

/* On s'assure que le titre change aussi de couleur au hover pour plus de dynamisme */
.project-cards .card-link:hover h3 {
  color: #BF2202; /* Passage au rouge au survol */
}

@media screen and (max-width: 900px) {
  /* Aligner tout le contenu du Hero au centre */
  .hero-content {
    flex-direction: column-reverse; /* Photo en haut, texte en bas */
    align-items: center;
    text-align: center;
    padding: 20px;
  }

  .hero-text {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centre le titre, le texte et le décompte */
    width: 100%;
  }

  /* Ajuster le décompte pour qu'il soit bien centré */
  .hero-countdown {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin: 20px 0;
  }

  #countdown {
    justify-content: center; /* Aligne les boîtes Jours/H/M/S au centre */
    gap: 10px;
  }

  /* Centrer le bouton CTA */
  .cta-button {
    margin: 20px auto 0 auto !important;
    display: inline-block;
  }

  /* Ajuster l'image du portrait */
  .hero-image img {
    max-width: 220px; /* Un peu plus petit pour laisser de la place au texte */
    margin-bottom: 30px;
  }
}

/* Grille 2 colonnes pour les projets sur mobile */
@media screen and (max-width: 600px) {
  .project-cards {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Deux colonnes égales */
    gap: 12px;
    padding: 10px;
  }

  .project-cards .card {
    width: 100%; /* La carte prend toute la largeur de sa colonne */
    padding: 15px 10px;
    min-height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .project-cards .card h3 {
    font-size: 0.95rem; /* Titre plus petit pour tenir sur une ligne */
    margin-bottom: 5px;
  }

  .project-cards .card p {
    display: none; /* On cache la description sur mobile pour ne garder que le titre */
  }

  /* Style pour le bouton "Lire la suite" */
  
  .btn-read-more {
    display: block;
    margin: 20px auto;
    background: none;
    border: 1px solid #0a3d91;
    color: #0a3d91;
    padding: 10px 20px;
    border-radius: 50px;
    font-weight: bold;
    cursor: pointer;
  }
}

.bio-hidden {
  display: none; /* Cache le texte dès le départ */
}

/* Style du bouton "Lire la suite" optimisé pour PC */
.btn-read-more {
  display: block;
  margin: 30px auto;
  padding: 12px 30px;
  background-color: transparent;
  color: #001f4d; /* Ton bleu marine */
  border: 2px solid #001f4d;
  border-radius: 50px;
  font-weight: bold;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-read-more:hover {
  background-color: #001f4d;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 31, 77, 0.2);
}


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

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

.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);
}
@media screen and (min-width: 1024px) {
  .bio-grid {
    display: grid;
    /* On passe d'un ratio 1:1 à un ratio où le texte occupe 70% de l'espace */
    grid-template-columns: 300px 1fr; 
    gap: 60px; /* Plus d'espace entre la photo et le texte */
    align-items: start;
    margin-left: 0; /* On retire le décalage manuel pour centrer proprement */
  }

  .bio-content {
    /* On augmente la largeur de lecture pour que le texte soit moins "étroit" */
    max-width: 900px; 
  }

  .bio-content p, .bio-list {
    margin-right: 0 !important; /* On supprime les marges de 200px qui compressaient le texte */
    width: 100%;
  }
}
.about-wrap {
  max-width: 1300px; /* On passe de 1200px à 1300px */
  margin: 40px auto;
  padding: 0 40px;
}
.bio-content p {
  line-height: 1.8; /* Un interlignage plus grand rend le texte plus élégant sur de larges colonnes */
  font-size: 1.15rem; /* Un texte légèrement plus grand pour compenser la largeur */
}

@media screen and (max-width: 900px) {
  /* On libère l'espace à droite pour le texte mobile */
  .letter-body p, 
  .bio-hidden p,
  .bio-content p {
    margin-right: 0 !important; 
    text-align: left; /* Plus lisible que 'justify' sur écran étroit */
    padding: 0 15px;  /* Respiration sur les côtés */
    margin-bottom: 20px; /* Force l'espace entre les paragraphes */
  }

  /* On centre les titres de section */
  .about h2 {
    text-align: center;
    padding: 0 10px;
  }
}

@media screen and (max-width: 900px) {
  .social-text h2 {
    font-size: 1.8rem !important; /* Réduit la taille pour éviter les coupures bizarres */
    line-height: 1.3;
    margin-bottom: 10px;
    padding: 0 10px;
  }

  .social-text p {
    font-size: 1rem !important;
    margin-bottom: 25px;
    padding: 0 15px;
  }
}

@media screen and (max-width: 700px) {
  .social-grid {
    gap: 15px; /* Réduit l'espace entre les deux cartes */
    padding: 0 15px;
  }

  .social-card {
    padding: 20px !important; /* Réduit le rembourrage interne */
    display: flex;
    flex-direction: row !important; /* Garde l'icône à côté du texte au lieu d'empiler */
    align-items: center;
    text-align: left;
  }

  .social-icon img {
    width: 40px !important; /* Icônes un peu plus discrètes */
    height: 40px !important;
  }

  .social-info h3 {
    font-size: 1.2rem !important;
  }

  .social-btn {
    padding: 6px 12px !important;
    font-size: 0.8rem !important;
  }
}
@media screen and (max-width: 900px) {
  /* Réduit la hauteur globale de la barre blanche */
  .topbar {
    padding: 5px 15px !important; /* On passe de 15px à 5px */
    min-height: 50px;
  }

  /* Réduit encore la taille du logo */
  .logo-img {
    height: 35px !important; 
  }

  /* Rapproche le slogan du haut */
  .slogan {
    font-size: 14px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  
  /* Ajuste le bouton hamburger pour qu'il soit bien centré verticalement */
  .hamburger {
    margin-top: 0;
  }
}

@media screen and (max-width: 900px) {
  /* Réduit l'espace bleu clair en haut des pages */
  .section {
    padding: 20px 20px !important; /* On passe de 80px à 20px */
  }

  .section h2 {
    margin-top: 0 !important;
    font-size: 1.6rem !important;
  }

  .about-text {
    margin-top: 5px !important;
    margin-bottom: 0 !important;
  }
}

/* Bloc correctif pour style.css */
@media screen and (max-width: 900px) {
  /* On remonte tout le bloc texte du Hero */
  .hero-text {
    margin-top: -20px !important;
  }

  /* On réduit l'espace autour du décompte */
  .hero-countdown {
    margin: 10px 0 !important;
    padding: 10px !important;
  }

  /* On s'assure que le bouton n'a pas une marge haute trop forte */
  .cta-button {
    margin-top: 15px !important;
    padding: 12px 24px !important; /* Bouton un peu plus compact */
  }
}


@media screen and (max-width: 600px) {
  /* On libère la grille pour que les blocs respirent */
  .project-cards {
    display: flex !important;
    flex-direction: column; /* Empilement vertical pour plus de largeur */
    gap: 20px;
    padding: 0 15px; /* Petite marge de sécurité sur les côtés */
    max-width: 100% !important;
  }

  .project-cards .card-link {
    width: 100% !important; /* Chaque bloc prend toute la largeur disponible */
  }

  .project-cards .card {
    width: 100% !important;
    min-height: auto; /* Laisse le contenu définir la hauteur */
    padding: 25px 20px;
  }
}


@media screen and (max-width: 900px) {
  .topbar {
    padding: 10px 15px !important;
    flex-wrap: wrap; /* Permet au slogan de passer à la ligne si besoin sans casser le logo */
  }

  .slogan {
    font-size: 16px !important; /* Plus petit pour mobile */
    order: 3; /* Place le slogan sous le logo et le menu sur mobile */
    width: 100%;
    margin: 10px 0 0 0 !important;
    text-align: center;
  }
}


@media screen and (max-width: 768px) {
  .values-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0 10px;
  }

  .value-card {
    width: 100% !important;
    margin: 0 !important;
  }

  /* Pour le bandeau Hero bleu clair */
  .cta-row {
    flex-direction: column;
    width: 100%;
    align-items: stretch !important;
  }

  .cta-row .btn {
    text-align: center;
    margin: 5px 0;
  }
}
@media screen and (max-width: 600px) {
  .form-grid {
    grid-template-columns: 1fr !important; /* Force une seule colonne */
    gap: 15px;
  }

  .choices {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Deux colonnes de cases à cocher au lieu d'une ligne longue */
    gap: 10px;
  }

  .amounts {
    justify-content: center; /* Centre les options de don */
  }

  .amount {
    flex: 1 1 40%; /* Les boutons de montant prennent plus de place */
    justify-content: center;
  }
}

@media screen and (max-width: 600px) {
  .downloads {
    flex-direction: column;
    gap: 10px;
  }

  .download {
    width: 100%;
    justify-content: center;
  }

  details summary {
    padding: 15px 10px;
    font-size: 0.95rem;
  }
}

_______
@media screen and (max-width: 768px) {
  /* On réduit les marges de sécurité pour que les blocs s'étalent */
  .about-wrap {
    padding: 0 10px !important;
    width: 100%;
  }

  .section {
    padding: 30px 15px !important; /* Moins de vide sur les côtés des formulaires */
    width: 100%;
    border-radius: 0; /* Optionnel : bords carrés sur mobile pour gagner de l'espace visuel */
  }
}

@media screen and (max-width: 768px) {
  .values-grid {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }

  .value-card {
    width: 100% !important; /* Prend 100% de la largeur du parent */
    margin: 0 !important;
    padding: 20px !important;
  }

  /* Pour le formulaire Newsletter dans la carte */
  .inline-form {
    flex-direction: column;
    width: 100%;
  }

  .inline-form input {
    width: 100% !important;
    margin-bottom: 10px;
  }
}

@media screen and (max-width: 600px) {
  /* Événements : toute la largeur */
  .event-list li {
    width: 100%;
    padding: 15px;
    margin-bottom: 10px;
  }

  /* Kit militant : empiler les téléchargements */
  .downloads {
    flex-direction: column;
  }

  .download {
    width: 100%;
    justify-content: center;
    padding: 15px;
  }

  /* Cases à cocher : mieux réparties */
  .choices label {
    width: 100%; /* Une option par ligne pour éviter de couper le texte */
    display: flex;
  }
}

@media screen and (max-width: 768px) {
  /* On force le conteneur principal à ignorer les limites de largeur */
  .about-wrap, 
  #project, 
  .project-stacked-section,
  .section {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 10px !important;  /* Espace minimum pour ne pas coller à l'écran */
    padding-right: 10px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* On s'assure que le carrousel utilise 100% de cet espace */
  .carousel-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    gap: 5px !important;
  }

  .card-stack {
    width: 95% !important; /* Prend presque tout l'écran */
  }
}

@media screen and (max-width: 1023px) {
  /* On force la section à ignorer tout padding parent */
  .project-stacked-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  .carousel-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    gap: 0 !important; /* On colle les flèches aux bords */
    padding: 0 5px !important;
  }

  .card-stack {
    /* On augmente drastiquement la largeur ici */
    width: 88vw !important; 
    max-width: 360px !important;
    height: 480px !important;
    margin: 0 auto !important;
  }

  .stack-item {
    width: 100% !important;
    /* On réduit l'effet de rotation pour gagner de la place visuelle */
    transform: translateX(calc(var(--index) * 10px)) 
               translateY(calc(var(--index) * -8px)) 
               rotateZ(calc(var(--index) * 1deg)) !important;
  }
}


@media screen and (max-width: 1000px) {
  .toc-layout {
    display: block !important; /* On annule la grille pour empiler les éléments */
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important; /* On récupère tout l'espace bord à bord */
    margin: 0 !important;
  }

  .toc-content {
    width: 100% !important;
    padding: 10px !important; /* On garde juste une petite marge de sécurité */
  }
}
@media screen and (max-width: 600px) {
  .topic-section {
    width: 100% !important;
    border-radius: 0 !important; /* On colle les bords pour un look plus moderne sur mobile */
    padding: 20px 15px !important;
    margin-bottom: 15px !important;
    box-shadow: none !important; /* On simplifie le design pour la clarté */
    border-left: none !important;
    border-right: none !important;
  }

  .key-measure {
    width: 100% !important;
    margin: 15px 0 !important;
    padding: 15px !important;
    border-radius: 8px !important;
  }
}

@media screen and (max-width: 900px) {
  .topbar {
    display: flex !important;
    flex-direction: row !important; /* Force l'alignement horizontal */
    justify-content: space-between !important; /* Écarte le logo (gauche) et le burger (droite) */
    align-items: center !important; 
    flex-wrap: nowrap !important;   /* Empêche le saut de ligne */
    padding: 10px 15px !important;
    height: 65px !important;
  }

  .logo {
    order: 1 !important; /* Force le logo à gauche */
    flex: 0 0 auto;
  }

  .slogan {
    order: 2 !important; /* Force le slogan au centre */
    flex: 1; 
    font-size: 14px !important;
    text-align: center;
    margin: 0 10px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Sécurité si le texte est trop long */
  }

  .hamburger {
    order: 3 !important; /* Force le menu burger à droite */
    display: flex !important;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    margin: 0 !important;
    padding: 5px;
  }
}




/* --- RENDU "LETTRE MANIFESTE" (ACCUEIL & BIO) --- */
.letter-body p, 
.hero-text p,
.bio-hidden p {
  text-align: justify !important; /* Aligne les bords gauche et droit */
  line-height: 1.8;              /* Interlignage aéré comme sur la photo */
  margin-bottom: 25px;           /* Espace entre les paragraphes */
  
  /* Marges équilibrées pour centrer le texte proprement sur PC */
  max-width: 900px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* --- BLOC SIGNATURE --- */
/* À ajouter en bas de votre texte dans le HTML pour l'effet de l'image */
.signature-block {
  text-align: right !important;
  max-width: 900px;
  margin: 50px auto 0 !important; /* Forte marge haute pour isoler la signature */
  padding-right: 20px;
}

/* --- ADAPTATION MOBILE --- */
@media screen and (max-width: 900px) {
  .letter-body p, 
  .hero-text p,
  .bio-hidden p {
    padding: 0 15px;   /* Evite que le texte ne touche les bords de l'écran */
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: justify; /* On garde la justification sur mobile pour le style */
  }
  
  .signature-block {
    margin-top: 30px !important;
    padding-right: 15px;
  }
}




@media screen and (min-width: 1024px) {
  /* On garde la grille pour la photo et la bio */
  .bio-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 50px;
    align-items: start;
    margin-bottom: 40px;
  }

  /* FORCE LE CONTENEUR DES VALEURS À PRENDRE TOUTE LA LARGEUR */
  .values {
    grid-column: 1 / -1; /* Indispensable pour sortir du système de colonnes */
    width: 100%;
    margin-top: 30px;
  }

  /* ALIGNEMENT HORIZONTAL : R1 | R2 | R3 */
  .values-grid {
    display: flex !important;
    flex-direction: row !important; /* Force la ligne horizontale */
    gap: 0; /* Supprime l'espace pour coller les blocs comme un drapeau */
    width: 100%;
    border-radius: 15px;
    overflow: hidden; /* Pour que les arrondis s'appliquent aux blocs d'extrémités */
    box-shadow: 0 10px 30px rgba(0, 31, 77, 0.1);
  }

  .value-card {
    flex: 1; /* Chaque bloc prend exactement 1/3 de la largeur */
    margin: 0 !important;
    padding: 30px 20px;
    border-radius: 0 !important; /* On retire les arrondis individuels */
    text-align: center;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: none !important;
  }

  /* Optionnel : Rétablir les bords arrondis uniquement aux deux extrémités du drapeau */
  .value-card:first-child { border-radius: 15px 0 0 15px !important; }
  .value-card:last-child { border-radius: 0 15px 15px 0 !important; }
}


/* --- STYLE HERO (ACCUEIL) --- */
.hero {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center; /* Centre tout le texte à l'intérieur */
  background-color: #001f4d; /* Bleu marine de la photo */
  color: white;
  min-height: 80vh; /* Donne de la hauteur pour l'impact visuel */
  padding: 40px 20px;
}

.hero-content {
  width: 100%;
  max-width: 1200px;
}

.hero-text {
  display: flex;
  flex-direction: column;
  align-items: center; /* Centre les éléments horizontalement */
  justify-content: center;
}

.hero-title {
  font-family: "Times New Roman", Times, serif;
  font-size: clamp(2rem, 5vw, 4rem); /* S'adapte à la taille de l'écran */
  line-height: 1.2;
  margin-bottom: 30px;
  font-weight: bold;
}

.hero-subtitle {
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  margin-bottom: 40px;
  max-width: 800px;
  opacity: 0.9;
}

.hero-date {
  font-size: 1.2rem;
  letter-spacing: 2px;
  font-weight: bold;
  text-transform: uppercase;
  margin-top: 20px;
}