/* La barre de navigation du site — UNE seule définition, pour les 111 pages.
 *
 * Avant, « .barre » était décrite deux fois : une version dans pages.css
 * (les pages de prix et les guides) et une autre dans legal.css (les pages
 * écrites à la main). Deux vérités pour un même objet finissent toujours
 * par diverger. Les deux ont été retirées ; tout est ici.
 *
 * ⚠️ Ce fichier se charge APRÈS pages.css et legal.css. À égalité de
 *    spécificité, c'est le dernier qui gagne : c'est ce qui permet à cette
 *    barre-ci de s'imposer sans avoir à alourdir ses sélecteurs.
 *
 * Deux états :
 *   .barre               posée sur fond crème, texte sombre (toutes les pages)
 *   .barre.sur-photo     transparente, texte blanc (l'accueil, sur la photo)
 *                        et elle redevient opaque dès qu'on a dépassé la
 *                        photo — c'est assets/barre.js qui pose « .posee ».
 */

.barre {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: clamp(14px, 2.4vw, 34px);
  padding: 12px clamp(16px, 5vw, 56px);
  background: rgba(250, 248, 245, .92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(13, 15, 20, .13);
  font-family: inherit;
  transition: background .3s ease, border-color .3s ease, color .3s ease;
}

.barre .marque {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: .78rem; font-weight: 600; letter-spacing: .17em;
  text-transform: uppercase; text-decoration: none; color: inherit;
  white-space: nowrap;
}

/* Les liens. « margin-left:auto » sur le groupe de droite pousse tout le
   reste à droite sans avoir à compter les éléments. */
.barre-liens { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); margin-left: auto; }
.barre-liens a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: .82rem; letter-spacing: .01em; text-decoration: none;
  color: rgba(13, 15, 20, .62); white-space: nowrap;
  transition: color .18s ease;
}
.barre-liens a:hover, .barre-liens a:focus-visible { color: #0d0f14; }
/* La page où l'on se trouve : un trait fin, pas une couleur criarde. */
.barre-liens a[aria-current="page"] { color: #0d0f14; box-shadow: inset 0 -1px 0 currentColor; }

.barre .cta {
  display: inline-flex; align-items: center; min-height: 42px;
  padding: 0 18px; border-radius: 2px;
  font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; color: #fff; background: #0d0f14;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
  border: 1px solid #0d0f14; white-space: nowrap;
}
.barre .cta:hover { background: #000; border-color: #000; }

/* ── Sur la photo d'accueil ─────────────────────────────────────────── */
.barre.sur-photo {
  position: fixed; left: 0; right: 0;
  background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom-color: rgba(255, 255, 255, .16);
  color: #fff;
}
.barre.sur-photo .marque { color: #fff; }
.barre.sur-photo .barre-liens a { color: rgba(255, 255, 255, .78); }
.barre.sur-photo .barre-liens a:hover { color: #fff; }
.barre.sur-photo .cta { background: transparent; border-color: rgba(255, 255, 255, .55); color: #fff; }
.barre.sur-photo .cta:hover { background: #fff; border-color: #fff; color: #0d0f14; }
.barre.sur-photo .barre-ouvre { color: #fff; border-color: rgba(255, 255, 255, .45); }

/* …et redevenue opaque une fois la photo dépassée. */
.barre.sur-photo.posee {
  background: rgba(250, 248, 245, .94);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom-color: rgba(13, 15, 20, .13); color: #0d0f14;
}
.barre.sur-photo.posee .marque { color: #0d0f14; }
.barre.sur-photo.posee .barre-liens a { color: rgba(13, 15, 20, .62); }
.barre.sur-photo.posee .barre-liens a:hover { color: #0d0f14; }
.barre.sur-photo.posee .cta { background: #0d0f14; border-color: #0d0f14; color: #fff; }
.barre.sur-photo.posee .barre-ouvre { color: #0d0f14; border-color: rgba(13, 15, 20, .3); }

/* ── Le bouton de menu, et le panneau, sur petit écran ──────────────── */
.barre-ouvre {
  display: none; align-items: center; justify-content: center;
  margin-left: auto; min-height: 42px; padding: 0 14px;
  background: transparent; border: 1px solid rgba(13, 15, 20, .3); border-radius: 2px;
  font: inherit; font-size: .68rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: #0d0f14; cursor: pointer;
}

.barre-panneau {
  position: fixed; inset: 0; z-index: 60;
  background: #0d0f14; color: #fff;
  display: none; flex-direction: column; justify-content: center;
  padding: 0 clamp(22px, 8vw, 60px);
}
.barre-panneau.ouvert { display: flex; }
.barre-panneau a {
  display: block; padding: 18px 0; text-decoration: none; color: #fff;
  font-size: clamp(1.5rem, 7vw, 2.1rem); line-height: 1.2;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.barre-panneau a:last-of-type { border-bottom: 0; }
.barre-panneau .ferme {
  position: absolute; top: 14px; right: clamp(16px, 5vw, 56px);
  min-height: 42px; padding: 0 14px;
  background: transparent; border: 1px solid rgba(255, 255, 255, .45); border-radius: 2px;
  font: inherit; font-size: .68rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: #fff; cursor: pointer;
}
/* Quand le panneau est ouvert, la page dessous ne doit pas défiler. */
body.menu-ouvert { overflow: hidden; }

/* ⚠️ Le seuil. Au-dessus, les liens tiennent en ligne ; en dessous, ils
   se tassent contre le bouton et deviennent illisibles. Mesuré : à 860 px
   les quatre liens plus le bouton remplissent la barre sans se toucher. */
@media (max-width: 860px) {
  .barre-liens { display: none; }
  .barre-ouvre { display: inline-flex; }
  .barre .cta { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .barre, .barre .cta, .barre-liens a { transition: none; }
}