/* Variables pour faciliter la maintenance */
:root {
    --menu-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --menu-bg: #fff;
    --menu-shadow: rgba(0, 0, 0, 0.1);
}

body {
    margin: 0;
}

/* Header */
header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--menu-bg);
    box-shadow: 0 2px 8px var(--menu-shadow);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    width: 100%; /* s'assurer que prend toute la largeur */
    left: 0;
    right: 0;
    box-sizing: border-box;
    /* Police du header (match contenu) */
    font-family: "SF Pro Display","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
    font-weight: 600;
}

/* Styles utilitaires pour l'accessibilité (centralisés dans header.css) */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: 100;
}
.skip-link:focus {
    left: 10px;
    top: 10px;
    width: auto;
    height: auto;
    background: #fff;
    color: #333;
    padding: 8px 12px;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Menu toggle button */
.menu-toggle{
    display:none; /* visible en mobile via media queries */
    background: transparent;border:0;cursor:pointer;padding:0.25rem;line-height:0;color:inherit
}
.menu-toggle svg{width:32px;height:32px}

.menu-toggle svg rect{fill:currentColor;transition:var(--menu-transition);transform-origin:center}

/* transform burger into X when open */
.menu-toggle[aria-expanded="true"] svg .line-1{transform:translateY(10px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] svg .line-2{opacity:0;transform:scaleX(0)}
.menu-toggle[aria-expanded="true"] svg .line-3{transform:translateY(-10px) rotate(-45deg)}

/* Navigation */
nav ul{display:flex;list-style:none;margin:0;padding:0;gap:2rem}

.menu-item a{display:block;padding:0.5rem 1rem;text-decoration:none;color:inherit;transition:var(--menu-transition);border-radius:4px}
.menu-item a:hover,.menu-item a:focus{background:rgba(0,0,0,0.05);outline:none}
.menu-item a[aria-current="page"]{font-weight:bold;border-bottom:2px solid currentColor}

/* Mobile behavior */
@media (max-width: 768px){
    .menu-toggle{display:inline-flex;align-items:center;justify-content:center}

    /* hidden by default, slide from right when open */
    nav{
        position: fixed;
        top: 0;
        right: -100%;
        width: 280px;
        height: 100vh;
        background: var(--menu-bg);
        box-shadow: -2px 0 10px var(--menu-shadow);
        transition: right var(--menu-transition);
        overflow-y: auto;
        z-index: 999;
    }

    nav[data-open="true"]{right:0}

    nav ul{flex-direction:column;gap:0;padding:5rem 1rem 1rem}

    .menu-item{border-bottom:1px solid rgba(0,0,0,0.1)}
    .menu-item a{padding:1rem}

    /* overlay */
    .menu-overlay{
        display:block; /* inserted by JS via pseudo-element replacement? use fixed element instead */
    }

    /* full width header layout on mobile */
    header{padding:0.75rem 1rem}
}

/* Larger screens: ensure nav is visible and inline */
@media (min-width: 769px){
    nav{position:static;height:auto;width:auto;background:transparent;box-shadow:none;overflow:visible}
}

/* Styles locaux pour l'en-tête du dossier portfolio : image de profil ronde et plus petite */
.logo .profile-photo {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: block !important;
    max-width: none !important; /* override rules that force images à 100% */
    overflow: hidden !important; /* s'assurer que rien ne déborde */
    vertical-align: middle;
    border: 2px solid rgba(255,255,255,0.9) !important; /* léger contour pour bien distinguer */
}
/* sélecteur plus spécifique pour écraser d'autres règles si nécessaire */
header .logo a img.profile-photo {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: block !important;
    max-width: none !important;
}
@media (max-width: 480px) {
    .logo .profile-photo { width: 44px !important; height: 44px !important; }
    header .logo a img.profile-photo { width: 44px !important; height: 44px !important; }
}