/* ==========================================================================
   LA NAVIGATION, commune à toutes les pages (index, projets, projet-*)
   Trois pièces flottantes en verre dépoli : le signe et le nom à gauche,
   les liens au centre (une pastille sombre glisse sous le lien survolé ou
   la section en cours), « Me contacter » à droite. Elle se cache quand on
   descend et revient dès qu'on remonte (voir assets/nav.js).
   Le menu plein écran du téléphone reste défini dans chaque page.
   ========================================================================== */

.site-nav{position:fixed;left:0;right:0;top:0;z-index:60;pointer-events:none;
  transition:transform 600ms cubic-bezier(0.16,1,0.3,1)}
.site-nav.cache{transform:translateY(-140%)}
.site-nav nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;
  padding:1rem var(--gutter)}
.site-nav nav > *{pointer-events:auto}

/* le verre : fond clair translucide, flou de ce qui passe dessous */
.logo,.nav-links,.burger{
  background:rgba(239,239,239,0.7);
  -webkit-backdrop-filter:blur(16px) saturate(1.6);backdrop-filter:blur(16px) saturate(1.6);
  border:1px solid rgba(18,18,18,0.08);
  box-shadow:0 0.75rem 2rem -1.5rem rgba(18,18,18,0);
  transition:box-shadow 500ms cubic-bezier(0.22,1,0.36,1),background-color 500ms cubic-bezier(0.22,1,0.36,1)}
.site-nav.defile .logo,.site-nav.defile .nav-links,.site-nav.defile .burger{
  background:rgba(239,239,239,0.9);box-shadow:0 0.75rem 2rem -1.25rem rgba(18,18,18,0.35)}

/* ---------- Le logo Alexis Visual : le signe et le nom sur deux lignes ----------
   Le bleu est celui du logo (#1768B0), un peu plus vif que l'accent du site. */
.logo{--bleu-logo:#1768B0;grid-column:1;justify-self:start;display:inline-flex;align-items:center;gap:0.5rem;
  padding:0.3125rem 1.125rem 0.3125rem 0.375rem;border-radius:9999px;color:var(--bleu-logo)}
.logo-mark{display:block;width:2.5rem;height:2.5rem;flex:none;color:var(--accent);
  transition:transform 700ms cubic-bezier(0.16,1,0.3,1)}
.logo .logo-mark{width:2.5rem;height:2.5rem;padding:0.125rem;color:var(--bleu-logo)}
.logo-name{display:block;font-family:var(--font-display);font-weight:700;font-size:1.0625rem;
  line-height:0.92;letter-spacing:-0.01em;color:var(--bleu-logo)}
@media (min-width:768px){
  .logo{gap:0.625rem;padding-right:1.375rem}
  .logo .logo-mark{width:2.875rem;height:2.875rem}
  .logo-name{font-size:1.3125rem}
}

/* ---------- Les liens ---------- */
.nav-links{display:none}
@media (min-width:768px){
  .nav-links{grid-column:2;position:relative;display:flex;align-items:center;gap:0.125rem;
    padding:0.3125rem;border-radius:9999px}
}
.nav-links li{position:relative;z-index:1}
.nav-links a{display:block;padding:0.625rem 1.125rem;border-radius:9999px;
  font-size:var(--t-eyebrow);font-weight:700;line-height:1.2;text-transform:uppercase;letter-spacing:0.16em;
  color:var(--muted);transition:color 350ms cubic-bezier(0.22,1,0.36,1)}
.nav-links a.sur{color:#efefef}
/* sans script, la page en cours reste marquée */
.nav-links a[aria-current="page"]:not(.sur){color:var(--foreground)}
.nav-indicateur{position:absolute;z-index:0;top:0.3125rem;bottom:0.3125rem;left:0;width:0;border-radius:9999px;
  background:var(--foreground);opacity:0;pointer-events:none}
.nav-links.pret .nav-indicateur{
  transition:transform 550ms cubic-bezier(0.16,1,0.3,1),width 550ms cubic-bezier(0.16,1,0.3,1),opacity 300ms ease}

/* ---------- Me contacter ---------- */
.nav-cta{display:none}
@media (min-width:768px){
  .nav-cta{grid-column:3;justify-self:end;display:inline-flex;align-items:center;gap:0.75rem;
    padding:0.875rem 1.375rem;border-radius:9999px;background:var(--foreground);color:#efefef;
    font-size:var(--t-eyebrow);font-weight:700;line-height:1.2;text-transform:uppercase;letter-spacing:0.16em;
    box-shadow:0 0.75rem 2rem -1.25rem rgba(18,18,18,0.5);
    transition:background-color 400ms cubic-bezier(0.22,1,0.36,1)}
}
/* le point qui respire : je cherche une place de stage */
.nav-cta-point{position:relative;width:0.5rem;height:0.5rem;flex:none;border-radius:9999px;background:#7fa3dd}
.nav-cta-point::after{content:"";position:absolute;inset:0;border-radius:inherit;background:inherit;
  animation:nav-respire 2.4s ease-out infinite}
@keyframes nav-respire{0%{transform:scale(1);opacity:0.7}70%,100%{transform:scale(2.8);opacity:0}}
.nav-cta .arrow{display:inline-block;transition:transform 500ms cubic-bezier(0.16,1,0.3,1)}

/* ---------- Le burger (téléphone) ---------- */
.burger{grid-column:3;justify-self:end;display:flex;flex-direction:column;justify-content:center;align-items:center;
  gap:0.3125rem;width:3rem;height:3rem;border-radius:9999px}
@media (min-width:768px){.burger{display:none}}
.burger span{display:block;height:0.125rem;width:1.125rem;border-radius:1px;background:var(--foreground);
  transition:transform 340ms cubic-bezier(0.22,1,0.36,1),opacity 200ms linear,background-color 300ms ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(0.4375rem) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-0.4375rem) rotate(-45deg)}

/* ---------- Survols (souris seulement) ---------- */
@media (hover:hover) and (min-width:769px){
  .logo:hover .logo-mark{transform:rotate(-14deg) scale(1.08)}
  .nav-links a:hover{color:var(--foreground)}
  .nav-links a.sur:hover{color:#efefef}
  .nav-cta:hover{background:var(--accent)}
  .nav-cta:hover .arrow{transform:rotate(-45deg)}
  .burger:hover span{background:var(--accent)}
}

@media (prefers-reduced-motion:reduce){
  .site-nav,.nav-links.pret .nav-indicateur{transition:none}
  .nav-cta-point::after{animation:none}
}