/* =========================================================================
   CadrezJuste — barre de navigation commune
   Partagée par les cinq outils : composer, recadrer, compresser,
   convertir, cadrezjuste-video.

   À charger APRÈS la déclaration des variables de thème (--panel2, --line,
   --muted, --accent, --fg) puisque ces règles s'appuient dessus.

   Une modification ici s'applique aux cinq outils : ne pas recopier ces
   règles dans les fichiers HTML.
   ========================================================================= */

.suite-nav{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;padding:3px 20px;
  background:var(--panel2);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:22;
  font-family:"Syne",sans-serif;
}

.suite-nav .sn-back{
  display:inline-flex;align-items:center;gap:6px;
  font-weight:700;font-size:11.5px;color:var(--muted);
  text-decoration:none;letter-spacing:.2px;transition:.15s;
}
.suite-nav .sn-back:hover{color:var(--accent)}

.sn-links{display:flex;gap:4px}

.sn-ico{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:27px;height:27px;border-radius:99px;
  color:var(--muted);text-decoration:none;transition:.15s;flex:0 0 auto;
}
.sn-ico:hover,.sn-ico:focus-visible{color:var(--accent);background:var(--chip)}
.sn-ico.on{background:var(--accent);color:#143024}
.sn-ico.on:hover{color:#143024}

/* Infobulle au survol (libellé porté par data-tip) */
.sn-ico::after{
  content:attr(data-tip);
  position:absolute;top:calc(100% + 8px);right:0;
  background:var(--panel);color:var(--fg);
  border:1px solid var(--line);border-radius:7px;
  padding:4px 9px;
  font-size:10.5px;font-weight:600;letter-spacing:.2px;white-space:nowrap;
  opacity:0;pointer-events:none;transform:translateY(-3px);
  transition:opacity .15s,transform .15s;
  box-shadow:0 5px 16px rgba(0,0,0,.2);
  z-index:40;
}
.sn-ico:hover::after,.sn-ico:focus-visible::after{opacity:1;transform:translateY(0)}

/* Accessibilité : anneau de focus clavier visible (le fond est déjà
   géré par la règle :hover,:focus-visible ci-dessus) */
.sn-ico:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Écrans étroits : barre resserrée */
@media (max-width:560px){
  .suite-nav{padding:3px 10px;gap:8px}
  .sn-back{flex:0 0 auto}
  .sn-links{gap:3px;flex:0 0 auto}
}