body {
    font-family: 'Oswald', 'Tajawal', 'Noto Naskh Arabic', sans-serif;
    font-size: 14px; /* Taille par défaut */
    line-height: 1.5;
}

/* ----- Drapeaux ----- */
.flag {
  width: 24px;
  height: 16px;
  display: inline-block;
  background-size: cover;
}

.flag.fr { background-image: url("../flags/fr.svg"); }
.flag.gb { background-image: url("../flags/gb.svg"); }
.flag.sa { background-image: url("../flags/sa.svg"); }

/* ----- Image de fond côté gauche ----- */
.bg-cover {
  background-size: cover;
  background-position: center;
}
.bg-side {
  background-image: url("../images/ban1.jpg"); /* mets ton image ici */
}

/* Hauteur minimum confortable pour la section centrale */
.min-vh-75 { min-height: 75vh; }

/* Toujours une bordure entre les colonnes */
[dir="ltr"] .col-image {
  border-right: 1px solid #ddd;
}

[dir="rtl"] .col-image {
  border-left: 1px solid #ddd;
}

/* Séparateur décoratif */
[dir="ltr"] .separator {
  background-image: url("../images/separator-gold.svg");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 4px 85%; /* largeur 4px, hauteur 85% */
}

[dir="rtl"] .separator {
  background-image: url("../images/separator-gold.svg");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 4px 85%;
}

/* Quand la page est en arabe (rtl), on inverse la position du bouton de fermeture */
html[lang="ar"] .modal-header .btn-close {
  margin-left: 0;
  margin-right: auto; /* pousse le bouton à gauche */
}

.user-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;          /* cercle */
    object-fit: cover;           /* cadrage propre */
    border: 3px solid #007bff;   /* contour bleu */
    margin-bottom: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2); /* ombre douce */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.user-avatar:hover {
    transform: scale(1.05); /* léger zoom */
    box-shadow: 0 6px 18px rgba(0,0,0,0.3); /* ombre plus forte */
}

/* pour la modal du détails*/
.modal-body-content {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 14px;
  line-height: 1.7;
  color: #333;
}

/* Titres */
.modal-body-content h6 {
  font-size: 16px;
  color: #0d6efd; /* bleu Bootstrap */
  font-weight: bold;
  margin-top: 15px;
  margin-bottom: 8px;
  border-left: 4px solid #0d6efd;
  padding-left: 8px;
}

/* Paragraphes */
.modal-body-content p {
  margin-bottom: 10px;
  text-align: justify;
}

/* Listes numérotées */
.modal-body-content ol {
  margin-left: 20px;
  margin-bottom: 10px;
  padding-left: 20px;
}
.modal-body-content ol li {
  margin-bottom: 6px;
}

/* Listes à puces */
.modal-body-content ul {
  margin-left: 20px;
  margin-bottom: 10px;
  list-style-type: disc;
  padding-left: 20px;
}
.modal-body-content ul li {
  margin-bottom: 6px;
}
#header_title {
      font-family: 'Michroma', sans-serif;
      font-weight: 100;
      font-style: normal;
    }

/* 🌍 Si langue arabe → adapter direction et police */
    html[lang="ar"] #header_title {
        font-family: 'El Messiri', sans-serif; /* Priorité arabe */
        direction: rtl; 
        text-align: center; /* Tu peux mettre right si tu préfères */
    }

#welcome {
  font-family: 'Gruppo', 'Orbitron', sans-serif;
  font-weight: 400;
  font-style: normal;
  text-align: justify;
  font-size: xx-large;
}
/* 🌍 Si langue arabe → adapter direction et police */
    html[lang="ar"] #welcome {
        font-family: 'cairo', sans-serif; /* Priorité arabe */
        direction: rtl; 
        text-align: justify; /* Tu peux mettre right si tu préfères */
        font-size: x-large;
        font-weight: 400;
    }

.message {
  font-family: 'Michroma', sans-serif;
  font-weight: 400;
  font-style: normal;
  text-align: justify;
  font-size: large;
  direction: ltr;
}
/* 🌍 Si langue arabe → adapter direction et police */
    html[lang="ar"] .message {
        font-family: 'El Messiri', sans-serif; /* Priorité arabe */
        direction: rtl; 
        text-align: justify; /* Tu peux mettre right si tu préfères */
        font-size: x-large;
    }
/*-------------------------*/