/* ================= SECTION PROJETS ================= */

.projects-section{
  margin-top:20px;
}

.projects-title{
  font-size:1.2em;
  margin-bottom:15px;
  color:#00695c;
}

/* CONTENEUR HORIZONTAL */
.projects-row{
  display:flex;
  flex-direction:row;       /* disposition horizontale */
  flex-wrap:nowrap;         /* empêche retour à la ligne */
  justify-content:flex-start;
  align-items:stretch;
  gap:10px;                 /* espace entre vignettes */
  overflow-x:auto;          /* scroll horizontal si écran petit */
  padding:10px 5px;
}

/* VIGNETTE */
.project-tile{
  flex:0 0 210px;           /* largeur fixe */
  background:#ffffff;
  border-radius:14px;
  box-shadow:0 6px 15px rgba(0,0,0,0.08);
  overflow:hidden;
  text-align:center;
  transition:transform 0.2s ease, box-shadow 0.2s ease;
  cursor:pointer;
}

/* Effet hover */
.project-tile:hover{
  transform:translateY(-5px);
  box-shadow:0 12px 25px rgba(0,0,0,0.15);
}

/* IMAGE */
.project-tile img{
  width:100%;
  height:150px;
  object-fit:cover;
  display:block;
}

/* TITRE */
.project-tile h3{
  margin:10px 0 5px 0;
  font-size:0.95em;
  color:#00695c;
}

/* DESCRIPTION */
.project-tile p{
  margin-bottom:10px;
  font-size:0.85em;
  color:#2b4b41;
}

 //*** Projet grande envergure ***//

/* ================= PROJETS GRANDE ENVERGURE ================= */

.projects-section{
  margin-top:30px;
  text-align:center;
}

.projects-title{
  font-size:1.5em;
  margin-bottom:25px;
  color:#00695c;
  text-align:center;
}

.projects-row{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  gap:10px;
  flex-wrap:nowrap;
  margin-bottom:40px;
}

.project-tile{
  width:170px;
  background:#ffffff;
  border-radius:14px;
  box-shadow:0 6px 18px rgba(0,0,0,0.08);
  overflow:hidden;
  text-align:center;
  transition:0.2s ease;
}

.project-tile:hover{
  transform:translateY(-5px);
  box-shadow:0 12px 25px rgba(0,0,0,0.15);
}

.project-tile img{
  width:100%;
  height:130px;
  object-fit:cover;
  display:block;
}

.project-tile h3{
  font-size:0.9em;
  margin:8px 5px 3px 5px;
  color:#00695c;
}

.project-tile p{
  font-size:0.75em;
  margin:0 5px 8px 5px;
  color:#2b4b41;
}

/* Texte arabe visible */
.ar-title{
  font-size:1em;
  font-weight:bold;
  color:#004d40;
  direction:rtl;
  margin-top:3px;
}


/* ================= POPUP PROJET ================= */

.project-popup {
    position: absolute;
    display: none;
    width: 320px;                /* ≈ 2x vignette */
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.25);
    padding: 16px;
    text-align: center;
    z-index: 9999;
    transition: all 0.25s ease;
}

.project-popup img {
    width: 100%;
    border-radius: 12px;
}

.project-popup h3 {
    margin: 12px 0 6px 0;
    font-size: 1.05em;
    color: #00695c;
}

.project-popup p {
    margin: 0;
    font-size: 0.9em;
    color: #2b4b41;
}

/* Légère animation */
.project-popup.show {
    transform: scale(1.05);
}

/* Curseur */
.project-tile {
    cursor: pointer;
}