/* =====================================================
   PORTFOLIO
===================================================== */

body{
    padding-top:90px;
}

/* =========================
   GALERIE PIC-TIME
========================= */

iframe{
    width:100%;
    height:calc(100vh - 90px);
    border:none;
    display:block;
}

@media (max-width:900px)
{

nav{
    grid-template-columns: auto 1fr auto;
    align-items:center;
}

/* bouton hamburger */
.menu-toggle{ 
    display:flex; 
    position:relative; /* IMPORTANT : on enlève absolute */
    justify-self:end;
    font-size:28px; 
    cursor:pointer; 
    z-index:2001; 
    color:#193f56; 
}

/* logo */
.logo{
    justify-self:start;
}

/* SOCIAL MOBILE CENTRÉ */
.social-nav{
    display:flex;            /* on réactive */
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
    justify-content:center;
    gap:12px;
    z-index:2002;
}

/* icônes un peu plus petites en mobile */
.social-nav a{
    width:30px;
    height:30px;
}

/* menu plein écran */
.menu{ 
    position:fixed; 
    top:0; 
    right:-100%; 
    width:100%; 
    height:100vh; 
    background:#f9f9f9; 
    display:flex; 
    flex-direction:column; 
    justify-content:center; 
    align-items:center; 
    gap:30px; 
    transition:.4s; 
    z-index:2000; 
} 

.menu.active{ 
    right:0; 
} 

.menu a{ 
    font-size:1rem; 
    letter-spacing:3px; 
} 

/* autres ajustements */
.hero h1{ font-size:3rem; } 
.about{ grid-template-columns:1fr; } 
.experience{ grid-template-columns:1fr; } 
.portfolio-hero{ height:60vh; } 
.portfolio-overlay h2{ font-size:2.5rem; } 

}