/*===== GOOGLE FONTS =====*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap");
/*===== VARIABLES CSS =====*/
:root {
  --header-height: 3rem;
  --font-semi: 600;
  /*===== Colores =====*/
  /*Purple 260 - Red 355 - Blue 224 - Pink 340*/
  /* HSL color mode */
  --hue-color: 224;
  --first-color: hsl(var(--hue-color), 89%, 60%);
  --second-color: hsl(var(--hue-color), 56%, 12%);
  /*===== Fuente y tipografia =====*/
  --body-font: "Poppins", sans-serif;
  --big-font-size: 2rem;
  --h2-font-size: 1.25rem;
  --normal-font-size: .938rem;
  --smaller-font-size: .75rem;
  /*===== Margenes =====*/
  --mb-2: 1rem;
  --mb-4: 2rem;
  --mb-5: 2.5rem;
  --mb-6: 3rem;
  /*===== z index =====*/
  --z-back: -10;
  --z-fixed: 100;
}
@media screen and (min-width: 968px) {
  :root {
    --big-font-size: 3.5rem;
    --h2-font-size: 2rem;
    --normal-font-size: 1rem;
    --smaller-font-size: .875rem;
  }
}

/*===== BASE =====*/
*, ::before, ::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: var(--header-height) 0 0 0;
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
  color: var(--second-color);
}

h1, h2, p {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/*===== CLASS CSS ===== */
.section-title {
  position: relative;
  font-size: var(--h2-font-size);
  color: var(--first-color);
  margin-top: var(--mb-2);
  margin-bottom: var(--mb-4);
  text-align: center;
}
.section-title::after {
  position: absolute;
  content: "";
  width: 64px;
  height: 0.18rem;
  left: 0;
  right: 0;
  margin: auto;
  top: 2rem;
  background-color: var(--first-color);
}

.section {
  padding-top: 3rem;
  padding-bottom: 2rem;
}

/*===== LAYOUT =====*/
.bd-grid {
  max-width: 1024px;
  display: grid;
  margin-left: var(--mb-2);
  margin-right: var(--mb-2);
}

.l-header {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-fixed);
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(146, 161, 176, 0.15);
}

/*===== NAV =====*/
.nav {
  height: var(--header-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: var(--font-semi);
}
@media screen and (max-width: 767px) {
  .nav__menu {
    position: fixed;
    top: var(--header-height);
    right: -100%;
    width: 80%;
    height: 100%;
    padding: 2rem;
    background-color: var(--second-color);
    transition: 0.5s;
  }
}
.nav__item {
  margin-bottom: var(--mb-4);
}
.nav__link {
  position: relative;
  color: #fff;
}
.nav__link:hover {
  position: relative;
}
.nav__link:hover::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 0.18rem;
  left: 0;
  top: 2rem;
  background-color: var(--first-color);
}
.nav__logo {
  color: var(--second-color);
}
.nav__toggle {
  color: var(--second-color);
  font-size: 1.5rem;
  cursor: pointer;
}

/*Active menu*/
.active-link::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 0.18rem;
  left: 0;
  top: 2rem;
  background-color: var(--first-color);
}

/*=== Show menu ===*/
.show-menu {
  right: 0;
}

/*===== HOME =====*/
.home {
  position: relative;
  row-gap: 5rem;
  padding: 4rem 0 5rem;
}
.home__data {
  align-self: center;
}
.home__title {
  font-size: 1.7rem;    /* plus petit */
  line-height: 1.2;
  margin-bottom: var(--mb-4);
}
.home__title-color {
  color: var(--first-color);
}
.home__social {
  display: flex;
  flex-direction: column;
}
.home__social-icon {
  width: max-content;
  margin-bottom: var(--mb-2);
  font-size: 1.5rem;
  color: var(--second-color);
}
.home__social-icon:hover {
  color: var(--first-color);
}
.home__img {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 230px;       /* AVANT: 220px */
}
.home__blob {
  fill: var(--first-color);
}
.home__blob-img {
  width: 230px;       /* AVANT: 360px */
  transform: translate(10px, 20px); /* ajuste la position dans le bleu */
}

/*BUTTONS*/
.button {
  display: inline-block;
  background-color: var(--first-color);
  color: #fff;
  padding: 0.75rem 2.5rem;
  font-weight: var(--font-semi);
  border-radius: 0.5rem;
  transition: 0.3s;
}
.button:hover {
  box-shadow: 0px 10px 36px rgba(0, 0, 0, 0.15);
}

/* ===== ABOUT =====*/
.about__container {
  row-gap: 2rem;
  text-align: center;
}
.about__subtitle {
  margin-bottom: var(--mb-2);
}
.about__img {
  justify-self: center;
}
.about__img img {
  width: 200px;
  border-radius: 0.5rem;
}

/* ===== SKILLS =====*/
.skills__container {
  row-gap: 2rem;
  text-align: center;
}
.skills__subtitle {
  margin-bottom: var(--mb-2);
}
.skills__text {
  margin-bottom: var(--mb-4);
}
.skills__data {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  font-weight: var(--font-semi);
  padding: 0.5rem 1rem;
  margin-bottom: var(--mb-4);
  border-radius: 0.5rem;
  box-shadow: 0px 4px 25px rgba(14, 36, 49, 0.15);
}
.skills__icon {
  font-size: 2rem;
  margin-right: var(--mb-2);
  color: var(--first-color);
}
.skills__names {
  display: flex;
  align-items: center;
}
.skills__bar {
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: var(--first-color);
  height: 0.25rem;
  border-radius: 0.5rem;
  z-index: var(--z-back);
}
.skills__html {
  width: 95%;
}
.skills__css {
  width: 85%;
}
.skills__js {
  width: 65%;
}
.skills__ux {
  width: 85%;
}
.skills__img {
  border-radius: 0.5rem;
}

/* ===== WORK =====*/
.work__container {
  row-gap: 2rem;
}
.work__img {
  box-shadow: 0px 4px 25px rgba(14, 36, 49, 0.15);
  border-radius: 0.5rem;
  overflow: hidden;
}
.work__img img {
  transition: 1s;
}
.work__img img:hover {
  transform: scale(1.1);
}
.work__title {
  text-align: center;
  font-size: 1rem;
  color: var(--second-color);
  margin-top: 0.8rem;
  font-weight: 600;
}
/* ===== CONTACT =====*/
.contact__input {
  width: 100%;
  font-size: var(--normal-font-size);
  font-weight: var(--font-semi);
  padding: 1rem;
  border-radius: 0.5rem;
  border: 1.5px solid var(--second-color);
  outline: none;
  margin-bottom: var(--mb-4);
}
.contact__button {
  display: block;
  border: none;
  outline: none;
  font-size: var(--normal-font-size);
  cursor: pointer;
  margin-left: auto;
}

/* ===== FOOTER =====*/
.footer {
  background-color: var(--second-color);
  color: #fff;
  text-align: center;
  font-weight: var(--font-semi);
  padding: 2rem 0;
}
.footer__title {
  font-size: 2rem;
  margin-bottom: var(--mb-4);
}
.footer__social {
  margin-bottom: var(--mb-4);
}
.footer__icon {
  font-size: 1.5rem;
  color: #fff;
  margin: 0 var(--mb-2);
}
.footer__copy {
  font-size: var(--smaller-font-size);
}

/* ===== MEDIA QUERIES=====*/
@media screen and (max-width: 320px) {
  .home {
    row-gap: 2rem;
  }
  .home__img {
    width: 200px;
  }
}
@media screen and (min-width: 576px) {
  .home {
    padding: 4rem 0 2rem;
  }
  .home__social {
    padding-top: 0;
    padding-bottom: 2.5rem;
    flex-direction: row;
    align-self: flex-end;
  }
  .home__social-icon {
    margin-bottom: 0;
    margin-right: var(--mb-4);
  }
  .home__img {
    width: 260px;
    bottom: 10%;
  }
  
.home__photo {
  width: 340px;
  border-radius: 50%; /* facultatif, pour un effet rond */
  object-fit: cover;
}
  .about__container {
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    text-align: initial;
  }
  .skills__container {
    grid-template-columns: 0.7fr;
    justify-content: center;
    column-gap: 1rem;
  }
  .work__container {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 2rem;
    padding-top: 2rem;
  }
  .contact__form {
    width: 360px;
    padding-top: 2rem;
  }
  .contact__container {
    justify-items: center;
  }
}
@media screen and (min-width: 768px) {
  body {
    margin: 0;
  }
  .section {
    padding-top: 4rem;
    padding-bottom: 3rem;
  }
  .section-title {
    margin-bottom: var(--mb-6);
  }
  .section-title::after {
    width: 80px;
    top: 3rem;
  }
  .nav {
    height: calc(var(--header-height) + 1.5rem);
  }
  .nav__list {
    display: flex;
    padding-top: 0;
  }
  .nav__item {
    margin-left: var(--mb-6);
    margin-bottom: 0;
  }
  .nav__toggle {
    display: none;
  }
  .nav__link {
    color: var(--second-color);
  }
  .home {
    padding: 8rem 0 2rem;
  }
  .home__img {
    width: 400px;
    bottom: 10%;
  }
  .about__container {
    padding-top: 2rem;
  }
  .about__img img {
    width: 300px;
  }
  .skills__container {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 2rem;
    align-items: center;
    text-align: initial;
  }
  .work__container {
    grid-template-columns: repeat(3, 1fr);
    column-gap: 2rem;
  }
}
@media screen and (min-width: 992px) {
  .bd-grid {
    margin-left: auto;
    margin-right: auto;
  }
  .home {
    padding: 10rem 0 2rem;
  }
  .home__img {
    width: 450px;
  }
}
/* ===== IMAGE POPUP ===== */
.img-modal{
  display:none;
  position:fixed;
  z-index:9999;
  padding-top:60px;
  left:0;
  top:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.9);
}

.img-modal-content{
  margin:auto;
  display:block;
  max-width:90%;
  max-height:90vh;
}

.img-close{
  position:absolute;
  top:20px;
  right:40px;
  color:#fff;
  font-size:40px;
  cursor:pointer;
}


/* ===== DESIGN IMPROVEMENTS (2026) ===== */
:root{
  /* smoother spacing + readable text */
  --radius: 16px;
  --shadow: 0 10px 30px rgba(14,36,49,0.10);
  --shadow-soft: 0 6px 18px rgba(14,36,49,0.08);
}

/* Better typography */
body{
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background: #fff;
}

p{ 
  line-height: 1.75;
}
h1, h2, h3{
  letter-spacing: -0.01em;
}

/* Safer container gutters on mobile */
.bd-grid{
  width: min(1100px, 100%);
  padding-left: 1rem;
  padding-right: 1rem;
  margin-left: auto;
  margin-right: auto;
}

/* Make sections breathe */
.section{
  padding-top: 4rem;
  padding-bottom: 3.25rem;
}
@media (max-width: 720px){
  .section{
    padding-top: 3.25rem;
    padding-bottom: 2.5rem;
  }
}

/* Titles: nicer scale */
.section-title{
  font-size: clamp(1.35rem, 2.2vw, 2rem);
  margin-bottom: 2.25rem;
}
.section-title::after{
  background: rgba(0,0,0,0.08);
  height:1px;
}


/* NAV: better tap targets + subtle border */
.l-header{
  border-bottom: 1px solid rgba(18,18,18,0.06);
}
.nav{
  height: calc(var(--header-height) + 1.1rem);
}
.nav__link{
  padding: .4rem 0;
}
@media screen and (max-width: 767px){
  .nav__menu{
    width: min(360px, 88%);
    border-left: 1px solid rgba(255,255,255,0.08);
  }
  .nav__item{
    margin-bottom: 1.3rem;
  }
}

/* Cards for Awards */
.award-item{
  background:#fff;
  border: 1px solid rgba(18,18,18,0.10);
  border-radius: var(--radius);
  padding: 1rem 1rem;
  box-shadow: var(--shadow-soft);
}

/* Project blocks: look like cards */
.skills__container{
  gap: 1.5rem;
}
.skills__container.bd-grid > div{
  background:#fff;
  border: 1px solid rgba(18,18,18,0.10);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow-soft);
}
.skills__container.one-col > div{
  width: 100%;
}

/* Better text alignment on desktop */
@media (min-width: 768px){
  .skills__container{
    text-align: left;
  }
  .about__container{
    text-align: left;
  }
}

/* Images: consistent rounding and hover */
.skills__img,
.work__img{
  border-radius: var(--radius);
}
.work__img{
  box-shadow: var(--shadow);
}
.work__img img{
  will-change: transform;
}

/* Make map look clickable */
#mapImage{
  cursor: zoom-in;
}

/* Contact buttons wrap nicely */
.contact-ctas{
  gap: 10px;
}

/* Improve lists */
ul{
  padding-left: 1.1rem;
}
li{
  margin: .4rem 0;
}

/* Popup: center + animate a bit */
.img-modal{
  padding-top: 4.5rem;
}
.img-modal-content{
  border-radius: 12px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.35);
  animation: popIn .18s ease-out;
}
@keyframes popIn{
  from{ transform: scale(.98); opacity: .6; }
  to{ transform: scale(1); opacity: 1; }
}
/* CARD HOVER */
.skills__container > div,
.work__item,
.award-item{
  transition: all 0.35s ease;
}

.skills__container > div:hover,
.work__item:hover,
.award-item:hover{
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}
.skills__img{
  transition: transform .5s ease;
}

.skills__img:hover{
  transform: scale(1.03);
}
.cta-min{
  transition: all .25s ease;
}

.cta-min:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}
.nav{
  transition: all .3s ease;
}

.l-header{
  backdrop-filter: blur(8px);
  background: rgba(255,255,255,0.75);
}
.img-modal-content{
  animation: zoom .4s ease;
}

@keyframes zoom{
  from{ transform:scale(.8); opacity:0 }
  to{ transform:scale(1); opacity:1 }
}
/* container awards full width */
#awards .awards-grid{
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

/* très grand écran */
@media (min-width:1400px){
  #awards .awards-grid{
    max-width: 1300px;
  }
}

/* mobile */
@media (max-width:768px){
  #awards .awards-grid{
    grid-template-columns: 1fr;
    max-width: 95%;
  }
}

.award-item{
  height:100%;
}
/* ===== AWARDS FIX: 2 colonnes desktop, 1 colonne mobile (override fort) ===== */
#awards .awards-grid{
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  justify-content: stretch !important;
  align-items: stretch;
  gap: 1.5rem;
}

/* Mobile */
@media (max-width: 768px){
  #awards .awards-grid{
    grid-template-columns: 1fr !important;
  }
}
/* ===== AWARDS: bigger centered logos ===== */
#awards .award-item{
  text-align: center;
}

#awards .award-logo{
  width: 96px;          /* bigger than 70px */
  max-width: 110px;     /* safe limit */
  height: auto;
  display: block;
  margin: 0 auto;
}
#awards .award-logo--iiba{
  width: 140px;
  max-width: 160px;
  height: auto;
}

/* ===== MOBILE NAV BACKGROUND FIX ===== */
@media screen and (max-width: 767px){

  .nav__menu{
    background: #121212 !important;   /* solid dark */
    backdrop-filter: none !important;
    box-shadow: -2px 0 20px rgba(0,0,0,0.25);
  }

  .nav__link{
    color: #fff !important;
  }
}

/* ===== BIGGER LOGOS — SELECTED PROJECTS ===== */

#case-studies .section-brand__logo{
  width: 320px;       /* was ~240 */
  max-height: none;
}

#case-studies img[alt="Doman Innovation Studio"]{
  max-width: 240px !important;
}

#case-studies img[alt="Digital Transformation Center Tunisia"]{
  max-width: 260px !important;
}

/*
  Enlarge transition logos within the case studies section. The original design
  constrained these logos to 220–280 px widths, which resulted in them being
  barely noticeable on desktop screens. We relax these restrictions by
  allowing the logos to scale up while remaining responsive on smaller
  devices. The `min(90vw, 420px)` expression ensures the images never
  exceed 90% of the viewport width and cap at 420 px, while the
  `max-height` prevents them from growing too tall.
*/
#case-studies img[alt="Alien Dimension"],
#case-studies img[alt="The University of Utah"],
#case-studies img[alt="GIZ Tunisia"]{
  width: min(90vw, 420px) !important;
  max-height: 150px !important;
  height: auto !important;
  object-fit: contain !important;
}
#awards .award-logo--iiba{
  width: 200px !important;
  height: auto !important
}

/*
  Mobile navigation fix: On narrow screens the hamburger menu previously
  displayed an 80%‑width panel while the header bar stretched full width,
  leaving a mismatched bar at the top. This rule expands the menu to
  fill the entire viewport width below the header and ensures a consistent
  background for both the menu and the list. Adjust `height` to fill the
  remaining viewport after subtracting the header height.
*/
@media screen and (max-width: 767px) {
  .nav__menu {
    width: 100% !important;
    left: 0 !important;
    right: auto !important;
    top: var(--header-height);
    height: calc(100vh - var(--header-height));
    background-color: #fff;
  }
  .nav__list {
    background-color: #fff;
  }
}
/* ✅ FORCE mobile menu slide from the right (override all other rules) */
@media (max-width: 767px){
  #nav-menu.nav__menu{
    position: fixed !important;
    top: var(--header-height) !important;
    left: auto !important;
    right: -100% !important;     /* hidden */
    width: 80% !important;
    height: calc(100vh - var(--header-height)) !important;
    overflow-y: auto !important;
    z-index: 9999 !important;
  }

  #nav-menu.nav__menu.show-menu{
    right: 0 !important;         /* visible */
  }
}
#awards .award-logo{
  width: 160px;
  max-width: 100%;
}

@media (min-width:768px){
  #awards .award-logo{
    width: 220px;
  }
}