/* ═══════════════════════════════════════════════════════════════
   ATELIER ANGLE NOIR — lot 1 : navigation et apparitions
   Rien d'ajouté au contenu. Seulement du comportement.
   Testé pour Safari : préfixes -webkit- où ils sont nécessaires.
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   1. APPARITION AU DÉFILEMENT
   L'élément attend hors champ, puis se pose. Une seule fois.
   Le décalage entre voisins est appliqué en JS (--rd).
   ───────────────────────────────────────────────────────────── */
[data-rev]{
  opacity:0;
  -webkit-transform:translate3d(0,12px,0);
          transform:translate3d(0,12px,0);
  -webkit-transition:opacity .72s cubic-bezier(.16,1,.3,1) var(--rd,0s),
                     -webkit-transform .72s cubic-bezier(.16,1,.3,1) var(--rd,0s);
          transition:opacity .72s cubic-bezier(.16,1,.3,1) var(--rd,0s),
                     transform .72s cubic-bezier(.16,1,.3,1) var(--rd,0s);
}
[data-rev].is-in{
  opacity:1;
  -webkit-transform:translate3d(0,0,0);
          transform:translate3d(0,0,0);
}
/* les images arrivent d'un peu plus bas et un peu plus lentement */
[data-rev="img"]{
  -webkit-transform:translate3d(0,20px,0) scale(1.012);
          transform:translate3d(0,20px,0) scale(1.012);
  -webkit-transition-duration:1.05s; transition-duration:1.05s;
}
[data-rev="img"].is-in{
  -webkit-transform:translate3d(0,0,0) scale(1);
          transform:translate3d(0,0,0) scale(1);
}
/* filets et traits : ils se tirent au lieu d'apparaître */
[data-rev="rule"]{
  opacity:1;
  -webkit-transform:scaleX(0); transform:scaleX(0);
  -webkit-transform-origin:left center; transform-origin:left center;
  -webkit-transition:-webkit-transform .9s cubic-bezier(.16,1,.3,1) var(--rd,0s);
          transition:transform .9s cubic-bezier(.16,1,.3,1) var(--rd,0s);
}
[data-rev="rule"].is-in{
  -webkit-transform:scaleX(1); transform:scaleX(1);
}

/* ─────────────────────────────────────────────────────────────
   2. LA BARRE DE NAVIGATION
   Transparente sur le héros, floutée dès qu'on défile,
   escamotée à la descente, rappelée à la montée.
   ───────────────────────────────────────────────────────────── */
nav{
  -webkit-transition:background .45s ease, border-color .45s ease,
                     -webkit-transform .5s cubic-bezier(.16,1,.3,1),
                     height .45s ease;
          transition:background .45s ease, border-color .45s ease,
                     transform .5s cubic-bezier(.16,1,.3,1), height .45s ease;
  -webkit-backface-visibility:hidden; backface-visibility:hidden;
}
nav.scrolled{
  background:rgba(14,14,12,.72);
  -webkit-backdrop-filter:saturate(150%) blur(16px);
          backdrop-filter:saturate(150%) blur(16px);
  height:62px;
}
/* si le flou n'est pas disponible, on garde un fond franc */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  nav.scrolled{ background:rgba(14,14,12,.97); }
}
nav.nav-up{
  -webkit-transform:translate3d(0,-100%,0);
          transform:translate3d(0,-100%,0);
}
/* un liseré doré très fin qui souligne la barre une fois posée */
nav.scrolled::after{
  content:''; position:absolute; left:0; right:0; bottom:-.5px; height:.5px;
  background:linear-gradient(90deg,transparent,rgba(200,169,110,.42) 22%,
             rgba(200,169,110,.42) 78%,transparent);
}

/* ─────────────────────────────────────────────────────────────
   3. LE MENU DÉROULANT
   Il descend au lieu de surgir, et ses entrées arrivent en cascade.
   Il reste en display:flex : c'est l'opacité et la visibilité
   qui commandent, pour que la transition existe.
   ───────────────────────────────────────────────────────────── */
@media(min-width:901px){
  .nav-dropdown .dropdown-menu{
    display:flex;
    opacity:0; visibility:hidden; pointer-events:none;
    -webkit-transform:translate3d(0,-8px,0); transform:translate3d(0,-8px,0);
    -webkit-transition:opacity .2s ease, visibility .2s ease,
                       -webkit-transform .22s cubic-bezier(.16,1,.3,1);
            transition:opacity .2s ease, visibility .2s ease,
                       transform .22s cubic-bezier(.16,1,.3,1);
  }
  .nav-dropdown.open .dropdown-menu{
    opacity:1; visibility:visible; pointer-events:auto;
    -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0);
  }
  /* comble l'espace entre le libellé et le menu : la souris ne le perd plus */
  .nav-dropdown.open::before{
    content:''; position:absolute; top:100%; left:-1.2rem; width:240px; height:1.4rem;
  }
  /* cascade des entrées */
  .nav-dropdown .dropdown-menu a{
    opacity:0;
    -webkit-transform:translate3d(-6px,0,0); transform:translate3d(-6px,0,0);
    -webkit-transition:opacity .26s ease, background .2s, color .2s, padding-left .2s,
                       -webkit-transform .3s cubic-bezier(.16,1,.3,1);
            transition:opacity .26s ease, background .2s, color .2s, padding-left .2s,
                       transform .3s cubic-bezier(.16,1,.3,1);
  }
  .nav-dropdown.open .dropdown-menu a{
    opacity:1;
    -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0);
  }
  .nav-dropdown.open .dropdown-menu a:nth-child(1){ transition-delay:.03s }
  .nav-dropdown.open .dropdown-menu a:nth-child(2){ transition-delay:.06s }
  .nav-dropdown.open .dropdown-menu a:nth-child(3){ transition-delay:.09s }
  .nav-dropdown.open .dropdown-menu a:nth-child(4){ transition-delay:.12s }
  .nav-dropdown.open .dropdown-menu a:nth-child(5){ transition-delay:.15s }
  .nav-dropdown.open .dropdown-menu a:nth-child(6){ transition-delay:.18s }
  .nav-dropdown.open .dropdown-menu a:nth-child(7){ transition-delay:.21s }
}

/* ─────────────────────────────────────────────────────────────
   4. CORRECTIF — les ancres passaient sous la barre
   ───────────────────────────────────────────────────────────── */
[id]{ scroll-margin-top:96px; }

/* ─────────────────────────────────────────────────────────────
   5. LE GARDE-FOU
   Mouvement désactivé au niveau du système : tout est coupé,
   et rien ne reste invisible.
   ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  [data-rev],[data-rev="img"],[data-rev="rule"]{
    opacity:1 !important;
    -webkit-transform:none !important; transform:none !important;
    -webkit-transition:none !important; transition:none !important;
  }
  nav,nav.nav-up{
    -webkit-transform:none !important; transform:none !important;
    -webkit-transition:none !important; transition:none !important;
  }
  .nav-dropdown .dropdown-menu,
  .nav-dropdown .dropdown-menu a{
    -webkit-transition:none !important; transition:none !important;
    -webkit-transform:none !important; transform:none !important;
  }
}