/* Bandeau de navigation de symetis.ai, porte sur la page des demonstrateurs.

   Les regles viennent du bundle Astro du site
   (site/site-deploye/_astro/accompagnement.*.css). Deux adaptations, et deux
   seulement :

   1. chaque selecteur est prefixe par `.bandeau-site`. Les noms du site
      (`.nav-link`, `.btn-solid`, `.faq-item`, `.live-dot`) sont generiques :
      ce prefixe garantit qu'ils ne mordent jamais sur le contenu de la page.
   2. les jetons de couleur du site sont traduits vers ceux de
      `theme-symetis.css` (bloc ci-dessous) au lieu d'etre recopies.

   Pourquoi porter plutot que redessiner : le site force `data-theme="dark"` au
   chargement, et sa palette sombre porte deja les valeurs de theme-symetis.css
   (#060F1F, #EEF2F7, #4AC9E3, rgba(6,15,31,.82), #6EE7B7, --maxw 1320px). Les
   deux fichiers decrivent le meme design system sous deux jeux de noms : la
   traduction tient en neuf lignes, et le bandeau reste diffable avec le site.

   theme-symetis.css n'est pas touche : il est recopie dans les huit dossiers de
   demonstrateurs, une modification y toucherait les sept autres.

   LE SITE FAIT FOI : s'il bouge, rejouer `demo/ajouter_bandeau.py`. */

/* --- Traduction des jetons, limitee au bandeau. Aucune variable de la page
       n'est redefinie : la portee s'arrete a la sous-arborescence de l'entete. --- */
.bandeau-site {
  --ink: var(--fg);
  --ink-dim: var(--fg-dim);
  --ink-dim2: rgba(238,242,247,.45);   /* plus efface que --fg-dim2 (.58) du theme */
  --border: var(--border-nav);          /* .08 sur le site, .1 dans le theme demo */
  --surface-border: var(--border);
  --bg-alt: #0a1730;                    /* fond des panneaux deroulants, absent du theme */
  --header-bg: var(--bg-nav);
  --font-mono: var(--mono);
  --font-body: var(--sans);
}
/* --bg, --cyan, --green, --surface et --maxw portent deja la meme valeur dans
   theme-symetis.css : ils sont herites tels quels, sans alias. */

/* --- Marque et entrees de premier niveau --- */
.bandeau-site .brand-menu { position:static; flex:none; }
.bandeau-site .nav-link { color:var(--ink-dim); font-size:14px; font-weight:500;
  letter-spacing:.01em; transition:color .16s; }
.bandeau-site .nav-link:hover { color:var(--cyan); text-decoration:none; }
.bandeau-site .nav-link[aria-current=page] { color:var(--ink); font-weight:600; }
.bandeau-site .nav-link-demos { display:inline-flex; align-items:center; gap:8px;
  white-space:nowrap; }

/* --- Pastille « en direct » de l'entree Demos --- */
.bandeau-site .live-dot { position:relative; flex:none; width:8px; height:8px;
  border-radius:50%; background:var(--green); }
.bandeau-site .live-dot:after { content:""; position:absolute; inset:-3px;
  border-radius:50%; border:1px solid var(--green);
  animation:liveDotPulse 1.8s ease-out infinite; }
@keyframes liveDotPulse { 0% { transform:scale(.6); opacity:.85 } to { transform:scale(2); opacity:0 } }
@media (prefers-reduced-motion:reduce) { .bandeau-site .live-dot:after { animation:none; opacity:0 } }

/* --- Panneaux deroulants (survol ou focus clavier sur une entree) --- */
.bandeau-site .nav-item-flyout { position:static; }
.bandeau-site .nav-item-flyout:hover .brand-menu-panel,
.bandeau-site .nav-item-flyout:focus-within .brand-menu-panel {
  opacity:1; visibility:visible; transform:translateY(0); }
.bandeau-site .brand-menu-panel { position:absolute; left:0; right:0; top:100%; z-index:70;
  background:var(--bg-alt); border-bottom:1px solid var(--border);
  box-shadow:0 24px 40px -24px rgba(13,38,71,.22);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s; }
.bandeau-site .brand-menu-panel-inner { max-width:var(--maxw); margin:0 auto;
  padding:36px 28px; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,280px)); gap:28px 48px; }
.bandeau-site .brand-menu-col { display:flex; flex-direction:column; gap:16px; min-width:0; }
.bandeau-site .brand-menu-link { display:flex; flex-direction:column; gap:6px;
  padding:4px 0; transition:opacity .14s; }
.bandeau-site .brand-menu-link:hover { opacity:.75; text-decoration:none; }
.bandeau-site .brand-menu-link-eyebrow { font-family:var(--font-mono); font-size:11px;
  letter-spacing:.1em; color:var(--cyan); }
.bandeau-site .brand-menu-link-label { font-size:15.5px; font-weight:700;
  letter-spacing:-.005em; color:var(--ink); }
.bandeau-site .brand-menu-sublist { list-style:none; margin:0; padding:12px 0 0;
  display:flex; flex-direction:column; gap:10px; border-top:1px solid var(--border); }
.bandeau-site .brand-menu-sublist-link { display:flex; flex-direction:column; gap:2px;
  color:var(--ink-dim); font-size:13.5px; font-weight:500; transition:color .14s; }
.bandeau-site .brand-menu-sublist-link:hover { color:var(--cyan); text-decoration:none; }
.bandeau-site .brand-menu-sublist-sub { font-family:var(--font-mono); font-size:10px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-dim2); }

/* --- Bouton « Nous joindre » --- */
.bandeau-site .btn-solid { background:var(--cyan); color:var(--bg); font-weight:700;
  border-radius:10px; display:inline-block; border:1px solid var(--cyan);
  transition:transform .22s cubic-bezier(.22,1,.36,1), box-shadow .2s; }
.bandeau-site .btn-solid:hover { text-decoration:none; color:var(--bg);
  box-shadow:0 8px 30px -6px rgba(74,201,227,.55); }

/* --- Bascule FR / EN --- */
.bandeau-site .lang-switch { position:relative; display:flex; align-items:center; gap:2px;
  border:1px solid var(--surface-border); border-radius:8px; padding:3px; flex:none; }
.bandeau-site .lang-thumb { position:absolute; top:3px; bottom:3px; left:3px; width:34px;
  z-index:0; background:var(--ink); border-radius:5px;
  transition:transform .26s cubic-bezier(.22,1,.36,1); }
.bandeau-site .lang-switch[data-active=en] .lang-thumb { transform:translate(36px); }
.bandeau-site .lang-option { position:relative; z-index:1; width:34px; display:inline-flex;
  align-items:center; justify-content:center; font-family:var(--font-mono);
  font-size:11.5px; font-weight:600; padding:4px 0; border-radius:5px;
  text-decoration:none; color:var(--ink-dim); transition:color .2s; }
.bandeau-site .lang-switch[data-active=fr] .lang-option[data-lang=fr],
.bandeau-site .lang-switch[data-active=en] .lang-option[data-lang=en] { color:var(--bg); }

/* --- Bouton bascule du menu mobile --- */
.bandeau-site .nav-toggle { display:none; align-items:center; justify-content:center;
  flex-direction:column; gap:5px; width:40px; height:40px; border-radius:8px; flex:none;
  border:1px solid var(--surface-border); background:var(--surface); cursor:pointer; }
.bandeau-site .nav-toggle-bar { display:block; width:18px; height:2px; background:var(--ink);
  transition:transform .2s ease, opacity .2s ease; }
.bandeau-site .nav-toggle[aria-expanded=true] .nav-toggle-bar:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.bandeau-site .nav-toggle[aria-expanded=true] .nav-toggle-bar:nth-child(2) { opacity:0; }
.bandeau-site .nav-toggle[aria-expanded=true] .nav-toggle-bar:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* --- Accordeons du menu mobile (elements <details> natifs) --- */
.bandeau-site .faq-item { border-bottom:1px solid rgba(255,255,255,.08); }
.bandeau-site .faq-item:last-child { border-bottom:none; }
.bandeau-site .faq-item > summary { list-style:none; cursor:pointer; display:flex;
  align-items:center; justify-content:space-between; gap:24px; padding:34px 0; }
.bandeau-site .faq-item > summary::-webkit-details-marker { display:none; }
.bandeau-site .faq-icon { flex:none; width:26px; height:26px; position:relative; color:var(--cyan); }
.bandeau-site .faq-icon:before, .bandeau-site .faq-icon:after { content:""; position:absolute;
  top:50%; left:50%; background:currentColor; transform:translate(-50%,-50%);
  transition:transform .2s ease; }
.bandeau-site .faq-icon:before { width:17px; height:2px; }
.bandeau-site .faq-icon:after { width:2px; height:17px; }
.bandeau-site .faq-item[open] .faq-icon:after { transform:translate(-50%,-50%) rotate(90deg) scale(0); }
.bandeau-site .faq-content { overflow:hidden; }
.bandeau-site .nav-mobile-menu { display:none; }

/* --- Sous 1151px : les entrees passent derriere le bouton bascule. Les
       `!important` sont ceux du site : ils battent les styles inline que
       l'entete porte sur .nav-links et .nav-actions. --- */
@media (max-width:1150px) {
  .bandeau-site .nav-toggle { display:inline-flex; }
  .bandeau-site .site-nav { flex-wrap:wrap; }
  .bandeau-site .site-nav[data-nav-open] { height:auto!important; }
  .bandeau-site .site-nav .nav-links,
  .bandeau-site .site-nav .nav-actions { flex-basis:100%; }
  .bandeau-site .site-nav:not([data-nav-open]) .nav-links,
  .bandeau-site .site-nav:not([data-nav-open]) .nav-actions { display:none!important; }
  .bandeau-site .site-nav .nav-links { flex-direction:column; align-items:flex-start!important;
    gap:4px!important; padding:20px 0 4px; }
  .bandeau-site .site-nav .nav-links > .nav-link { padding:10px 0; }
  .bandeau-site .site-nav .nav-actions { flex-wrap:wrap; gap:14px!important; padding:20px 0;
    border-top:1px solid var(--border); margin-top:4px; }
  .bandeau-site .brand-menu-panel { display:none; }
  .bandeau-site .nav-item-flyout,
  .bandeau-site .site-nav .nav-links > a.nav-link { display:none; }
  .bandeau-site .nav-mobile-menu { display:block; width:100%; margin-top:8px; }
  .bandeau-site .nav-mobile-menu .faq-item > summary { padding:18px 0; }
  .bandeau-site .nav-mobile-menu .nav-mobile-flat-link { display:flex; align-items:center;
    padding:18px 0; font-size:15px; font-weight:700; color:var(--ink); text-decoration:none; }
  .bandeau-site .nav-mobile-menu .nav-mobile-flat-link:hover { color:var(--cyan);
    text-decoration:none; }
}
@media (min-width:1151px) { .bandeau-site .nav-toggle { display:none; } }

/* --- Parcours clavier : theme-symetis.css ne pose d'anneau de focus que sur
       .btn, les liens du bandeau n'en heritent pas. --- */
.bandeau-site a:focus-visible,
.bandeau-site summary:focus-visible,
.bandeau-site .nav-toggle:focus-visible { outline:2px solid var(--cyan); outline-offset:3px;
  border-radius:4px; }