/* General styles */
* { 
  box-sizing: border-box; 
}

body { 
  margin: 0; 
  font-family: 'Cairo', Arial, sans-serif; 
  background: #f7f9fc; 
  color: #222; 
}

.container { 
  
  max-width: 1100px; 
  margin: 0 auto; 
  padding: 10px; 
}

/* Header */
.site-header { 
  background: #0056b3;
  background: url("inc/images/cripes.jpg?v=0") no-repeat center center;
  background-size: cover;  color: white; 
  padding: 12px 0; 
}

.site-header .container {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-start; /* commun à LTR et RTL */
}

.site-header img {
  margin: 0 5px;
  width: 50px; 
  height: 50px; 
  display: inline-block;
}

.brand { 
  margin: 0; 
  font-size: 1rem; 
  text-align: center;
}

.nav a { 
  color: white; 
  text-decoration: none; 
  margin: 0 10px; 
}

.lang-switch a { 
  color: white; 
  text-decoration: none; 
  margin: 0 6px; 
  font-weight: 600; 
}

/* RTL / LTR support */
[dir="rtl"] { 
  direction: rtl; 
  text-align: right; 
}

[dir="ltr"] { 
  direction: ltr; 
  text-align: left; 
}

html[dir="ltr"] .site-header .container {
  flex-direction: row;        /* Images à gauche, texte à droite */
}

html[dir="rtl"] .site-header .container {
  flex-direction: row-reverse; /* Images à droite, texte à gauche */
}

/* Main */
main.container { 
  /*background-image: url("inc/images/cripes.jpg");*/
  padding: 20px; 
}

.card { 
  background: white; 
  padding: 16px; 
  border-radius: 8px; 
  box-shadow: 0 2px 6px rgba(0,0,0,0.06); 
  margin-bottom: 16px; 
}

/*.card-index {
  background-image: url("inc/images/cripes.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 250px;
  border: 2px solid red;    /* pour voir si la div s’affiche bien 
  background-color: black;  /* si l’image ne charge pas, tu verras du noir 
}*/


/* Forms */
form label { 
  display: block; 
  margin-top: 10px; 
  font-weight: 600; 
}

input[type="text"], 
input[type="number"], 
input[type="tel"], 
input[type="date"],
input[type="password"], 
textarea, 
select {
  width: 100%; 
  padding: 10px; 
  margin-top: 6px; 
  border: 1px solid #ccc; 
  border-radius: 6px;
}

button { 
  background: #0056b3; 
  color: white; 
  border: none; 
  padding: 10px 14px; 
  border-radius: 6px; 
  cursor: pointer; 
  margin-top: 12px; 
}

button:hover { 
  background: #004080; 
}

/* Footer */
.site-footer { 
  background: #eee; 
  padding: 10px 0; 
  text-align: center; 
  margin-top: 30px; 
}

/* Responsive */
@media (max-width: 1000px) {
  .site-header .container { 
    flex-direction: column; 
    align-items: center; /* centrer en mobile */
  }
  .nav { 
    margin-top: 8px; 
  }
}





/**** Ajout de styles ********/

/* header container en flex */
.site-header .container {
  display: flex;
  flex-wrap: wrap;   /* permet de passer à la ligne si ça déborde */
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* images sur une seule ligne */
.images-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex: 1 1 100%; /* prend toute la ligne */
  margin-bottom: 8px;
}

.images-row img {
  width: 150px;
  height: 150px;
}

/* titre */
.brand {
  flex: 1 1 100%;
  margin: 8px 0;
  font-size: 1.2rem;
}

/* liens */
.nav {
  flex: 1 1 100%;
  margin: 6px 0;
}

.nav a {
  display: inline-block;
  margin: 4px 8px;
  white-space: nowrap; /* évite de couper les mots */
}

/* switch langue */
.lang-switch {
  flex: 1 1 100%;
  margin: 6px 0;
}

.nav a {
  background-color: #3399ff; /* bleu */
  color: white;              /* texte en blanc */
  padding: 8px 14px;         /* espace interne */
  border-radius: 5px;        /* coins arrondis */
  text-decoration: none;     /* pas de soulignement */
  margin: 5px;               /* espace entre les liens */
  display: inline-block;     /* garder le style bouton */
  font-weight: 500;
  transition: background 0.3s ease;
}

.nav a:hover {
  background-color: #003f80; /* bleu plus foncé au survol */
}


/* Responsive : sur petits écrans, les liens s’empilent */
@media (max-width: 600px) {
  .nav a {
    display: block;      /* liens sous forme de liste verticale */
    margin: 6px 0;
  }
}