/* Barre de navigation et pied de page de la vitrine — partagés par TOUTES les pages
   (nouveau gabarit Vitrine.astro et ancien Public.astro). Classes préfixées « vc- » :
   aucune collision possible avec app.css ni avec vitrine.css. 18/09/2026. */

.vc-nav {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
  width: min(calc(100% - 32px), 1080px); z-index: 60;
  display: flex; align-items: center; gap: 28px;
  padding: 10px 10px 10px 16px;
  background: rgba(15, 27, 54, .78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .08);
  color: #fff; font: 400 14px/1.4 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  transition: background .3s, border-color .3s, color .3s;
}
[dir="rtl"] .vc-nav { font-family: 'Tajawal', 'Archivo', Arial, sans-serif; }
.vc-nav.clair { background: rgba(255, 255, 255, .9); color: #0E1726; border-color: #D9DEE6; }
.vc-marque { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; font-size: 15px; color: inherit; }
.vc-marque img { width: 26px; height: 26px; display: block; }
.vc-liens { display: flex; gap: 22px; list-style: none; margin: 0 0 0 auto; padding: 0; }
[dir="rtl"] .vc-liens { margin: 0 auto 0 0; }
.vc-liens a, .vc-connexion { color: inherit; text-decoration: none; opacity: .85; }
.vc-liens a:hover, .vc-connexion:hover { opacity: 1; }
.vc-langues { display: flex; border: 1px solid rgba(255, 255, 255, .28); }
.vc-nav.clair .vc-langues { border-color: #D9DEE6; }
.vc-langues a { padding: 6px 10px; font: 600 12px/1 'IBM Plex Mono', ui-monospace, monospace; color: inherit; text-decoration: none; opacity: .85; }
.vc-langues a[lang="ar"] { font-family: 'Tajawal', 'Archivo', sans-serif; font-size: 14px; line-height: 12px; }
.vc-langues a:hover { opacity: 1; background: rgba(255, 255, 255, .08); }
.vc-nav.clair .vc-langues a:hover { background: #F6F7F9; }
.vc-langues a.actif { background: #3B82F6; color: #fff; opacity: 1; }
.vc-demo { display: inline-flex; align-items: center; padding: 12px 18px; background: #3B82F6; color: #fff; text-decoration: none; font-weight: 600; font-size: 14px; }
.vc-demo:hover { background: #2563EB; }
.vc-burger { display: none; width: 40px; height: 36px; background: transparent; color: inherit; border: 1px solid rgba(255, 255, 255, .28); cursor: pointer; flex-direction: column; justify-content: center; gap: 5px; padding: 0 10px; }
.vc-nav.clair .vc-burger { border-color: #D9DEE6; }
.vc-burger span { display: block; height: 2px; background: currentColor; }
.vc-panneau { position: fixed; z-index: 59; top: 76px; left: 16px; right: 16px; background: #0F1B36; color: #fff; border: 1px solid #2A3B63; padding: 16px; display: flex; flex-direction: column; gap: 4px; font-family: 'Archivo', Arial, sans-serif; }
[dir="rtl"] .vc-panneau { font-family: 'Tajawal', 'Archivo', Arial, sans-serif; }
.vc-panneau[hidden] { display: none; }
.vc-panneau a { color: #fff; padding: 10px 6px; text-decoration: none; border-bottom: 1px solid #2A3B63; }
.vc-panneau a.vc-demo { margin-top: 10px; justify-content: center; border: 0; }

.vc-pied { border-top: 1px solid #D9DEE6; padding: 56px 0 40px; font: 400 14px/1.6 'Archivo', Arial, sans-serif; color: #3E4A5E; background: #fff; }
[dir="rtl"] .vc-pied { font-family: 'Tajawal', 'Archivo', Arial, sans-serif; }
.vc-pied-wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 56px); }
.vc-pied-grille { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; }
.vc-pied .vc-marque { font-size: 17px; color: #0E1726; }
.vc-pied-grille p { margin: 14px 0 0; max-width: 42ch; }
.vc-pied ul { list-style: none; display: grid; gap: 8px; margin: 0; padding: 0; }
.vc-pied a { color: #3E4A5E; text-decoration: none; }
.vc-pied a:hover { color: #3B82F6; }
.vc-pied-bas { margin-top: 40px; padding-top: 20px; border-top: 1px solid #D9DEE6; display: flex; flex-wrap: wrap; gap: 12px 24px; font-size: 13px; }
.vc-pied-bas span { margin-inline-end: auto; }

@media (max-width: 1180px) { .vc-connexion { display: none; } .vc-nav { gap: 18px; } }
@media (max-width: 900px) {
  .vc-liens, .vc-connexion, .vc-nav .vc-demo { display: none; }
  .vc-langues { margin-inline-start: auto; }
  .vc-burger { display: flex; }
  .vc-pied-grille { grid-template-columns: 1fr; }
}