.nav3d {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 15px;
}

.nav3d .nav-item .nav-link {
    padding: 10px 20px;
    background: linear-gradient(to bottom,rgb(245, 125, 125), rgb(248, 234, 234), rgb(190, 190, 250));
    color: rgb(12, 12, 12);
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.2s ease;
    transform-style: preserve-3d;
    transform: translateZ(0);
    box-shadow: 0 6px 0 #696c6d, 0 8px 12px rgba(0, 0, 0, 0.2);
}

.nav3d .nav-item .nav-link:active {
    transform: translateY(6px);
    box-shadow: 0 0 0 #080808;
}

.nav3d .nav-item .nav-link.active {
    background: linear-gradient(145deg, #9ee4f1, #31d2f2);
    box-shadow:
        0 4px 0 #0e0e0e,
        0 6px 10px rgba(0, 0, 0, 0.2);
}

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

/* Styles généraux */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 20px;
}

/* Cadre principal */
.beautiful-frame {
    background-color: #f8e8e8;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.8);
    padding: 20px;
    margin: 20px auto;
    max-width: 900px;
    font-size: 1.2em;
}

/* Titre */
h1 {
    font-size: 3em;
    text-align: center;
    color: #8a4c23; /* Couleur inspirée des terres africaines */
}

/* Icônes */
.america-icon {
    width: 30px;
    margin-right: 10px;
}

/* Texte de présentation */
.presentation-text p {
    font-size: 1.2em;
    line-height: 1.6;
    color: #030303;
    text-align: justify;
}

/* Galerie d'images */
.gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}

.image img {
    width: 150px;
    height: auto;
    border-radius: 10px;
    transition: transform 0.3s ease;
}

.image img:hover {
    transform: scale(1.1);
}

.titre-centre{
    text-align: center;
    color: blue;
    text-decoration: underline;
    text-transform:uppercase;
    font-size: 28px;
}

.search-container {
    display:flex;
    flex-direction:column;
    align-items: center;
    justify-content: center;
    gap: 8px;  
    padding: 15px;
    background: linear-gradient(135deg, #9370DB, #D8BFD8); /* Dégradé violet doux */
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
    width: fit-content;
    margin: 0 auto;
    margin-bottom: 40px;
}

.search-container label {
    font-size: 16px;
    font-weight: bold;
    color: #ffffff; /* Texte blanc pour contraste */
}

#selectCountry {
    padding: 8px;
    font-size: 14px;
    border-radius: 5px;
    border: 2px solid #9370DB; /* Violet plus doux */
    background-color: white;
    color: #4B0082; /* Texte légèrement foncé mais pas trop intense */
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}

#selectCountry:hover {
    background-color: #D8BFD8; /* Fond lilas léger au survol */
    color: white;
}

----------------style page  pays--------------------------------

#pageTitleContainer {
    display: flex;
    justify-content: center; /* Centre horizontalement */
    align-items: center; /* Aligne verticalement */
    width: 100%;
}

/* 🔹 Ajustement du titre */
#pageTitle {
    font-size: 2rem; /* Garde une bonne taille de texte */
    text-align: center; /* Centre le texte */
    margin: 0;  
}

.title-wrapper {
    display: flex;
    align-items: center; /* Assure que le drapeau est bien à côté du texte */
    justify-content: center; /* Centre horizontalement */
    gap: 10px; /* Espacement entre le drapeau et le titre */
}

.flag-icon {
    width: 40px;
    height: auto;
}

#descriptionContainer {
    max-width: 700px;
    margin: 40px auto; /* Centrage horizontal */
    padding: 25px;
    border-radius: 12px; /* Arrondi doux et moderne */
    background: #f8c9c9; /* Fond légèrement texturé */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15); /* Ombre subtile pour un effet carte */
    text-align: justify; /* Texte bien aligné */
    font-size: 18px;
    font-weight: normal;
    color: #333;
    position: relative; /* Ajout d'un élément décoratif */
}

/* ✅ Ajout d’un titre stylé */
#descriptionContainer::before {
    content: "🌍 Présentation du pays";
    display: block;
    font-size: 22px;
    font-weight: bold;
    color: #0073e6;
    text-align: center;
    margin-bottom: 15px;
}

/* ✅ Effet premium : bordure fine décorative */
#descriptionContainer::after {
    content: "";
    width: 80%;
    height: 2px;
    background: linear-gradient(to right, #0073e6, #6c026c);
    display: block;
    margin: 10px auto;
    border-radius: 2px;
}

#descriptionText {
    padding: 15px;
    font-size: 16px;
    text-align: justify;
    background-color: #959596; /* Fond sombre bleu nuit */
    color: #ffffff; /* Texte blanc pour contraste */
    border: 3px solid #8a2be2; /* Contour violet foncé */
    border-radius: 10px; /* Bords arrondis */
    box-shadow: 4px 4px 10px rgba(138, 43, 226, 0.5), 
                -4px -4px 10px rgba(0, 0, 0, 0.6); /* Ombre violette & noire */
    width: fit-content;
    margin: 20px auto; /* Centre le bloc */
}

---------------fiche timbres------------------------


.stampCategory {
    display: grid; /* Utilise un layout en grille pour aligner les éléments (les timbres) */
    grid-template-columns: repeat(4, 1fr); /* Crée 4 colonnes de largeur égale */
    gap: 20px; /* Espace de 20px entre les éléments (horizontalement et verticalement) */
    justify-content: center; /* Centre la grille horizontalement dans son conteneur (fonctionne si les colonnes n’occupent pas tout l’espace) */
    max-width: 1200px; /* Limite la largeur totale de la grille pour éviter qu'elle prenne toute la largeur de l'écran */
    margin: auto; /* Centre le bloc horizontalement dans la page */
    padding-top: 20px; /* Ajoute un espace de 20px au-dessus de la grille */
    padding-bottom: 20px; /* Ajoute un espace de 20px en dessous de la grille */
}

.centered-stamps {
    display: flex !important; /* Remplace le grid par flex pour gérer dynamiquement le centrage des éléments */
    justify-content: center; /* Centre les éléments enfants horizontalement dans la ligne */
    flex-wrap: wrap; /* Permet aux éléments de passer à la ligne s’il n’y a pas assez de place sur une seule ligne */
    gap: 20px; /* Espace de 20px entre les timbres, comme dans la grille */
    text-align: center;
}


.polaroid {
    display: flex;   
    align-items: center;
    flex-direction: column;
    width: 250px;
    height: auto;
    padding: 15px;
    background: #fff;
    border-radius: 10px;
    border: 6px solid #9370DB; /* Violet assorti */
    box-shadow: 5px 5px 15px rgba(147, 112, 219, 0.5);
    text-align: center;
    transition: transform 0.3s ease-in-out;
}

.polaroid:hover {
    transform: scale(1.05);
}

.polaroid img {
    width: 60%; /* L’image occupe toute la largeur du Polaroid */
    max-width: 280px; /* Agrandit l’image sans déformation */
    height: auto;
    border-radius: 5px;    
    cursor: pointer;
    transition: transform 0.3s ease-in-out;
}

.polaroid img:hover {
    transform: scale(1.2);
}

/* Ajout des détails sous l’image */
.nom-container {
    margin-top: 10px;
    font-weight: bold;
    font-size: 14px;
}

.annee-timbre {
    font-size: 22px;
    color: #4B0082;
}

.commentaire-timbre {
    font-style: italic;
    color: #555;
}

/* 📌 Style pour l’état des timbres */
.etat-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 14px;
    padding: 8px;
    background: rgba(75, 0, 130, 0.1);
    border-radius: 8px;
}

.etat-status span {
    background-color: #4B0082;
    color: white;
    padding: 5px 8px;
    border-radius: 5px;
    font-weight: bold;
}

.content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between; /* Distribue les éléments */
    height: 100%; /* Assure que tout est bien aligné */
}

.timbre-image {
    width: 150px;
    height: auto;
    margin: 10px 0; /* Ajoute un espace uniforme */
}

.numero-timbre {
    font-size: 14px;
    font-weight: bold;
    color: #333;
    margin-top: 6px; /* Ajoute un espace entre l’image et le numéro */
    text-align: center;
}

.etat-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    font-size: 14px;
    font-weight: bold;
    margin-top: 5px;
}