/**************************************************************
 * Nom .......... : style_zen.css
 * Rôle ......... : Feuille de style principale du portfolio.
 *                  Elle applique la charte graphique, le responsive design,
 *                  les animations et le style général du site web.
 * Auteur ....... : Nourreddine ASROUN – Étudiant n° 24000377
 * Version ...... : V1.0 du 19/07/2025
 * Licence ...... : Réalisé dans le cadre du cours Informatique Fondamentale Partie 2
 *                  à l’Université Paris 8
 * Technologies . : CSS3, Flexbox, Media Queries, Google Fonts, Bootstrap 4
 * Utilisation .. : Fichier lié à la page index.html pour le style global,
 *                  les couleurs, polices, mise en page, responsive mobile, etc.
 **************************************************************/


/* Importer une police élégante */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');

/* général utilisayion de police Roboto*/
body {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #222;
  background: linear-gradient(135deg, #dff6ff, #a0e7e5); /* dégradé doux bleu-vert */
  margin: 0;
  padding: 0;
}

/* Container centré */
.container, .section-container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* Bannière */
header img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* MenuNavigation */
.nav-tabs {
  background-color: #2c3e50;
  border: none;
  border-radius: 8px;
  overflow: hidden;
  margin-top: 20px;
}
.nav-tabs .nav-link {
  color: #ecf0f1;
  font-weight: bold;
  transition: margine-right 0.3s; /* Permet de definir la transition entre deux états */
}
.nav-tabs .nav-link:hover {
  background-color: #34495e;
}
.nav-tabs .nav-link.active {
  background-color: #1abc9c;
  color: white;
}

/* Titres */
h1, h2, h3 {
  margin-top: 8%; /* je effecue une aération des texte */
  font-weight: 700;
  color: #2c3e50;
}

/* Section Accueil */
#accueil {

  margin-top: 5%;
  text-align: center;
  background: white;
  padding: 50px;
  border-radius: 15px;
  box-shadow: 0 5px 8px rgba(198, 36, 36, 0.1);
}

/* je mets les section dans des box */
#projets {

  margin-top: 2%;
  text-align: center;
  background: white;
  padding: 0%;
  border-radius: 15px;
  box-shadow: 0 5px 8px rgba(198, 36, 36, 0.1);
}



/* Images */
img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 20px auto;
}

/* Tableau stylisé */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 30px 0;
  background-color: white;
  box-shadow: 0 1px 5px rgba(0,0,0,0.1);
}
th, td {
  border: 1px solid #ddd;
  padding: 12px;
  text-align: center;
}
th {
  background-color: #1abc9c;
  color: white;
}
tr:nth-child(even) {
  background-color: #f2f2f2;
}
tr:hover {
  background-color: #e1e3f5;
}

/* Footer */
footer {
  background-color: #2c3e50;
  color: white;
  text-align: center;
  padding: 30px 10px;
  margin-top: 40px;
  border-top: 4px solid rgb(26, 188, 156); /*J'ajoute une bordure pour plus de style*/
}

/* Effets des boutons et les liens  */
a {
  color: #1abc9c;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* les floats*/
.left-col {
  float: left;
  width: 65%;
}
.right-col {
  float: right;
  width: 30%;
}
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
section::after {
  content: "";
  display: block;
  clear: both;
}



/* pour gérer l'empolement des collones sur els mobiles */
@media (max-width: 768px) {
  .left-col, .right-col {
    float: none;
    width: 100%;
  }
}