/* Fonts */
@font-face {
    font-family: 'title_font';
    src: url('fonts/Georama-VariableFont_wdthwght.ttf') format('truetype');
    font-weight: 400;
    font-stretch: 130%;
    font-style: normal;
}

@font-face {
    font-family: 'text_font';
    src: url('fonts/Georama-VariableFont_wdthwght.ttf') format('truetype');
    font-weight: 300;
    color: #2b2a28;
    font-stretch: 130%;
    font-style: normal;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'text_font', sans-serif;
    line-height: 1.6;
    color: #333;
}
.homepage{
    margin-left: 80px;
    margin-right: 80px;
    background: #e1f1ec;
}

.archive{
    margin-left: 80px;
    margin-right: 500px;
    background: #e1f1ec;
}
.archive-page{
    margin-left: 80px;
    margin-right: 500px;
}
#local_global{
    background: #f6eded;
}
#community_engagement{
    background: #f4f4ed;
}
#access_inclu{
    background: #e9f5f9;
}
#adapt_resp{
    background: #f0eff8;
}
#roadmaps_{
    background: #e2edd9;
}
#outside_edgelands {
    background: #efe5df;
}

header {
    color: black;
    padding: 1rem;
    text-align: center;
}

.header-content {
    display: flex;
    align-items: center;
    gap: 1rem; /* espace entre le logo et le titre */
    padding: 1rem;
    justify-content: center;
    color: black;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'title_font';
}

h1 {
    font-size: 35px;
}

h2 {
    /* color: #005B52; */
    color: #2f9e83;
    margin-top: 15px;
    margin-bottom: 18px;
    font-size: 30px;
}
h3 {
    margin-bottom: 1.5rem;
    margin-top: 1.5rem;
}

.carte-titre{
    text-transform: uppercase;
}


#community_engagement h2{
    /* color: #d9e021; */
    /* color: #bfc41d; */
    color: #7f7c1f;
    text-transform: uppercase;
}

#local_global h2{
    /* color: #ef3f49; */
    color: #d9373f;
    text-transform: uppercase;
}

#access_inclu h2{
    /* color: #1781ba; */
    color: #0d6aa3;
    text-transform: uppercase;
}

#adapt_resp h2{
    /* color: #6a68a9; */
    color: #5a57a8;
    text-transform: uppercase;
}

#roadmaps_ h2{
    /* color: #70b744; */
    color: #4f9a2a;
    text-transform: uppercase;
}

#outside_edgelands h2{
    /* color: #ed8540; */
    color: #d46a2f;
    text-transform: uppercase;
}

footer {
    margin-top: 50px;
    color: black;
}

.quote {
    margin-left: 20px;
}
.img_legend{
    text-align: center;
}
.ndauwu .img_legend{
    font-size: 13px;
}

p {
    margin-bottom: 1.5rem;
}

ul {
    margin-left: 1rem;
    margin-bottom: 1.5rem;
}

ol {
    margin-left: 1.2rem;
    margin-bottom: 1.5rem;
}

details {
    margin-bottom: 1.5rem;
}
details li{
    margin-left: 1rem;
}
.archive details a{
    color: #1781ba;
    font-weight: bold;
}
#institute details a{
    font-weight: normal;
    text-decoration: none;
    font-size: 13px;
}
.archive details a:hover{
    text-decoration: underline;
}
summary {
    font-family: 'title_font';
    /* color: #005B52; */
    color: #2f9e83;
    font-size: 1.2rem;
    margin-bottom: 1rem;
}
hr{
    margin-top: 40px;
    margin-bottom: 40px;
}

.backtrack{
    font-family: 'title_font';
    margin-left: 15px;
    text-transform: uppercase;
}
.archive .backtrack a{
    /* color: #005B52; */
    color: #2f9e83;
}

#community_engagement a{
    color: #7f7c1f;
}

#local_global a{
    color: #d9373f;
}

#access_inclu a{
    color: #0d6aa3;
}

#adapt_resp a{
    color: #5a57a8;
}

#roadmaps_ a{
    color: #4f9a2a;
}

#outside_edgelands a{
    color: #d46a2f;
}


.bottom-message-home{
    font-family: 'text_font';
    color: #005B52;
    font-size: 13px;
    text-align: center;
    font-style: italic;
    margin-top: 50px;
}

/* Conteneur pour aligner les 3 boutons horizontalement */
.boutons-container {
  display: flex;
  justify-content: space-between; /* Répartit l'espace équitablement */
  gap: 20px; /* Espace entre les boutons */
  flex-wrap: wrap; /* Passe à la ligne sur mobile si besoin */
  margin-top: 40px;
}
.boutons-stacked{
  display: flex;
  flex-direction: column; /* empile verticalement */
  gap: 20px; /* Espace vertical entre chaque bouton */
  align-items: stretch; /* Force les boutons à prendre toute la largeur disponible */
  margin-top: 40px;
  margin-bottom: 40px;
}

/* Le lien qui englobe tout (le bouton complet) */
.homepage .carte-bouton {
  display: flex;
  flex-direction: column; /* Empile le corps et le pied verticalement */
  width: 30%; /* Largeur approximative pour 3 boutons (ajustez selon besoin) */
  border-radius: 8px; /* round corners */
  overflow: hidden; /* round corners */
}
.archive .carte-bouton {
  display: flex;
  flex-direction: column; /* Empile le corps et le pied verticalement */
  text-decoration: none; /* Enlève le soulignement du lien */
  width: 100%; /* Le bouton prend maintenant 100% de la largeur du conteneur */
  border-radius: 8px; /* round corners */
  overflow: hidden; /* round corners */
}
.archive #lists .carte-bouton{
    flex: 1; /* the buttons get displayed side by side on the same line rather than stacked on top of each other */
}
.archive #lists .carte-corps{ /* centering the text in those specific buttons */
    justify-content: center;
    align-items: center;
}

.institute_ .carte-bouton{
    width: 30%;
}

.carte-bouton:hover {
  transform: translateY(-3px); /* Pushes up the button a little bit upon hovering */
}

/* Partie haute : Titre + Background clair */
.carte-corps {
  padding: 30px 20px;
  color: #333;
  flex-grow: 1; /* Permet aux boutons d'avoir la même hauteur si les titres varient */
  display: flex;
}
.homepage .carte-corps{ /* we want the text to be centered only for the homepage */
  display: flex;
  justify-content: center;
}
.content-carte-titre {
  padding: 10px 20px;
  text-align: left;
  display: flex;
  font-family: 'title_font';
  text-transform: uppercase;
  font-size: 13px;
  color: #333;
}

.carte-titre {
  font-size: 15px;
  font-family: 'title_font'
}

#institute .carte-titre{
    font-size: 13px;
}

.homepage .carte-titre{
  font-size: 20px;
  font-family: 'title_font';
}


/* Partie basse : "Learn more" + Background foncé */
.carte-pied {
  color: #333;
  padding: 10px 20px;
  text-align: center;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: 'title_font'
}
.content-carte-excerpt {
  padding: 10px 20px;
  text-align: left;
  font-size: 12px;

  font-family: 'text_font'
}

.content-carte-excerpt h3{
    text-transform: uppercase;
    font-size: 12px;
    color: white;
}

.homepage .carte-corps{
    background-color: #78c9b0;
}
.homepage .carte-pied{
    background-color: #00af8b;
}

#institute .carte-corps{
    background-color: #78c9b0;
    padding-top: 10px;
    padding-bottom: 10px;
}
#institute .carte-pied{
    background-color: #00af8b;
}

#institute .content-carte-titre{
    background-color: #78c9b0;
}
#institute .content-carte-excerpt{
    background-color: #00af8b;
}

.archive #lists .carte-corps{
    background-color: #78c9b0;
}
.archive #lists .carte-pied{
    background-color: #00af8b;
}

#community-engagement .carte-bouton, #local-global .carte-bouton, 
#access-inclu .carte-bouton, #adapt-resp .carte-bouton, 
#roadmaps .carte-bouton, #outside-edgelands .carte-bouton{
    border-radius: 8px;
    overflow: hidden;
}

#community-engagement .carte-corps{
    background-color: #e8e88b;
}
#community-engagement .carte-pied{
    /* background-color: #d9e021; */
    background-color: #7f7c1f;
}
#community-engagement .content-carte-titre{
    background-color: #e8e88b;
}
#community-engagement .content-carte-excerpt{
    background-color: #7f7c1f; 
    color: white;
}

#local-global .carte-corps{
    background-color: #f3b7bb;
}
#local-global .carte-pied{
    /* background-color: #ef3f49; */
    background-color: #d9373f;
}
#local-global .content-carte-titre{
    background-color: #f3b7bb;
}
#local-global .content-carte-excerpt{
    background-color: #d9373f;
    color: white
}
#access-inclu .carte-corps{
    background-color: #99c7e0;
}
#access-inclu .carte-pied{
    /* background-color: #1781ba; */
    background-color: #0d6aa3;
}
#access-inclu .content-carte-titre{
    background-color: #99c7e0;
}
#access-inclu .content-carte-excerpt{
    background-color: #0d6aa3;
    color: white;
}
#adapt-resp .carte-corps{
    background-color: #b4b3d9;
}
#adapt-resp .carte-pied{
    /* background-color: #6a68a9; */
    background-color: #5a57a8;
}
#adapt-resp .content-carte-titre{
    background-color: #b4b3d9;
}
#adapt-resp .content-carte-excerpt{
    background-color: #5a57a8;
    color: white;
}
#roadmaps .carte-corps{
    background-color: #bfdea6 ;
}
#roadmaps .carte-pied{
    /* background-color: #70b744; */
    background-color: #4f9a2a;
}
#roadmaps .content-carte-titre{
    background-color: #bfdea6 ;
}
#roadmaps .content-carte-excerpt{
    background-color: #4f9a2a;
    color: white;
}
#outside-edgelands .carte-corps{
    background-color: #ecc4ae ;
}
#outside-edgelands .carte-pied{
    /* background-color: #ed8540; */
    background-color: #d46a2f;
}
#outside-edgelands .content-carte-titre{
    background-color: #ecc4ae ;
}
#outside-edgelands .content-carte-excerpt{
    background-color: #d46a2f;
    color: white;
}

.information{
    padding: 10px;
    margin-bottom: 20px;
    
    font-size: 15px;
}
#community_engagement .information{
    background-color: #e8e88b;
}
#local_global .information{
    background-color: #f3b7bb;
}
#access_inclu .information{
    background-color: #99c7e0;
}
#adapt_resp .information{
    background-color: #b4b3d9;
}
#roadmaps_ .information{
    background-color: #bfdea6 ;
}
#outside_edgelands .information{
    background-color: #ecc4ae ;
}

.archive .information{
    /* background-color: #00af8b; */
    background-color: #2f9e83;
}

a {
    color: #005B52;
    text-decoration: none;
}
img{ /* making the img dimensions responsive */
    width: 100%; 
    height: auto;
}

.logo-container {
    text-align: center;
    /* margin-bottom: 1.5rem; */
    margin: 0 auto; /* centering the logo in the middle of the page */
}

.logo {
    max-width: 100%; 
    height: auto;
    border: none;
    display: block;
}

/* Grid container - content grids */
.grid-container {
    display: grid;
    /* Crée des colonnes automatiques : minimum 250px de large, sinon elles se répartissent */
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px; /* Espace entre les cartes */
    margin: 0 auto;
}

/* --- CORRECTION SPÉCIFIQUE POUR LES COINS DANS .grid-container --- */

/* 1. Cible les éléments de pied (bas des boutons) dans une grille */
.grid-container .carte-bouton .carte-pied,
.grid-container .carte-bouton .content-carte-excerpt {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

/* 2. Cible les éléments de corps (haut des boutons) si nécessaire (pour le haut) */
.grid-container .carte-bouton .carte-corps,
.grid-container .carte-bouton .content-carte-titre {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

/* 3. Sécurité : s'assurer que le parent coupe bien tout débordement résiduel */
.grid-container .carte-bouton {
    overflow: hidden !important;
    border-radius: 8px !important;
}

/* Conteneur des boutons */
.lang-switcher {
    display: flex;
    gap: 10px; /* Espace entre les boutons */
    margin: 20px 0;
    font-family: 'text_font', sans-serif;
}

/* Style de base des boutons (liens) */
.lang-btn {
    text-decoration: none;
    color: #000 !important;
    background-color: #f0f0f0; /* Fond non actif */
    padding: 8px 16px;
    border-radius: 4px;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    font-size: 1em;
}

/* Effet au survol */
.lang-btn:hover {
    background-color: #d0cdcd;
}

/* Style du bouton ACTIF (la page actuelle) */
.lang-btn.active {

    font-weight: bold;
    border-color: #333;
}

.bibliography h1{
    text-transform: uppercase;
    font-size: 27px;
    font-weight: bolder;
    color: #70b744;
    margin-bottom: 10px;
}
.bibliography h2{
    color: black !important;
    font-size: 20px;
}

.table-of-contents a{
    color: #000 !important;
    font-weight: bold;
}
.table-of-contents a:hover{
    color: #70b744 !important;
}

.search-container {
    position: relative;
    max-width: 400px;
    margin: 20px auto; /* Centré, ajustez selon vos besoins */
}

#search-input {
    width: 100%;
    padding: 10px;
    font-family: 'text_font';
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* Important pour que le padding ne dépasse pas */
}

.search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #ddd;
    font-family: 'text_font';
    border-top: none;
    border-radius: 0 0 4px 4px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    display: none; /* Caché par défaut */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.search-result-item {
    padding: 10px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
}

.search-result-item:hover {
    background-color: #f5f5f5;
}

.search-result-item a {
    text-decoration: none;
    color: #333;
    display: block;
}

.search-result-title {
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 4px;
}

.search-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #ddd;
    font-family: 'text_font';
    border-top: none;
    border-radius: 0 0 4px 4px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    display: none; /* Caché par défaut */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.suggestion-item {
    padding: 10px;
    cursor: pointer;
    color: #333; /* Texte noir */
    font-size: 14px;
    border-bottom: 1px solid #f0f0f0;
}

.suggestion-item:hover {
    background-color: #f0f8ff; /* Couleur au survol (bleu très clair) */
    color: #000;
}

.suggestion-item:last-child {
    border-bottom: none;
}

.search-container {
    position: relative; /* Important pour positionner le bouton */
    max-width: 400px;
    margin: 20px auto;
}

#search-input {
    width: 100%;
    padding: 10px 35px 10px 10px; /* Padding à droite augmenté pour ne pas passer sous la croix */
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.search-clear-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%); /* Centrer verticalement */
    background: none;
    border: none;
    font-size: 20px;
    font-weight: bold;
    color: black;
    cursor: pointer;
    padding: 0 5px;
    line-height: 1;
    z-index: 10;
}

.search-clear-btn:hover {
    color: #333;
}

/* Responsiveness */
@media (max-width: 1200px){
    .archive{
        margin-left: 60px;
        margin-right: 200px;
    }
    .archive-page{
        margin-left: 60px;
        margin-right: 200px;
    }
}
@media (max-width: 768px) {

  .homepage .carte-titre{
    text-align: center;
    font-size: 15px;
  }
  .carte-pied{
    font-size: 12px;
  }
}
@media (max-width: 600px) {
    .boutons-container{
        flex-direction: column;
    }
    p{
        font-size: 13px;
    }
    .homepage{
        margin-left: 60px;
    }
    .institute{
        margin-left: 60px;
    }
    .archive{
        margin-left: 60px;
        margin-right: 100px;
    }
    .archive-page{
        margin-left: 60px;
        margin-right: 100px;
    }
    .carte-titre{
        font-size: 12px;
    }
    .homepage .carte-titre{
        text-align: center;
    }
    .homepage .carte-bouton{ /* making the stacked buttons take a larger width at the homepage */
        width: 100%;
    }
    .archive #lists .carte-corps{
        justify-content: left;
    }
    .carte-pied{
        font-size: 10px;
    }
    .logo{
        width: 250px;
    }
    summary{
        font-size: 15px;
    }
    h2, h1{
        font-size: 20px;
    }
}