*{
  box-sizing: border-box;
}



/* Reset */
body, html {
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', Arial, sans-serif;
  color: #ececf1;
  box-sizing: border-box;
}

body {
padding-top: 150px !important;
}


/* Layout principal */
.gpt-root {
  display: flex;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

/* Sidebar */
.gpt-sidebar {
  width: 270px;
  background: #202123;
  color: #ececf1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid #2a2b32;
}

.gpt-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 1rem 1rem 1.2rem;
  border-bottom: 1px solid #2a2b32;
}

.gpt-logo {
  font-size: 1.3rem;
  font-weight: bold;
  letter-spacing: 1px;
  color: #ececf1;
}

.gpt-sidebar-new {
  background: #343541;
  color: #ececf1;
  border: none;
  border-radius: 6px;
  font-size: 1.5rem;
  width: 2.2rem;
  height: 2.2rem;
  cursor: pointer;
  transition: background 0.2s;
}
.gpt-sidebar-new:hover {
  background: #444654;
}

.gpt-sidebar-chats {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 1rem 0.5rem;
}
.gpt-sidebar-chats ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.gpt-sidebar-chat {
  padding: 0.7rem 1rem;
  border-radius: 6px;
  margin-bottom: 0.3rem;
  cursor: pointer;
  color: #ececf1;
  transition: background 0.2s;
  display: flex;
  align-items: center;
}
.gpt-sidebar-chat--active,
.gpt-sidebar-chat:hover {
  background: #343541;
}

.gpt-sidebar-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  border-top: 1px solid #2a2b32;
}
.gpt-sidebar-settings,
.gpt-sidebar-user {
  background: none;
  border: none;
  color: #ececf1;
  cursor: pointer;
  padding: 0.3rem;
  border-radius: 6px;
  transition: background 0.2s;
}
.gpt-sidebar-settings:hover,
.gpt-sidebar-user:hover {
  background: #444654;
}

/* Main */
.gpt-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  background: #343541;
  height: 100vh;
  min-width: 0;
}

/* Header */
.gpt-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 2rem 1.2rem 2rem;
  border-bottom: 1px solid #2a2b32;
  background: #343541;
}
.gpt-header-title {
  font-size: 1.3rem;
  font-weight: bold;
  color: #ececf1;
  letter-spacing: 1px;
}
.gpt-header-actions button {
  background: none;
  border: none;
  color: #ececf1;
  font-size: 1.2rem;
  margin-left: 1rem;
  cursor: pointer;
  border-radius: 6px;
  padding: 0.3rem 0.6rem;
  transition: background 0.2s;
}
.gpt-header-actions button:hover {
  background: #444654;
}

/* Chat */
.gpt-chat {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 2.5rem 0;
  background: #343541;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.gpt-message {
  display: flex;
  align-items: flex-start;
  max-width: 700px;
  margin: 0 auto;
  gap: 1rem;
  padding: 0 1.5rem;
}

.gpt-message--user {
  flex-direction: row-reverse;
}
.gpt-message--user .gpt-message-avatar {
  background: #19c37d;
  color: #fff;
}
.gpt-message--bot .gpt-message-avatar {
  background: #ececf1;
  color: #343541;
}

.gpt-message-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 0.2rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}

.gpt-message-content {
  background: #444654;
  color: #ececf1;
  border-radius: 0.7rem;
  padding: 1rem 1.2rem;
  min-width: 0;
  max-width: 100%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  display: flex;
  flex-direction: column;
}
.gpt-message--user .gpt-message-content {
  background: #19c37d;
  color: #fff;
}
.gpt-message-name {
  font-size: 0.95rem;
  font-weight: bold;
  margin-bottom: 0.3rem;
  opacity: 0.8;
}
.gpt-message-text {
  font-size: 1.08rem;
  white-space: pre-line;
  word-break: break-word;
}

/* Input bar */
.gpt-input-bar {
  display: flex;
  align-items: flex-end;
  gap: 0.7rem;
  padding: 1.5rem 2rem;
  background: linear-gradient(to top, #343541 90%, rgba(52,53,65,0.7) 100%);
  border-top: 1px solid #2a2b32;
}
.gpt-input {
  flex: 1 1 auto;
  resize: none;
  border: none;
  border-radius: 0.7rem;
  padding: 1rem 1.2rem;
  font-size: 1.08rem;
  background: #40414f;
  color: #ececf1;
  outline: none;
  min-height: 2.5rem;
  max-height: 8rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: background 0.2s;
}
.gpt-input:focus {
  background: #444654;
}
.gpt-send-btn {
  background: #19c37d;
  color: #fff;
  border: none;
  border-radius: 0.7rem;
  padding: 0.7rem 1.1rem;
  font-size: 1.2rem;
  cursor: pointer;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gpt-send-btn:hover {
  background: #13a06f;
}

/* Footer */
.gpt-footer {
  padding: 1.2rem 2rem;
  background: #343541;
  color: #8e8ea0;
  font-size: 0.98rem;
  border-top: 1px solid #2a2b32;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}
.gpt-footer-links {
  display: flex;
  gap: 1.2rem;
  margin-top: 0.2rem;
}
.gpt-footer-links a {
  color: #8e8ea0;
  text-decoration: none;
  font-size: 0.97rem;
  transition: color 0.2s;
}
.gpt-footer-links a:hover {
  color: #19c37d;
}

/* Responsive */
@media (max-width: 900px) {
  .gpt-sidebar {
    width: 70px;
    min-width: 70px;
  }
  .gpt-sidebar-header .gpt-logo {
    display: none;
  }
  .gpt-sidebar-chats span {
    display: none;
  }
}
/* Responsive */
@media (max-width: 742.22px) {
  #banniere, .entete {
    --height: 73.54px !important;
  }
}
@media (max-width: 386.67px) {
  #banniere, .entete {
    --height: 99.18px !important;
  }
}
@media (max-width: 700px) {
  .gpt-main {
    padding-left: 0;
  }
  .gpt-header, .gpt-input-bar, .gpt-footer {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .gpt-chat {
    padding-left: 0.2rem;
    padding-right: 0.2rem;
  }

  .bloc {
    text-align: center;
  }

    .bloc ul, .bloc ol, .bloc dl {
        text-align: start;
        width: max-content;
        margin: auto;
    }
}
@media (max-width: 600px) {
  .gpt-root {
    flex-direction: column;
  }
  .gpt-sidebar {
    flex-direction: row;
    width: 100vw;
    height: 60px;
    min-width: 0;
    border-right: none;
    border-bottom: 1px solid #2a2b32;
  }
  .gpt-sidebar-header,
  .gpt-sidebar-footer {
    flex-direction: row;
    padding: 0.5rem;
  }
  .gpt-main {
    height: calc(100vh - 60px);
  }
}

.impact-list {
    max-width: 500px;
    margin: auto;
}

.impact-item {
    text-align: start;
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 20px;
    margin-bottom: 15px;
}

.impact-item i {
    width: 30px;
    text-align: center;
    color: rgb(25, 195, 125);
    font-size: 22px;
}

.impact-item div {
    width: calc(100% - 50px);
}

.qrcode {
    margin: 1em auto;
    display: block;
    background: white;
    padding: 15px;
    border-radius: 0px;
    border-top-left-radius: 15px;
    border-bottom-right-radius: 15px;
    border: 5px solid #00bc66;
}


#scrollTopBtn {
    position:fixed;
    bottom:-100px;
    right:30px;
    background:#19c37d;
    color:#fff;
    border:none;
    border-radius:50%;
    width:48px;
    height:48px;
    font-size:1em;
    cursor:pointer;
    z-index:999;
    transition: all 0.15s ease;
}

#visiteurs-en-ligne {
    position: fixed;
    background: #19c37d;
    bottom: 30px;
    left: 30px;
    color:#ffffff;
    font-weight:600;
    font-size:1.1em;
    z-index: 2000;
    width: 48.15px;
    height: 48.15px;
    overflow: hidden;
    transition: all 0.15s ease;
    border-radius: 48.15px;
}

#visiteurs-en-ligne:hover {
    width: 240px;
}

#nb-visiteurs {
    display: inline-block;
    text-align: center;
    width: 50px;
    padding: 10px;
    border-radius: 48.15px;
    border-right: 2px solid transparent;
    transition: all 0.25s ease;
    margin-right: 7px;
}

#visiteurs-en-ligne:hover #nb-visiteurs {
    border-right: 2px solid white;
    border-radius: 0;
}

/* Scrollbar custom */
.gpt-chat::-webkit-scrollbar,
.gpt-sidebar-chats::-webkit-scrollbar {
  width: 8px;
  background: #23232a;
}
.gpt-chat::-webkit-scrollbar-thumb,
.gpt-sidebar-chats::-webkit-scrollbar-thumb {
  background: #444654;
  border-radius: 8px;
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f8fafc; /* Couleur de fond claire */
    color: #1e293b; /* Couleur de texte par défaut */
    line-height: 1.6;
}

body.dark {
    background: linear-gradient(45deg, #0f172a, #162037); /* Couleur de fond sombre */
    color: #e2e8f0; /* Couleur de texte en mode sombre */
}

a {
    text-decoration: none;
    color: inherit;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: bold;
}

/* Conteneur principal */
.conteneur-principal {
    margin: 0;
    padding: 0;
    position: relative;
    min-height: 100vh; /* Assure que le conteneur occupe toute la hauteur de l'écran */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Aligne les enfants en haut */
}



body.dark .conteneur-principal {
    background: linear-gradient(to bottom, #0f172a, #1e293b);
}

/* Arrière-plan avec lignes */
.arriere-plan {
    position: absolute; /* Assurez-vous que l'arrière-plan est positionné par rapport à son parent */
    inset: 0; /* Étend l'arrière-plan sur toute la largeur et la hauteur */
    overflow: hidden; /* Cache tout débordement */
    pointer-events: none; /* Empêche les interactions avec l'arrière-plan */
    z-index: -1; /* Place l'arrière-plan derrière tout le contenu */
}

body.dark .arriere-plan {
    opacity: 0.2;
}

.ligne {
    position: absolute;
    inset: 0; /* Étend chaque ligne sur toute la largeur et la hauteur */
}

.ligne-horizontale {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, transparent, #6ee7b7, transparent);
}

.ligne-verticale {
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 100%;
    background: linear-gradient(to bottom, transparent, #6ee7b7, transparent);
}
.contenu {
    position: relative;
    z-index: 10; /* Assure que le contenu est au-dessus de l'arrière-plan */
    padding: 0; /* Supprime les paddings inutiles */
    margin: 0; /* Supprime les marges inutiles */
}


.faq-reponse {
    transition: max-height 0.3s, opacity 0.3s;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    display: block !important;
}
.faq-item.active .faq-reponse {
    max-height: 500px;
    opacity: 1;
}
.logo .titre {
    font-size: 1.5rem;
    font-weight: bold;
    color: #059669;
}

body.dark .logo .titre {
    color: #34d399;
}

/* Bouton pour changer de thème */
.bouton-theme {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    transition: transform 0.3s;
}

.bouton-theme:hover {
    transform: scale(1.1);
}

.icone-soleil {
    display: block;
    color: #059669;
}

.icone-lune {
    display: none;
    color: #059669;
}

body.dark .icone-soleil {
    display: none;
}

body.dark .icone-lune {
    display: block;
}

/* Section principale */
.conteneur-section {
    position: relative;
    text-align: center;
    padding: 3rem 1rem 5rem;
        background: linear-gradient(45deg, #ffffff, #f3fffd);
}

body.dark .conteneur-section {
    background: linear-gradient(45deg, #1e293b, #243043);
}

/* Décorations SVG */
.decor-gauche,
.decor-droite {
    position: absolute;
    width: 16rem;
    height: 16rem;
    opacity: 0.1;
    pointer-events: none;
}

.decor-gauche {
    top: 6rem;
    left: 0;
}

.decor-droite {
    bottom: 6rem;
    right: 0;
}

.decor-svg {
    width: 100%;
    height: 100%;
    fill: #059669; /* Couleur émeraude */
}

body.dark .decor-svg {
    fill: #34d399; /* Couleur émeraude claire */
}

/* Titre principal */
.titre-section {
    position: relative;
    font-size: 2.5rem;
    font-weight: bold;
    color: #1e293b; /* Gris ardoise */
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

body.dark .titre-section {
    color: #e2e8f0; /* Couleur claire */
}

.titre-accent {
    color: #059669; /* Couleur émeraude */
}

body.dark .titre-accent {
    color: #34d399; /* Couleur émeraude claire */
}

/* Description */
.description-section {
    max-width: 40rem;
    margin: 0 auto 2rem;
    margin-top: 16px;
    font-size: 1.125rem;
    color: #64748b; /* Gris clair */
    line-height: 1.6;
}

body.dark .description-section {
    color: #94a3b8; /* Gris clair en mode sombre */
}

/* Boutons */
.boutons-section {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    
}

@media (max-width: 640px) {
    .boutons-section {
        flex-direction: column;
        gap: 0.5rem;
    }
}




.bouton-principal,
.bouton-secondaire {
    display: inline-block;
    padding: 0.75rem 2rem;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 9999px;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
}

.bouton-principal {
    background-color: #059669; /* Couleur émeraude */
    color: #ffffff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 9999px; /* Arrondi maximal comme bouton-secondaire */
}

.bouton-principal:hover {
    background-color: #047857; /* Couleur émeraude foncée */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}

.bouton-secondaire {
    background-color: #f1f5f9; /* Gris clair */
    color: #059669; /* Couleur émeraude */
    border: 1px solid #059669;
}

.bouton-secondaire:hover {
    background-color: #d1fae5; /* Vert clair */
    color: #047857; /* Couleur émeraude foncée */
}










/* Section Fonctionnalités */
.section-fonctionnalites {
    background: linear-gradient(45deg, #f0fdf4, #b8edc8);
    padding: 5rem 1rem;
}

body.dark .section-fonctionnalites {
    background: linear-gradient(45deg, #1e293b, #243043);
}

.section-fonctionnalites .conteneur {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.section-fonctionnalites .texte-centre {
    text-align: center;
    margin-bottom: 2rem;
}

.section-fonctionnalites .titre-section {
    font-size: 2rem;
    font-weight: bold;
    color: #1e293b; /* Gris ardoise */
    margin-bottom: 1rem;
}

body.dark .section-fonctionnalites .titre-section {
    color: #e2e8f0;
}

.section-fonctionnalites .description-section {
    font-size: 1.125rem;
    color: #64748b; /* Gris clair */
    margin-bottom: 2rem;
}

body.dark .section-fonctionnalites .description-section {
    color: #94a3b8;
}

/* Grille des cartes */
.section-fonctionnalites .grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

/* Carte */
.section-fonctionnalites .carte {
        background: linear-gradient(45deg, #ffffff, #f3fffd);
    border: 1px solid #e2e8f0; /* Gris clair */
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}

body.dark .section-fonctionnalites .carte {
    background: linear-gradient(45deg, #1e293b, #243043);
    border-color: #334155;
}

.section-fonctionnalites .carte:hover {
    transform: translateY(-0.5rem);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}

/* Icône de la carte */
.section-fonctionnalites .icone-carte {
    width: 4rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    border-radius: 50%;
    color: #ffffff;
}

.bg-vert {
    background-color: #059669; /* Vert émeraude */
}

.bg-bleu {
    background-color: #06b6d4; /* Bleu cyan */
}

.bg-orange {
    background-color: #f59e0b; /* Orange ambré */
}

/* Titre et texte de la carte */
.section-fonctionnalites .titre-carte {
    font-size: 1.25rem;
    font-weight: bold;
    color: #1e293b; /* Gris ardoise */
    margin-bottom: 0.5rem;
    text-align: center;
}

body.dark .section-fonctionnalites .titre-carte {
    color: #e2e8f0;
}

.section-fonctionnalites .texte-carte {
    font-size: 1rem;
    color: #64748b; /* Gris clair */
    text-align: center;
}

body.dark .section-fonctionnalites .texte-carte {
    color: #94a3b8;
}



/* Section Lancement */
.section-lancement {
        background: linear-gradient(45deg, #ffffff, #f3fffd); /* Vert clair */
    padding: 4rem 1rem;
    text-align: center;
}

.section-lancement .titre-section {
    font-size: 2rem;
    font-weight: bold;
    color: #1e293b; /* Gris ardoise */
    margin-bottom: 2rem;
}

.section-lancement .grille-compteur {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    max-width: 600px;
    margin: 0 auto 2rem;
}

.section-lancement .carte-compteur {
        background: linear-gradient(45deg, #ffffff, #f3fffd);
    border: 1px solid #d1fae5; /* Vert clair */
    border-radius: 0.5rem;
    padding: 1rem;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.section-lancement .valeur-compteur {
    font-size: 2rem;
    font-weight: bold;
    color: #059669; /* Vert émeraude */
    margin-bottom: 0.5rem;
}

.section-lancement .texte-compteur {
    font-size: 1rem;
    color: #64748b; /* Gris clair */
}




/* Section Lancement */
.section-lancement {
    background: linear-gradient(45deg, #f0fdf4, #b8edc8); /* Vert clair */
    padding: 4rem 1rem;
    text-align: center;
}

.section-lancement .titre-section {
    font-size: 2rem;
    font-weight: bold;
    color: #1e293b; /* Gris ardoise */
    margin-bottom: 2rem;
}

.section-lancement .grille-compteur {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    max-width: 600px;
    margin: 0 auto 2rem;
}

.section-lancement .carte-compteur {
        background: linear-gradient(45deg, #ffffff, #f3fffd);
    border: 1px solid #d1fae5; /* Vert clair */
    border-radius: 0.5rem;
    padding: 1rem;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.section-lancement .valeur-compteur {
    font-size: 2rem;
    font-weight: bold;
    color: #059669; /* Vert émeraude */
    margin-bottom: 0.5rem;
}

.section-lancement .texte-compteur {
    font-size: 1rem;
    color: #64748b; /* Gris clair */
}

/* Section Liste d'Attente */
.section-liste-attente {
    background: linear-gradient(45deg, #f0fdf4, #b8edc8);
    padding: 5rem 1rem;
    text-align: center;
}

.section-liste-attente .conteneur {
    max-width: 500px;
    margin: 0 auto;
    padding: 0 1rem;
}

.section-liste-attente .titre-section {
    font-size: 2rem;
    font-weight: bold;
    color: #1e293b;
    margin-bottom: 1rem;
}

.section-liste-attente .description-section {
    font-size: 1.125rem;
    color: #64748b;
    margin-bottom: 2rem;
}

.formulaire {
        background: linear-gradient(45deg, #ffffff, #f3fffd);
    border-radius: 1rem;
    box-shadow: 0 8px 32px rgba(16, 185, 129, 0.08), 0 1.5px 8px rgba(0,0,0,0.04);
    padding: 2rem 1.5rem 1.5rem 1.5rem;
    margin: 0 auto;
    max-width: 100%;
    transition: box-shadow 0.3s;
    border: 1px solid #d1fae5;
    animation: fadeInUp 0.7s cubic-bezier(.39,.575,.565,1) both;
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(40px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.formulaire form {
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.champ-email {
    flex: 1 1 200px;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    border: 1.5px solid #d1fae5;
    border-radius: 0.5rem;
    outline: none;
    transition: border-color 0.3s, box-shadow 0.3s;
    background: #f8fafc;
    color: #1e293b;
}

.champ-email:focus {
    border-color: #059669;
    box-shadow: 0 0 0 2px #bbf7d0;
}

.bouton-principal {
    padding: 0.75rem 2rem;
    font-size: 1rem;
    font-weight: bold;
    color: #fff;
    background-color: #059669;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background 0.3s, transform 0.2s;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.08);
}

.bouton-principal:hover {
    background-color: #047857;
    transform: translateY(-2px) scale(1.03);
}

.texte-confidentialite {
    font-size: 0.95rem;
    color: #64748b;
    margin-top: 0.5rem;
    margin-bottom: 0;
}

/* Mode sombre */
body.dark .section-liste-attente {
    background: linear-gradient(45deg, #0f172a, #162037);
}

body.dark .formulaire {
    background: linear-gradient(45deg, #1e293b, #243043);
    border-color: #334155;
    box-shadow: 0 8px 32px rgba(52, 211, 153, 0.08), 0 1.5px 8px rgba(0,0,0,0.12);
}

body.dark .champ-email {
    background: linear-gradient(45deg, #1e293b, #243043);
    color: #e2e8f0;
    border-color: #334155;
}

body.dark .champ-email:focus {
    border-color: #34d399;
    box-shadow: 0 0 0 2px #34d39933;
}

body.dark .texte-confidentialite {
    color: #94a3b8;
}


/* Pied de page */
.pied-de-page {
    background: linear-gradient(45deg, #ffffff, #f3fffd); /* Gris clair */
    padding: 4rem 1rem;
    border-top: 1px solid #e2e8f0; /* Bordure grise */
    text-align: center;
}

body.dark .pied-de-page {
    background: linear-gradient(45deg, #0f172a, #162037); /* Gris foncé */
    border-top-color: #334155; /* Bordure sombre */
}

.pied-de-page .conteneur {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.titre-pied-de-page {
    font-size: 1.5rem;
    font-weight: bold;
    color: #059669; /* Vert émeraude */
    margin-bottom: 1rem;
}

body.dark .titre-pied-de-page {
    color: #34d399; /* Vert clair */
}

.description-pied-de-page {
    font-size: 1rem;
    color: #64748b; /* Gris clair */
    margin-bottom: 2rem;
}

body.dark .description-pied-de-page {
    color: #94a3b8; /* Gris clair en mode sombre */
}

/* Icônes des réseaux sociaux */
.icones-reseaux {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.icone-reseau {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f1f5f9; /* Gris clair */
    color: #64748b; /* Gris */
    border-radius: 50%;
    transition: background-color 0.3s, color 0.3s;
}

body.dark .icone-reseau {
    background: linear-gradient(45deg, #1e293b, #243043); /* Gris foncé */
    color: #94a3b8; /* Gris clair */
}

.icone-reseau:hover {
    background-color: #d1fae5; /* Vert clair */
    color: #059669; /* Vert émeraude */
}

body.dark .icone-reseau:hover {
    background-color: #065f46; /* Vert foncé */
    color: #34d399; /* Vert clair */
}

/* Texte en bas */
.texte-petit {
    font-size: 0.875rem;
    color: #64748b; /* Gris clair */
}

body.dark .texte-petit {
    color: #94a3b8; /* Gris clair en mode sombre */
}

.liens-pied-de-page {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
}

.lien-pied-de-page {
    color: #64748b; /* Gris clair */
    text-decoration: none;
    transition: color 0.3s;
}

.lien-pied-de-page:hover {
    color: #059669; /* Vert émeraude */
}

body.dark .lien-pied-de-page:hover {
    color: #34d399; /* Vert clair */
}









#banniere {
    position: fixed;
    --height: 48px;
    top: calc(var(--height) - 48px);
    left: 0;
    width: 100%;
    z-index: 1000;
    background:#19c37d;
    color:#fff;
    text-align:center;
    padding:0.7em 0;
    font-weight:600;
}

/* Sticky nav */


/* Entête */
.entete {
    position: fixed;
    --height: 48px;
    top: var(--height);
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    margin: 0 auto;
    z-index: 2000000;
    background: rgba(0, 160, 106, 0.4);
    backdrop-filter: blur(10px);
}

.dark .entete {
    background: rgba(0, 0, 0, 0.5);
}

.nav-principale {
    display: flex;
    align-items: center;
    gap: 2.2em;
    position: relative;
    font-family: 'Segoe UI', Arial, sans-serif;
}
.nav-principale a {
    color: #fff;
    font-weight: 600;
    font-size: 1.13em;
    padding: 0.3em 0.2em;
    position: relative;
    transition: color 0.2s;
    z-index: 2;
    text-decoration: none;
}
.nav-principale a::after {
    content: "";
    display: block;
    position: absolute;
    left: 0; bottom: -4px;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, #19c37d 60%, #34d399 100%);
    border-radius: 2px;
    transition: width 0.25s;
}
.nav-principale a:hover,
.nav-principale a.active {
    color: #19c37d;
}
.nav-principale a:hover::after,
.nav-principale a.active::after {
    width: 100%;
}

/* Burger menu */
.burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 38px;
    height: 38px;
    background: none;
    border: none;
    cursor: pointer;
    margin-left: 1.2em;
    z-index: 101;
}
.burger span {
    display: block;
    width: 26px;
    height: 3px;
    background: #fff;
    margin: 4px 0;
    border-radius: 2px;
    transition: all 0.3s;
}
@media (max-width: 900px) {
    .nav-principale {
        position: fixed;
        top: 0; right: 0;
        flex-direction: column;
        background: #181820ee;
        width: 220px;
        height: 100vh;
        align-items: flex-start;
        padding: 4.5em 1.5em 1em 1.5em;
        gap: 1.5em;
        transform: translateX(100%);
        transition: transform 0.3s;
        box-shadow: -2px 0 16px #0003;
    }
    .nav-principale.open {
        transform: translateX(0);
    }
    .burger { display: flex; }
    .nav-principale a {
        font-size: 1.2em;
    }
}











/* Section À Propos et Équipe */
.section-a-propos{
        background: linear-gradient(45deg, #ffffff, #f3fffd);
    padding: 5rem 1rem;
}

.section-equipe{
    background: linear-gradient(45deg, #ffffff, #f3fffd);
    padding: 5rem 1rem;
}

.section-a-propos .conteneur, .section-equipe .conteneur {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.section-a-propos .texte-centre, .section-equipe .texte-centre {
    text-align: center;
    margin-bottom: 2rem;
}

.section-a-propos .titre-section, .section-equipe .titre-section {
    font-size: 2rem;
    font-weight: bold;
    color: #1e293b; /* Gris ardoise */
    margin-bottom: 1rem;
}

.section-a-propos .description-section, .section-equipe .description-section {
    font-size: 1.125rem;
    color: #64748b; /* Gris clair */
    margin-bottom: 2rem;
}

.grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.carte {
        background: linear-gradient(45deg, #ffffff, #f3fffd);
    border: 1px solid #e2e8f0; /* Gris clair */
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s;
}

.carte:hover {
    transform: translateY(-0.5rem);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}

.icone-carte {
    width: 4rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    border-radius: 50%;
    color: #ffffff;
}

.photo-membre {
    width: 100%;
    height: auto;
    border-radius: 50%;
}

.titre-carte {
    font-size: 1.25rem;
    font-weight: bold;
    color: #1e293b; /* Gris ardoise */
    margin-bottom: 0.5rem;
}

.texte-carte, .bio-membre {
    font-size: 1rem;
    color: #64748b; /* Gris clair */
}










/* Section des Dons */
.section-dons {
        background: linear-gradient(45deg, #ffffff, #f3fffd); /* Fond clair */
    padding: 5rem 1rem;
}

body.dark .section-dons {
    background: linear-gradient(45deg, #1e293b, #243043); /* Fond sombre */
}

.section-dons .conteneur {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.section-dons .texte-centre {
    text-align: center;
    margin-top: 2rem;
}

.section-dons .titre-section {
    font-size: 2rem;
    font-weight: bold;
    color: #1e293b; /* Gris ardoise */
    margin-bottom: 1rem;
}

body.dark .section-dons .titre-section {
    color: #e2e8f0; /* Texte clair */
}

.liste {
    width: max-content;
    margin: auto;
    margin-top: 100px;
    margin-bottom: 60px;
}

.liste .row {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 25px;
}

.liste .barre {
    height: 111.8px;
    width: 2.5px;
    background:linear-gradient(60deg, #00df73, #7bffd5);
    margin: 10px;
    margin-right: 0;
    margin-left: 31px;
}

.dark .liste .barre {
    background: linear-gradient(60deg, white, #6bffd0);
}

.liste .row i {
    position: relative;
    display: block;
    color: white;
    width: 64px;
    height: 64px;
    text-align: center;
    background: #059669;
    border-radius: 100%;
    font-size: 20px;
}

.liste .row i::before {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin: auto;
    transform: translateY(-50%);
}

.liste .row div {
    width: 100%;
    max-width: 700px;
}

.liste .row p,
.liste .row h3 {
    margin: 0 !important;
}

.section-dons .description-section {
    font-size: 1.125rem;
    color: #64748b; /* Gris clair */
    margin-bottom: 2rem;
}

body.dark .section-dons .description-section {
    color: #94a3b8; /* Gris clair */
}

.section-dons .grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.section-dons .carte {
        background: linear-gradient(45deg, #ffffff, #f3fffd);
    border: 1px solid #e2e8f0; /* Gris clair */
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s;
}

body.dark .section-dons .carte {
    background: linear-gradient(45deg, #1e293b, #243043); /* Fond sombre */
    border-color: #334155; /* Bordure sombre */
}

.section-dons .carte:hover {
    transform: translateY(-0.5rem);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}

.section-dons .icone-carte {
    width: 4rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    border-radius: 50%;
    color: #ffffff;
}

.bg-vert {
    background-color: #059669; /* Vert émeraude */
}

.bg-bleu {
    background-color: #2563eb; /* Bleu */
}

.bg-orange {
    background-color: #f97316; /* Orange */
}










.section-dons .titre-carte {
    font-size: 1.25rem;
    font-weight: bold;
    color: #1e293b; /* Gris ardoise */
    margin-bottom: 0.5rem;
}

body.dark .section-dons .titre-carte {
    color: #e2e8f0; /* Texte clair */
}

.section-dons .texte-carte {
    font-size: 1rem;
    color: #64748b; /* Gris clair */
}

body.dark .section-dons .texte-carte {
    color: #94a3b8; /* Gris clair */
}

.bouton-don {
    background-color: #059669; /* Vert émeraude */
    color: #ffffff;
    padding: 0.75rem 1.5rem;
    font-size: 1.125rem;
    font-weight: bold;
    border-radius: 0.5rem;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.bouton-don:hover {
    background-color: #047857; /* Vert plus foncé */
    transform: translateY(-3px);
}






















/* Mode sombre global */
body.dark {
    background: linear-gradient(45deg, #0f172a, #162037); /* Fond sombre global */
    color: #e2e8f0; /* Texte clair */
}

/* Liens */
body.dark a {
    color: #34d399; /* Vert clair */
}

body.dark a:hover {
    color: #059669; /* Vert émeraude */
}

/* Titres */
body.dark h1, body.dark h2, body.dark h3, body.dark h4, body.dark h5, body.dark h6 {
    color: #e2e8f0; /* Texte clair */
}

/* Conteneur principal */
body.dark .conteneur-principal {
    background: linear-gradient(45deg, #0f172a, #162037); /* Fond sombre global */
}



/* Bouton pour changer de thème */
body.dark .bouton-theme {
    color: #34d399; /* Vert clair */
}

/* Décorations SVG */
body.dark .decor-svg {
    fill: #34d399; /* Vert clair */
}

/* Titre principal */
body.dark .titre-section {
    color: #e2e8f0; /* Texte clair */
}

body.dark .titre-accent {
    color: #34d399; /* Vert clair */
}

/* Description */
body.dark .description-section {
    color: #94a3b8; /* Gris clair */
}

/* Boutons */
body.dark .bouton-principal {
    background-color: #047857; /* Vert émeraude foncé */
    color: #ffffff; /* Texte clair */
}

body.dark .bouton-principal:hover {
    background-color: #065f46; /* Vert encore plus foncé */
}

body.dark .bouton-secondaire {
    background: linear-gradient(45deg, #1e293b, #243043); /* Fond sombre */
    color: #34d399; /* Vert clair */
    border: 1px solid #34d399;
}

body.dark .bouton-secondaire:hover {
    background-color: #065f46; /* Vert foncé */
    color: #ffffff; /* Texte clair */
}

/* Section Fonctionnalités */
body.dark .section-fonctionnalites {
    background: linear-gradient(45deg, #0f172a, #162037); /* Fond sombre */
}

body.dark .section-fonctionnalites .titre-section {
    color: #e2e8f0; /* Texte clair */
}

body.dark .section-fonctionnalites .description-section {
    color: #94a3b8; /* Gris clair */
}

body.dark .section-fonctionnalites .carte {
    background: linear-gradient(45deg, #1e293b, #243043); /* Fond sombre */
    border-color: #334155; /* Bordure sombre */
}

body.dark .section-fonctionnalites .carte:hover {
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3); /* Ombre plus marquée */
}

body.dark .section-fonctionnalites .titre-carte {
    color: #e2e8f0; /* Texte clair */
}

body.dark .section-fonctionnalites .texte-carte {
    color: #94a3b8; /* Gris clair */
}

/* Section Équipe */
body.dark .section-equipe {
    background: linear-gradient(45deg, #0f172a, #162037); /* Fond légèrement différent */
}

body.dark .section-equipe .titre-section {
    color: #e2e8f0; /* Texte clair */
}

body.dark .section-equipe .description-section {
    color: #94a3b8; /* Gris clair */
}

body.dark .section-equipe .carte {
    background: linear-gradient(45deg, #1e293b, #243043); /* Fond sombre */
    border-color: #334155; /* Bordure sombre */
}

body.dark .section-equipe .carte:hover {
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3); /* Ombre plus marquée */
}

body.dark .section-equipe .titre-carte {
    color: #e2e8f0; /* Texte clair */
}

body.dark .section-equipe .texte-carte {
    color: #94a3b8; /* Gris clair */
}







/* Section Lancement en mode sombre */
body.dark .section-lancement {
    background: linear-gradient(45deg, #0f172a, #162037); /* Fond sombre */
    color: #e2e8f0; /* Texte clair */
}

body.dark .section-lancement .titre-section {
    color: #e2e8f0; /* Couleur du titre */
}

body.dark .section-lancement .description-section {
    color: #94a3b8; /* Gris clair pour la description */
}

body.dark .section-lancement .grille-compteur {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 1rem; /* Espacement entre les cartes */
}

body.dark .section-lancement .carte-compteur {
    background: linear-gradient(45deg, #0f172a, #162037); /* Fond sombre des cartes */
    border: 1px solid #334155; /* Bordure sombre */
    border-radius: 0.5rem; /* Coins arrondis */
    padding: 1rem;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* Ombre subtile */
}

body.dark .section-lancement .carte-compteur:hover {
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.5); /* Ombre plus marquée au survol */
}

body.dark .section-lancement .valeur-compteur {
    font-size: 2rem; /* Taille du texte pour les valeurs */
    font-weight: bold;
    color: #34d399; /* Vert clair */
}

body.dark .section-lancement .texte-compteur {
    font-size: 1rem; /* Taille du texte pour les unités */
    color: #94a3b8; /* Gris clair */
}




/* Section Liste d'Attente */
body.dark .section-liste-attente {
    background: linear-gradient(45deg, #0f172a, #162037); /* Fond légèrement différent */
}

body.dark .section-liste-attente .titre-section {
    color: #e2e8f0; /* Texte clair */
}

body.dark .section-liste-attente .description-section {
    color: #94a3b8; /* Gris clair */
}

body.dark .section-liste-attente .formulaire {
    background: linear-gradient(45deg, #1e293b, #243043); /* Fond sombre */
    border-color: #334155; /* Bordure sombre */
}

body.dark .section-liste-attente .champ-email {
    background: linear-gradient(45deg, #1e293b, #243043); /* Fond sombre */
    color: #e2e8f0; /* Texte clair */
    border-color: #334155; /* Bordure sombre */
}

body.dark .section-liste-attente .champ-email:focus {
    border-color: #34d399; /* Vert clair */
}

body.dark .section-liste-attente .bouton-principal {
    background-color: #047857; /* Vert émeraude foncé */
    color: #ffffff; /* Texte clair */
}

body.dark .section-liste-attente .bouton-principal:hover {
    background-color: #065f46; /* Vert encore plus foncé */
}

body.dark .section-liste-attente .texte-confidentialite {
    color: #94a3b8; /* Gris clair */
}


/* Section À Propos en mode sombre */
body.dark .section-a-propos {
    background: linear-gradient(45deg, #1e293b, #243043); /* Fond sombre */
}

body.dark .section-a-propos .titre-section {
    color: #e2e8f0; /* Texte clair */
}

body.dark .section-a-propos .description-section {
    color: #94a3b8; /* Gris clair */
}

body.dark .section-a-propos .carte {
    background: linear-gradient(45deg, #1e293b, #243043); /* Fond sombre */
    border-color: #334155; /* Bordure sombre */
}

body.dark .section-a-propos .carte:hover {
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3); /* Ombre plus marquée */
}

body.dark .section-a-propos .titre-carte {
    color: #e2e8f0; /* Texte clair */
}

body.dark .section-a-propos .texte-carte {
    color: #94a3b8; /* Gris clair */
}




/* Pied de page */
body.dark .pied-de-page {
    background: linear-gradient(45deg, #1e293b, #243043); /* Fond sombre */
    border-top-color: #334155; /* Bordure sombre */
}

body.dark .titre-pied-de-page {
    color: #34d399; /* Vert clair */
}

body.dark .description-pied-de-page {
    color: #94a3b8; /* Gris clair */
}

body.dark .icone-reseau {
    background: linear-gradient(45deg, #1e293b, #243043); /* Fond sombre */
    color: #94a3b8; /* Gris clair */
}

body.dark .icone-reseau:hover {
    background-color: #065f46; /* Vert foncé */
    color: #34d399; /* Vert clair */
}

body.dark .texte-petit {
    color: #94a3b8; /* Gris clair */
}

body.dark .lien-pied-de-page {
    color: #94a3b8; /* Gris clair */
}

body.dark .lien-pied-de-page:hover {
    color: #34d399; /* Vert clair */
}










/* Centrage et largeur pour tous les conteneurs principaux */
.conteneur,
.section-fonctionnalites .conteneur,
.section-dons .conteneur,
.section-a-propos .conteneur,
.section-equipe .conteneur,
.section-liste-attente .conteneur,
.pied-de-page .conteneur {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Grille centrée et fluide */
.grille,
.section-fonctionnalites .grille,
.section-dons .grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

/* Responsive */
@media (max-width: 900px) {
    .grille,
    .section-fonctionnalites .grille,
    .section-dons .grille {
        grid-template-columns: 1fr 1fr;
        gap: 1.2rem;
    }
}
@media (max-width: 600px) {
    .conteneur,
    .section-fonctionnalites .conteneur,
    .section-dons .conteneur,
    .section-a-propos .conteneur,
    .section-equipe .conteneur,
    .section-liste-attente .conteneur,
    .pied-de-page .conteneur {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    .grille,
    .section-fonctionnalites .grille,
    .section-dons .grille {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

































/* =========================
   CGU - STYLE TEXTE PUR, MODERNE ET PRO
   ========================= */

   .cgu-container {
    max-width: 800px;
    margin: 3rem auto 2rem auto;
    padding: 0 1.5rem;
    background: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.cgu-title {
    font-size: 2.3rem;
    font-weight: 800;
    color: #059669;
    margin-bottom: 0.5rem;
    text-align: left;
    letter-spacing: 1px;
}

.cgu-date {
    color: #94a3b8;
    font-size: 1.1rem;
    margin-bottom: 2rem;
    text-align: left;
}

.cgu-intro {
    font-size: 1.15rem;
    color: #64748b;
    margin-bottom: 1.2rem;
    text-align: left;
}

.cgu-section {
    margin-bottom: 2.5rem;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    text-align: left;
}

.cgu-section-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: #059669;
    margin-bottom: 0.7rem;
    margin-top: 2rem;
    letter-spacing: 0.5px;
}

.cgu-list {
    font-size: 1.05rem;
    color: inherit;
    line-height: 1.7;
    margin-bottom: 0.7rem;
    padding-left: 1.5rem;
    list-style: disc inside;
}

.cgu-list li {
    margin-bottom: 0.5rem;
}

.cgu-section p, .cgu-section ul {
    color: inherit;
    font-size: 1.05rem;
    margin-bottom: 0.7rem;
}

.cgu-section strong {
    color: #059669;
    font-weight: 600;
}

/* Mode sombre */
body.dark .cgu-title,
body.dark .cgu-section-title,
body.dark .cgu-section strong {
    color: #34d399;
}
body.dark .cgu-date,
body.dark .cgu-intro {
    color: #94a3b8;
}
body.dark .cgu-section,
body.dark .cgu-container {
    background: none !important;
    color: #e2e8f0;
}

/* Responsive */
@media (max-width: 600px) {
    .cgu-title {
        font-size: 1.3rem;
    }
    .cgu-section-title {
        font-size: 1.1rem;
    }
    .cgu-container {
        padding: 0 0.5rem;
    }
}







/* =========================
   MENTIONS LÉGALES - STYLE TEXTE PUR, MODERNE ET PRO
   ========================= */

.ml-container {
    max-width: 800px;
    margin: 3rem auto 2rem auto;
    padding: 0 1.5rem;
    background: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    
}

.ml-title {
    font-size: 2.3rem;
    font-weight: 800;
    color: #059669;
    margin-bottom: 0.5rem;
    text-align: left;
    letter-spacing: 1px;
}

.ml-section {
    margin-bottom: 2.5rem;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    text-align: left;
}

.ml-subtitle {
    font-size: 1.35rem;
    font-weight: 700;
    color: #059669;
    margin-bottom: 0.7rem;
    margin-top: 2rem;
    letter-spacing: 0.5px;
}

.ml-text {
    font-size: 1.05rem;
    color: #64748b;
    margin-bottom: 0.7rem;
}

.ml-list {
    font-size: 1.05rem;
    color: inherit;
    line-height: 1.7;
    margin-bottom: 0.7rem;
    padding-left: 1.5rem;
    list-style: disc inside;
}

.ml-list li {
    margin-bottom: 0.5rem;
}

.ml-section strong {
    color: #059669;
    font-weight: 600;
}

.ml-link {
    color: #059669;
    text-decoration: underline;
    transition: color 0.2s;
}

.ml-link:hover {
    color: #047857;
}

/* Mode sombre */
body.dark .ml-title,
body.dark .ml-subtitle,
body.dark .ml-section strong {
    color: #34d399;
}
body.dark .ml-text {
    color: #94a3b8;
}
body.dark .ml-section,
body.dark .ml-container {
    background: none !important;
    color: #e2e8f0;
}
body.dark .ml-link {
    color: #34d399;
}
body.dark .ml-link:hover {
    color: #059669;
}

/* Responsive */
@media (max-width: 600px) {
    .ml-title {
        font-size: 1.3rem;
    }
    .ml-subtitle {
        font-size: 1.1rem;
    }
    .ml-container {
        padding: 0 0.5rem;
    }
}

/* =========================
   POLITIQUE DE CONFIDENTIALITÉ - STYLE TEXTE PUR, MODERNE ET PRO
   ========================= */

   .pc-container {
    max-width: 800px;
    margin: 3rem auto 2rem auto;
    padding: 0 1.5rem;
    background: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.pc-title {
    font-size: 2.3rem;
    font-weight: 800;
    color: #059669;
    margin-bottom: 0.5rem;
    text-align: left;
    letter-spacing: 1px;
}

.pc-section {
    margin-bottom: 2.5rem;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    text-align: left;
}

.pc-subtitle {
    font-size: 1.35rem;
    font-weight: 700;
    color: #059669;
    margin-bottom: 0.7rem;
    margin-top: 2rem;
    letter-spacing: 0.5px;
}

.pc-text {
    font-size: 1.05rem;
    color: #64748b;
    margin-bottom: 0.7rem;
}

.pc-list {
    font-size: 1.05rem;
    color: inherit;
    line-height: 1.7;
    margin-bottom: 0.7rem;
    padding-left: 1.5rem;
    list-style: disc inside;
}

.pc-list li {
    margin-bottom: 0.5rem;
}

.pc-section strong {
    color: #059669;
    font-weight: 600;
}

.pc-link {
    color: #059669;
    text-decoration: underline;
    transition: color 0.2s;
}

.pc-link:hover {
    color: #047857;
}

/* Mode sombre */
body.dark .pc-title,
body.dark .pc-subtitle,
body.dark .pc-section strong {
    color: #34d399;
}
body.dark .pc-text {
    color: #94a3b8;
}
body.dark .pc-section,
body.dark .pc-container {
    background: none !important;
    color: #e2e8f0;
}
body.dark .pc-link {
    color: #34d399;
}
body.dark .pc-link:hover {
    color: #059669;
}

/* Responsive */
@media (max-width: 600px) {
    .pc-title {
        font-size: 1.3rem;
    }
    .pc-subtitle {
        font-size: 1.1rem;
    }
    .pc-container {
        padding: 0 0.5rem;
    }
}


.entete-page {
    background: linear-gradient(45deg, #1e293b, #243043); 
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
    border-radius: 15px;
}







.contact-form {
    width: max-content;
    margin: auto;
}

.contact-form > div:not(:nth-child(9), :nth-child(10)) {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin: auto;
    max-width: 400px;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form select,
.contact-form textarea {
    padding: 7px;
    margin-top: 10px;
    padding-inline: 15px;
    border-radius: 7px;
    width: 230px;
}



ul, ol {
    list-style: none    ;
}

ul:not(.no-style) li::before,
ol:not(.no-style) li::before {
    font-weight: 600;
    font-style: italic;
    color: transparent;
    background: linear-gradient(-45deg, rgb(0, 99, 56), rgb(23, 255, 135));
    background-clip: text;
    -webkit-background-clip: text;
}


ul:not(.no-style) li::before {
    content: ")> \00a0";
}
ol:not(.no-style) li::before {
    content: counter(list-item) ". \00a0";
}

.faq-recherche input {
    position: fixed;
    top: 150px;
    left: 30px;
    padding: 10px;
    padding-inline: 15px;
    border-radius: 7px;
    width: 230px;
    z-index: 199;
}

input, textarea, select {
    border: 3px solid #00db77 !important;
    background: linear-gradient(60deg, white, rgb(206, 255, 230));
}

textarea { 
    font-family: 'Poppins', sans-serif;
    resize: vertical;
}

@property --myColor1 {
  syntax: '<color>';
  initial-value: rgb(0, 153, 87);
  inherits: false;
}

@property --myColor2 {
  syntax: '<color>';
  initial-value: rgb(0, 96, 46);
  inherits: false;
}

button[type="submit"] {
    display: block;
    margin: auto;
    padding: 10px;
    color: white;
    border: 3px solid rgb(0, 144, 70) !important;
    background: linear-gradient(60deg, var(--myColor1), var(--myColor2));
    cursor: pointer;
    padding-inline: 15px;
    border-radius: 7px;
    width: 230px;
    transition: --myColor1 0.2s, --myColor2 0.2s;
}

button[type="submit"]:hover {
  --myColor1: rgb(0, 130, 74);
  --myColor2: rgb(0, 82, 39);
}

.faq-dons {
    max-width: 700px;
    margin: auto;
}

.faq-dons h2 {
    color: #24df91 !important;
    font-size: 30px;
}

.faq-q {
    font-size: 18px;
    font-weight: 600;
    color: #24df91;
    margin-left: 20px;
}

.faq-a {
    margin-left: 50px;
}

.section-faq {
  padding: 3rem 0;
  background: linear-gradient(45deg, #f0fdf4, #b8edc8);
}
.faq-liste {
  max-width: 700px;
  margin: 2rem auto 0 auto;
}
.faq-item {
  border-bottom: 1px solid #2a2b32;
}
.faq-question {
  width: 100%;
  background: none;
  border: none;
  color: #19c37d;
  font-size: 1.1rem;
  font-weight: bold;
  text-align: left;
  padding: 1rem 0;
  cursor: pointer;
  outline: none;
  transition: color 0.2s;
}
.faq-question:hover {
  color: #13a06f;
}
.faq-reponse {
  display: none;
  color: #ececf1;
  padding-bottom: 1rem;
  font-size: 1rem;
  line-height: 1.6;
}
.faq-item.active .faq-reponse {
  display: block;
}












/* Carte profil équipe - image grande sur le côté */
.equipe-muslimgpt {
    display: flex;
    align-items: center;
    gap: 2.5em;
    background: linear-gradient(135deg, #19223a 70%, #19c37d11 100%);
    border-radius: 1.5em;
    box-shadow: 0 4px 24px #19c37d13, 0 1.5px 8px #19c37d11;
    padding: 2.5em 2em;
    max-width: 800px;
    margin: 2.5em auto;
}

.equipe-photo-cote {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: linear-gradient(135deg, #19c37d44 0%, #19223a 100%);
    box-shadow: 0 0 0 12px #19c37d44, 0 4px 16px #19c37d22;
    overflow: hidden;
}

.equipe-photo-cote-img {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #19c37d;
    background: #19223a;
    box-shadow: 0 2px 12px #19c37d22;
    transition: transform 0.2s;
}

.equipe-photo-cote:hover .equipe-photo-cote-img {
    transform: scale(1.07);
}

.equipe-info-cote {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5em;
}

.equipe-nom {
    font-weight: 700;
    font-size: 1.6em;
    color: #19c37d;
    letter-spacing: 0.5px;
    margin-bottom: 0.2em;
}
.equipe-role {
    color: #64748b;
    font-size: 1.1em;
    font-weight: 600;
    margin-bottom: 0.7em;
}
.equipe-bio {
    color: #b3b9c9;
    font-size: 1.08em;
    margin: 0.5em 0 0.5em 0;
    line-height: 1.6;
    text-align: left;
}
.equipe-links {
    margin-top: 0.7em;
    display: flex;
    gap: 1em;
    justify-content: flex-start;
}
.equipe-link {
    color: #19c37d;
    font-weight: 600;
    text-decoration: none;
    font-size: 1em;
    transition: color 0.2s;
    display: flex;
    align-items: center;
    gap: 0.4em;
}
.equipe-link.linkedin:hover {
    color: #0a66c2;
}
.equipe-link.twitter:hover {
    color: #1da1f2;
}
.equipe-location {
    margin-top: 1em;
    display: inline-block;
    background: #19c37d22;
    color: #19c37d;
    padding: 5px 14px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.98em;
}

/* Responsive */
@media (max-width: 900px) {
    .equipe-muslimgpt {
        flex-direction: column;
        align-items: center;
        padding: 1.5em 0.7em;
        gap: 1.2em;
    }
    .equipe-photo-cote {
        width: 120px;
        height: 120px;
    }
    .equipe-photo-cote-img {
        width: 100px;
        height: 100px;
    }
    .equipe-info-cote {
        align-items: center;
        text-align: center;
    }
}




























































/* Section stats premium MuslimGPT */
.section-stats {
  position: relative;
  padding: 4.5rem 0 3.5rem 0;
  background: linear-gradient(45deg, #f0fdf4, #b8edc8);
  overflow: hidden;
  z-index: 1;   
}
.stats-bg-svg {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 140px;
  z-index: 0;
  pointer-events: none;
  animation: waveMove 8s linear infinite alternate;
}
@keyframes waveMove {
  0% { left: 0; }
  100% { left: -2vw; }
}

.titre-section {
  font-size: 2.1rem;
  font-weight: 800;
  color: #19c37d;
  letter-spacing: 1px;
  margin-bottom: 2.2rem;
  position: relative;
  z-index: 2;
  text-shadow: 0 2px 12px #19c37d22;
}

.grille-stats {
  display: flex;
  justify-content: center;
  gap: 2.5rem;
  margin-top: 2.7rem;
  position: relative;
  z-index: 2;
  flex-wrap: wrap;
}

.carte-stat {
  background: rgba(0, 237, 158, 0.5);
  border-radius: 1.5rem;
  padding: 2.2rem 2.5rem 1.7rem 2.5rem;
  min-width: 170px;
  text-align: center;
  position: relative;
  overflow: hidden;
  border: 1.5px solid #19c37d33;
  transition: box-shadow 0.25s, transform 0.18s;
  animation: statFadeIn 1s cubic-bezier(.4,2,.6,1) both;
  opacity: 0;
}

.dark .carte-stat {
  background: rgba(36, 41, 46, 0.65);
}

.carte-stat:nth-child(1) { animation-delay: 0.2s; }
.carte-stat:nth-child(2) { animation-delay: 0.5s; }
.carte-stat:nth-child(3) { animation-delay: 0.8s; }

@keyframes statFadeIn {
  0% { opacity: 0; transform: translateY(40px) scale(0.95);}
  100% { opacity: 1; transform: translateY(0) scale(1);}
}

.carte-stat::after {
  content: "";
  position: absolute;
  top: -30px; left: 50%; transform: translateX(-50%);
  width: 120px; height: 40px;
  background: radial-gradient(circle, #8bff55 0%, transparent 80%);
  opacity: 0.7;
  z-index: 1;
  pointer-events: none;
  transition: opacity 0.2s;
}

.dark .carte-stat::after {
    background: radial-gradient(circle, #19c37d55 0%, transparent 80%);
}

.carte-stat:hover, .carte-stat:focus {
  box-shadow: 0 12px 36px #19c37d44, 0 2px 12px #13a06f33;
  transform: translateY(-6px) scale(1.03);
}
.carte-stat:hover::after, .carte-stat:focus::after {
  opacity: 1;
}

.valeur-stat {
  display: block;
  font-size: 2.7rem;
  font-weight: 800;
  color: #19c37d;
  letter-spacing: 1.5px;
  margin-bottom: 0.5rem;
  text-shadow: 0 2px 12px #19c37d33;
  position: relative;
  z-index: 2;
  animation: popIn 0.7s;
}
@keyframes popIn {
  0% { transform: scale(0.7); opacity: 0; }
  80% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); }
}

.texte-stat {
  display: block;
  font-size: 1.09rem;
  color: #00c56e;
  opacity: 0.92;
  letter-spacing: 0.2px;
  position: relative;
  z-index: 2;
}

.dark .texte-stat {
    color: #ececf1;
}

/* Responsive */
@media (max-width: 900px) {
  .grille-stats {
    gap: 1.2rem;
  }
  .carte-stat {
    min-width: 120px;
    padding: 1.3rem 1rem 1.1rem 1rem;
  }
  .valeur-stat {
    font-size: 2rem;
  }
}
@media (max-width: 600px) {
  .grille-stats {
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
  }
  .carte-stat {
    width: 90vw;
    max-width: 340px;
    min-width: 0;
    padding: 1.1rem 0.7rem 0.9rem 0.7rem;
  }
}







/* Section Contact - Style classique et épuré */
.section-contact {
  background: #fff;
  padding: 4rem 0 3rem 0;
  border-top: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
}

body.dark .section-contact {
  background: linear-gradient(45deg, #0f172a, #162037);
  border-top: 1px solid #334155;
  border-bottom: 1px solid #334155;
}

.section-contact .conteneur {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

.section-contact .titre-section {
  font-size: 2rem;
  font-weight: 800;
  color: #059669;
  margin-bottom: 1.2rem;
  letter-spacing: 1px;
}

body.dark .section-contact .titre-section {
  color: #34d399;
}

.section-contact .description-section {
  color: #64748b;
  font-size: 1.13rem;
  margin-bottom: 2rem;
  opacity: 0.95;
}

body.dark .section-contact .description-section {
  color: #94a3b8;
}

.section-contact .bouton-principal {
  display: inline-block;
  background: #059669;
  color: #fff;
  font-weight: 700;
  border-radius: 999px;
  padding: 0.85rem 2.2rem;
  text-decoration: none;
  font-size: 1.13rem;
  letter-spacing: 0.2px;
  transition: background 0.2s, transform 0.15s, box-shadow 0.18s;
  box-shadow: 0 4px 18px rgba(25,195,125,0.10);
  border: none;
  outline: none;
}
.section-contact .bouton-principal:hover,
.section-contact .bouton-principal:focus {
  background: #047857;
  transform: scale(1.04);
  color: #fff;
  box-shadow: 0 8px 24px #05966922;
  text-decoration: none;
}

/* Responsive */
@media (max-width: 700px) {
  .section-contact {
    padding: 2rem 0 1.2rem 0;
  }
  .section-contact .titre-section {
    font-size: 1.3rem;
  }
  .section-contact .description-section {
    font-size: 1rem;
  }
  .section-contact .bouton-principal {
    font-size: 1rem;
    padding: 0.7rem 1.3rem;
  }
}   










/* Section stats en mode dark */
body.dark .section-stats {
  background: linear-gradient(45deg, #0f172a, #162037);
}
body.dark .carte-stat {
  background: linear-gradient(45deg, #1e293b, #243043);
  border-color: #334155;
}
body.dark .valeur-stat {
  color: #34d399;
}
body.dark .texte-stat {
  color: #94a3b8;
}

/* Section contact en mode dark (déjà présente, mais à compléter si besoin) */
body.dark .section-contact {
  background: linear-gradient(45deg, #0f172a, #162037);
  border-top: 1px solid #334155;
  border-bottom: 1px solid #334155;
}
body.dark .section-contact .titre-section {
  color: #34d399;
}
body.dark .section-contact .description-section {
  color: #94a3b8;
}
body.dark .section-contact .bouton-principal {
  background: #047857;
  color: #fff;
}
body.dark .section-contact .bouton-principal:hover,
body.dark .section-contact .bouton-principal:focus {
  background: #065f46;
}

/* Pour les autres nouvelles sections, adapte ainsi : */
body.dark .section-nouvelle {
  background: linear-gradient(45deg, #0f172a, #162037);
  color: #e2e8f0;
}



body.dark .section-faq {
  background: linear-gradient(45deg, #0f172a, #162037);
  color: #e2e8f0;
}

/* FAQ Accueil en mode dark */
body.dark .section-faq-accueil {
  background: linear-gradient(45deg, #0f172a, #162037);
}

body.dark .section-faq-accueil .titre-section {
  color: #e2e8f0;
}

body.dark .section-faq-accueil .description-section {
  color: #94a3b8;
}

body.dark .section-faq-accueil .faq-item {
  border-bottom: 1px solid #334155;
  background: none;
}

body.dark .section-faq-accueil .faq-question {
  color: #34d399;
}

body.dark .section-faq-accueil .faq-question:hover {
  color: #059669;
}

body.dark .section-faq-accueil .faq-reponse {
  color: #e2e8f0;
  background: none;
}
































































/* =========================
   PAGE À PROPOS MUSLIMGPT
   ========================= */

/* Conteneur principal */
main.conteneur {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1.2em;
}

/* Titres principaux */
.titre-section {
    font-size: 2.5em;
    font-weight: 900;
    color: #19c37d;
    margin-bottom: 0.5em;
    letter-spacing: 1px;
    text-align: center;
    position: relative;
    display: inline-block;
}
.titre-section::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    display: block;
    width: var(--width);
    height: 4px;
    background: linear-gradient(90deg, #19c37d 60%, #fff0 100%);
    margin: 16px;
    margin-inline: auto;
    border-radius: 2px;
}
body.dark .titre-section {
    color: #34d399;
}
body.dark .titre-section::after {
    background: linear-gradient(90deg, #34d399 60%, #24303f 100%);
}

/* Sous-titre */
.sous-titre {
    color: #64748b;
    font-size: 1.18em;
    margin-bottom: 2em;
    text-align: center;
}
body.dark .sous-titre {
    color: #94a3b8;
}

/* Timeline histoire */
.timeline-histoire {
    margin: 2em auto 2.5em auto;
    max-width: 700px;
    padding: 0 0 1em 0;
    position: relative;
}
.timeline-histoire ul {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}
.timeline-histoire ul::before {
    content: "";
    position: absolute;
    left: 22.5px;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(to bottom, #19c37d55 0%, #19c37d11 100%);
    z-index: 0;
}
.timeline-histoire li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 2.2em;
    position: relative;
    min-height: 48px;
    z-index: 1;
    transform-origin: left;
    transition: transform 0.18s;
}
.timeline-histoire li:hover {
    transform: translateY(-2px) scale(1.015);
}
.timeline-dot {
    z-index: 2;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 8px #19c37d22;
    margin-right: 1.1em;
    margin-left: 0.1em;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 3px solid #19c37d;
    transition: border-color 0.2s;
}
.timeline-histoire li:hover .timeline-dot {
    border-color: #10b981;
}
.timeline-title {
    font-weight: 800;
    color: #19c37d;
    font-size: 1.13em;
    display: block;
    margin-bottom: 0.2em;
    letter-spacing: 0.2px;
}
.timeline-desc {
    color: #334155;
    font-size: 1.07em;
    display: block;
    line-height: 1.6;
}
body.dark .timeline-dot {
    background: #24303f;
    border-color: #34d399;
}
body.dark .timeline-title {
    color: #34d399;
}
body.dark .timeline-desc {
    color: #e2e8f0;
}
.timeline-histoire li:last-child {
    margin-bottom: 0;
}

/* Blocs génériques */
.bloc, .jamais-bloc, .bloc-merci {
    background: #fff;
    border-radius: 1.3em;
    padding: 2.2em 2em;
    margin: 2.2em auto;
    width: calc(100% - 70px);
    max-width: 850px;
    box-shadow: 0 4px 24px #19c37d13, 0 1.5px 8px #19c37d11;
    color: #222;
    border: 1.5px solid #e2e8f0;
    position: relative;
    transition: box-shadow 0.2s, transform 0.18s;
}
.bloc:hover, .jamais-bloc:hover, .bloc-merci:hover {
    box-shadow: 0 8px 32px #19c37d22, 0 2px 12px #19c37d11;
    transform: translateY(-2px) scale(1.012);
}
body.dark .bloc, body.dark .jamais-bloc, body.dark .bloc-merci {
    background: linear-gradient(45deg, #1e293b, #243043);
    color: #e2e8f0;
    border-color: #334155;
}

/* Titres de blocs */
.bloc h2, .jamais-bloc h2, .bloc-merci h2 {
    font-size: 1.35em;
    margin-bottom: 1em;
    color: #19c37d;
    font-weight: 800;
    letter-spacing: 0.5px;
    position: relative;
    display: inline-block;
}
.bloc h2::after, .jamais-bloc h2::after, .bloc-merci h2::after {
    content: "";
    display: block;
    width: 40px;
    height: 3px;
    background: #19c37d;
    margin: 0.3em auto 0 auto;
    border-radius: 2px;
}
body.dark .bloc h2, body.dark .jamais-bloc h2, body.dark .bloc-merci h2 {
    color: #34d399;
}
body.dark .bloc h2::after, body.dark .jamais-bloc h2::after, body.dark .bloc-merci h2::after {
    background: #34d399;
}

/* Cartes valeurs - version moderne et centrée */
.valeurs-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 2em;
    margin: 2.5em auto 0 auto;
    justify-items: center;
    align-items: stretch;
    max-width: 900px;
}

.valeur-card {
    background: linear-gradient(45deg, #ffffff, #f3fffd);
    border-radius: 1.2em;
    box-shadow: 0 4px 18px #19c37d11;
    border: 1.5px solid #e2e8f0;
    padding: 2em 1.2em 1.7em 1.2em;
    min-width: 210px;
    max-width: 270px;
    width: 100%;
    text-align: center;
    transition: box-shadow 0.18s, transform 0.18s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.valeur-card:hover {
    box-shadow: 0 8px 32px #19c37d22;
    transform: translateY(-4px) scale(1.04);
}

.valeur-card svg {
    margin-bottom: 0.7em;
    font-size: 2.2em;
    color: #19c37d;
    transition: transform 0.18s;
}

.valeur-card:hover svg {
    transform: scale(1.13) rotate(-3deg);
}

.valeur-card-title {
    color: #19c37d;
    font-weight: 700;
    font-size: 1.15em;
    margin-bottom: 0.4em;
    display: block;
    letter-spacing: 0.5px;
}

.valeur-card-desc {
    color: #334155;
    font-size: 1.05em;
    margin-top: 0.2em;
    line-height: 1.6;
}

body.dark .valeur-card {
    background: linear-gradient(45deg, #24303f, #19223a);
    border-color: #334155;
}
body.dark .valeur-card-title {
    color: #34d399;
}
body.dark .valeur-card-desc {
    color: #e2e8f0;
}

/* Responsive */
@media (max-width: 700px) {
    .valeurs-cards {
        grid-template-columns: 1fr;
        gap: 1.2em;
        max-width: 98vw;
    }
    .valeur-card {
        min-width: 0;
        max-width: 98vw;
        padding: 1.3em 0.7em 1.1em 0.7em;
    }
}












/* Bloc "jamais" */
.jamais-bloc {
    background: linear-gradient(120deg, #19c37d11 0%, #fff 100%);
    border: 1.5px solid #19c37d22;
    border-radius: 1.3em;
    padding: 2em 1.5em;
    margin: 2.2em auto;
    max-width: 800px;
    box-shadow: 0 2px 8px #19c37d11;
    text-align: center;
}
.jamais-list {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2em;
    justify-content: center;
    margin: 0;
    padding: 0;
    list-style: none;
}
.jamais-item {
    background: #fff;
    border-radius: 0.9em;
    border: 1.5px solid #e2e8f0;
    box-shadow: 0 2px 8px #19c37d11;
    padding: 1em 1.2em;
    min-width: 180px;
    max-width: 260px;
    flex: 1 1 180px;
    color: #64748b;
    font-weight: 600;
    font-size: 1em;
    transition: box-shadow 0.18s, transform 0.18s;
}
.jamais-item:hover {
    box-shadow: 0 6px 24px #19c37d22;
    transform: translateY(-2px) scale(1.03);
}
body.dark .jamais-bloc {
    background: linear-gradient(120deg, #19c37d22 0%, #24303f 100%);
    border-color: #19c37d33;
}
body.dark .jamais-item {
    background: #24303f;
    border-color: #334155;
    color: #e2e8f0;
}

/* Listes avenir, RGPD, FAQ */
.avenir-list {
    margin-top: 1.2em;
    color: #64748b;
    font-size: 1.08em;
    padding-left: 1.2em;
}
.avenir-list li {
    margin-bottom: 0.7em;
    position: relative;
}
.avenir-list li::before {
    content: "•";
    color: #19c37d;
    font-weight: bold;
    margin-right: 0.5em;
}
body.dark .avenir-list {
    color: #94a3b8;
}
body.dark .avenir-list li::before {
    color: #34d399;
}

/* Responsive */
@media (max-width: 1100px) {
    main.conteneur { max-width: 98vw; }
}
@media (max-width: 900px) {
    .valeurs-cards, .jamais-list {
        flex-direction: column;
        gap: 1em;
    }
    .bloc, .jamais-bloc {
        padding: 1.2em 0.5em;
    }
}
@media (max-width: 600px) {
    main.conteneur {
        padding: 0 0.5em;
    }
    .titre-section {
        font-size: 1.3em;
    }
    .bloc h2, .jamais-bloc h2 {
        font-size: 1.1em;
    }
    .timeline-dot { width: 32px; height: 32px; }
}