/*
 Theme Name:   Hello Elementor Child
 Description:  Thème enfant pour Hello Elementor
 Author:       Ton Nom
 Template:     hello-elementor
 Version:      1.0.0
*/


/* 1. On neutralise le container parent d'ElementsKit */
.ekit-template-content-markup.ekit-template-content-header {
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

#social-new {
  display: flex !important;
  flex-direction: row !important; /* Aligne en ligne */
  justify-content: flex-end !important; /* Aligne à droite */
  gap: 20px; /* Espace entre les icônes */
  align-items: center; /* Centre verticalement */
}

#social-new a {
  display: flex !important;
  align-items: center;
  justify-content: center;
  height: auto !important;
  width: auto !important;
  text-decoration: none;
  padding: 5px;
}

.social-cust {
  width: 36px !important;
  height: auto;
}

/* Menu */
#new_menu a {
  padding: 7px 11px;
}

#new_menu .current-menu-item > a {
  background-color: rgba(0, 0, 0, 0.15);
  font-weight: 600;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.home #new_menu .current-menu-item > a {
  background: none !important;
  font-weight: initial !important;
}

/* --- MENU --- */
/* --- DESKTOP --- */
.navigation-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
}

.nav-list {
  display: flex;
  list-style: none;
  gap: 15px;
  margin: 0;
  padding: 0;
}

.nav-list a {
  text-decoration: none;
  color: #FFFFFF;
  font-weight: 400;
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  transition: 0.3s;
}

.nav-list a:hover {
  color: #FFFFFF;
}

.burger-btn,
.mobile-only-header {
  display: none;
}

/* --- MODE TABLETTE & MOBILE (< 1024px) --- */

@media (min-width: 1025px) {
    #menu-overlay.menu-content {
        display: block !important;
    }
}

@media (max-width: 1024px) {

  #header-new #nav-new,
  #header-new #social-new {
    width: 50%;
    align-self: center;
  }

  #header-new button:focus, #header-new button:hover {
    background-color:transparent !important;
  }

  .burger-btn {
    display: block;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    position: initial !important;
    right: 0px !important;
    z-index: 100;
  }

  .burger-btn img {
    width: 56px;
    height: auto;
    display: block;
  }

  #social-new {
  justify-content: flex-start !important; /* Aligne à gauche */
  }

  #nav-new {
    display: flex !important;
    flex-direction: row !important; /* Aligne en ligne */
    justify-content: flex-end !important; /* Aligne à droite */ 
  }

  #menu-overlay.menu-content {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #404e7c;
    padding: 20px;
    z-index: 999999;
    border-radius: 0;
  }

  #menu-overlay.menu-content.is-open {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    animation: fadeInMenu 0.3s ease-out;
  }

  .nav-list {
    flex-direction: column;
    gap: 0;
  }

  .nav-list li {
    border-bottom: 1px solid #ffffff21;
  }

  .nav-list li:last-child {
    0border:none;
  }

  .nav-list a {
    display: block;
    padding: 15px 0 !important;
    width: 100%;
    color: #FFFFFF;
    font-family: 'Inter', sans-serif;
    font-size: 1.5rem;
    font-weight: 400 !important;
    text-align:center !important;
  }

  /* Couleur sombre pour lisibilité sur blanc */
  .mobile-only-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
  }

  .close-btn {
    font-family:'Inter', sans-serif;
    font-size: 4.5rem;
    font-weight:300;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 0.4;
    color: #FFFFFF;
  }

  #new_menu .current-menu-item > a {
  background-color:transparent;
}
}

@keyframes fadeInMenu {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width:767px) {
    #header-new #social-new {
    width:60%;    
    }
    #header-new #nav-new {
    width:40%;    
    }

  #social-new {
  gap:7px;
}
}

@media (max-width:350px) {
    #header-new #social-new {
    display:none !important;    
    }
    #header-new #nav-new {
    width:100%;    
    }
}



/* 1. Force la grille sur le conteneur */
.wp-projets {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  grid-auto-rows: 10px !important;
  gap: 15px !important;
  /* --- footer en bas --- */
  grid-auto-flow: dense;
  overflow: hidden;
}

/* 2. Cible les enfants directs du conteneur grid */
.wp-projets > * {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important; /* Retire les marges d'Elementor qui cassent la grille */
}

/* 3. Force la hauteur de toute la hiérarchie interne */
.wp-projets img,
.wp-projets a,
.wp-projets .wp-projet-card,
.wp-projets .wp-projet-card > div {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* 4. Application des spans sur les enfants directs */
.wp-projets > *:nth-child(1) { grid-column: span 3 !important; grid-row: span 16 !important; }
.wp-projets > *:nth-child(2) { grid-column: span 2 !important; grid-row: span 13 !important; }
.wp-projets > *:nth-child(3) { grid-column: span 2 !important; grid-row: span 20 !important; }
.wp-projets > *:nth-child(4) { grid-column: span 2 !important; grid-row: span 19 !important; }
.wp-projets > *:nth-child(5) { grid-column: span 3 !important; grid-row: span 16 !important; }
.wp-projets > *:nth-child(6) { grid-column: span 2 !important; grid-row: span 12 !important; }
.wp-projets > *:nth-child(7) { grid-column: span 4 !important; grid-row: span 17 !important; }
.wp-projets > *:nth-child(8) { grid-column: span 3 !important; grid-row: span 17 !important; }

/* 5. Responsive */
@media screen and (max-width: 1024px) {
  .wp-projets > *:nth-child(1) { grid-column: span 4 !important; grid-row: span 16 !important; }
  .wp-projets > *:nth-child(2) { grid-column: span 3 !important; grid-row: span 12 !important; }
  .wp-projets > *:nth-child(3) { grid-column: span 3 !important; grid-row: span 12 !important; }
  .wp-projets > *:nth-child(4) { grid-column: span 4 !important; grid-row: span 16 !important; }
  .wp-projets > *:nth-child(5) { grid-column: span 7 !important; grid-row: span 16 !important; }
  .wp-projets > *:nth-child(6) { grid-column: span 3 !important; grid-row: span 8 !important; }
  .wp-projets > *:nth-child(7) { grid-column: span 3 !important; grid-row: span 15 !important; }
  .wp-projets > *:nth-child(8) { grid-column: span 4 !important; grid-row: span 15 !important; }
}

@media screen and (max-width: 767px) {
  .wp-projets {
    display: block !important;
    overflow: visible !important;
  }

  .wp-projets > * {
    width: 100% !important;
    height: auto !important;
    margin-bottom: 20px !important;
    display: block !important;
    grid-column: auto !important;
    grid-row: auto !important;
  }

  .wp-projets img {
    height: auto !important;
    width: 100% !important;
    object-fit: contain !important;
    position: relative !important;
  }

  .wp-projet-card {
    height: auto !important;
    min-height: auto !important;
  }

  .wp-projets > *:nth-child(6) {
    aspect-ratio: 16 / 9 !important;
    width: 100% !important;
    height: auto !important;
    /* Centrage interne (Flexbox) */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    /* Centrage par rapport à la grille (Grid) */
    align-self: center !important;
    justify-self: center !important;
  }

  .wp-projets > *:nth-child(6) img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
  }
}

/* 1. On s'assure que le conteneur de la carte est bien le référent */
.wp-projet-card {
  position: relative !important;
  height: 100% !important;
  min-height: 100% !important;
}

/* 2. On plaque l'overlay sur toute la surface */
.wp-projet-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0;
  transition: opacity 0.4s ease !important;
  z-index: 5 !important;
}

/* 3. TRANSFORM pour le centrage) */
.wp-vignette-titre {
  position: absolute !important;
  /* On place le haut du texte à 50% de la hauteur de l'overlay */
  top: 50% !important;
  /* On place la gauche du texte à 50% de la largeur de l'overlay */
  left: 50% !important;
  /* On décale le texte de sa propre moitié vers le haut et la gauche */
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  width: 90% !important; /* Pour éviter que le texte touche les bords */
  text-align: center !important;
  pointer-events: none;
}

/* 4. Affichage au survol */
.wp-projet:hover .wp-projet-overlay {
  opacity: 1 !important;
}

.wp-projet-overlay h3 {
  font-size: 1.5rem;
  font-family: 'Poppins', 'Inter';
  font-weight: 500;
}

/* Empêche l'image de dépasser du cadre pendant l'animation */
.wp-projet-card {
  overflow: hidden !important;
}

/* Définit la transition sur l'image */
.wp-projets img {
  transition: transform 0.5s ease !important;
}

/* Applique le zoom au survol de la carte */
.wp-projet-card:hover img {
  transform: scale(1.07) !important;
}

.portfolio-grid {
  margin-top: 170px;
}

.portfolio-item {
  margin-bottom: 130px;
}

.project-description {
  text-align: center;
  font-family: 'Inter';
  font-weight: 400;
  margin-top: 30px;
  color: #3F3D55;
}

@media (max-width: 1024px) {
  .portfolio-item {
    margin-bottom: 80px;
  }

  .project-description {
    text-align: center;
    font-family: 'Inter';
    font-weight: 400;
    color: #292F36;
    margin-top: 20px;
  }

  .portfolio-grid {
    margin-top: 130px !important;
  }
}

@media (max-width: 767px) {
  .portfolio-item {
    margin-bottom: 50px;
  }

  .project-description {
    text-align: left;
    font-family: 'Inter';
    font-weight: 400;
    color: #292F36;
    margin-top: 15px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .portfolio-grid {
    margin-top: 40px;
  }
}

#home-gradient {
  background-color: hsla(226, 31%, 36%, 1);
  background-image:
    radial-gradient(at 63% 75%, hsla(232, 90%, 70%, 0.32) 0px, transparent 50%),
    radial-gradient(at 6% 86%, hsla(340, 87%, 80%, 0.3) 0px, transparent 50%),
    radial-gradient(at 94% 5%, hsla(242, 100%, 70%, 1) 0px, transparent 50%),
    radial-gradient(at 43% 37%, hsla(343, 100%, 79%, 0.15) 0px, transparent 50%);
}

/* 1. Style pour TOUTES les pages (Sauf Accueil) */
#header-new {
  background-color: #404e7c;
}

.ekit-template-content-header {
  position: -webkit-sticky !important; /* Safari */
  position: sticky !important;
  top: 0 !important;
  width: 100%;
  z-index: 9999;
}

/* 2. Exception pour la PAGE D'ACCUEIL uniquement */
.home #header-new {
  background-color: transparent !important;
  position: absolute; /* Pour qu'il passe par-dessus le contenu */
  width: 100%;
  top: 0;
  z-index: 5000;
}

.home .ekit-template-content-header {
  position: initial !important;
  top: initial !important;
  width: initial;
  z-index: initial;
}

.page-id-117 {
  background-color: #F7F7F7 !important;
}

/* Ciblage spécifique du conteneur de grille sur la page 117 */
.page-id-117 .portfolio-grid {
  display: grid !important;
  /* Crée 3 colonnes flexibles de taille égale */
  grid-template-columns: repeat(3, 1fr) !important;
  /* Espace entre les éléments (ajustable) */
  grid-gap: 20px;
  /* Aligne les logos au centre de leur cellule */
  align-items: center;
  justify-items: center;
  /* Désactive d'éventuels résidus de Flexbox */
  flex-direction: row !important;
  flex-wrap: wrap !important;
  padding-left:20px;
  padding-right:20px;
}

/* Force les items à ne pas s'écraser */
.page-id-117 .portfolio-item {
  width: 100% !important;
  max-width: 100%;
  margin: 0 !important; /* On laisse le grid-gap gérer l'espacement */
}

/* --- RESPONSIVE --- */
/* Tablette : 2 colonnes */
@media (max-width: 1024px) {
  .page-id-117 .portfolio-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* Mobile : 1 colonne */
@media (max-width: 767px) {
  .page-id-117 .portfolio-grid {
    grid-template-columns: 2fr !important;
    padding-bottom:50px;
    padding-top:30px;
  }
}

/* 1. On transforme le body de la page 117 en colonne Flex de toute la hauteur de l'écran */
.page-id-117 {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important;
  margin: 0 !important;
}

/* 2. On dit au bloc central de prendre tout l'espace vide disponible */
/* C'est ce calcul qui pousse le footer précisément au pixel près */
.page-id-117 .elementor-117 {
  flex: 1 0 auto !important;
}

/* 3. On s'assure que le footer ne s'écrase pas */
.page-id-117 .ekit-template-content-footer {
  flex-shrink: 0 !important;
}

#expertise ul {
  padding-left: 14px;
}

#expertise li {
  margin-bottom: 12px;
}

#about-me strong,
#expertise strong {
  font-weight: 600;
}

#contact a {
  color: #FFFFFF;
}

#tel,
#tel a,
#mail,
#mail a {
  color: #A7A7A7 !important;
  font-family: 'Inter';
  font-weight: 300;
  font-size: 0.9rem;
}

@media screen and (min-width: 1600px) {
  #grille {
    margin-bottom: 140px;
  }
}