/* Menu de navigation — commun à toutes les pages du site.
   Ce fichier ne doit être modifié qu'ici : il est partagé par index.html,
   reseaux-sociaux.html, et toute future page (personal-branding, blog, etc.) */

/* Transition douce entre les pages — fondu d'entrée en CSS pur (voir
   page-transition.js pour le fondu de sortie au clic sur un lien interne).
   En CSS pur exprès : ça se déclenche dès le rendu de la page, sans dépendre
   du temps d'exécution du JS — donc jamais d'écran blanc bloqué à opacity:0. */
@keyframes ptFadeIn{from{opacity:0;}to{opacity:1;}}
body{animation:ptFadeIn 0.25s ease both;}
@media(prefers-reduced-motion:reduce){body{animation:none;}}

/* background à 0.92 (pas moins) : en dessous, le flou du fond de page
   (backdrop-filter) transparaît trop et le menu paraît plus clair sur les
   pages au hero clair (ex. personal-branding) — repéré via ce bug. */
nav{position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:900;display:flex;align-items:center;background:rgba(15,8,32,0.92);backdrop-filter:blur(24px) saturate(180%);border:1px solid rgba(255,255,255,0.08);border-radius:100px;padding:10px 10px 10px 24px;width:max-content;max-width:calc(100vw - 24px);overflow:hidden;animation:navDrop 0.8s cubic-bezier(0.16,1,0.3,1) both;white-space:nowrap;}
@keyframes navDrop{from{opacity:0;transform:translateX(-50%) translateY(-20px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
.nav-logo{display:flex;align-items:center;gap:9px;margin-right:32px;cursor:pointer;text-decoration:none;flex-shrink:0;}
.nav-logo-img{height:38px;width:auto;aspect-ratio:1232/1277;display:block;object-fit:contain;flex-shrink:0;}
.nav-links{display:flex;gap:2px;margin-right:14px;}
.nav-links a{font-size:11px;letter-spacing:0.06em;font-weight:600;color:rgba(255,255,255,0.5);text-decoration:none;text-transform:uppercase;padding:7px 14px;border-radius:40px;transition:all 0.25s;}
.nav-links a:hover,.nav-links a.active{color:#fff;background:rgba(255,255,255,0.08);}
.nav-btn{padding:10px 22px;background:linear-gradient(135deg,var(--pd),var(--p));border:none;border-radius:40px;font-family:'Montserrat',sans-serif;font-size:10px;font-weight:700;letter-spacing:0.1em;color:#fff;text-transform:uppercase;cursor:pointer;transition:all 0.3s;box-shadow:0 2px 16px rgba(74,20,140,0.4);flex-shrink:0;white-space:nowrap;}
.nav-btn:hover{transform:scale(1.03);box-shadow:0 4px 24px rgba(74,20,140,0.55);}
.nav-burger{display:none;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;margin-left:10px;flex-shrink:0;}
.nav-burger span{display:block;width:16px;height:2px;background:#fff;border-radius:2px;transition:all 0.3s ease;}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
.nav-mobile-overlay{display:none;position:fixed;inset:0;z-index:895;background:rgba(10,5,20,0.6);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity 0.3s ease;}
.nav-mobile-overlay.open{opacity:1;pointer-events:auto;}
.nav-mobile-panel{position:absolute;top:78px;left:50%;transform:translateX(-50%) translateY(-14px);width:min(90vw,380px);background:rgba(15,8,32,0.97);border:1px solid rgba(255,255,255,0.09);border-radius:24px;padding:18px;display:flex;flex-direction:column;gap:4px;box-shadow:0 24px 60px rgba(0,0,0,0.45);transition:transform 0.3s ease,opacity 0.3s ease;opacity:0;}
.nav-mobile-overlay.open .nav-mobile-panel{transform:translateX(-50%) translateY(0);opacity:1;}
.nav-mobile-panel a{font-size:13px;letter-spacing:0.04em;font-weight:600;color:rgba(255,255,255,0.75);text-decoration:none;text-transform:uppercase;padding:14px 16px;border-radius:14px;transition:all 0.2s;}
.nav-mobile-panel a:hover,.nav-mobile-panel a:active,.nav-mobile-panel a.active{color:#fff;background:rgba(255,255,255,0.08);}
.nav-mobile-cta{margin-top:8px;width:100%;}

@media(max-width:1024px){
  nav{width:calc(100% - 24px);left:12px;transform:none;justify-content:space-between;padding:8px 8px 8px 20px;}
  @keyframes navDrop{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}
  .nav-links{display:none;}
  .nav-btn{display:none;}
  .nav-burger{display:flex;}
  .nav-mobile-overlay{display:block;}
}
@media(max-width:900px){
  nav{top:12px;padding:8px 8px 8px 18px;}
  .nav-logo-img{height:30px;}
}
@media(max-width:600px){
  nav{width:calc(100% - 16px);left:8px;padding:7px 7px 7px 16px;}
  .nav-mobile-panel{top:72px;width:min(94vw,360px);}
}
@media(max-width:380px){
  nav{padding:6px 6px 6px 14px;}
  .nav-logo-img{height:26px;}
  .nav-burger{width:34px;height:34px;}
}