/* Menu des petits écrans (accueil et guides) : sous 960 px, les liens de l'en-tête passent derrière un bouton à trois
   traits et s'ouvrent en panneau sous la barre. */
.burger { display: none; }
.top nav .menu-only { display: none; }

@media (max-width: 960px) {
  .burger { display: inline-grid; place-content: center; gap: 4px; flex: none; width: 40px; height: 40px; padding: 0; cursor: pointer;
    background: #fff; border: 1px solid var(--ink, #111); border-radius: 7px; }
  .burger span { display: block; width: 18px; height: 2px; border-radius: 1px; background: var(--ink, #111); transition: transform .25s, opacity .2s; }
  .top.open .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .top.open .burger span:nth-child(2) { opacity: 0; }
  .top.open .burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .top.open nav { display: flex; flex-direction: column; gap: 0; position: absolute; top: 100%; left: 0; right: 0; margin: 0;
    padding: 4px 16px 16px; background: #fff; border-bottom: 1px solid var(--line, #e4e4e4); box-shadow: 0 16px 30px rgba(0, 0, 0, .08);
    font-size: 1.02rem; animation: menuIn .2s ease; }
  .top.open nav a { padding: 15px 2px; color: var(--ink, #111); border-bottom: 1px solid var(--line, #e4e4e4); }
}
@media (max-width: 560px) {
  header.top .wrap { gap: 10px; }   /* logo, connexion et menu tiennent sur la largeur d'un téléphone */
  /* Sur téléphone, « Créer mon dossier » quitte l'en-tête : il prend place en bas du menu. */
  .top.open nav .menu-only { display: flex; justify-content: center; margin-top: 14px; padding: 15px; border: 0; border-radius: 8px;
    background: var(--blue, #0083C3); color: #fff; font: 600 .8rem/1 var(--font, sans-serif); letter-spacing: .12em; text-transform: uppercase; }
}
@keyframes menuIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .top.open nav { animation: none; } .burger span { transition: none; } }