/* ------------------------------
   STYLE GLOBAL
------------------------------ */

/* Réinitialisation des marges et paddings par défaut et gestion du box-sizing */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


/* responsive mobile */
img, video, iframe {
  max-width: 100%;
  height: auto;
}

@media (max-width: 600px) {
  .research-hero {
    min-height: 50vh;
    padding: 3rem 1rem;
  }

  .research-hero h1 {
    font-size: 1.8rem;
    line-height: 1.3;
  }

  .research-hero p {
    font-size: 1rem;
    line-height: 1.5;
    max-width: 90%;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .nav-links {
    gap: 1rem;
    font-size: 0.9rem;
  }
}

@media (max-width: 500px) {
  .nav-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
  }
}


/* Footer responsive */
@media (max-width: 600px) {
  footer {
    padding: 2rem 1rem;
    font-size: 0.9rem;
  }

  .footer-content {
    flex-direction: column;
    gap: 1rem;
  }
}




/* Défilement fluide sur la page */
html {
  scroll-behavior: smooth;
}

/* Styles de base pour le corps de la page */
body {
  font-family: 'Open Sans', sans-serif;
  background-color: #f9f9f9;
  color: #222;
  line-height: 1.6;
}

/* ------------------------------
   CONTAINERS & UTILITAIRES
------------------------------ */

/* Conteneur central avec largeur max et centrage automatique */
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

/* Titres h1, h2, h3 avec police et couleur spécifiques */
h1  {
  font-family: 'Montserrat', sans-serif;
  color: #ffffff;
}

h2, h3 {
  color:#222
}

/* Liens sans décoration par défaut et transition */
a {
  text-decoration: none;
  color: inherit;
  transition: 0.3s ease;
}

/* Supprimer les puces des listes */
ul {
  list-style: none;
}

/* ------------------------------
   HEADER & NAVIGATION
------------------------------ */

/* Style de l'en-tête : fond blanc, ombre, sticky */
header {
  background: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Conteneur de navigation : flex, espace entre logo et menu */
.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
}

/* Logo avec taille et couleur */
.logo {
  font-size: 1.8rem;
  font-weight: 700;
  color: #0055ffff;
}

/* Partie du logo colorée différemment */
.logo span {
  color: #808080ff;
}

/* Titre de la section hero (style identique au logo) */
.hero-title {
  font-size: 3rem;
  font-weight: 700;
  color: #0055ffff; /* Couleur de "Synaptik" */
  font-family: 'Orbitron', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

  letter-spacing: 1px;
}

/* Partie "One" dans le titre */
.hero-title span {
  color: #808080ff; /* Couleur de "One" */
}

/* Optionnel : légère animation à l’apparition */
.hero-title {
  opacity: 0;
  transform: translateY(-20px);
  animation: fadeSlideDown 1.2s ease-out forwards;
  animation-delay: 0.5s;
}

@keyframes fadeSlideDown {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* Menu de navigation horizontal */
.nav-links {
  display: flex;
  gap: 2rem;
  margin-right: 1rem;
  
}

/* Liens du menu */
.nav-links a {
  font-weight: 600;
  color: #0a2540;
  position: relative; /* Pour le pseudo-élément ::after */
}

/* Ligne sous le lien (animation hover) */
.nav-links a::after {
  content: "";
  position: absolute;
  width: 0%;
  height: 2px;
  background: #00aaff;
  bottom: -5px;
  left: 0;
  transition: 0.3s;
}

/* Animation sur hover ou lien actif */
.nav-links a:hover::after,
.nav-links a.active::after {
  width: 100%;
}


/* Structure du conteneur du header */
.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between; /* ou "center" si tu veux tout centrer */
}

/* Menu centré horizontalement */
nav {
  flex: 1; /* prend toute la largeur dispo entre logo et switch langue */
  display: flex;
  justify-content: center; /* centre le bloc du menu */
}



/* ------------------------------
   SECTION HERO
------------------------------ */

/* Section d'introduction avec dégradé et centrage */
.hero {
  position: relative;
  display: flex;
  justify-content: left;
  align-items: left;
  min-height: 80vh;
  overflow: hidden;
  text-align: left;
  background: linear-gradient(135deg, #ffffff, #ffffff);
  color: #fff;
  padding: 3rem 2rem;
}

.hero-content {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2rem;
  max-width: 1100px;
  width: 100%;
}

/* LOGO ANIME DEPUIS LA DROITE */
.hero-logo {
  width: 600px;
  opacity: 0;
  transform: translateX(100px);
  animation: slideInRight 1.5s ease-out forwards;
}

/* TEXTE ANIME DEPUIS LA GAUCHE */
.hero-text {
  max-width: 600px;
  opacity: 0;
  transform: translateX(-100px);
  animation: slideInLeft 1.5s ease-out forwards;
  animation-delay: 0.4s;
}


/* TITRE ET PARAGRAPHE */
.hero-text h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
  font-family: sans-serif;
}

.hero-text p {
  font-size: 1.2rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  color: #676262;
}

/* ANIMATIONS */
@keyframes slideInRight {
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInLeft {
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .hero-content {
    flex-direction: column;
    text-align: center;
  }

  .hero-logo {
    width: 200px;
    transform: translateY(-30px);
  }

  .hero-text {
    transform: translateY(30px);
  }
}

/* Titre principal dans la hero */
.hero h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

/* Texte sous le titre */
.hero p {
  font-size: 1.1rem;
  max-width: 700px;
  margin-bottom: 2rem;
}

/* Boutons */
.btn {
  background: #8d8d8d;
  color: white;
  padding: 0.8rem 1.8rem;
  border-radius: 0px;
  font-weight: 600;
  transition: all 0.3s ease;
}

/* Effet hover sur bouton */
.btn:hover {
  background: #0088cc;
  transform: scale(1.08) translateY(-4px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}
.link {
  position: relative;
  color: #2c3e50;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.3s ease;
}

.link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 0;
  height: 2px;
  background-color: #1abc9c;
  transition: width 0.3s ease;
}

.link:hover {
  color: #1abc9c;
}

.link:hover::after {
  width: 100%;
}

/* ------------------------------
   SECTION ABOUT
------------------------------ */

/* Section “À propos” avec padding et centrage */
.about {
  padding: 5rem 0;
  background: #fff;
  text-align: center;
}

/* Titre section about */
.about h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

/* Texte de la section about */
.about p {
  max-width: 800px;
  margin: 0 auto;
  font-size: 1.1rem;
  color: #444;
}

/* ------------------------------
   FOOTER
------------------------------ */

/* Footer avec fond sombre, texte blanc et centrage */
footer {
  background: #808080ff;
  color: rgb(0, 0, 0);
  text-align: center;
  padding: 1.5rem 0;
  font-size: 1.0rem;
}

/* ------------------------------
   ANIMATIONS DOUCES
------------------------------ */

/* Animation d’apparition pour hero, about et footer */
.hero, .about, .footer-content {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s ease, transform 1s ease;
}

/* Classe pour déclencher l’animation */
.show {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* ------------------------------
   RESPONSIVE DESIGN
------------------------------ */

/* Styles pour écrans <= 768px */
@media (max-width: 768px) {
  .nav-links {
    gap: 1rem;
    font-size: 0.9rem;
  }

  .hero h1 {
    font-size: 2rem;
  }

  .hero p {
    font-size: 1rem;
  }

  .about p {
    font-size: 1rem;
  }
}

/* ------------------------------
   CARTE DE SERVICE HORIZONTALE
------------------------------ */

/* Conteneur d’une carte service */

.service-card {
  display: flex;
  flex-direction: row; /* changer de row à column */
  align-items: flex-start;        
  gap: 1.5rem;                  
  margin-bottom: 3rem;
  padding: 1rem;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  transition: transform 0.3s ease;
  text-align: left; /* centrer le texte sous l'image */
}


/* Animation de la carte au hover (légère remontée) */
.service-card:hover {
  transform: translateY(-5px);
}

/* Icones dans la carte */
.service-card .icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

/* Titres dans la carte */
.service-card h3 {
  margin: 0.5rem 0;
}

/* Texte dans la carte */
.service-card p {
  margin: 0;
}

/* Responsive : empilement vertical sur mobile */
@media (max-width: 768px) {
  .service-card {
    flex-direction: column;   
    text-align: center;
  }

  .service-card .service-img {
    width: 200px;
    height: auto;
    border-radius: 12px;
    flex-shrink: 12px;
    margin-bottom: 1rem;
  }

  /* Contenu texte à droite de l'image */
  .service-card .icon,
  .service-card h3,
  .service-card p {
    margin: 0 0 0.5rem 0;
  }
}

/* ------------------------------
   ILLUSTRATIONS DES SERVICES & ANIMATIONS
------------------------------ */

/* Images de services avec apparition depuis la gauche */
.service-card .service-img {
  width: 100%;
  max-width: 300px;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  flex-shrink: 0;

  /* apparition depuis la gauche */
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 1.3s ease, transform 0.3s ease;
}

/* Activation de l’animation apparition */
.service-card .service-img.show {
  opacity: 1;
  transform: translateX(0);
}

/* Effet hover : l’image ressort légèrement et s’agrandit */
.service-card .service-img:hover {
  transform: translateY(-10px) scale(1.05);
  transition: transform 0.3s ease;
}

/* Effet clic : rebond de l’image */
.service-card .service-img:active {
  animation: pop 0.3s forwards;
}

/* Animation keyframes pour le rebond */
@keyframes pop {
  0%   { transform: scale(1) translateY(0); }
  50%  { transform: scale(1.15) translateY(-15px); }
  100% { transform: scale(1) translateY(0); }
}


#backToTop {
  position: fixed;
  bottom: 30px;
  right: 30px;
  display: none; /* caché par défaut */
  background-color: #00aaff;
  color: white;
  border: none;
  padding: 0.8rem 1rem;
  border-radius: 50%;
  font-size: 1.5rem;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  transition: background 0.3s ease, transform 0.3s ease;
  z-index: 1000;
}

#backToTop:hover {
  background-color: #0088cc;
  transform: scale(1.1);
}



/* ===============================
   DOMAINES AVEC ICONES
=============================== */

.domain-header {
  display: flex;
  align-items: center;
  gap: 10px; /* espace entre icône et titre */
  margin-bottom: 0.5rem;
}

.domain-header i {
  width: 28px;
  height: 28px;
  color: #0055ff; /* couleur principale (même que ton logo Synaptik) */
  flex-shrink: 0;
}

.domains .domain-card {
  text-align: left;
  font-style: italic;
  padding-left: 0;
}

.domains .domain-card h3 {
  margin: 0;
  font-style: normal;
}


/* ===============================
   HERO - PAGE RESEARCH
=============================== */


/* Animations subtiles */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideInDown {
  from { opacity: 0; transform: translateY(-30px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Responsive */
@media (max-width: 768px) {
  .research-hero {
    padding: 4rem 1rem;
  }

  .research-hero h1 {
    font-size: 2rem;
  }

  .research-hero p {
    font-size: 1rem;
  }
}


/* Vision */
/* ===============================
   PAGE HEADER (Compact)
=============================== */

.page-header {
  background: #f5f8ff;
  padding: 3rem 1rem;
  text-align: center;
  border-bottom: 1px solid #e0e6f0;
}

.page-header h1 {
  font-size: 2.2rem;
  color: #0055ff;
  margin-bottom: 0.5rem;
}

.page-header .subtitle {
  font-size: 1.1rem;
  color: #666;
  max-width: 700px;
  margin: 0 auto;
}


/* ===============================
   SECTION VALEURS — ICONES
=============================== */
.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.value-card {
  background: #fff;
  border: 1px solid #e5e8ef;
  border-radius: 16px;
  padding: 2rem 1.5rem;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.value-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

.value-card i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #f2f6ff;
  color: #0055ff;
  font-size: 1.8rem;
  margin-bottom: 1rem;
  border: 2px solid #dbe4ff;
  transition: background 0.3s ease, transform 0.3s ease;
}

.value-card:hover i {
  background: #0055ff;
  color: #fff;
  transform: scale(1.1);
}

.value-card h3 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  color: #222;
}

.value-card p {
  color: #555;
  line-height: 1.6;
  font-size: 0.95rem;
}


/* ===============================
   PUBLICATION CARDS
=============================== */
.publications-list {
  display: grid;
  gap: 2rem;
  margin-top: 2rem;
}

.publication-card {
  background: #fff;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.publication-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

/* Header : icône + titre alignés */
.publication-header {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1rem;
}

.publication-header i {
  color: #2d4ef5; /* couleur d'accent */
  width: 22px;
  height: 22px;
}

.publication-header h3 {
  font-size: 1.2rem;
  color: #222;
  margin: 0;
} 

.publication-card p {
  color: #555;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.btn-link {
  color: #2d4ef5;
  font-weight: 600;
  text-decoration: none;
}

.btn-link:hover {
  text-decoration: underline;
}

/* =============================
   SECTION CONTACT RESPONSIVE
============================= */
.contact-container {
  display: flex;
  gap: 40px; /* espace entre infos et formulaire */
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap; /* permet le passage en colonne sur petit écran */
  margin-top: 40px;
}

/* Partie infos contact */
.contact-info {
  flex: 1 1 300px; /* largeur minimum 300px, flexible */
}

/* Partie Google Form */
.google-form-container {
  flex: 2 1 400px; /* prend plus de place que la partie infos */
  min-width: 300px;
}

/* Iframe responsive */
.google-form-container iframe {
  width: 100%;
  height: 900px; /* hauteur fixe pour desktop */
  border: none;
  min-height: 600px;
  max-width: 100%;
}

/* Adaptation tablette et mobile */
@media screen and (max-width: 1024px) {
  .google-form-container iframe {
    height: 850px;
  }
}

@media screen and (max-width: 768px) {
  .contact-container {
    flex-direction: column; /* passe en colonne */
    gap: 20px;
  }

  .google-form-container iframe {
    height: 800px; /* hauteur pour mobile */
  }
}




@media screen and (max-width: 480px) {
  .google-form-container iframe {
    height: 750px; /* encore ajusté pour très petit écran */
  }
}


/* ===============================
   BACKGROUND - PAGE ABOUT
=============================== */

.about-page {
  background-image: url("../images/SynaptikOne.png");
  background-size: cover;          /* L’image couvre toute la page */
  background-position: center;     /* Centrer l’image */
  background-attachment: fixed;    /* Effet de défilement fixe (parallaxe léger) */
  background-repeat: no-repeat;    /* Pas de répétition */
}

/* Pour rendre le texte plus lisible si l’image est claire */
.about-page section {
  background-color: rgba(255, 255, 255, 0.85);
  border-radius: 12px;
  padding: 2rem;
  margin-bottom: 0rem;
}


/* Footer */
.footer-links {
  font-size: 0.9rem;
  color: #ffffff;
  margin-top: 10px;
}

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

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


/* --- Newsletter Footer --- */
.newsletter-footer {
  margin-top: 30px;
  text-align: center;
  max-width: 500px;
  margin-inline: auto;
}

.newsletter-footer h3 {
  font-size: 1.2rem;
  margin-bottom: 10px;
  font-weight: 600;
}

.newsletter-footer p {
  font-size: 0.95rem;
  color: #666;
  margin-bottom: 15px;
}

.newsletter-form {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.newsletter-form input[type="email"] {
  padding: 10px 15px;
  border: 1px solid #ccc;
  border-radius: 8px;
  flex: 1 1 250px;
}

.btn-newsletter {
  background-color: #222;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.btn-newsletter:hover {
  background-color: #444;
}


/* ===============================
   CORRECTION AFFICHAGE FOOTER
=============================== */
footer {
  display: block;              /* S'assure que le footer soit visible */
  position: relative;          /* Évite d'être recouvert */
  z-index: 10;                 /* Priorité d'affichage */
  background: #808080ff;       /* Fond visible */
  color: black;                /* Texte lisible */
  text-align: center;
  padding: 1.5rem 0;
  font-size: 1rem;
  margin-top: 3rem;            /* Espace avant le footer */
}

/* Correction spécifique à la page newsletter */
body.newsletter-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Garantit que la page occupe toute la hauteur */
}

.newsletter-content {
  flex: 1; /* pousse le footer en bas même si peu de contenu */
}


.partenariats-hero {
  min-height: 60vh;  /* moins haute pour éviter trop d’étirement */
  max-height: 900px; /* optionnel */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  padding: 3rem 2rem;
  text-align: center;
}

.hero-bg {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* garde les proportions */
  z-index: -1;
}


.contribution-hero {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  padding: 3rem 2rem;
  text-align: center;
}



/* Hero spécifique Millénaire */
.millenium-hero {
  background: linear-gradient(135deg, #000000, #000000);
  text-align: center;
  padding: 4rem 2rem;
  position: relative;
}

/* Slider horizontal */
.mathematicians-slider {
  display: flex;
  gap: 2rem;
  overflow-x: auto;
  padding: 2rem 0;
  scroll-snap-type: x mandatory; /* Pour le scroll fluide par "snap" */
}

.mathematician-card {
  flex: 0 0 auto;
  width: 180px;
  scroll-snap-align: start;
  background: #000000;
  border-radius: 12px;
  padding: 1rem;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

.mathematician-card img {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 0.5rem;
}

.mathematician-card p {
  font-weight: 600;
  font-size: 0.95rem;
  color: #0055ff;
}

/* Effet hover */
.mathematician-card:hover {
  transform: translateY(-10px) scale(1.05);
}


/* Hero dans la section recherche */
.research-hero {
  position: relative;
  min-height: 60vh;  /* Hauteur de la section */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #ffffff;
  overflow: hidden;
  padding: 2rem;
}

.research-hero .hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* L’image couvre toute la section */
  z-index: 1;
}

.research-hero .hero-content {
  position: relative;
  z-index: 2;
}


/* ---------- MENU HAMBURGER ---------- */
.hamburger {
  display: none;
  font-size: 2rem;
  background: none;
  border: none;
  cursor: pointer;
  color: #222;
}

/* Mobile uniquement */
@media (max-width: 768px) {
  .hamburger {
    display: block;
  }

  nav {
    position: absolute;
    top: 70px;
    right: 0;
    background-color: #fff;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, box-shadow 0.3s;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    z-index: 100;
  }

  nav.open {
    max-height: 300px; /* ajustable selon ton menu */
    transition: max-height 0.3s ease-in;
  }

  .nav-links {
    flex-direction: column;
    text-align: center;
    padding: 1rem 0;
  }

  .nav-links li {
    margin: 0.5rem 0;
  }
}


/* Ligne de séparation qui s’adapte à la position réelle des colonnes */
.footer-columns::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: rgba(255, 255, 255, 0.1);
  left: calc(1% + 200px); /* ← décale la ligne selon la première colonne */
}


.footer-columns {
  position: relative;
}

.footer-col h4 {
  color: #fff;
  font-size: 1.1rem;
  margin-bottom: 12px;
  font-weight: 600;
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-col ul li {
  margin-bottom: 8px;
}

.footer-col ul li a {
  color: #bbb;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-col ul li a:hover {
  color: #fff;
}



/* Responsive */
@media (max-width: 700px) {
  .footer-columns {
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }

  .footer-col {
    text-align: center;
  }
}


.footer-columns {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 100px; /* espace entre les deux colonnes */
  margin-bottom: 2rem;
  flex-wrap: wrap; /* pour mobile */
}

.footer-col {
  text-align: left;
}

.footer-col h4 {
  font-size: 1.1rem;
  color: #fff;
  margin-bottom: 1rem;
  font-weight: 600;
}

.footer-col ul {
  list-style: none;
  padding: 0;
}

.footer-col ul li {
  margin-bottom: 8px;
}

.footer-col ul li a {
  color: #ccc;
  text-decoration: none;
  transition: color 0.3s;
}

.footer-col ul li a:hover {
  color: #fff;
}

/* Responsive : passer en colonne sur mobile */
@media (max-width: 700px) {
  .footer-columns {
    flex-direction: column;
    text-align: center;
    gap: 2rem;
  }

  .footer-col {
    text-align: center;
  }
}
.footer-columns {
  display: flex;
  justify-content: flex-start; /* ← Alignement à gauche */
  align-items: flex-start;
  gap: 100px;
  margin-bottom: 2rem;
  flex-wrap: wrap;
  text-align: left;
  padding-left: 5%; /* optionnel, pour laisser un peu d’espace du bord */
}

/* ===============================
   SOCIAL LINKS - FOOTER
=============================== */
.social-links {
  display: flex;
  justify-content: center;
  gap: 1.2rem;
  margin-top: 1.5rem;
}

.social-links a {
  color: #ffffff;
  font-size: 1.4rem;
  transition: color 0.3s ease, transform 0.3s ease;
}

.social-links a:hover {
  color: #00aaff; /* Couleur accent (même que ton bouton principal) */
  transform: translateY(-3px);
}



/* depalcement de s icon des social link en haut et a droit */
/* Conteneur top du footer */
.footer-top {
  display: flex;
  justify-content: space-between; /* Colonne gauche + social à droite */
  align-items: flex-start;
  margin-bottom: 2rem;
}

/* Social links alignés à droite */
.social-links {
  display: flex;
  gap: 1.2rem;
  margin: 0; /* plus de margin-top */
}

.social-links a {
  color: #ffffff;
  font-size: 1.4rem;
  transition: color 0.3s ease, transform 0.3s ease;
}

.social-links a:hover {
  color: #00aaff;
  transform: translateY(-3px);
}


/* Bouton abonner Footer */
/* Footer Subscribe */
.footer-subscribe {
  display: flex;
  justify-content: flex-start; /* aligné à gauche */
  align-items: center;
  gap: 1rem;
  background-color: #808080ff; /* couleur accent */
  color: #fff;
  padding: 1rem 2rem;
  border-radius: 12px;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.footer-subscribe p {
  margin: 0;
  font-weight: 500;
  font-size: 1rem;
}

.btn-newsletter-footer {
  background-color: rgb(144, 144, 144);
  color: #fff;
  padding: 0.6rem 1.2rem;
  border-radius: 1px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.3s, transform 0.3s;
}

.btn-newsletter-footer:hover {
  background-color: #7c7c7c;
  transform: scale(1.05);
}


/* Copiright */
.footer-copy {
  color: #ffffff; /* gris clair */
  font-size: 0.95rem; /* optionnel : ajuste la taille si nécessaire */
  margin-top: 1rem; /* optionnel : espace au-dessus */
}



/* Hero de publication */
/* === HERO SECTION POUR LES PUBLICATIONS === */
.publications-hero {
  background-image: linear-gradient(
      rgba(0, 0, 0, 0.4),
      rgba(0, 0, 0, 0.6)
    ),
    url("../images/hero-publications.jpg"); /* Mets ici ton image */
  background-size: cover;
  background-position: center;
  color: #ffffff;
  text-align: center;
  padding: 120px 20px;
}

.publications-hero .hero-content {
  max-width: 800px;
  margin: 0 auto;
}

.publications-hero h1 {
  font-size: 2.5rem;
  font-family: "IBM Plex Serif", serif;
  margin-bottom: 1rem;
}

.publications-hero p {
  font-size: 1.2rem;
  line-height: 1.6;
  color: #e0e0e0;
}


/* HERO Programme (unique pour programme.html) */
.hero-programme {
  position: relative;
  height: 400px; /* hauteur personnalisée */
  background-image: url('../images/hero-programme.jpg'); /* image spécifique à la page Programme */
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.hero-programme .hero-overlay {
  background-color: rgba(0, 0, 0, 0.5); /* superposition sombre */
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}

.hero-programme .container {
  text-align: center;
}

.hero-programme h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.hero-programme .subtitle {
  font-size: 1.25rem;
}



/* HERO Contact (spécifique à contact.html) */
.hero-contact {
  position: relative;
  height: 400px; /* ajuster selon besoin */
  background-image: url('../images/hero-contact.jpg'); /* image spécifique */
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.hero-contact .hero-overlay {
  background-color: rgba(0, 0, 0, 0.5); /* superposition sombre */
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}

.hero-contact .container {
  text-align: center;
}

.hero-contact h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.hero-contact .subtitle {
  font-size: 1.25rem;
}


.support-hero {
  background-image: url('../images/hero-support.jpg'); /* chemin vers ton image */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff; /* texte lisible sur l'image */
  padding: 100px 0; /* ajuster la hauteur */
  text-align: center;
}


/* Lien de la manifest dans la page about.html*/

.manifest-link {
  color: #0088cc;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: all 0.3s ease;
}

.manifest-link:hover {
  color: #005fa3;
  border-bottom: 1px solid #005fa3;
}



/* Structure du header */
.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between; /* Logo à gauche, globe à droite */
  position: relative;
}

/* Menu centré horizontalement */
nav {
  flex: 1;
  display: flex;
  justify-content: flex-end; /* ou center si tu veux centrer */
  padding: 0 2rem; /* garde un peu d’espace sur les côtés */
}

/* Pour petits écrans */
@media (max-width: 768px) {
  nav {
    padding: 0 1rem;
    flex-direction: column;
    align-items: center;
  }

  .nav-links {
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    text-align: center;
  }
}



/* Liens du menu */
.nav-links {
  display: flex;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Style des liens */
.nav-links a {
  font-weight: 600;
  color: #0a2540;
  position: relative;
  text-decoration: none;
}

/* Animation de soulignement */
.nav-links a::after {
  content: "";
  position: absolute;
  width: 0%;
  height: 2px;
  background: #00aaff;
  bottom: -5px;
  left: 0;
  transition: 0.3s;
}
.nav-links a:hover::after,
.nav-links a.active::after {
  width: 100%;
}

/* Lang switch à droite */
.lang-switch {
  margin-left: auto;
  position: relative;
  padding-right: 1rem; /* espace avant le bord */
}

/* Bouton globe */
.lang-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: #0a2540;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
}
.lang-btn:hover {
  color: #00aaff;
}

/* Menu déroulant langues */
.lang-menu {
  position: absolute;
  top: 120%;
  right: 0;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  display: none;
  list-style: none;
  padding: 0.5rem 0;
  z-index: 100;
}
.lang-menu li {
  padding: 0.5rem 1rem;
}
.lang-menu li a {
  color: #0a2540;
  text-decoration: none;
  display: block;
}
.lang-menu li a:hover {
  background: #f0f0f0;
  color: #00aaff;
}
.lang-menu.active {
  display: block;
}


@media (max-width: 768px) {
  nav {
    padding-left: 180px; /* moins d’espace sur petit écran */
  }
}



/* desing Bouton  dans le fichier recherche*/
/* ====== Boutons secondaires ====== */
.btn-secondary {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  color: #0a2540; /* couleur principale (texte bleu sombre) */
  border: 2px solid #00aaff; /* bordure bleu cyan */
  border-radius: 50px; /* coins arrondis style pill */
  background: transparent; /* fond transparent */
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}

/* Effet au survol */
.btn-secondary:hover {
  background: #00aaff; /* fond bleu */
  color: #fff; /* texte blanc */
  transform: translateY(-2px); /* petit effet de mouvement */
  box-shadow: 0 4px 12px rgba(0, 170, 255, 0.4); /* ombre douce */
}

/* Variante quand on clique */
.btn-secondary:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 170, 255, 0.3);
}


/* Style bouton désactivé */
.btn-secondary.disabled {
  opacity: 0.6;
  pointer-events: none; /* rend le lien non cliquable */
  border-color: #ccc;
  color: #777;
  background: #f4f4f4;
  cursor: not-allowed;
}


.repo-status {
  font-style: italic;
  color: #666;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 0.5rem;
}



/* Style pour le label du pack thématique */
.pack-label {
  text-align: center;                     /* centre le texte dans le label */
  font-weight: 600;
  font-size: 1rem;
  color: #ffffff;
  background: linear-gradient(90deg, #4caf50, #81c784);
  padding: 6px 12px;
  border-radius: 12px;
  display: block;                         /* le label prend toute la ligne */
  width: fit-content;                     /* ajuste la largeur au contenu */
  margin: 0 auto 12px auto;               /* centre le bloc et espace en bas */
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}