/* ═══════════════════════════════════════════════════════════════
   TOP BAR · Barre supérieure fine (à la Atoo Next)
   ═══════════════════════════════════════════════════════════════ */

.topbar {
  background: var(--fond-sombre);
  color: var(--ink-300);
  padding: 0.5rem 0;
  font-size: 13px;
  position: relative;
  z-index: 101;
}

.topbar-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
}

.topbar-tagline {
  color: var(--accent-400);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.topbar-links {
  display: flex;
  gap: 1.5rem;
  list-style: none;
}

.topbar-links a {
  color: var(--ink-300);
  transition: color 0.2s;
  font-size: 12.5px;
}
.topbar-links a:hover { color: var(--accent-400); }

@media (max-width: 700px) {
  .topbar-tagline { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   NAVIGATION PRINCIPALE (avec méga-menu)
   ═══════════════════════════════════════════════════════════════ */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(248, 245, 241, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: all 0.3s;
}
.nav.scrolled {
  border-bottom-color: var(--ink-200);
  background: rgba(248, 245, 241, 0.98);
}

.nav-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 1rem var(--container-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

/* Logo au centre : les deux groupes prennent chacun la moitie de l'espace
   restant et poussent leurs liens vers les bords. Le logo, qui ne grandit
   pas, se retrouve exactement au milieu quelle que soit la largeur des
   deux listes. `order` suffit : le DOM garde le logo en premier, ce qui
   est l'ordre utile au clavier et aux lecteurs d'ecran.

   Ces regles sont SANS media query, a dessein. Encadrer la version large
   par `min-width: 1201px` face a un `max-width: 1200px` laissait un
   interstice d'un pixel : la barre de defilement decale la largeur CSS
   ou aucun des deux etats ne s'appliquait : a 1201 px la barre partait en
   vrac, 293 px de debordement. En faisant du centre le defaut, les deux
   etats se recouvrent au lieu de se juxtaposer. */
.nav-panneau       { display: contents; }
.nav-links--gauche { order: 1; flex: 1; justify-content: flex-start; }
.logo              { order: 2; }
.nav-links--droite { order: 3; flex: 1; justify-content: flex-end; }
.nav-toggle        { order: 4; }

.logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--ink-900);
  letter-spacing: -0.02em;
  flex-shrink: 0;
}

.logo-mark {
  width: 32px;
  height: 32px;
  background: var(--bleu-700);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: white;
  position: relative;
}
.logo-mark::after {
  content: "";
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 6px;
  height: 6px;
  background: var(--accent-500);
  border-radius: 50%;
}

/* « Cadence » et sa signature sur deux lignes. Le mot est plus long que
   « Tech » : en capitales espacees sous le nom, il cale sur sa largeur au
   lieu de l'allonger. */
.logo-texte {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.logo-text-suffix {
  font-size: 0.58rem;
  font-weight: 500;
  color: var(--ink-500);
  font-family: var(--font-body);
  /* Interlettrage cale pour que « TECHNOLOGIES » tienne sous « Cadence »
     (81 px) : une signature plus large que le nom qu'elle accompagne
     defait la composition. A 0.22em, le pluriel debordait de 17 px. */
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 0.3rem;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
}

.nav-link {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-700);
  transition: color 0.2s;
  padding: 0.5rem 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  position: relative;
}

.nav-link:hover, .nav-link.active { color: var(--ink-900); }

.nav-link.is-active {
  color: var(--ink-900);
  font-weight: 600;
}
.nav-link.is-active::before {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent-500);
  border-radius: 2px;
}

.nav-link.has-menu::after {
  content: "▾";
  font-size: 0.75em;
  transition: transform 0.2s;
  color: var(--ink-500);
}
.nav-link.has-menu:hover::after { transform: rotate(-180deg); }

.nav-cta {
  padding: 0.6rem 1.25rem;
  font-size: 14px;
}

/* Méga-menu : version compacte avec cartes visuelles */
.megamenu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  width: min(960px, calc(100vw - 32px));
  background: #FFFFFF;
  border: 1px solid var(--ink-200);
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(15, 26, 61, 0.15), 0 4px 12px rgba(15, 26, 61, 0.08);
  padding: 1.25rem;
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s var(--ease-smooth);
  z-index: 99;
  margin-top: 12px;
}

.nav-item { position: relative; }
.nav-item:hover .megamenu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Petite pointe décorative en haut du menu */
.megamenu::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 14px;
  height: 14px;
  background: white;
  border-top: 1px solid var(--ink-200);
  border-left: 1px solid var(--ink-200);
}

/* Titre de section du menu (petit sous-titre) */
.megamenu-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent-600);
  margin-bottom: 0.75rem;
  padding-left: 0.25rem;
}

/* Grille des cartes personas */
.megamenu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
}

.megamenu-grid.two-cols { grid-template-columns: repeat(2, 1fr); }
.megamenu-grid.four-cols { grid-template-columns: repeat(4, 1fr); }
.megamenu-grid.five-cols { grid-template-columns: repeat(5, 1fr); }
.megamenu-grid.three-cols { grid-template-columns: repeat(3, 1fr); }

/* Version compacte du méga-menu pour peu de tuiles (À propos) */
.megamenu.megamenu-small {
  width: 780px;
  left: auto;
  right: 0;
  transform: translateX(0) translateY(-8px);
}
.nav-item:hover .megamenu.megamenu-small {
  transform: translateX(0) translateY(0);
}
.megamenu.megamenu-small::before {
  left: auto;
  right: 60px;
  transform: rotate(45deg);
}

/* Carte persona : version compacte */
.persona-card {
  display: flex;
  flex-direction: column;
  padding: 0.75rem 0.85rem 0.9rem;
  border-radius: 10px;
  background: var(--cream);
  border: 1px solid transparent;
  text-decoration: none;
  color: inherit;
  transition: all 0.2s var(--ease-smooth);
  position: relative;
  overflow: hidden;
}

.persona-card:hover {
  background: white;
  border-color: var(--bleu-500);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(30, 64, 175, 0.1);
}

.persona-illustration {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: linear-gradient(135deg, #EEF2FF 0%, #F5F3EE 100%);
  margin-bottom: 0.55rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}

.persona-illustration svg {
  width: 75%;
  height: 75%;
}

.persona-title {
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink-900);
  margin-bottom: 0.2rem;
  line-height: 1.2;
  font-variation-settings: "opsz" 24;
}

.persona-desc {
  font-size: 11.5px;
  color: var(--ink-500);
  line-height: 1.4;
}

/* Carte spéciale "featured" (le produit phare) */
.persona-card.featured {
  background: linear-gradient(135deg, var(--bleu-800), var(--bleu-900));
  color: white;
  grid-column: span 1;
}
.persona-card.featured .persona-illustration {
  background: rgba(245, 158, 11, 0.15);
}
.persona-card.featured .persona-title { color: white; }
.persona-card.featured .persona-desc { color: var(--ink-300); }
.persona-card.featured:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(30, 64, 175, 0.4);
  border-color: var(--accent-500);
}

.persona-badge {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  background: var(--accent-500);
  color: var(--sur-accent);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 2px 6px;
  border-radius: 3px;
  text-transform: uppercase;
  z-index: 2;
}

/* Ligne de séparation avec label dans le menu */
.megamenu-divider {
  height: 1px;
  background: var(--ink-200);
  margin: 0.9rem 0;
  position: relative;
}
.megamenu-divider-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 0 0.8rem;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--ink-400);
  text-transform: uppercase;
}

/* Footer du méga-menu (lien global vers page de listing) */
.megamenu-footer {
  margin-top: 0.9rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--ink-200);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.megamenu-footer-hint {
  font-size: 12px;
  color: var(--ink-500);
}

.megamenu-footer-link {
  color: var(--bleu-700);
  font-size: 12.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: gap 0.2s;
}
.megamenu-footer-link:hover { gap: 0.6rem; }

/* Menu mobile toggle */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--fond-sombre);
  margin: 5px 0;
  transition: 0.3s;
}

@media (max-width: 1200px) {
  .nav-links { display: none; }
  .nav-toggle { display: block; }
  .megamenu { display: none; }
  /* retour a l'ordre naturel : logo a gauche, bouton a droite */
  .nav-panneau { display: none; }
  .logo        { order: 0; flex: 0 0 auto; }
  .nav-toggle  { order: 1; }
}