/* ============================================================== 
   nav-toggle.css – bande noire sticky + bouton ≡/▼ 
   MàJ : Grid pour espaces symétriques 
   ============================================================== */

/* Variables globales */
:root {
  --gold: #b58e4f;
}

/* Bande noire */
.nav-wrapper {
  position: sticky;
  top: var(--social-h);
  left: 0;
  width: 100%;
  background: #2e2e2e;
  z-index: 3000;
}

body.nav-open .nav-wrapper {
  position: fixed;
  top: var(--social-h);
}

/* Ligne intérieure : grid 3 colonnes égales auto/auto */
.toggle-line {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: .5rem 0;
  color: #f1e9dc;
  font: 600 1rem "Playfair Display", serif;
}

/* Texte gauche, aligné à droite de sa colonne + marge */
.toggle-line .txt-l {
  justify-self: end;
  margin-right: 1rem;  /* ajustez pour plus ou moins d’espace */
}

/* Bouton centré dans sa colonne */
.toggle-line #nav-toggle {
  justify-self: center;

  width: 1.6rem;
  height: 1.6rem;
  line-height: 1.6rem;
  border: none;
  border-radius: 50%;
  background: var(--gold);
  color: #2e2e2e;
  font-size: .8rem;
  cursor: pointer;
  transition: background .3s;
}

.toggle-line #nav-toggle:hover {
  background: #a47a3f;
}

/* Texte droite, aligné à gauche de sa colonne + marge */
.toggle-line .txt-r {
  justify-self: start;
  margin-left: 1rem;  /* même valeur pour l’autre côté */
}

/* Le JS gère déjà le passage ≡ → ▼ via textContent */