/* Style additional Sid Housni */
/* citation texte arabe page 2*/
/* Style pour l'article en arabe */

.arabic-text {
    font-family: 'Arslan', sans-serif; /* Appliquer la police Arslan */
    font-size: 32px;                   /* Taille du texte */
    direction: rtl;                    /* Texte de droite à gauche */
    text-align: right;                 /* Aligner le texte à droite */
    color: white;                        /* Couleur du texte */
    margin: 2px 20px 20px 20px;       /* Marges : réduire la marge supérieure */
    line-height: 1.0;                  /* Espacement entre les lignes */
}
		
header h3.arabic-title {
    font-size: 36px; /* Taille plus grande pour le titre arabe */
    font-family: 'Arslan', sans-serif; /* Police personnalisée pour le texte arabe */
	margin-bottom: 0px; /* Un petit espace sous le titre */
}

.arabic-title {
    color: green; /* Appliquer la couleur verte */
}

h3 {
    color: green; /* Garde la couleur verte */
    padding-bottom: 10px;
    font-size: 18px; /* Ajuste la taille du texte ici */
}

/* param positions citations */

/* param positions citations */
.tm-bg-white-transparent {
    margin: 20px; /* Applique une marge de 20px partout autour de l'article */
    margin-left: 55px; /* Ajoute une marge de 30px à gauche */
    padding: 40px; /* Ajoute un padding de 40px à l'intérieur de l'article */
    max-width: 340px; /* Limite la largeur maximale de l'article à 340px */
    width: 100%; /* Permet à l'article de prendre toute la largeur disponible, mais ne dépasse pas la largeur maximale de 340px */
    color: white; /* Définit la couleur du texte en blanc */
	background-color: rgba(0, 0, 0, 0.3); /* Fond transparent sombre */
    border-bottom: 10px solid #f26f21; /* Bordure inférieure orange */
    
}

.tm-bg-white-transparent-page3 {
    margin-left: 100px; /* Décalage plus important à gauche sur la page 3 */
}

.row {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	margin-right: auto;
	margin-left: auto;
	}

@media screen and (max-width: 540px) {
	.tm-address-box {
		margin-bottom: 50px;
	}

/* plus de poesie */

/*---------------------------------------
  CUSTOM BUTTON Citation avec Ruban Rouge             
-----------------------------------------*/
.custom-btn-cit 
  background: var(--secondary-color);
  border-radius: 100px;
  color: var(--white-color);
  font-size: var(--copyright-text-font-size);
  font-weight: var(--font-weight-bold);
  padding: 12px 24px;
}

.custom-btn:hover {
  background: var(--primary-color);
  color: var(--white-color);
}

.custom-bg-primary {
  background: var(--primary-color);
}

.custom-bg-primary:hover {
  background: var(--white-color);
  color: var(--dark-color);
}

/* photo au top */
.navbar-photo {
    height: 53px;
    width: 40px;
    margin-left: 10px;
}

/* empacement bouton ds ms-sid.html */

/* Conteneur des boutons */
.button-container {
    position: relative; /* Le bouton se positionnera par rapport à ce conteneur */
    width: 100%; /* Ajustez selon vos besoins */
    height: 200px; /* Hauteur du conteneur */
    border: 1px solid transparent; /* Optionnel : pour visualiser le conteneur */
}

/* Style des boutons */
.custom-btn.btn-biographie, 
.custom-btn.btn-music, 
.custom-btn.btn-index {
    width: 150px; /* Largeur uniforme pour tous les boutons */
    padding: 12px 0; /* Ajuste le padding pour centrer le texte */
    text-align: center; /* Aligne le texte au centre */
    position: absolute; /* Positionnement relatif au conteneur */
    top: 200px; /* Même hauteur pour tous les boutons */
}

/* Position des boutons */
.custom-btn.btn-biographie {
    left: 10px; /* Position du bouton Biographie */
}

.custom-btn.btn-music {
    left: 180px; /* Décalage à droite pour le bouton Music */
}

.custom-btn.btn-index {
    left: 350px; /* Décalage à droite pour le bouton Retour à l'index */
}

/* Positionnement du lien en haut à gauche */
.brand-top-left {
    position: absolute; /* Le positionnement absolu est basé sur le conteneur parent ayant position: relative */
    top: 10px; /* Distance du haut */
    left: 20px; /* Distance de la gauche */
    font-size: 1.5rem; /* Ajuste la taille de la police */
    font-weight: bold; /* Gras pour plus de visibilité */
    z-index: 10; /* Assure que le lien reste au-dessus des autres éléments */
}

/* Ajout d'un conteneur relatif pour la section */
.section-hero {
    position: relative; /* Permet au lien avec position:absolute de se référer à cette section */
}

/* textes arabe home page */

.arabic-text-1 {
    font-family: 'Arslan', sans-serif; /* Police Arslan */
    font-size: 48px; /* Taille spécifique pour 'مرحبا بكم' */
    direction: rtl; /* Texte de droite à gauche */
    text-align: right; /* Alignement à droite */
    color: white; /* Couleur du texte en blanc */
    margin: 2px 20px 20px 20px; /* Marges réduites */
    line-height: 1.0; /* Espacement entre les lignes */
}

.arabic-text-2 {
    font-family: 'Arslan', sans-serif; /* Police Arslan */
    font-size: 72px; /* Taille spécifique pour 'أهلا بكم في عالمي وإلهاماتي...' */
    direction: rtl; /* Texte de droite à gauche */
    text-align: right; /* Alignement à droite */
    color: white; /* Couleur du texte en blanc */
    margin: 0 20px 20px 20px; /* Marges ajustées */
    line-height: 1.2; /* Espacement entre les lignes */
    letter-spacing: 0.5px; /* Espacement légèrement augmenté */
}





/* section biographie */

.bio-text-container {
    display: flex;
    justify-content: center; /* Centre les cadres horizontalement */
    gap: 20px; /* Espace entre les cadres */
    margin-top: 20px;
    flex-wrap: wrap; /* Permet aux cartes de passer à la ligne si nécessaire */
}


.bio-card {
    flex: 0 1 600px; /* Définit une largeur de base */
    max-width: 100%; /* Empêche la carte de dépasser la largeur du conteneur */
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #fff; /* Assurez-vous que le fond est bien blanc */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: left; /* Aligne le texte à gauche */
    color: #000; /* Définir la couleur du texte en gris foncé */
}


.bio-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.bio-card-content {
    font-size: 1rem;
    line-height: 1.5;
    color: #666;
}

/* Réponse pour les petits écrans */
@media (max-width: 768px) {
    .bio-card {
        flex: 0 1 100%; /* Les cartes prennent toute la largeur sur petits écrans */
        margin-bottom: 20px; /* Ajoute un espace entre les cartes empilées */
    }
}


/* texte arabe  bio Sid*/

.arabic-text-bio {
    background-color: transparent; /* Supprime la couleur de fond */
    border: none; /* Retire les bordures */
    margin: 0; /* Aligne avec le contenu du parent */
    padding: 0; /* Réduit les marges internes */
    font-family: 'Amiri', serif; /* Conserve la police pour l'arabe */
    text-align: right;
    direction: rtl;
    font-size: 1rem; /* Uniformise la taille de police */
    line-height: 1.5; /* Harmonise l'espacement des lignes */
    color: inherit; /* Hérite de la couleur du parent */
	font-size: 20px; /* Taille spécifique pour Biography */
}

.centered-title {
    text-align: center;
    font-size: 2rem; /* Augmente la taille du texte (par exemple, 2rem) */
    font-weight: bold; /* Optionnel : rend le titre plus visible */
}


/* Style de la ligne de séparation */
.separator {
    border: 0;
    border-top: 2px solid #ccc; /* Couleur et épaisseur de la ligne */
    margin: 10px 0; /* Espacement au-dessus et au-dessous de la ligne */
}

/* Section Music */
/* Contenu de la section Music */
.music {
    display: flex;
    flex-direction: column; /* Empile les enfants (titre + colonnes) */
    align-items: center; /* Centre les éléments horizontalement */
    padding: 20px 10px;
    background-color: #7f7f7f;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    max-width: 1200px;
    margin: 50px auto; /* Centre horizontalement et ajoute un espace au-dessus */
    color: #ffffff;
}

/* Container de la musique */
.music-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    margin-top: 20px;
    
	/* background-color: #003366; /* Couleur de fond ajoutée bleu */
	/* background-color: #f9c10b; /* Couleur de fond ajoutée jaune */
}

/* Colonnes de musique */

.music-column {
    flex: 0 1 calc(30% - 10px); /* Réduit la largeur relative des colonnes */
    margin: 10px; /* Espacement entre les colonnes */
    display: flex;
    justify-content: center;
    border: 2px solid #ccc;
    padding: 10px;
    border-radius: 8px;
    background-color: #ffffff;
    max-width: 300px; /* Réduit la largeur maximale des colonnes */
    box-sizing: border-box; /* Garde un bon alignement des colonnes */
}


/* Ajuster la taille des iframes */
.music-column iframe {
    width: 100%;
    height: 100px;
}

/* Responsive pour les écrans moyens */
@media (max-width: 768px) {
    .music-column {
        flex: 0 1 calc(50% - 20px); /* 2 colonnes pour les écrans moyens */
    }
}

/* Responsive pour les petits écrans */
@media (max-width: 480px) {
    .music-column {
        flex: 0 1 100%; /* 1 colonne pleine largeur pour les petits écrans */
    }
}

.music-column img {
    width: 100%;
    height: auto;
    object-fit: cover; /* Cette propriété garantit que l'image couvre l'espace sans déformer l'image */
}

.title-container {
	background-color: #f9c10b; /* Couleur de fond ajoutée */
}

.custom-text-size {
    font-size: 1.5rem; /* Ajustez la taille selon vos besoins */
}


.link-spacing {
    margin-right: 20px; /* Ajustez la valeur selon vos besoins */
}


.tab-content p, .tab-content h3, .nav-link {
    color: #333; /* Couleur gris foncé pour un bon contraste */
}

/* section_5  poemes */

.nav-tabs {
    border-bottom: 0; /* Pas de ligne de séparation sous les onglets */
}

.nav-tabs .nav-link {
    display: flex; /* Affiche les textes sur une ligne à l'intérieur d'un lien */
    align-items: center; /* Aligne verticalement le contenu */
    justify-content: flex-start; /* Aligne horizontalement à gauche */
    flex-wrap: nowrap; /* Empêche un retour à la ligne à l'intérieur d'un lien */
    font-weight: normal; /* Texte normal par défaut */
    border: 0; /* Supprime les bordures */
    border-left: 5px solid var(--p-color); /* Ajoute une barre colorée à gauche */
    padding: 10px 15px; /* Espacement interne */
    margin-bottom: 15px; /* Ajoute un espacement entre les liens */
    color: var(--p-color); /* Couleur du texte */
    background-color: var(--section-bg-color); /* Couleur de fond */
    transition: all 0.3s ease-in-out; /* Effet fluide sur hover */
    width: 100%; /* Assure que le lien prend toute la largeur */
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-link:hover {
    border-left-color: var(--secondary-color); /* Change la couleur de la bordure gauche */
    background-color: var(--white-color); /* Change le fond quand actif ou hover */
    color: var(--primary-color); /* Change la couleur du texte */
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.1); /* Ajoute une ombre subtile */
}

.nav-tabs .nav-link span {
    display: inline-block; /* Affiche les textes sur une ligne */
    vertical-align: middle; /* Aligne les textes correctement */
    font-size: 1em; /* Taille par défaut */
    font-weight: bold; /* Texte en gras */
    color: var(--p-color); /* Couleur du texte */
}

.nav-tabs .nav-link .arabic {
    font-size: 1.2em; /* Texte arabe légèrement plus grand */
    font-weight: bold; /* Texte arabe en gras */
    margin-left: 5px; /* Espace entre le texte français et arabe */
}

	/* flag  header */
	.custom-text-size {
    display: flex;
    align-items: center; 
    gap: 5px; /* Ajoute un espace entre les images */
}


/*lien : texte + photo sur la même ligne  */

.projects-title-wrap {
    display: flex;
    align-items: center; /* Aligne verticalement les éléments */
    gap: 10px; /* Ajoute un espacement entre le texte et le drapeau */
}

/* texte bio*/
.citation-text {
  color: #333;
  font-size: 16px; /* Ajuste la taille du texte selon tes préférences */
}