/* ========================================
   DRAWER
======================================== */

.ac-drawer {
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9999;
    display: flex;
    align-items: center;
}

.ac-drawer-tab {
    position: relative;
    z-index: 2;
    background: none;
    border: none;
    cursor: pointer;
    width: 60px;
    height: auto;
    padding: 0;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.ac-drawer-tab img {
    width: 100%;
    height: auto;
    display: block;
}

.ac-drawer-tab:hover {
    transform: translateX(4px);
}

.ac-drawer-panel {
    position: relative;
    width: 0;
    overflow: hidden;
    transition: width 0.4s ease;
    max-height: 80vh;
    order: -1;
}

.ac-drawer.open .ac-drawer-panel {
    width: 320px;
}

.ac-drawer-inner {
    width: 320px;
    min-height: 400px;
    background-image: url('https://adrienconstans.com/wp-content/uploads/2026/01/Paper.png');
    background-size: cover;
    background-position: center;
    padding: 50px 30px 40px 30px;
    position: relative;
    overflow-y: auto;
    max-height: 80vh;
    box-sizing: border-box;
}

/* Bouton fermer */
.ac-drawer-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    width: 40px;
}

.ac-drawer-close img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.2s ease;
}

.ac-drawer-close:hover img {
    transform: rotate(90deg);
}

.ac-drawer-titre {
    font-family: "Simplon BP Mono Light", Sans-serif;
    font-size: 20px;
    margin: 0 0 20px 0;
    color: #000;
}

.ac-drawer-texte {
    font-size: 14px;
    line-height: 1.7;
    color: #333;
    margin-bottom: 24px;
}

.ac-drawer-btn {
    display: inline-block;
    padding: 10px 24px;
    background: #7a1f3a;
    color: #fff;
    text-decoration: none;
    border-radius: 20px;
    font-size: 14px;
    transition: background 0.3s ease;
}

.ac-drawer-btn:hover {
    background: #5a1528;
}


@media (max-width: 768px) {
    /* Force le header à gauche */
    .ac-nav {
        justify-content: flex-start !important;
    }
  .tabs {
    margin-top: 10px!important; /* ajuste selon ton goût */
  }
    /* Le burger lui-même */
    .ac-burger {
        display: flex !important;
        margin-left: 0 !important;
        margin-right: auto !important;
        padding-left: 10px !important;
    }

    /* Neutralise Elementor */
    .elementor-widget-shortcode,
    .elementor-widget-shortcode > div {
        display: flex !important;
        justify-content: flex-start !important;
        width: 100% !important;
    }
    .ac-burger {
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

.ac-burger:focus,
.ac-burger:active,
.ac-burger:focus-visible {
    outline: none;
    background: none;
    box-shadow: none;
}
}

.tabs button[data-cat="illustrations"]:hover { background: #AED9E2; }
  .tabs button[data-cat="design-graphique"]:hover { background: #e96060; }
  .tabs button[data-cat="video-game"]:hover { background: #FACD75; }
  .tabs button[data-cat="animations"]:hover { background: #7BDD9B; }
  
  tabs button[data-cat="illustrations"]:active,
  .tabs button[data-cat="illustrations"].active { background: #AED9E2; }
  
  .tabs button[data-cat="design-graphique"]:active,
  .tabs button[data-cat="design-graphique"].active { background: #e96060; }
  
  .tabs button[data-cat="video-game"]:active,
  .tabs button[data-cat="video-game"].active { background: #FACD75; }
  
  .tabs button[data-cat="animations"]:active,
  .tabs button[data-cat="animations"].active { background: #7BDD9B; }

/* ========================================
   MENU - BASE
======================================== */

.ac-nav {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: transparent;
    font-family: "Simplon BP Mono Light", Sans-serif;
    font-weight: 400;
    position: relative;
}

/* ========================================
   MENU DESKTOP
======================================== */

.ac-nav-desktop {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 80px;
    padding: 22px 40px;
    width: 100%;
}

.ac-nav-desktop a {
    text-decoration: none;
    font-size: 1vw;
    transition: color 0.3s ease;
    color: #000000;
}

.menu-dark .ac-nav-desktop a { color: #ffffff; }
.menu-light .ac-nav-desktop a { color: #000000; }

.ac-nav-desktop a:hover,
.ac-nav-desktop a.active { color: #7a1f3a; }

/* ========================================
   BURGER
======================================== */

.ac-burger {
    display: none;
    align-items: center;
    justify-content: flex-start;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    margin-left: 0;
    margin-right: auto;
    flex-shrink: 0;
    position: relative;
    z-index: 10;
}

.ac-burger-icon {
    display: block;
    width: 30px;
    height: auto;
    transition: filter 0.3s ease;
}




/* ========================================
   OVERLAY MOBILE
======================================== */

.ac-mobile-overlay {
    display: none !important;
    position: fixed;
    inset: 0;
    background: #6b7a55;
    z-index: 99999;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.ac-mobile-overlay.open {
    display: flex !important;
    opacity: 1;
    pointer-events: all;
}

/* ========================================
   BOUTON FERMER
======================================== */

.ac-close {
    position: absolute;
    top: 10px;
    left: 10px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    transition: opacity 0.2s ease;
}

.ac-close img {
    display: block;
    width: 40px;
    height: auto;
  
}



/* ========================================
   LOGO MOBILE
======================================== */

.ac-mobile-logo {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
}



.ac-mobile-logo img {
    width: 200px!important;
    height: auto;
    
}

/* ========================================
   LIENS MOBILE
======================================== */

.ac-mobile-links {
    display: flex;
    flex-direction: column;
    gap: 36px;
}

.ac-mobile-links a {
    text-decoration: none;
    font-family: "Simplon BP Mono Light", Sans-serif;
    font-size: 22px;
    color: #ffffff;
    transition: color 0.2s ease;
}

.ac-mobile-links a:hover,
.ac-mobile-links a.active { color: #7a1f3a; }

/* ========================================
   LOGO BAS MOBILE
======================================== */

.ac-mobile-bottom { position: absolute; bottom: 40px; }

.ac-mobile-bottom img {
    max-width: 150px;
    height: auto;
    
}

.ac-mobile-bottom img{
   width: 200px!important;
    height: auto;
    
}

/* ========================================
   RESPONSIVE
======================================== */

@media (max-width: 768px) {
    .ac-nav-desktop { display: none !important; }
    .ac-burger { display: flex !important; }
    .ac-nav { justify-content: flex-start; }
}

@media (min-width: 769px) {
    .ac-mobile-overlay { display: none !important; }
    .ac-burger { display: none !important; }
}


`/* ===================================================== */
/* TRANSITION DOUCE */
/* ===================================================== */

.elementor-widget-n-menu a,
.elementor-widget-n-menu .e-n-menu-title-text,
.elementor-widget-n-menu .e-n-menu-toggle svg,
.elementor-widget-n-menu .e-n-menu-toggle svg path {
  transition: color 0.3s ease, fill 0.3s ease, stroke 0.3s ease;
}

/* clair → burger noir */
.menu-light .e-font-icon-svg {
  fill: #000 !important;
}

/* sombre → burger blanc */
.menu-dark .e-font-icon-svg {
  fill: #fff !important;
}

.back-button img {
    margin-top: 10px;
}



/* ============================= */
/* WRAPPER GLOBAL */
/* ============================= */

.portfolio-wrapper {
  display: flex;
  gap: 60px;
  align-items: flex-start;
}

.back-button {
  cursor: pointer;
}
/* ============================= */
/* COLONNE CLÉ */
/* ============================= */

.keys {
  position: relative;
  width: 20%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.keyy {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  transform-origin: top center;
  width: 60%;
  opacity: 0;
  transition: opacity 0.3s ease;
  animation: swing 5s ease-in-out infinite;
}

.keyy.active {
  opacity: 1;
}

/* Animation balancement */
@keyframes swing {
  0%   { transform: translateX(-50%) rotate(-3deg); }
  50%  { transform: translateX(-50%) rotate(3deg); }
  100% { transform: translateX(-50%) rotate(-3deg); }
}

/* ============================= */
/* ZONE CONTENU */
/* ============================= */

.content-area {
  width: 80%;
}

/* ============================= */
/* ONGLET DOSSIER */
/* ============================= */

.tabs {
  display: flex;
  align-items: flex-end;
  position: relative;
  z-index: 5;
}

.tabs button {
  position: relative;
  border: none;

  padding: clamp(8px, 0.6vw, 12px) clamp(18px, 2vw, 32px);
  font-size: clamp(16px, 1.2vw, 22px);

  cursor: pointer;
  border-radius: 12px 12px 0 0;
  margin-right: 15px;
  transition: 0.3s ease;
  transform: translateY(6px);
}

/* Partie inclinée */
.tabs button::after {
  content: "";
  position: absolute;
  top: 0;
  right: -12px;
  width: 25px;
  height: 100%;
  background: inherit;
  transform: skewX(20deg);
  border-radius: 0 12px 0 0;
}

/* Couleurs */
.tabs button[data-cat="illustrations"] { background: #AED9E2; }
.tabs button[data-cat="design-graphique"] { background: #e96060; }
.tabs button[data-cat="video-game"] { background: #FACD75; }
.tabs button[data-cat="animations"] { background: #7BDD9B; }

/* Onglet actif */
.tabs button.active {
  transform: translateY(0);
  z-index: 10;
}

/* ============================= */
/* DOSSIER (LISTE PROJETS) */
/* ============================= */

.projects {
  position: relative;
  z-index: 10;
  padding-left: 2%;
   padding-right: 2%;
    padding-top: 2%;
     padding-bottom: 15%;
   min-height: 400px;
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
  transition: background 0.3s ease;
}

/* ============================= */
/* ITEM PROJET */
/* ============================= */

/* Caché par défaut */
.project-item {
  display: none;
  justify-content: space-between;
  align-items: flex-start;
  padding: 3vh 0;
  border-bottom: 1px solid rgba(0,0,0,0.3);
  transition: 0.6s ease;
  text-decoration: none;
  color: inherit;
}

/* Visible */
.project-item.active {
  display: flex;
}

/* ============================= */
/* COLONNE GAUCHE */
/* ============================= */

.project-left {
  width: 40%;
  height: 25vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: height 0.6s ease;
}

.project-title {
  font-size: 2.5vh;
  margin: 0;
  color: black; 
}

.project-meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  font-size: 1.9vh;
  opacity: 0;
  transform: translateY(20px);
  transition: 0.4s ease;
  color: black; 
}

/* ============================= */
/* IMAGE DROITE */
/* ============================= */

.project-image {
  width: 58%;
  height: 30vh;
  overflow: hidden;
  border-radius: 12px;
  transition: height 0.6s ease;
}

.project-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}



/* ============================= */
/* MOBILE CLEAN */
/* ============================= */

@media (max-width: 768px) {

  /* Layout général */
  .portfolio-wrapper {
    flex-direction: column;
  }

  .keys {
    display: none;
  }

  .content-area {
    width: 100%;
  }

  /* ================= Tabs ================= */

  .tabs {
    display: flex;
    flex-direction: column;
  }

  .tabs button {
    width: 100%;
    margin: 0;
    border-radius: 0;
    transform: none;
    padding: 1vw 1vw;
    font-size: 4.6vw;
    order: 1;
  }

.tabs button.active {
    order: 1; /* même order que les autres = ne bouge pas */
}

  .tabs button::after {
    display: none;
  }

  /* ================= Projets ================= */

  .project-item {
    flex-direction: row;
    align-items: flex-start;
    padding: 1vh 0;
    -webkit-tap-highlight-color: transparent;
  }

  .project-left {
    width: 55%;
    height: auto;
  }

.project-image {
  width: 100%;
  height:auto;
  aspect-ratio: 3 / 2;

}

.project-image img {
  height: 100%;
    object-position: center center; /* ou center */
}


  /* Texte toujours visible et fixe */
  .project-meta {
    opacity: 1;
    transform: none;
    transition: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin-top: 10px;
    font-size: 1.4vh;
  }

  /* Supprime TOUTES les transitions mobiles */
  .project-item,
  .project-left,
  .project-image,
  .project-meta {
    transition: none;
  }

  /* Neutralise totalement les hover/active */
  .project-item:hover .project-left,
  .project-item:hover .project-image,
  .project-item:active .project-left,
  .project-item:active .project-image {
    height: auto;
  }

  .project-item:hover .project-meta,
  .project-item:active .project-meta {
    transform: none;
    opacity: 1;
  }

  /* Scroll spacing */
  .projects {
    padding-bottom: 70%;
  }


  .back-button {
    display: none;
  }

}


/* ============================= */
/* Hover UNIQUEMENT desktop */
/* ============================= */

@media (hover: hover) {

  .project-item:hover .project-left,
  .project-item:hover .project-image {
    height: 60vh;
  }

  .project-item:hover .project-meta {
    opacity: 1;
    transform: translateY(0);
  }

}




@media (max-width: 768px) {

  /* light → burger noir */
.e-n-menu-toggle svg path,
.e-n-menu-toggle .e-font-icon-svg,
.e-n-menu-toggle:hover svg path,
.e-n-menu-toggle:hover .e-font-icon-svg {
  filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.3));
}

  /* dark → burger blanc */
  .menu-dark .e-n-menu-toggle svg path,
  .menu-dark .e-n-menu-toggle .e-font-icon-svg,
  .menu-dark .e-n-menu-toggle:hover svg path,
  .menu-dark .e-n-menu-toggle:hover .e-font-icon-svg {
    fill: #ffffff !important;
  }

}

@media (max-width: 768px) {
  .tabs button[data-cat="illustrations"].active { background: #AED9E2; }
  .tabs button[data-cat="design-graphique"].active { background: #e96060; }
  .tabs button[data-cat="video-game"].active { background: #FACD75; }
  .tabs button[data-cat="animations"].active { background: #7BDD9B; }
  
.ac-mobile-logo img {
    max-width: 200px;
    height: auto;
}
  
}